/* ==========================================================================
   EPSILON BETA LAMBDA — Macon, Georgia
   Alpha Phi Alpha Fraternity, Inc.

   Tokens are brand/tokens.css from the site kit, unchanged: palette and type
   from the Fraternity Brand Guidelines v3, Sections 2 and 3. Alpha Gold
   #B8860B, Blonde #FAF0BE, PMS 400 #DAD3CC, PMS 168 #7E4300, no red. Display
   is geometric sans (Gotham -> Jost); running text is serif (Celeste ->
   Newsreader). Not the reverse.

   ---------------------------------------------------------------------------
   HOW THIS DIFFERS FROM ~/AlphaCollective, AND WHY

   The brand tokens, the restraint, and the ban on generic-AI tells are shared
   with the campaign site — those are the Fraternity's and the house rules.
   The STRUCTURAL SIGNATURE is deliberately not shared, because the first
   build here read as a recolor of the campaign and a chapter is not a
   candidate. What changed, and what each change is doing:

     Hero      Campaign: cream ground, gold radial, one large cutout portrait.
               Here:     an INK hero. The chapter has no single subject to
                         photograph, and inverting the value makes the two
                         sites unmistakable at a glance.

     Nav       Campaign: one flat bar, six links.
               Here:     a slim ink utility strip over a cream bar carrying
                         GROUPED menus. Forced by the real page map — thirteen
                         pages in four groups, which is the structure the
                         chapter already uses and already knows.

     People    Campaign: circular headshots, small, as attribution under a
                         quote.
               Here:     a uniform grid of rectangular 4:5 studio portraits.
                         The chapter shot its officers on one backdrop in one
                         sitting, so the roster is a wall of portraits and
                         needs no frame, tilt or vignette to cohere.

     Photos    Campaign: white mount with a per-position rotation, settling
                         straight on hover.
               Here:     the tilt is GONE. It was the campaign's most
                         recognizable device and it reads as scrapbook; a
                         chapter's record reads better square. The white mount
                         stays, with a gold hairline at the foot.

     Rules     Campaign: the Seven Jewels star rule above every section head.
               Here:     the star rule appears ONCE per page, at the page
                         head, and on the ink bands. Interior sections get a
                         short gold rule. Same motif, far less of it.

   Structure is still a LEDGER where the content is a record — the officers,
   the facts, the events. Prose pages get a reading measure instead. There is
   no card grid anywhere.
   ========================================================================== */

:root {
  /* Brand */
  --gold:        #b8860b;   /* Alpha Gold — PMS 132 digital equivalent      */
  --gold-deep:   #8a6408;   /* darkened for AA text on light grounds        */
  --bronze:      #7e4300;   /* PMS 168                                      */
  --blonde:      #faf0be;   /* Brand "Blonde" — faint tint only             */
  --stone:       #dad3cc;   /* PMS 400                                      */

  /* Ground */
  --cream:       #faf8f3;
  --cream-2:     #f4f0e6;
  --paper:       #ffffff;

  /* Ink */
  --ink:         #1a1712;
  --ink-2:       #4e463b;
  --ink-3:       #7a7165;

  --rule:        rgba(26, 23, 18, .16);
  --hair:        rgba(26, 23, 18, .09);

  --display: "Jost", "Century Gothic", system-ui, sans-serif;
  --body:    "Newsreader", Palatino, "Palatino Linotype", Garamond, serif;

  --shell: min(1180px, 90vw);
  --ease:  cubic-bezier(.22, .61, .36, 1);

  /* How long a block takes to settle when it is reached. Held in a token so
     reduced motion zeroes it in one place. */
  --reveal: .7s;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The browser's own [hidden] rule loses to any author rule that sets display,
   so a class like .gate { display: grid } quietly cancels it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  /* Newsreader carries a large x-height; 18px is the reading size, and going
     bigger makes it shout. */
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height:auto is load-bearing: the width and height attributes on an image
   element otherwise pin the rendered height and stretch the picture. Every
   image on this site carries both, to reserve its space before it loads. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Headings bold at 600 with tracking -0.03em. The negative tracking is not
   decoration — Jost at 600 without it sets as a wall. h1 is distinguished from
   h2 by size, not by weight, so the page has one heading voice. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -.02em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--blonde); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream);
  padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

.shell { width: var(--shell); margin-inline: auto; }

/* ------------------------------------------------------------- lockmark --
   The chapter medallion — EBΛ, EST. 1949, MACON, GEORGIA, seven stars for the
   Seven Jewels. Lifted from the chapter's own constitution cover art, so it is
   the chapter's own mark rather than one invented for this site. */
.mark { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
/* The medallion carries ring type and seven stars. Below roughly 44px it stops
   reading as a coin and becomes a smudge. */
.mark__glyph { flex: none; width: 46px; height: 46px; }
.footer .mark__glyph { width: 60px; height: 60px; }
.mark__name {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1.2;
}
.mark__sub {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: .76rem; letter-spacing: .02em; text-transform: none;
  color: var(--ink-3); margin-top: .1rem;
}
.footer .mark__sub { color: rgba(218, 211, 204, .7); }
.nav .mark__name { white-space: nowrap; }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }
.nav__links {
  display: flex; align-items: stretch; gap: .1rem; margin-left: auto;
  list-style: none; margin-block: 0; padding: 0;
}
.nav__item { position: relative; display: flex; align-items: center; }

/* The chapter's two accounts, at the end of the row. Glyph only, and set off
   by a hairline so they read as a different KIND of thing from the seven
   navigation items rather than as an eighth and a ninth page.

   The row had almost no slack before these went in. They are affordable
   because they cost a glyph each instead of a word: the visible name is
   removed rather than hidden, and the accessible name on the link carries
   @maconalphas instead — which is more than the visible label ever gave a
   screen reader. Below the hamburger breakpoint the names come back, because
   a vertical menu has all the width in the world. */
.nav__item--soc + .nav__item--soc { margin-right: -.2rem; }
.nav__item--soc:first-of-type {
  margin-left: .5rem; padding-left: .7rem;
  border-left: 1px solid var(--rule);
}
.nav__soc { padding-inline: .45rem; color: var(--ink-3); }
.nav__soc:hover { color: var(--gold-deep); }
.nav__soc .soc__glyph { width: 1.15em; height: 1.15em; }
.nav__soc-name { display: none; }
/* No underline sweep: these are marks, not page links, and the rule under a
   17px glyph reads as a fault rather than as a hover. */
.nav__soc::after { display: none; }

.nav__link {
  position: relative; display: flex; align-items: center; gap: .34rem;
  text-decoration: none; white-space: nowrap;
  font-family: var(--display);
  font-size: .74rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase;
  color: var(--ink-2); padding: .6rem .62rem;
  background: none; border: 0; cursor: pointer;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .22rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-here > .nav__link::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__item.is-here > .nav__link { color: var(--ink); }

/* The caret. Drawn rather than shipped as a glyph so it takes currentColor and
   can rotate when the menu is open. */
.nav__caret {
  width: 7px; height: 7px; flex: none; margin-top: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .22s var(--ease);
}

/* -------------------------------------------------------------- submenu --
   Opens on hover AND on :focus-within, so a keyboard reaches it with no
   JavaScript at all. site.js adds a click toggle on top of that for touch
   screens, where hover does not exist and the first tap would otherwise be
   swallowed. */
.nav__menu {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 15rem; margin: 0; padding: .45rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px -24px rgba(26, 23, 18, .55);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item.is-open > .nav__menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav__item:hover > .nav__link .nav__caret,
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.nav__menu a {
  display: block; padding: .6rem 1.1rem;
  font-family: var(--display); font-size: .8rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] {
  background: rgba(250, 240, 190, .4); color: var(--ink); border-left-color: var(--gold);
}
.nav__menu .nav__ext::after {
  content: "↗"; margin-left: .4em; font-size: .85em; color: var(--gold-deep);
}

.nav__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
  border-radius: 3px; width: 44px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease);
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: rotate(-45deg) translateY(-1.5px); }

