/* ==========================================================================
   Manvarth Charitable Trust — page-specific rules for
   work.html, events.html and gallery.html
   Loaded after assets/styles.css?v=9. Only rules that are genuinely
   specific to these three pages live here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared: a heading followed by a paragraph inside a plain block
   (the shared sheet only spaces h2 + p inside .spread__body, .cta__body
   and .section-head)
   -------------------------------------------------------------------------- */

.band-note { max-width: 62ch; }
.band-note h2 + p { margin-top: 22px; }


/* ==========================================================================
   work.html
   ========================================================================== */

/* Each focus area is separated from the next by a hairline, never a panel. */
.work-area + .work-area {
  margin-top: 84px;
  padding-top: 84px;
  border-top: 1px solid var(--line);
}

/* A gentle, uniform crop so the five areas read as one series. */
.work-area .spread__media img { aspect-ratio: 4 / 3; }

.work-area h2 { max-width: 18ch; }
.work-area h2 + .lead { margin-top: 22px; }
.work-area .prose { margin-top: 26px; }

/* Sticky-header offset for the in-page anchors linked from the home ledger. */
#infrastructure,
#agriculture,
#education,
#welfare,
#legal { scroll-margin-top: 100px; }


/* ==========================================================================
   events.html
   ========================================================================== */

#gallery { scroll-margin-top: 100px; }

/* The conference photograph is a wide frame; a square crop keeps every face. */
.conference .spread__media img { aspect-ratio: 1 / 1; }

.conference h2 + .conference__sub { margin-top: 16px; }
.conference__sub + p { margin-top: 24px; }
.conference__details { margin-top: 36px; }
.conference__details .deflist__body h4 { font-weight: 500; }

/* "In attendance": four hairline-ruled entries inside the photographic band. */
.attendees {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
.attendees > div {
  padding: 24px 0;
  border-top: 1px solid var(--rule-dark);
}
.attendees h3 { font-size: 1.7rem; }
.attendees h3 + p { margin-top: 8px; }

/* Milestones: a wider label column so the timeline labels sit on one line. */
.milestones { max-width: 820px; }


/* ==========================================================================
   gallery.html
   ========================================================================== */

/* The focus tiles keep their small uppercase label above the caption text. */
.photo__kicker {
  display: block;
  margin-bottom: 5px;
  font-family: var(--body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--saffron-light);
}

/* Link from the featured album to the book covers on founder.html. */
.gallery-link { margin-top: 34px; }

/* Provenance note under the second grid: a saffron rule, not a panel. */
.credit-note {
  position: relative;
  max-width: 66ch;
  margin-top: 34px;
  padding-top: 18px;
}
.credit-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 4px;
  background: var(--saffron);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 899px) {
  /* Stacked, every focus area reads photograph-then-text, so two photographs
     never land back to back where the alternation folds into one column. */
  .work-area .spread__media { order: -1; }
}

@media (max-width: 479px) {
  .work-area + .work-area { margin-top: 48px; padding-top: 48px; }
}

@media (min-width: 720px) {
  .attendees {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
  .milestones .deflist__item { grid-template-columns: 152px 1fr; }
}

@media (min-width: 900px) {
  .work-area + .work-area { margin-top: 96px; padding-top: 96px; }
}