/* --------------------------------------------------------------- button -- */
/* background is declared even though every modifier sets its own: without it a
   <button> keeps the browser's gray ButtonFace while an <a> carrying the same
   classes comes out transparent, so the pair look like different components. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  /* 700, not 600. At .75rem with .1em tracking, Jost 600 renders thin enough
     that a label measuring 5.8:1 still reads as washed — perceived contrast is
     a function of stroke weight as much as of color. */
  font-family: var(--display); font-weight: 700;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .92rem 1.5rem; border-radius: 2px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  /* nowrap keeps a two-word label on one line, which is what nearly every
     button here is. It cannot hold for a sentence-length one — "Talk to the
     chapter about giving" is wider than a 320px phone — so below the narrowest
     breakpoint the label is allowed to wrap and the button grows down instead
     of pushing the page sideways. See the media query at the foot of this
     block. */
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
/* The rim is doing real work, not decoration. Alpha Gold on the cream ground
   is only 3.07:1 — the LABEL was never the problem, the button was: the shape
   itself barely separated from the page, so the whole control read as a tint
   rather than as something to press. A --gold-deep edge is 5.06:1 against the
   cream and gives it a definite boundary without touching the fill. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; padding-inline: 1.1rem; }
}

.btn.btn--gold {
  background: var(--gold); color: #16100a;
  border-color: var(--gold-deep);
}
.btn.btn--gold:hover {
  background: var(--gold-deep); color: var(--blonde);
  border-color: var(--bronze);
}
.btn.btn--ink { background: var(--ink); color: var(--cream); }
.btn.btn--ink:hover { background: #2c2721; }
.btn.btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn.btn--ghost:hover { border-color: var(--ink); }
/* On the ink bands the gold fill separates on its own — 8.2:1 against --ink —
   so the rim is dropped there rather than drawing a dark line around a bright
   object. */
.section--ink .btn--gold, .hero .btn--gold { border-color: transparent; }
.section--ink .btn--gold:hover, .hero .btn--gold:hover { border-color: var(--gold); }

.btn.btn--onink { border-color: rgba(218, 211, 204, .4); color: var(--stone); }
.btn.btn--onink:hover { border-color: var(--stone); color: var(--paper); }
.btn--sm { padding: .66rem 1.1rem; font-size: .69rem; }

/* --------------------------------------------------------- typographics -- */
.lede { font-size: 1.14rem; line-height: 1.58; color: var(--ink-2); max-width: 64ch; }

.h-xl { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.h-lg { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.h-md { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.h-sm {
  font-family: var(--display); font-size: 1.06rem;
  font-weight: 600; letter-spacing: -.015em;
}

/* One lifted word per argument, not per heading. Roughly five instances across
   the whole site — if a sixth is wanted, one of the five is probably not
   earning it. */
.gold-word { color: var(--gold-deep); }

/* ------------------------------------------------------- on dark grounds --
   Every text color on this site is chosen against the cream, so each one has
   to be restated where the ground goes to ink. The two below were shipping
   wrong, and both were contrast failures rather than preferences:

     .lede fell through to --ink-2 (#4e463b) on --ink (#1a1712). That is
     1.9:1 — a lede set in a colour four points off the background it sits on,
     which is invisible rather than quiet.

     .gold-word fell through to --gold-deep (#8a6408), which exists precisely
     BECAUSE --gold is too light to pass on cream. On ink it is the wrong end
     of the pair: 3.3:1, under AA for anything but large text, and it reads as
     brown rather than as gold. --gold is 5.5:1 here and is the actual Alpha
     Gold, which is what a lifted word on a dark band should be.

   Written here, immediately after the base rules, so the two deliberate
   blonde exceptions further down — the hero line and the pull quote — still
   win on source order. */
.section--ink .lede,
.hero .lede,
.pagehead .lede,
.join .lede { color: rgba(218, 211, 204, .86); }

.section--ink .gold-word,
.hero .gold-word,
.pagehead .gold-word,
.join .gold-word { color: var(--gold); }

/* Small print and labels on ink, for the same reason. */
.section--ink .form__note,
.section--ink .officer__note { color: rgba(218, 211, 204, .68); }

/* Emphasis in running text is a true Newsreader italic; the italic axis ships
   with the family. Inside a heading it would be a browser-synthesized slant,
   because Jost is loaded upright only — so headings are reset to normal and
   emphasize with .gold-word instead. The mistake degrades to plain text rather
   than to a fake italic. */
em { font-style: italic; }
.h-sm em, h1 em, h2 em, h3 em, h4 em { font-style: normal; }

/* -------------------------------------------------------------- sections -- */
.section { padding: clamp(3.2rem, 6vw, 5rem) 0; }
.section--tight { padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; }
.section--alt { background: var(--cream-2); }
.section--ink { background: var(--ink); color: var(--stone); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ruled { border-top: 1px solid var(--hair); }

/* Photographic ink band. The wash keeps the type at contrast — the crest
   underneath is texture, never something the words compete with. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/crest-blazer.webp") center / cover no-repeat;
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(18, 16, 12, .94) 30%, rgba(18, 16, 12, .70) 100%);
}

.section__head { max-width: 62ch; margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }
.section__head p { margin-top: 1rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.section__head--center .rule { margin-inline: auto; }

/* The interior section device. The star rule is reserved for the page head
   and the ink bands — repeating it above every heading is what made the first
   build read as the campaign site with different words. */
.rule {
  display: block; width: 52px; height: 2px; border: 0;
  background: var(--gold); margin: 0 0 1.15rem;
}
.section--ink .rule, .hero .rule { background: var(--gold); }

/* The Seven Jewels. Page heads and ink bands only. */
.starrule { display: block; width: 132px; height: auto; margin: 0 0 1.3rem; }
.section__head--center .starrule { margin-inline: auto; }

/* ================================================================ HERO === */
/* A centered title card. Two earlier arrangements did not land: copy left with
   the seal opposite (the photograph became wallpaper behind a layout), and
   copy bottom-left with a small seal above it (the seal stopped registering
   at all).

   This one is built around the photograph's own symmetry. It is a line of
   brothers standing shoulder to shoulder across the frame, which is a centered
   composition already — so the lockup is centered into it rather than pushed
   to one side, and the seal is set at the size a program cover would give it.
   The seal floats in the clear upper half, among the men; the name sits in the
   solid lower half. Gold on near-black reads over anything, which is why the
   mark can sit in the bright part of the picture without a plate behind it.

   No star rule. It ran under the chapter name as ornament stapled to a
   photograph; its slot is the fact rail at the foot, which carries the
   chapter's registry details instead.

   The grayscale is baked into the file, not applied as a CSS filter — a filter
   here composites through its own layer, and stacking that with the gradient
   below is the exact combination that paints a phantom rectangle. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--stone);
  border-bottom: 3px solid var(--gold);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(88vh, 840px);
  text-align: center;
}
/* 50%, not 18%, and it is load-bearing. The source is 4:3 and taller than this
   band at every desktop width, so `cover` crops it vertically and this number
   picks the window. At 18% the window sat at the top of the frame, which put
   the front row at about 58% of the band — exactly where the ramp below goes
   from 16% to 58% opaque — and the men in it went dark. At 50% the window
   slides down onto the empty staircase floor, the front row rides at about
   40%, and the ramp lands on stone instead of on faces. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/hero-chapter.webp") 50% 50% / cover no-repeat;
}
/* Clear through the upper third so the men read, then a hard ramp into solid
   ink for the type. Centered copy has no dark corner to hide in, so the floor
   has to be genuinely opaque rather than merely darker. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(18, 16, 12, .40) 0%, rgba(18, 16, 12, .10) 18%,
      rgba(18, 16, 12, .16) 36%, rgba(18, 16, 12, .58) 52%,
      rgba(18, 16, 12, .95) 63%, rgba(18, 16, 12, .98) 76%,
      rgba(18, 16, 12, .99) 100%);
}

.hero__inner {
  padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  display: grid; justify-items: center;
}

/* At program-cover size. The mark is the chapter's own — EBΛ, EST. 1949 — and
   it is the one element here that is unambiguously theirs, so it is the
   centerpiece rather than a garnish. */
.hero__mark {
  width: clamp(150px, 18.5vw, 250px);
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .72));
}

/* There is no separate Fraternity line. It was two small tracked capitals
   stacked one above the other doing the same job, and the eye read a stutter
   before it reached the name. Moving one above the seal fixed the stutter and
   created a worse problem: that position lands at roughly 44% of the band,
   where the wash is still light and the men's shirt fronts are the brightest
   thing in the frame, so gold capitals sat on the one part of the picture that
   could not hold them.

   Both lines are now one, inside the heading, down in the solid floor. The
   Fraternity leads and the chapter follows, which is the order the medallion's
   own ring reads in.

   It is BLONDE rather than gold, and the wash goes effectively opaque from
   just below the seal rather than ramping gently to the foot. Gold capitals
   there were washing out: the line lands right across the men's white shirt
   cuffs and linked hands, which is the brightest band in the whole frame, and
   --gold at 5.5:1 against ink has nothing left once the picture is showing
   through underneath it. --blonde is 15.5:1 and holds.

   IT STILL DISAPPEARED, and the colour was not why. At .8rem with .24em of
   tracking it was a thin grey thread sitting directly beneath a 5rem headline;
   against that much white the eye skipped it entirely. Contrast was never the
   problem — proportion was. So the fix is size and weight rather than another
   colour: a third larger, 700 instead of 600, and the tracking pulled back to
   .17em, because very wide letterspacing at very small sizes is what thinned it
   out in the first place.

   The shadow does the rest. This line lands at roughly half the band's height,
   where the wash is only about 58% opaque and the picture underneath is suit
   shoulders and shirt fronts — a busy, mid-tone edge for small caps to sit on.
   A soft dark halo separates the letters from it without darkening the men.
   It is a text-shadow, not a filter: filters composite through their own layer,
   which is the thing that paints a phantom rectangle over the gradient. */

.hero__name {
  margin: 0; color: var(--paper);
  font-size: clamp(2.5rem, 6.4vw, 5rem); font-weight: 600;
}
.hero__name .pre {
  display: block; font-size: clamp(.78rem, 1.15vw, .95rem); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--blonde);
  margin-bottom: 1.25em; line-height: 1.7; text-wrap: balance;
  text-shadow: 0 1px 12px rgba(18, 16, 12, .9), 0 1px 3px rgba(18, 16, 12, .75);
}

/* 42ch broke this sentence in the worst available place. The line is sixty-two
   characters — "The Macon Alphas remain Onward and Upward towards distinction."
   — and at 42ch it wrapped after "Upward", leaving the gold lockup stranded at
   the end of a full line and two words hanging alone underneath it. Given room
   for the whole sentence it sets as one line at desktop, which is how the old
   site's lockup read and what the phrase wants.

   `balance` is the insurance for the widths where it still cannot fit: below
   about 620px it wraps, and balanced it splits into two even lines instead of
   a long one and an orphan. */
.hero__line {
  margin: clamp(1rem, 2vw, 1.4rem) auto 0; max-width: min(64ch, 100%);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.5;
  color: rgba(218, 211, 204, .92); font-style: italic;
  text-wrap: balance;
}
/* Color only — the italic carries straight through. Flipping the lifted words
   back to roman inside an italic line breaks the sentence in half, which is
   fine in a display pull quote and wrong in a running line. */
.hero__line .gold-word { color: var(--blonde); }

.hero__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.1rem);
}

/* ------------------------------------------------------------ fact rail --
   The band's foot, and what replaced the star rule: same slot, same width, but
   carrying something a visitor might need rather than an ornament. It also
   gives the hero a hard bottom edge instead of fading out.

   TWO items, not five. It started as Chartered / Seat / Area / District /
   Region, which is the whole registry line — but area, district and region are
   what a transferring brother looks up once he is already interested, and they
   are on the Chapter History and Reactivation pages where he will be. On the
   front page they were four small items crowding the two that actually say
   something about this chapter to a stranger. Dropping them buys the remaining
   two roughly double the size. */
.hero__rail { border-top: 1px solid rgba(250, 240, 190, .22); }
.hero__rail-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  /* Bottom, not centre. All three items carry a label now, so on a wide screen
     this changes nothing — but a label that wraps to two lines on a narrow one
     would push its value down and out of line with its neighbours. Aligned at
     the foot, the three VALUES stay on one baseline whatever the labels do. */
  align-items: flex-end;
  gap: .8rem clamp(2.5rem, 8vw, 6rem);
  padding: clamp(1rem, 2vw, 1.4rem) 0;
}
.hero__rail span {
  font-family: var(--display); font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 600; color: var(--paper);
  letter-spacing: -.02em; line-height: 1.25;
}
.hero__rail b {
  display: block; font-weight: 700; font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .3rem;
}

@media (max-width: 560px) {
  .hero { min-height: min(90vh, 720px); }
  .hero__rail-inner { gap: .9rem 2.4rem; }
  .hero__rail span { font-size: 1.02rem; }
}

/* ============================================================ PAGE HEAD == */
/* Interior pages open on ink too, but shallow — a band rather than a hero, so
   a visitor always knows which of thirteen pages he is on without the page
   spending a screen on it. */
.pagehead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--stone);
  border-bottom: 3px solid var(--gold);
  padding: clamp(2.2rem, 4.4vw, 3.4rem) 0 clamp(2.2rem, 4.4vw, 3.4rem);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/crest-blazer.webp") 70% 40% / cover no-repeat;
}
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(18, 16, 12, .96) 38%, rgba(18, 16, 12, .80) 100%);
}
.pagehead h1 { color: var(--paper); margin-bottom: .9rem; }
.pagehead .lede { color: rgba(218, 211, 204, .86); }
/* The group the page sits in — About, Programs, Membership. It is the only
   eyebrow-shaped thing on the site and it is doing navigation, not decoration:
   with thirteen pages behind four menus, a visitor arriving from a search
   result needs to know which drawer he is in. */
.pagehead__group {
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 .9rem;
}
.pagehead__group a { color: inherit; text-decoration: none; }
.pagehead__group a:hover { color: var(--blonde); }

/* ---------------------------------------------------------------- ledger --
   A label column, a content column, a hairline between entries. Kept from the
   campaign build because it is the right shape for a record — the officers,
   the facts, the events, the awards — and it is the reason there is no card
   grid on this site. Prose does not use it; see .prose. */
.ledger { border-top: 1px solid var(--rule); }
.ledger > * {
  display: grid; grid-template-columns: 10.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.ledger__label {
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  line-height: 1.35; padding-top: .3rem;
}
.ledger h3 { margin-bottom: .5rem; max-width: 36ch; }
.ledger p { color: var(--ink-2); font-size: 1.1rem; max-width: 68ch; }
.ledger ul {
  color: var(--ink-2); font-size: 1.04rem; margin: 1rem 0 0;
  padding-left: 1.05rem; display: grid; gap: .45rem; max-width: 66ch;
}
.ledger__more { margin-top: .85rem; font-size: 1rem; }
.ledger__more a, .inline-link {
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 11, .45); padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
.ledger__more a:hover, .inline-link:hover { border-bottom-color: var(--gold); }

/* A wider label column where the label is a job title. "Parent & Alumni
   Engagement Coordinator" in the standard 10.5rem column wraps to three lines
   beside a one-line name, which reads as a mistake rather than as a column. */
.ledger--offices > * { grid-template-columns: 16rem 1fr; }
@media (max-width: 900px) { .ledger--offices > * { grid-template-columns: 11rem 1fr; } }

/* And a wider one where the label is a person's whole name. The Jewels are
   given their full names here rather than their surnames, and "Nathaniel
   Allison Murray" in tracked capitals needs four lines of the standard column
   to say what it says on two of this one. */
.ledger--names > * { grid-template-columns: 15rem 1fr; }
@media (max-width: 900px) { .ledger--names > * { grid-template-columns: 11rem 1fr; } }

/* A third column, for a photograph per row. Asked for on National Programs in
   August 2026 — "we also want a pic by each of the natl programs" — where the
   four programs previously shared one row of three pictures at the top of the
   page, so no picture belonged to any particular program.

   The photograph is the THIRD child of the row and the label is still the
   first, so the markup order is label, prose, picture: a screen reader and a
   no-CSS reader both get the program before its illustration. Below the stack
   breakpoint the row collapses to one column and the picture lands under the
   text it belongs to, which is the right order there too. */
.ledger--illustrated > * { grid-template-columns: 9.5rem 1fr 17rem; }
@media (max-width: 1080px) { .ledger--illustrated > * { grid-template-columns: 9.5rem 1fr 13rem; } }
@media (max-width: 860px) {
  /* The picture would be a stamp at this width. It goes full width under the
     text rather than shrinking further, which is what the stack rule below
     does for every ledger — this just reaches it earlier, because a third
     column runs out of room before a second one does. */
  .ledger--illustrated > * { grid-template-columns: 9.5rem 1fr; }
  .ledger--illustrated .photo { grid-column: 1 / -1; max-width: 420px; margin-top: .4rem; }
}

.ledger--ink { border-top-color: rgba(218, 211, 204, .3); }
.ledger--ink > * { border-bottom-color: rgba(218, 211, 204, .16); }
.ledger--ink .ledger__label { color: var(--blonde); }
.ledger--ink h3 { color: var(--paper); }
.ledger--ink p { color: rgba(218, 211, 204, .85); }
.ledger--ink .ledger__more a { color: var(--blonde); border-bottom-color: rgba(184,134,11,.6); }

/* ------------------------------------------------------------------- bio --
   A man's portrait, his name, one line about him, and the rest of his life
   behind a click.

   IT IS THE ROSTER GRID WITH A LONGER CAPTION, not a new idiom and not a card
   — no border, no shadow, no filled ground, same 4:5 plate with the same gold
   hairline under it as the officer wall. What it replaced was a wall of nine
   portraits followed by a ledger listing the same nine names again with a
   paragraph each, so reading it meant matching a face at the top of the page
   against a name halfway down it. Now each man is written once.

   THREE ACROSS, not one per row. Nine charter members fill three rows exactly;
   ten fifty-year brothers leave one on the last row, which reads as a grid
   remainder rather than as a gap, because the heading above says how many
   there are. (Contrast .jewels, where a ragged row WOULD read as a missing
   founder — see the note there.)

   The disclosure is <details>/<summary> and no script. It opens with
   JavaScript off, it is in the tab order for free, and find-in-page opens it
   to reach a match inside — none of which a div-and-a-click-handler gives. */
.bios {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.4vw, 2.8rem) clamp(1.2rem, 2.4vw, 2rem);
}
.bio { margin: 0; display: grid; align-content: start; }
.bio__plate { margin: 0 0 .9rem; }
/* The office label leads the text, so it cannot carry the top margin it needs
   when it sits under a portrait on the leadership wall. */
.bio__body > .officer__office { margin-top: 0; }
.bio__name { font-size: clamp(1.02rem, 1.7vw, 1.16rem); margin-bottom: .45rem; }
/* The line is the whole visible biography, so it is set smaller than a ledger
   paragraph and to a measure that suits a third of the page. */
.bio__body > p:not(.officer__office) {
  margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2);
}

@media (max-width: 900px) { .bios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) {
  .bios { grid-template-columns: 1fr; gap: 1.8rem; }
  .bio { grid-template-columns: 7rem 1fr; column-gap: 1.1rem; align-items: start; }
  /* One column is too narrow for a portrait above the text, so on a phone the
     plate moves beside it and spans both text rows. */
  .bio__plate { margin: 0; }
  .bio__body { grid-column: 2; }
}
.bio__more { margin-top: .95rem; }
.bio__more > summary {
  /* The platform marker is a triangle that takes no color from the page and
     sits outside the box. Suppressed, and a chevron drawn in its place — the
     same one the nav carries, so opening a biography and opening a menu are
     visibly the same gesture. Changing `display` off list-item is what
     removes it in Chrome; the ::-webkit rule is for older Safari. */
  list-style: none;
  display: inline-flex; align-items: center; gap: .55em;
  width: max-content; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  border-bottom: 1px solid rgba(184, 134, 11, .45); padding-bottom: 3px;
  transition: border-color .2s var(--ease);
}
.bio__more > summary::-webkit-details-marker { display: none; }
.bio__more > summary:hover { border-bottom-color: var(--gold); }
.bio__more > summary::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s var(--ease);
}
.bio__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* The one control on this page, and a 20px-tall box under a thumb. The hit area
   is grown with a transparent overlay rather than with padding, because padding
   would push the underline away from the words and the underline IS the
   affordance — it is what says the label is a control at all. ::after is the
   chevron, so this takes ::before.

   BOTH CONDITIONS, not just `pointer: coarse`. A real phone reports a coarse
   pointer and that is the honest signal — but a desktop browser at a narrow
   width reports a fine one, so a pointer-only query cannot be checked without a
   handset in the room, and a rule nobody can test is a rule nobody maintains.
   A cursor picking up a slightly larger target costs nothing. */
@media (pointer: coarse), (max-width: 720px) {
  .bio__more > summary { position: relative; }
  .bio__more > summary::before {
    content: ""; position: absolute; inset: -13px -10px;
  }
}
.bio__more > p { margin: .95rem 0 0; }

/* The portrait column narrows twice rather than once. At one step it is either
   too wide to leave a readable measure beside it on a phone, or too small to
   be a portrait on a tablet. */
@media (max-width: 760px) { .ledger--bios > * { grid-template-columns: 9rem 1fr; } }
@media (max-width: 480px) {
  .ledger--bios > * { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
}

/* ----------------------------------------------------------------- prose --
   The history pages are read straight through, not scanned, so they get a
   measure instead of a ledger. This is the other half of keeping the pages
   short: one topic per page, set to read. */
.prose { max-width: 68ch; }
.prose p { font-size: 1.1rem; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2.4rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.12rem; margin: 1.9rem 0 .5rem; }
.prose ul, .prose ol {
  color: var(--ink-2); font-size: 1.06rem; margin: 1rem 0 1.3em;
  padding-left: 1.15rem; display: grid; gap: .5rem;
}
.prose blockquote {
  margin: 1.8rem 0; padding-left: 1.3rem; border-left: 2px solid var(--gold);
  font-style: italic; color: var(--ink); font-size: 1.16rem;
}
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }

/* A list of names set as a block — charter members, delegates. Three columns
   of small caps rather than a bulleted list running down half a page. */
.names {
  list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .55rem 1.6rem;
}
.names li {
  font-family: var(--display); font-size: .92rem; font-weight: 500;
  color: var(--ink-2); letter-spacing: -.005em;
}

/* =============================================================== ROSTER == */
/* The officers. One studio sitting, one backdrop, one tie — so the grid is
   plain and uniform and the repetition is the point. No circles (the campaign
   used those), no tilt, no hover lift: a leadership wall reads as a record,
   and a record does not wobble. */
.roster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 2rem);
}
.officer { margin: 0; display: grid; align-content: start; }
.officer__frame {
  display: block; position: relative; background: var(--cream-2);
  border-bottom: 2px solid var(--gold);
  overflow: hidden;
}
.officer__frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  /* A very slight desaturation pulls thirteen separately-exposed frames onto
     one tone without turning the wall gray. */
  filter: saturate(.94);
}
/* No photograph: the chapter medallion on the same 4:5 plate, which is what
   the chapter's own site does. Better than an empty frame or a stock avatar. */
.officer__frame--none {
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: var(--ink);
}
.officer__frame--none img {
  width: 54%; aspect-ratio: 1; object-fit: contain; filter: none; opacity: .9;
}
.officer__office {
  font-family: var(--display); font-weight: 700; font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-deep);
  margin: .95rem 0 .25rem; line-height: 1.4;
}
.officer__name {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.officer__note { margin: .28rem 0 0; font-size: .95rem; color: var(--ink-3); }
.officer__mail {
  display: inline-block; margin-top: .35rem; font-size: .92rem;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 11, .45); word-break: break-all;
}
.officer__mail:hover { border-bottom-color: var(--gold); }

/* An email address standing alone in a fact row or in the footer is a tap
   target, not a link inside a sentence — but it is set inline, so it inherits a
   17px line box. Vertical padding on an inline element grows the HIT AREA
   without touching the line box, so the address lands under a thumb without a
   pixel of layout moving. Deliberately not applied to links inside running
   text: there the padded boxes of two links on neighbouring lines would
   overlap, and a sentence is the one place the target-size rule exempts. */
@media (pointer: coarse), (max-width: 720px) {
  .fact dd a, .footer__where a { padding-block: .5rem; }
}

@media (max-width: 560px) {
  .roster { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
}

@media (max-width: 720px) {
  /* On the leadership wall the office IS the content — it is what a visitor is
     scanning for — and "Director of Educational Activities" set at 9.9px in
     tracked caps is a squint on a phone. Up a size, and some of the tracking
     off, which is what makes small caps hard in the first place. The same
     device elsewhere on the site is a LABEL on content rather than the content,
     and is left alone. */
  .officer__office { font-size: .76rem; letter-spacing: .09em; }
  .officer__name { font-size: 1.06rem; }
}

/* =============================================================== JEWELS == */
/* The Fraternity's painted portraits of the seven Founders, seven across on a
   wide screen. Nothing else on the site is laid out seven-up; the count is the
   meaning, the same way the star rule is.

   THE NAMES ARE NOT UNDER THE FACES, and that is deliberate. The source the
   portraits came from carries no captions and no mapping, so pairing them
   would be a guess — about the seven men the whole Fraternity is named for.
   The names are listed together beneath instead, in the order Alpha lists
   them, until the Historian supplies the pairing. */
/* Flex rather than grid, and this is the reason: seven is prime. Any column
   count other than seven leaves a ragged last row, and a seven-portrait set
   with a hole in it looks like a missing founder. Flex-wrap with centering puts
   the overflow row in the middle instead, which reads as a deliberate
   arrangement at every width. */
.jewels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.5rem, 1.2vw, 1rem);
  --jewel-cols: 7;
}
.jewel {
  margin: 0;
  flex: 0 1 calc((100% - (var(--jewel-cols) - 1) * clamp(.5rem, 1.2vw, 1rem))
                 / var(--jewel-cols));
}
.jewel img {
  width: 100%; aspect-ratio: 520 / 661; object-fit: cover;
  border-bottom: 2px solid var(--gold);
  background: var(--cream-2);
}
/* The surname carries the line and the given names sit above it in gold, small
   caps. A Jewel is referred to by surname — "Jewel Callis" — so that is what
   gets the weight, and it keeps seven captions to one line each at the width a
   seventh of the shell allows. */
.jewel figcaption {
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  letter-spacing: -.015em; color: var(--paper);
  margin-top: .7rem; line-height: 1.25;
}
.jewel__given {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2rem;
}

/* ============================================================== PARTNER ==
   A partner's mark, on the ground it was drawn for. The Mid South logo is
   black and red on transparency, so it wants a light plate — white rather than
   the section's cream, because a trademark reproduced over a tint is a
   trademark somebody has quietly restyled.

   The red is theirs and stays. The brand guide's no-red rule governs the
   chapter's own design; it does not reach a third party's mark, and recoloring
   a partner's logo to match a palette is not a liberty a chapter should take.
   The anniversary roundel that shipped with the lockup IS cropped out — see
   tools/build-assets.py — because an anniversary badge dates the page the
   moment the anniversary passes. */
.partner {
  background: var(--paper); border-top: 3px solid var(--gold);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: grid; justify-items: center; gap: 1rem;
  box-shadow: 0 1px 2px rgba(26, 23, 18, .07);
}
.partner__label {
  font-family: var(--display); font-weight: 700; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0; text-align: center;
}
.partner img { width: min(260px, 100%); }
.partner__note {
  margin: 0; text-align: center; font-size: .95rem;
  color: var(--ink-2); max-width: 40ch;
}

@media (max-width: 880px) { .jewels { --jewel-cols: 4; } }
@media (max-width: 520px) { .jewels { --jewel-cols: 2; } }

/* ---------------------------------------------------------------- photos --
   Printed-photo treatment: a white mount, a little heavier at the foot, and a
   gold hairline under the image.

   THE ROTATION IS GONE. On the campaign site each print was tilted by
   position and settled straight on hover, and it was that site's most
   recognizable device. A chapter's record reads better square, and dropping it
   is most of what stops this site looking like that one. */
.photos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
/* Two photographs of different shape, set so they finish level. A 4:3 frame
   and the sign's 2:3 one are wildly different heights at the same width; the
   ratio here is solved for equal height rather than guessed — 1.95 to 1 lands
   them within a few pixels of each other across the desktop range. Stacked
   below the breakpoint, where matching heights stop meaning anything. */
/* Four photographs read better as a 2x2 than as a row of three with one
   stranded underneath. Used by the Cotillion gallery. */
.photos--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .photos--two { grid-template-columns: 1fr; } }
.photos--pair { grid-template-columns: 1.95fr 1fr; align-items: start; }
@media (max-width: 700px) { .photos--pair { grid-template-columns: 1fr; } }
.photo { margin: 0; }
.photo__frame {
  display: block; background: var(--paper);
  padding: 11px 11px 14px;
  box-shadow: 0 1px 2px rgba(26, 23, 18, .09), 0 12px 26px -16px rgba(26, 23, 18, .38);
}
.photo__frame img { width: 100%; border-bottom: 2px solid var(--gold); }
.photo figcaption {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-deep);
  margin-top: 1rem; line-height: 1.5;
}
/* The bold label is the whole caption unless a RECORD FACT can sit under it.
   Nobody has identified the brothers in the candid photographs or dated the
   occasions, so a caption like "Serving the community" would be inventing a
   when and a where. The second color stays so a fact can drop in unchanged
   once the chapter supplies one. Do not write one to fill the space. */
.photo figcaption span { display: block; color: var(--ink-3); font-weight: 500; margin-top: .2rem; }

/* The Cotillion programme covers, in the same white mount as a photograph,
   because that is what they are — sixty years of printed covers scanned off
   the chapter's own shelf.

   Narrower cells than .photos, which is three across. A cover is a small
   object and there are a dozen of them: at a third of the page each they read
   as a gallery, and at this size they read as a run of years, which is the
   point. THESE ONES CARRY CAPTIONS. The rest of the site's photographs do not,
   because nobody can date them — but a programme cover has its year and its
   theme printed on its face, so the caption is a record fact and not a label
   written to fill the space. See .photo figcaption. */
.covers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: clamp(1.3rem, 2.6vw, 2.2rem);
}
.covers .photo__frame { padding: 8px 8px 10px; }
.covers figcaption { margin-top: .75rem; }
/* The year is the label and keeps the tracked capitals. What sits under it is
   a TITLE, printed on the cover in the chapter's own capitalization — "The
   Year of the Lady" set in tracked caps stops reading as a title and starts
   reading as another label. */
.covers figcaption span {
  text-transform: none; letter-spacing: 0; font-size: .8rem; line-height: 1.35;
}

/* ==================================================================== REEL ==
   The home page's run of photographs, oldest first.

   IT IS A SCROLLING LIST, NOT A CAROUSEL WIDGET, and that is the whole reason
   it does not feel clunky. The scrolling is the browser's: overflow-x with
   scroll-snap, so a trackpad, a touch screen, a shift-wheel and the keyboard
   all already work, with real momentum and real rubber-banding. No timer moves
   it on its own, nothing slides under the reader, and with scripting off it is
   a list of pictures that scrolls. site.js adds the two arrows on top of that
   and nothing else.

   Three and a bit frames are visible at desktop rather than three: the part
   frame at the edge is what says there is more, which is the job the dots on a
   carousel do badly. */
.reel { position: relative; }
.reel__track {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none; margin: 0; padding: 0 0 .4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
/* ZERO SIZE, NOT `display: none`. Hiding this pseudo-element with `display:
   none` is a known way to switch scroll-snap OFF in iOS Safari — the row then
   free-drags and comes to rest between two photographs, which is exactly what
   it did on a real handset while snapping perfectly in every desktop browser.
   Sizing it to nothing hides it just as well and leaves snapping alone. */
.reel__track::-webkit-scrollbar { width: 0; height: 0; }
.reel__item {
  flex: 0 0 clamp(230px, 29%, 360px);
  scroll-snap-align: start;
  /* One photograph per swipe. Without this a fast fling sails past several and
     lands wherever momentum runs out — still snapped, but nowhere near where
     the thumb let go. */
  scroll-snap-stop: always;
}
/* The mount is already white on cream; at reel size the drop shadow is the only
   thing separating one frame from the next, so it stays. */
.reel .photo__frame { padding: 9px 9px 12px; }

.reel__btn {
  position: absolute; top: calc(50% - 1.4rem); z-index: 2;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 4px rgba(26, 23, 18, .1), 0 14px 28px -14px rgba(26, 23, 18, .5);
  transition: opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.reel__btn:hover { color: var(--gold-deep); border-color: var(--gold); }
/* Neither arrow is ever switched off: the reel comes round at both ends, so
   there is no dead end for a disabled state to describe. The only time they go
   is when the whole run already fits, which site.js flags. */
.reel.is-static .reel__btn { display: none; }
.reel__btn--prev { left: -1.2rem; }
.reel__btn--next { right: -1.2rem; }
/* The same chevron as the nav caret, the biography disclosure and the exhibit
   overlay. Four places, one shape. */
.reel__btn::before {
  content: ""; width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}
.reel__btn--prev::before { transform: rotate(135deg); margin-left: .2em; }
.reel__btn--next::before { transform: rotate(-45deg); margin-right: .2em; }

@media (max-width: 900px) {
  .reel__item { flex: 0 0 min(78%, 340px); }
  /* Inside the shell rather than hanging off it: there is no gutter left to
     hang into once the shell is 90vw. */
  .reel__btn--prev { left: .4rem; }
  .reel__btn--next { right: .4rem; }
}

@media (max-width: 620px) {
  /* The arrows go. There is no gutter left at this width, so they end up
     sitting ON the first photograph — a white disc over a face, and a tap
     target covering the picture it is supposed to be beside. A phone swipes
     the reel anyway, and the part-frame at the edge is the affordance that
     says there is more. */
  .reel__btn { display: none; }
}

/* A section heading paired with one framed photo, so photography runs THROUGH
   the site rather than pooling in a gallery. --flip puts the photo on the
   left; they alternate down a page. */
.headrow {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.8rem, 4.5vw, 3.6rem); align-items: center;
  margin-bottom: clamp(2rem, 3.6vw, 2.8rem);
}
.headrow .section__head { margin-bottom: 0; }
.headrow--flip .section__head { order: 2; }
.headrow .photo { max-width: 420px; width: 100%; justify-self: end; }
.headrow--flip .photo { justify-self: start; }

/* ----------------------------------------------------------------- quote -- */
/* Pull quotes are Celeste's job in the guide — serif, not the display sans.
   Not sized in `ch`: on this container `ch` resolves against the inherited
   body size rather than the blockquote's display size, so it computes far too
   narrow and rations two words per line. */
.quote { max-width: min(100%, 800px); margin-inline: auto; text-align: center; }
.quote .starrule { margin: 0 auto 1.8rem; width: 148px; }
.quote blockquote {
  margin: 0; font-family: var(--body); font-weight: 400; font-style: italic;
  font-size: clamp(1.45rem, 3.6vw, 2.8rem); line-height: 1.22; letter-spacing: -.018em;
  color: var(--paper); text-wrap: balance;
}
.quote blockquote .gold-word { color: var(--blonde); font-style: normal; }
.quote figcaption {
  margin-top: 2rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(218, 211, 204, .22);
  display: inline-block;
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; color: var(--stone); opacity: .75;
}

/* ----------------------------------------------------------------- facts --
   A definition list for the things a visitor came to look up: when the chapter
   meets, where, what dues are, what a scholarship requires. */
.facts { display: grid; margin: 0; border-top: 1px solid var(--rule); }
.fact {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--hair); font-size: 1.02rem;
}
.fact dt {
  font-family: var(--display); font-weight: 600; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-deep);
  padding-top: .22rem;
}
.fact dd { margin: 0; color: var(--ink-2); }
.fact dd a { color: var(--gold-deep); text-underline-offset: 3px; }

/* A boxed panel for a criteria list or a deadline — the one place on the site
   that gets a filled ground, because a scholarship deadline has to be findable
   by somebody skimming on a phone at 11pm. */
.panel-note {
  background: var(--cream-2); border-top: 3px solid var(--gold);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.panel-note h3 { margin-bottom: .7rem; }
.panel-note p, .panel-note li { color: var(--ink-2); }
.panel-note ul { margin: .9rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.panel-note .fact dt { color: var(--bronze); }

/* -------------------------------------------------------------- two-up -- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 4vw, 3.2rem); }
.grid-2--wide { grid-template-columns: 1.12fr .88fr; align-items: start; }
.grid-2--side { grid-template-columns: .86fr 1.14fr; align-items: start; }

/* ------------------------------------------------------------------ form -- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .42rem; }
.field > label, .field__legend {
  font-family: var(--display); font-weight: 600; font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-deep);
}
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1.04rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 2px; padding: .8rem .92rem; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, .16);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field__opt {
  font-family: var(--body); font-weight: 400; font-size: .8rem;
  letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
.form__note { font-size: .87rem; color: var(--ink-3); }

/* The tracked micro-label is the site's own device — the ledger, the officer
   offices, the fact rail all use it — and it stays. THE FORM IS THE EXCEPTION:
   these labels are not decoration, they are the instructions for filling a
   field in, and at 10.5px on a phone they are a squint. Up a size and off some
   of the tracking, which is what makes small caps hard to read in the first
   place. The inputs themselves already sit at 16.6px, above the threshold that
   makes iOS zoom the page when a field takes focus — do not take them under
   16px to save space. */
@media (max-width: 720px) {
  .field > label, .field__legend { font-size: .78rem; letter-spacing: .1em; }
  .field__opt { font-size: .92rem; }
  .form__note { font-size: .96rem; }
}
.form__result { color: var(--bronze); }

/* The honeypot. Off-screen rather than display:none — a bot that skips hidden
   fields still fills this one, which is the whole point of it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- email sign-up --
   The band above the footer on every page. Two fields and a button on ONE
   line at desktop, because a sign-up that looks like a form is a sign-up that
   gets read as work; on a phone it stacks and the button goes full width.

   It sits on ink, so every colour here is restated rather than inherited —
   the same trap the rest of this stylesheet documents. The labels in
   particular fall through to --gold-deep, which exists precisely because
   --gold is too light on cream and is the wrong end of the pair on ink. */
.signup__form {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr 1fr auto; align-items: end;
  max-width: 780px; margin: 0 auto;
}
.signup__form .field > label { color: var(--gold); }
.signup__form .btn { white-space: nowrap; }
.signup__note {
  max-width: 60ch; margin: 1.4rem auto 0; text-align: center;
  font-size: .87rem; color: var(--stone);
}
.signup__note a { color: var(--gold); text-underline-offset: 3px; }
.signup__done {
  text-align: center; font-family: var(--display); font-weight: 600;
  font-size: 1.1rem; color: var(--blonde); margin: 0;
}
.signup__err { color: var(--blonde); }
/* 640, not 720: the three-column row survives further down than a normal form
   because two of its fields are short. Below this the button takes the full
   width rather than sitting stranded to one side of a stacked pair. */
@media (max-width: 640px) {
  .signup__form { grid-template-columns: 1fr; }
  .signup__form .btn { width: 100%; }
}

/* Replaces the form once a message is genuinely sent. A success note above a
   still-filled form reads as "did that work?" and invites a second send. */
.form__done { border-top: 3px solid var(--gold); padding-top: 1.6rem; max-width: 62ch; }
.form__done h3 { margin-bottom: .6rem; }
.form__done p { color: var(--ink-2); font-size: 1.1rem; }

/* ---------------------------------------------------------------- social --
   Glyphs drawn with currentColor rather than shipped as images, so each takes
   the color of the link it sits in and stays sharp at any size without a
   second asset. Sized in em so they track the type beside them. */
.soc { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; }
.soc__glyph { width: 1.1em; height: 1.1em; flex: none; }

/* ================================================================ CARDS ==
   Not cards. A row of links to the pages inside a group, shown at the foot of
   each section page so a visitor can move sideways without going back up to
   the menu. A label and a rule, nothing boxed. */
.onward {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rule); padding-top: 1.6rem;
}
.onward a {
  text-decoration: none; display: grid; gap: .3rem;
  grid-template-rows: auto auto 1fr auto;   /* the blurb takes the slack so the
                                               buttons line up across the row */
  border-top: 2px solid transparent; padding-top: .9rem;
  transition: border-color .2s var(--ease);
}
.onward a:hover { border-top-color: var(--gold); }
.onward__label {
  font-family: var(--display); font-weight: 700; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}
.onward__title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.02em; color: var(--ink);
}
.onward__blurb { font-size: .98rem; color: var(--ink-2); margin: 0; }

/* The affordance the row was missing. Asked for by the chapter president in
   August 2026: the block was already a link and nothing on it looked like one.
   A SPAN, not a nested anchor — an <a> inside an <a> is invalid and the parser
   closes the outer one early, which quietly unlinks the rest of the card.
   Ghost weight on purpose: three or four of these sit in a row above the
   footer, and three or four solid gold buttons would outrank the page. */
.onward__go {
  justify-self: start; margin-top: 1rem;
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; color: var(--gold-deep);
  border: 1px solid var(--gold); border-radius: 2px;
  padding: .5rem .9rem;
  display: inline-flex; align-items: baseline; gap: .5em;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.onward__go i { font-style: normal; }
.onward a:hover .onward__go,
.onward a:focus-visible .onward__go {
  background: var(--gold); color: var(--ink);
}

/* The Fraternity's coat of arms. Capped at 210px and never enlarged past it: a
   chapter IS entitled to reproduce the official marks, and what it is not
   entitled to do is redraw, recolor, crop or stretch them. Native size is
   257x386, so this only ever scales down. */
.crest { width: min(100%, 210px); margin-inline: auto; }

/* The Educational Talent Search mark. Capped for the same reason the crest is:
   it is somebody else's finished artwork and this site reproduces it rather
   than redrawing it, so it is never enlarged past a size that flatters it, and
   never recolored or cropped. Centred on its column rather than flush left —
   it is a round mark, and a circle hung on a left edge reads as slipped. */
.ets-mark { width: min(100%, 260px); margin-inline: auto; }

/* ================================================================= LIGHTBOX ==
   The exhibit overlay. Ink ground, one picture, the caption under it — the
   chapter's own museum wall rather than a gallery widget: no thumbnail strip,
   no zoom, no captions floating over the picture, no counter in a pill.

   A .photo__frame is a <span> everywhere else on the site and an <a> on an
   exhibit page. Both have to look identical, so everything the frame does
   visually is on .photo__frame and the only additions here are the cursor and
   the hover, which a span cannot get anyway. */
a.photo__frame { cursor: zoom-in; transition: box-shadow .2s var(--ease); }
a.photo__frame:hover {
  box-shadow: 0 1px 2px rgba(26, 23, 18, .12), 0 18px 34px -18px rgba(26, 23, 18, .5);
}

.lb {
  /* The dialog's own box is the whole viewport, which is what lets a click on
     the ground close it — ::backdrop cannot receive events. */
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: clamp(1rem, 4vw, 3rem); border: 0; background: transparent;
  color: var(--stone);
  display: grid; place-items: center;
  overflow: hidden;
}
/* THE BROWSER'S OWN `dialog:not([open]) { display: none }` LOSES TO ANY AUTHOR
   RULE THAT SETS DISPLAY — the identical trap `[hidden]` is under at the top of
   this file, and this block sets `display: grid` two lines up. Without this the
   closed dialog renders: a transparent box the full width and height of the
   viewport, appended to the end of <body>. It shows up as a screen of empty
   page below the footer, and its two fixed-position arrows float over the site
   on every page that has an exhibit. */
.lb:not([open]) { display: none; }
.lb::backdrop { background: rgba(12, 10, 8, .93); }
/* Set on <html> by site.js for as long as the overlay is open. The backdrop is
   deliberately not solid — the wash over the page is what makes it an overlay
   rather than a new page — but 7% is enough for a white disc to read through,
   and the reel's arrows sit exactly where the overlay's own arrows are. Two
   faint ghost chevrons beside two real ones looks like a fault. */
.lb-open .reel__btn { display: none; }

.lb__figure {
  margin: 0; display: grid; gap: 1rem; justify-items: center;
  width: 100%; max-height: 100%; min-height: 0;
}
.lb__img {
  /* Sized from the frame's own pixels, set by the script before the file is
     fetched, so stepping through the sequence does not collapse the overlay to
     nothing and spring back as each image decodes. */
  aspect-ratio: var(--lb-w, 3) / var(--lb-h, 4);
  /* WIDTH IS 100%, NOT AUTO. A replaced element with no file loaded yet has no
     intrinsic size, so `width: auto` next to an aspect-ratio resolves to a
     couple of pixels — the overlay opened as a dot and jumped to full size when
     the image arrived. A definite width plus the ratio reserves the right box
     before the first byte, which is the whole point of setting --lb-w/--lb-h
     off the frame's own attributes. The figure above carries a width for the
     same reason: `100%` needs something definite to be 100% OF. */
  width: 100%; margin-inline: auto;
  max-width: min(100%, calc((100vh - 12rem) * var(--lb-w, 3) / var(--lb-h, 4)));
  max-height: calc(100vh - 12rem);
  height: auto; object-fit: contain;
  background: var(--paper);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.lb__cap {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  max-width: 62ch;
}
.lb__count {
  font-family: var(--display); font-weight: 700; font-size: .62rem;
  letter-spacing: .18em; color: var(--gold);
}
.lb__text { font-size: 1rem; line-height: 1.5; color: rgba(218, 211, 204, .82); }

.lb__close, .lb__nav {
  position: fixed; z-index: 1; background: none; border: 0; cursor: pointer;
  color: var(--stone); opacity: .62;
  transition: opacity .2s var(--ease);
  display: grid; place-items: center;
}
.lb__close:hover, .lb__nav:hover { opacity: 1; }

/* Above the arrows, and they are inset clear of it below. Both, because either
   alone is a fix that the next edit to the other rule can quietly undo: the
   next-arrow strip runs the full height of the right edge, so it used to sit
   over this corner AND paint on top of it — same z-index, later in the DOM —
   and clicking the close button advanced the picture instead. */
.lb__close { top: 0; right: 0; width: 4rem; height: 4rem; z-index: 3; }
/* Drawn, not a glyph: an × in a font is a different width in every family the
   fallback stack might land on, and the arrows below are drawn anyway. */
.lb__close::before, .lb__close::after {
  content: ""; position: absolute; width: 19px; height: 1.5px;
  background: currentColor;
}
.lb__close::before { transform: rotate(45deg); }
.lb__close::after { transform: rotate(-45deg); }

/* Inset top and bottom rather than full height, so the strip never covers the
   close button in the corner — and inset by the SAME amount at both ends, so
   the chevrons stay centred on the picture. */
.lb__nav { top: 4rem; bottom: 4rem; width: clamp(3rem, 8vw, 5.5rem); }
.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }
/* The same chevron the nav caret and the biography disclosure use. */
.lb__nav::before {
  content: ""; width: 14px; height: 14px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.lb__nav--prev::before { transform: rotate(135deg); margin-left: .35em; }
.lb__nav--next::before { transform: rotate(-45deg); margin-right: .35em; }

@media (max-width: 620px) {
  /* The arrows would sit on top of the picture at this width, so they move
     under it and the picture gets the room back. */
  .lb__nav { top: auto; bottom: 0; height: 4rem; width: 5rem; }
  .lb__nav--prev { left: 15%; }
  .lb__nav--next { right: 15%; }
  .lb__img { max-height: calc(100vh - 16rem); }
}

/* ---------------------------------------------------------------- footer -- */
.footer { background: var(--ink); color: var(--stone); padding: clamp(2.6rem, 5vw, 3.6rem) 0 1.7rem; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(218, 211, 204, .15);
}
.footer .mark__name { color: var(--paper); }
.footer__blurb { margin-top: 1rem; font-size: 1rem; color: rgba(218, 211, 204, .78); max-width: 34ch; }
.footer__where { margin-top: 1rem; font-size: .95rem; color: rgba(218, 211, 204, .6); line-height: 1.6; }
.footer__where a { border-bottom: 1px solid rgba(184, 134, 11, .5); }
.footer h4 {
  font-family: var(--display); font-weight: 600; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blonde); margin: 0 0 .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a {
  color: rgba(218, 211, 204, .82); text-decoration: none; font-size: 1rem;
  transition: color .2s var(--ease);
}
.footer a:hover { color: var(--blonde); }
/* The motto and the two accounts. This was a slim ink strip ABOVE the header
   until August 2026, where it did two jobs: it put the chapter's own words
   above the fold on every page, and it gave the header a two-tier silhouette
   the campaign site's single flat bar does not have.

   The chapter asked for it down here instead. The two-tier header goes with
   it, so the header is now one cream bar — which is the campaign's shape. What
   keeps the two sites apart is everything else in the table at the top of this
   file: the ink hero, the grouped menus, the square photographs, the star rule
   used once a page. Do not let any of THOSE drift as well.

   The motto also came out of .footer__blurb at the same time. With the strip
   down here it was being printed twice, four inches apart. */
.footer__strip {
  margin-top: 1.6rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(218, 211, 204, .15);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem 1.5rem;
  font-family: var(--display); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.footer__motto { margin: 0; color: var(--blonde); opacity: .92; }
.footer__soc { display: flex; align-items: center; gap: 1.3rem; }
.footer__soc a { color: rgba(218, 211, 204, .82); border-bottom: 0; }

@media (max-width: 620px) {
  /* The motto is the first thing to go, the same way it was on the strip: it
     is the decorative half of this row and the accounts are the useful half. */
  .footer__motto { display: none; }
  .footer__strip { justify-content: center; }
  /* Two tracked uppercase account names side by side are wider than a 320px
     phone's shell. They stack rather than push the page sideways. */
  .footer__soc { flex-wrap: wrap; justify-content: center; gap: .8rem 1.3rem; }
}

.footer__bottom {
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .84rem; color: rgba(218, 211, 204, .55);
}
.footer__legal { max-width: 64ch; line-height: 1.6; }

/* ------------------------------------------------------- on a phone -------
   Everything below is a TOUCH fix, not a layout one. A footer link is a
   16px-tall box on a desktop and that is fine for a cursor; the same box under
   a thumb is a miss waiting to happen, and there are four columns of them.
   Padding rather than font-size, so the footer reads exactly as it does now and
   only the target grows. The small print goes up a size at the same time —
   13px of legal text held at arm's length is the one place on this site where
   the type is genuinely too small to read. */
@media (max-width: 720px) {
  .footer__top ul { gap: 0; }
  .footer__top li a { display: block; padding-block: .62rem; }
  .footer__soc a { padding-block: .55rem; }
  .footer__legal, .footer__bottom { font-size: .92rem; }
  .footer__where { font-size: 1rem; }
}

/* ---------------------------------------------------------------- motion --
   Composed blocks settle as they are reached — a section head, one ledger
   entry, a photo, the roster. Never every element on the page, which is the
   version that reads as a template.

   Every rule below is scoped to .js, so with scripting off nothing is ever
   hidden. The list is duplicated in assets/js/site.js; keep the two in step,
   and note that anything NOT listed is simply never hidden, which is the safe
   direction to be wrong in. */
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* The stack settles in sequence from the seal down. Five children now rather
   than two columns, so the delays are per-item and capped short — a hero that
   takes a second to assemble reads as a slideshow. */
.hero__inner > * { animation: settle .7s var(--ease) backwards; }
.hero__inner > :nth-child(1) { animation-delay: .02s; }
.hero__inner > :nth-child(2) { animation-delay: .08s; }
.hero__inner > :nth-child(3) { animation-delay: .14s; }
.hero__inner > :nth-child(4) { animation-delay: .20s; }
.hero__inner > :nth-child(5) { animation-delay: .26s; }
.hero__rail { animation: settle .7s var(--ease) .3s backwards; }

.js .section__head,
.js .ledger > *,
.js .photo,
.js .quote,
.js .facts,
.js .prose,
.js .roster,
.js .bios,
.js .jewels,
.js .panel-note,
.js .form,
.js .onward {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   var(--reveal) var(--ease),
    transform var(--reveal) var(--ease);
}

/* Same specificity as the rules above and written after them, so it wins on
   order alone — no !important needed to turn a block back on. */
.js .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* site.js reveals everything at once in this mode; zeroing the duration is
     what stops that arriving as one big simultaneous fade. */
  :root { --reveal: 0s; }
  .hero__inner > *, .hero__rail { animation: none; }
}

/* ------------------------------------------------------------ responsive -- */
/* Seven top-level items, three of them carrying a caret. The band between a
   wide desktop and the hamburger is narrow, so the links give up tracking and
   padding before the menu collapses. */
@media (max-width: 1200px) {
  .nav__link { font-size: .7rem; letter-spacing: .05em; padding: .55rem .46rem; }
  .nav__link::after { left: .46rem; right: .46rem; }
}

@media (max-width: 1040px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 5vw 1.4rem; margin: 0; display: none;
    max-height: calc(100vh - 112px); overflow-y: auto;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__item { display: block; }
  .nav__link { padding: .8rem .2rem; font-size: .8rem; width: 100%; justify-content: flex-start; }
  /* Names back, hairline off: in a vertical list a lone glyph on its own row
     is unreadable, and a left border on a full-width row is a stray mark. */
  .nav__soc-name { display: inline; }
  .nav__soc { gap: .6rem; }
  .nav__item--soc:first-of-type { margin-left: 0; padding-left: 0; border-left: 0; }
  .nav__link::after { left: .2rem; right: auto; width: 22px; bottom: .4rem; }

  /* Every submenu is simply open below its group. A dropdown that has to be
     tapped to open is a second tap for no benefit once the whole menu is
     already a vertical list. */
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; border-left: 2px solid var(--gold);
    box-shadow: none; background: none;
    margin: 0 0 .5rem .3rem; padding: 0;
  }
  .nav__menu a { padding: .55rem .9rem; border-left: 0; }
  .nav__menu a:hover, .nav__menu a[aria-current="page"] { background: none; color: var(--gold-deep); }
  .nav__caret { display: none; }
}

@media (max-width: 1020px) {
  .grid-2--wide, .grid-2--side { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .photos { grid-template-columns: repeat(2, 1fr); }
  .photos .photo:nth-child(3) { display: none; }
  .headrow { grid-template-columns: 1fr; gap: 2rem; }
  .headrow--flip .section__head { order: 0; }
  .headrow .photo, .headrow--flip .photo { justify-self: start; max-width: 400px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .photos { grid-template-columns: 1fr; gap: 2rem; max-width: 380px; margin-inline: auto; }
  .photos .photo:nth-child(3) { display: block; }
  .ledger > *, .ledger--offices > * { grid-template-columns: 1fr; gap: .5rem; }
  .ledger__label { padding-top: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; gap: .15rem; }
  .quote { max-width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; }
}

@media print {
  .nav, .onward, .footer__top { display: none; }
  body { background: #fff; }
  .hero, .pagehead { background: #fff; color: #000; border-bottom: 2px solid var(--gold); }
  .hero::before, .hero::after, .pagehead::before, .pagehead::after { display: none; }
  .hero__name, .pagehead h1 { color: #000; }
}

/* A photograph set on its own, with no heading beside it and nothing written
   under it. Used where the picture is the whole statement — the Founders' Day
   display under the Jewels — so it takes the reading measure rather than the
   half-column a .headrow would give it. */
.photo--plate { max-width: 760px; margin-inline: auto; }