/* Gentlemen of Quality — public site v2
   Brand hues sampled from brand/gq-crest-source.png, expressed in OKLCH.
   Research basis: NotebookLM "Web Design Best Practices 2026" (74 sources).

   Motion philosophy: everything is readable with zero animation. Reveals
   are layered on only when the browser supports scroll timelines AND the
   user has not asked for reduced motion. A fast scroller, an old browser,
   and a reduced-motion user all get the full page instantly. */

:root {
  /* -- color: warm dark neutrals tinted toward the crest red (hue ~25),
        warm paper tinted toward the gold (hue ~85). Hex fallbacks first. -- */
  --ink: #17110F;
  --ink-2: #201815;
  --ink-3: #2A211D;
  --paper: #FAF7F2;
  --paper-2: #F2EDE3;
  --gold: #D0A040;
  --gold-bright: #E3BE6E;
  --gold-deep: #A87B2E;
  --red: #D83038;
  --red-deep: #B3242B;
  --text: #1C1713;
  --text-mute: #60584F;
  --text-on-dark: #EFE9E0;
  --text-on-dark-mute: #A99F92;

  --line-gold: rgba(208, 160, 64, 0.30);
  --line-soft: rgba(28, 23, 19, 0.10);

  /* -- type: Libre Baskerville display + Source Sans 3 body.
        Chosen for the "established institution" register: Baskerville is a
        historic text face, symmetric and unshowy, and Source Sans 3 has a tall
        x-height that holds up at 14px on a phone. Contrast across the pair is
        serif-vs-sans plus high-vs-low stroke modulation, not just weight.
        1.25 Major Third scale, fluid via clamp(). -- */
  --display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-0: clamp(1rem, 0.929rem + 0.36vw, 1.125rem);   /* body 16→18 */
  --fs-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-2: clamp(1.45rem, 1.25rem + 1vw, 1.95rem);
  --fs-3: clamp(1.8rem, 1.45rem + 1.75vw, 2.6rem);
  --fs-4: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
  --fs-hero: clamp(2.4rem, 1.5rem + 4.5vw, 4.6rem);

  /* -- motion tokens: micro 150–250ms, large 300–450ms, easeOutQuart -- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 200ms;
  --t-large: 380ms;

  --header-h: 84px;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
}

@supports (color: oklch(0.5 0.1 20)) {
  :root {
    --ink: oklch(0.155 0.012 40);
    --ink-2: oklch(0.19 0.014 45);
    --ink-3: oklch(0.23 0.016 50);
    --paper: oklch(0.975 0.008 85);
    --paper-2: oklch(0.945 0.014 85);
    --gold: oklch(0.72 0.12 84);
    --gold-bright: oklch(0.80 0.13 88);
    --gold-deep: oklch(0.60 0.11 80);
    --red: oklch(0.55 0.20 22);
    --red-deep: oklch(0.47 0.19 22);
    --text: oklch(0.20 0.01 60);
    --text-mute: oklch(0.45 0.015 70);
    --text-on-dark: oklch(0.93 0.012 85);
    --text-on-dark-mute: oklch(0.70 0.02 80);
  }
}

/* Reduced motion: shrink every duration to an imperceptible tick rather
   than none, so transitionend-dependent logic still fires. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 0.01ms;
    --t-large: 0.01ms;
  }
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- review bar (temporary, delete at launch) ---------- */
.optbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; justify-content: center;
  padding: 10px 16px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-gold);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.optbar__label { color: var(--text-on-dark-mute); }
.optbar__here { color: var(--gold); }
.optbar a { color: var(--text-on-dark); text-decoration: none; border-bottom: 1px solid rgba(208,160,64,.5); padding-bottom: 2px; }
.optbar a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* TEMPORARY review aid — remove with the .optbar block at launch. */
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  background: var(--gold); color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out), visibility var(--t-micro);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.55);
}
.totop[data-show="true"] { opacity: 1; visibility: visible; transform: none; }

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}

.on-dark .eyebrow, .eyebrow--gold { color: var(--gold); }

.rule {
  width: 56px;
  height: 3px;
  background: var(--red);
  border: 0;
  margin: 22px 0 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--ease-out),
    color var(--t-micro) var(--ease-out),
    border-color var(--t-micro) var(--ease-out),
    transform var(--t-micro) var(--ease-out),
    box-shadow var(--t-micro) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
}

.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); box-shadow: 0 10px 24px -12px var(--red); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-bright); box-shadow: 0 10px 24px -12px var(--gold); }

.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--outline { border-color: var(--text); color: var(--text); }
.btn--outline:hover { background: var(--text); color: var(--paper); }

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line-gold);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .header { background: rgba(23, 17, 15, 0.94); }
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}

.brand img { height: 42px; width: auto; object-fit: contain; }

/* Current GQ lockup (winged emblem + wordmark) from their live site. */
.brand__logo { height: 68px; }

.brand__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.10em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__since {
  display: block;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: var(--text-on-dark-mute);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 26px; }

.nav a {
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
}

.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header .btn { padding: 11px 18px; font-size: 0.74rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--text-on-dark);
  width: 42px; height: 38px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------- hero ---------- */

/* Split hero. Text and photograph each own a column; nothing is laid over
   anything, so no scrim is needed and the men in the photo stay at full
   brightness. Stacks photo-then-text below 900px. */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    min-height: min(88vh, 820px);
  }
}

.hero__panel {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  order: 2;
}

@media (min-width: 900px) {
  .hero__panel {
    order: 1;
    padding-inline: clamp(40px, 5vw, 80px);
    justify-content: flex-end;
  }
  .hero__content { max-width: 620px; }
}

.hero__media {
  order: 1;
  position: relative;
  min-height: 46vh;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero__media { order: 2; min-height: 100%; }
}

/* Warm documentary treatment. Brightness is left alone now that no text sits
   on top of it — the old 0.92 multiplier existed only to buy legibility. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.9) contrast(1.04);
}

/* A short gradient at the seam keeps the photo from ending on a hard line
   against the panel, without touching the area where faces sit. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,11,9,.45) 0%, rgba(16,11,9,0) 22%);
}

@media (min-width: 900px) {
  .hero__media::after {
    background: linear-gradient(to right, rgba(16,11,9,.55) 0%, rgba(16,11,9,0) 18%);
  }
}

/* Libre Baskerville sets noticeably larger per em than Fraunces did, and it
   now lives in a ~620px panel rather than the full page width. Its own clamp,
   not --fs-hero, or the third line wraps and pushes the proof stats under the
   fold on a laptop. */
.hero h1 {
  font-size: clamp(2rem, 1.1rem + 2.9vw, 3.35rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.hero h1 span { display: block; }
.hero h1 .accent { color: var(--gold); font-style: italic; font-weight: 400; }

.hero__lede {
  margin: 26px 0 0;
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--text-on-dark);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(208,160,64,.35);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}

.hero__proof strong { color: var(--gold); font-weight: 600; }

/* ---------- audience pathways ---------- */

/* Top padding is now real. It was 0 while the hero was a full-bleed dark
   image and the two blocks read as one field; the split hero ends on a
   photograph edge, so the pathways need their own air. */
.paths { background: var(--ink); padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 88px); }

.paths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.path {
  display: block;
  padding: 28px 26px;
  background: var(--ink-2);
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  text-decoration: none;
  transition:
    border-color var(--t-micro) var(--ease-out),
    background-color var(--t-micro) var(--ease-out),
    transform var(--t-micro) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .path:hover { transform: translateY(-3px); }
}

.path:hover { border-color: var(--gold); background: var(--ink-3); }
.path:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* :has() — when one pathway is hovered, quiet the siblings */
.paths__grid:has(.path:hover) .path:not(:hover) { opacity: 0.65; }

.path__tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
}

.path h2 {
  font-size: var(--fs-1);
  color: #fff;
  margin: 10px 0 8px;
}

.path p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-on-dark-mute);
  line-height: 1.6;
}

.path__go {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Hierarchy within the row. The three pathways were visually identical, which
   made the grid a menu rather than a recommendation. The donor card now reads
   first and the member card reads as utility — the ordering does the work, and
   the weight confirms it. */
.path--lead {
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2) 60%);
  border-color: var(--gold);
}

.path--lead .path h2,
.path--lead h2 { font-size: var(--fs-2); }

.path--utility {
  background: transparent;
  border-color: rgba(208,160,64,.18);
}

.path--utility .path__tag { color: var(--text-on-dark-mute); }
.path--utility h2 { font-size: var(--fs-1); color: var(--text-on-dark); }
.path--utility:hover { border-color: var(--gold); }

/* ---------- impact bento ---------- */

.impact {
  background: var(--ink);
  border-top: 1px solid var(--line-gold);
  padding-block: clamp(56px, 8vw, 96px);
  color: var(--text-on-dark);
}

.impact .section__head { color: var(--text-on-dark); }
.impact .section__head p { color: var(--text-on-dark-mute); }

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(148px, auto);
  gap: 14px;
}

.tile {
  background: var(--ink-2);
  border: 1px solid rgba(208,160,64,.22);
  border-radius: 6px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--t-micro) var(--ease-out);
}

.tile:hover { border-color: var(--line-gold); }

.tile--hero {
  grid-column: span 2;
  grid-row: span 2;
  background:
    linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border-color: var(--line-gold);
}

.tile--portal {
  grid-column: span 2;
  background: var(--ink-3);
  border-color: var(--line-gold);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tile__num {
  font-family: var(--display);
  font-size: var(--fs-3);
  font-weight: 620;
  color: var(--gold);
  line-height: 1;
}

.tile--hero .tile__num { font-size: clamp(3.4rem, 8vw, 6rem); }

.tile__label {
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}

.tile--portal h3 { font-size: var(--fs-1); color: #fff; }
.tile--portal p { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-on-dark-mute); }

/* ---------- generic section ---------- */

.section { padding-block: clamp(64px, 9vw, 120px); }
.section--paper { background: var(--paper); }
.section--tint { background: var(--paper-2); }

.section__head { max-width: 64ch; margin-bottom: clamp(36px, 5vw, 56px); }

.section__head h2 { font-size: var(--fs-3); }

.section__head p {
  margin: 18px 0 0;
  font-size: var(--fs-1);
  color: var(--text-mute);
  line-height: 1.7;
  max-width: 60ch;
}

/* ---------- story ---------- */

.story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.story__media { position: relative; }

.story__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  /* The height="693" HTML attribute otherwise stays fixed while width
     scales to the column, squeezing the photo. */
  height: auto;
  border-radius: 4px;
  box-shadow: 0 26px 64px -30px rgba(23,17,15,.6);
}

.story__media::after {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  z-index: 0;
}

.story h2 { font-size: var(--fs-3); }
.story p { color: var(--text-mute); line-height: 1.75; max-width: 58ch; }
.story .btn { margin-top: 12px; }

/* ---------- programs ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  padding: 30px 26px;
  transition:
    transform var(--t-micro) var(--ease-out),
    box-shadow var(--t-micro) var(--ease-out),
    border-top-color var(--t-micro) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-4px); }
}

.card:hover {
  box-shadow: 0 22px 48px -28px rgba(23,17,15,.45);
  border-top-color: var(--red);
}

.card h3 {
  font-size: 1.08rem;
  font-weight: 620;
  margin-bottom: 12px;
}

.card p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-mute);
  line-height: 1.7;
}

.card__num {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 620;
  color: var(--gold-deep);
  letter-spacing: 0.16em;
  display: block;
  margin-bottom: 14px;
}

/* ---------- featured event ---------- */

.event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--text-on-dark);
  border-radius: 6px;
  overflow: hidden;
}

.event__body { padding: clamp(34px, 4.5vw, 64px); }

.event__date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.event h3 {
  font-size: var(--fs-2);
  color: #fff;
  margin: 16px 0 0;
}

.event p {
  color: var(--text-on-dark-mute);
  line-height: 1.7;
  margin: 18px 0 30px;
  max-width: 50ch;
}

/* The forum artwork is a DESIGNED banner — headline, date, time, and four
   labelled panels laid out edge to edge. Cropping it to fill a half-width
   column (which is what object-fit: cover was doing) cut the panels off and
   sliced the title. It now sits whole, centred, with the panel colour showing
   around it. Options 2 and 3 already showed it whole; this is what the board
   was comparing against. */
.event__media {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.5vw, 28px);
  background: var(--ink-2);
}

/* Full opacity and full saturation. The .58 opacity and desaturation existed
   to push a decorative background photo behind text; nothing sits on top of it
   now, and dimming a promo the chapter designed to be read is the opposite of
   what it is for. */
.event__media img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* The left-edge fade blended a bleed image into the copy panel. With the promo
   now inset and whole, the gradient just laid a dark wash over its left third. */

/* ---------- faces mosaic ---------- */

/* Tile shapes now MATCH the photographs. Every picture GQ has is landscape
   (~1.3-1.4); the old grid forced them into a 4/5 portrait and two 1/1 squares,
   and object-fit: cover then ate the difference off the sides. Measured before
   the change: a fourteen-man lineup lost 55% of its width in the portrait tile
   and 25% in each square — the brothers standing at either end were simply not
   on the page. All tiles are landscape now and the worst case is under 10%.
   If a portrait photo ever arrives, give it its own portrait tile rather than
   putting a group shot in one. */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-large) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .mosaic figure:hover img { transform: scale(1.04); } }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(16,11,9,.88), transparent);
}
.m-a { grid-column: span 6; aspect-ratio: 16/9; }
.m-b { grid-column: span 3; aspect-ratio: 4/3; }
.m-c { grid-column: span 3; aspect-ratio: 4/3; }
.m-d { grid-column: span 2; aspect-ratio: 4/3; }
.m-e { grid-column: span 2; aspect-ratio: 4/3; }
.m-f { grid-column: span 2; aspect-ratio: 4/3; }
.m-g { grid-column: span 2; aspect-ratio: 4/3; }
.m-h { grid-column: span 2; aspect-ratio: 4/3; }
.m-i { grid-column: span 2; aspect-ratio: 4/3; }
@media (max-width: 900px) {
  .m-g, .m-h, .m-i { grid-column: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 520px) {
  .m-g, .m-h, .m-i { grid-column: span 2; aspect-ratio: 4/3; }
}

/* Photo band: three frames, one row, purely to give the eye something between
   the leadership grid and the ask. Decorative — alt is empty and the section is
   aria-hidden, so a screen reader is not made to sit through three unlabelled
   images. */
.photoband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: min(1200px, 100%); margin-inline: auto;
  padding: 0 var(--gutter) clamp(40px, 6vw, 72px);
  background: var(--paper);
}
.photoband img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 700px) { .photoband { grid-template-columns: 1fr 1fr; } .photoband img:last-child { display: none; } }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .m-a { grid-column: span 2; aspect-ratio: 16/9; }
  .m-b, .m-c, .m-d, .m-e, .m-f { grid-column: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 520px) {
  .m-b, .m-c, .m-d, .m-e, .m-f { grid-column: span 2; aspect-ratio: 4/3; }
}

.mosaic__note { margin-top: 20px; font-size: 0.86rem; font-style: italic; color: var(--text-mute); }

/* ---------- partners ---------- */

.partner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

@media (min-width: 860px) {
  .partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.partner__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
}

.partner__body h3 {
  font-size: var(--fs-2);
  margin: 10px 0 14px;
}

.partner__body p {
  color: var(--text-mute);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0;
}

/* ---------- leadership ---------- */

/* Six now, not five — Timothy Bodison is an Advisor on GQ's own leadership
   page and was missing from ours. A hard-coded 5-column grid would have left
   him alone on a second row. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.person {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 26px 22px;
  transition: box-shadow var(--t-micro) var(--ease-out);
}

.person:hover { box-shadow: 0 18px 40px -26px rgba(23,17,15,.4); }

.person__photo {
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--ink-2);
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__role {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.person h3 { font-size: 1.02rem; font-weight: 620; margin: 10px 0 8px; }

.person__tags {
  font-size: 0.78rem;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 10px;
}

.person p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text-mute);
  line-height: 1.65;
}

/* ---------- members strip ---------- */

.members {
  background: linear-gradient(rgba(20,14,11,.92), rgba(20,14,11,.92)), var(--ink-3);
  color: var(--text-on-dark);
  border-block: 1px solid var(--line-gold);
  padding-block: clamp(52px, 7vw, 88px);
}

.members__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.members h2 { font-size: var(--fs-2); color: #fff; }

.members p {
  margin: 14px 0 0;
  color: var(--text-on-dark-mute);
  max-width: 52ch;
}

.members__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- support ---------- */

.support { text-align: center; }
.support .section__head { margin-inline: auto; text-align: center; }
.support .section__head p { margin-inline: auto; }

.support__stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  margin-bottom: 40px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.support__stats strong {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-2);
  color: var(--gold-deep);
  font-weight: 620;
  letter-spacing: 0;
}

.support__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--text-on-dark-mute);
  padding-block: 60px 32px;
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.footer h4 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }

.footer a { text-decoration: none; transition: color var(--t-micro) var(--ease-out); }
.footer a:hover { color: var(--gold); }

.footer__mission {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text-on-dark);
  line-height: 1.5;
  max-width: 40ch;
  margin: 16px 0 0;
}

.footer__bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

/* ---------- sign-in page ---------- */

.signin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(208,160,64,.08) 0%, transparent 55%),
    var(--ink);
  color: var(--text-on-dark);
}

.signin__main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 9vh, 96px);
}

.signin__head { text-align: center; margin-bottom: clamp(38px, 5vw, 56px); }

.signin__crest { height: 96px; width: auto; margin: 0 auto 26px; }

.signin__head h1 { font-size: var(--fs-3); color: #fff; }

.signin__head p {
  margin: 16px auto 0;
  color: var(--text-on-dark-mute);
  max-width: 46ch;
}

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
}

.doors:has(.door:hover) .door:not(:hover) { opacity: 0.7; }

.door {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-gold);
  border-radius: 6px;
  padding: 38px 34px 34px;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--t-micro) var(--ease-out),
    background-color var(--t-micro) var(--ease-out),
    transform var(--t-micro) var(--ease-out),
    opacity var(--t-micro) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .door:hover { transform: translateY(-3px); }
}

.door:hover { border-color: var(--gold); background: var(--ink-3); }
.door:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.door__tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
}

.door h2 { font-size: var(--fs-2); color: #fff; margin: 14px 0 12px; }

.door p {
  margin: 0 0 26px;
  color: var(--text-on-dark-mute);
  font-size: 0.94rem;
  line-height: 1.7;
  flex: 1;
}

.door__how {
  font-size: 0.8rem;
  color: var(--text-on-dark-mute);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 16px;
  margin-bottom: 22px;
}

.door__how strong { color: var(--gold); font-weight: 600; }

.door .btn { width: 100%; }

.signin__foot {
  text-align: center;
  padding-block: 26px;
  font-size: 0.85rem;
  color: var(--text-on-dark-mute);
  border-top: 1px solid rgba(255,255,255,.10);
}

.signin__foot a { color: var(--gold); }

/* ---------- scroll-driven reveals (pure enhancement) ----------
   Base state above is fully visible. Only when BOTH scroll timelines are
   supported AND the user allows motion do we attach a view() timeline.
   animation-range completes the reveal by 35% into the viewport, and
   fill-mode keeps the settled state. Fast scrollers see settled content. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes reveal-up {
  from { opacity: 0.25; transform: translateY(22px); }
  to   { opacity: 1;    transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .story { grid-template-columns: 1fr; }
  .story__media::after { display: none; }
  .event { grid-template-columns: 1fr; }
  .event__media { min-height: 220px; order: -1; }
  .event__media::after {
    background: linear-gradient(to top, var(--ink) 0%, transparent 55%);
  }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--hero { grid-column: span 2; grid-row: span 1; }
  .tile--portal { grid-column: span 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Collapse nav to hamburger before it can collide with the wordmark. */
@media (max-width: 1000px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-gold);
    box-shadow: 0 22px 40px -18px rgba(0,0,0,.8);
    padding: 8px var(--gutter) 20px;
    display: none;
  }

  .nav[data-open='true'] { display: flex; }

  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }

  .nav a:hover { border-bottom-color: rgba(255,255,255,.09); }

  .nav-toggle { display: block; order: 3; }
  .header__inner { gap: 14px; }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }

  .brand img { height: 34px; }
  .brand__logo { height: 52px; }
  .brand__name { font-size: 0.74rem; }
  .brand__since { display: none; }

  .header__inner { gap: 10px; }
  .header .btn { padding: 10px 13px; font-size: 0.66rem; }

  .hero { min-height: auto; }
  .hero__scrim {
    background: linear-gradient(to top, rgba(16,11,9,.95) 12%, rgba(16,11,9,.72) 58%, rgba(16,11,9,.55) 100%);
  }
  .hero__actions .btn { flex: 1 1 100%; }

  .paths__grid { grid-template-columns: 1fr; }
  .members__inner { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile--hero, .tile--portal { grid-column: span 1; }
  .tile--portal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .people { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .people { grid-template-columns: 1fr; }
  .brand img { height: 34px; }
  .brand__logo { height: 42px; }
  .brand { gap: 9px; }
  /* Two CTAs + lockup + menu is the budget at phone width. */
  .brand__name, .brand__since { display: none; }
  .header__inner { gap: 8px; }
  /* 44px minimum. These rendered at 37px (buttons) and 34px (menu) — under the
     touch-target floor, on a phone, on the Donate control. Height is set
     directly rather than through padding so the two CTAs and the menu align on
     a single row regardless of their font metrics. */
  .header .btn {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 14px;
    white-space: nowrap;
    font-size: 0.63rem; letter-spacing: 0.05em;
  }
  .nav-toggle { width: 44px; min-height: 44px; }
}

/* ---------- leader detail dialog ---------- */
/* Native <dialog>: the browser supplies focus trapping, Esc, inertness of the
   page behind, and a real top layer. A hand-rolled overlay gets all four wrong. */
.person__open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: inherit; position: relative;
}
.person__open:focus-visible { outline: 3px solid var(--gold, #D0A040); outline-offset: 3px; }
.person__more {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(20,15,13,.78); color: #fff;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  opacity: 0; transition: opacity .2s;
}
.person__open:hover .person__more,
.person__open:focus-visible .person__more { opacity: 1; }
/* Touch has no hover, so the affordance must be permanent there or nobody
   discovers the bios exist. */
@media (hover: none) { .person__more { opacity: 1; } }

.person__photo--placeholder { display: grid; place-items: center; background: rgba(20,15,13,.06); }
.person__photo--placeholder img { width: 52%; height: auto; object-fit: contain; opacity: .85; }

.pdlg {
  width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 760px);
  padding: 0; border: 0; border-radius: 10px; overflow: hidden auto;
  background: #fff; color: #1C1713;
}
.pdlg::backdrop { background: rgba(12,9,8,.72); backdrop-filter: blur(3px); }
/* The strip above the portrait used to be bare dark brown — an accident of a
   floated close button, not a decision. It is now a proper gold header bar
   carrying the crest, so the panel reads as GQ's rather than as a gap. */
.pdlg__bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #D9B268, #C8992F);
  border-bottom: 1px solid rgba(20,15,13,.22);
}
/* The horizontal lockup is gold artwork on transparency, so on a gold bar the
   wordmark disappeared and only the crest survived. Crest plus ink text. */
.pdlg__lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pdlg__bar img { height: 30px; width: auto; display: block; flex: 0 0 auto; }
.pdlg__lockup span {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #241705; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdlg__close {
  width: 38px; height: 38px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20,15,13,.82); color: #fff; font-size: 1.35rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pdlg__close:hover { background: #17110F; }
/* Cap the portrait so the name and the bio are visible without scrolling
   inside the dialog. Uncapped, a square headshot filled the whole panel and the
   text — the entire reason the dialog exists — sat below its fold.
   object-position favours the upper third, where faces are. */
.pdlg__media { background: #17110F; }
.pdlg__media img {
  width: 100%; display: block;
  max-height: min(38vh, 300px); height: auto;
  object-fit: cover; object-position: center 22%;
}
.pdlg__media .pdlg__crest { width: 34%; max-height: none; margin: 32px auto; object-fit: contain; }
.pdlg__body { padding: clamp(20px, 4vw, 32px); }
.pdlg__role { margin: 0 0 6px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #B3242B; }
.pdlg__body h3 { margin: 0 0 8px; font-size: 1.5rem; }
.pdlg__tags { margin: 0 0 16px; font-size: .82rem; font-weight: 700; color: #A87B2E; }
.pdlg__body p:last-child { margin: 0; line-height: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  .pdlg[open] { animation: pdlgIn .22s cubic-bezier(.22,1,.36,1); }
  @keyframes pdlgIn { from { opacity: 0; transform: translateY(10px); } }
}

/* Leader cards carry a visible border on every option. Two of the four relied
   on background contrast alone, and where the card colour is close to the
   section colour the six cards read as one undifferentiated block. */
.person {
  border: 1px solid var(--line, rgba(28,23,19,.14));
  border-radius: 8px;
  padding: 14px 14px 18px;
  background: var(--card-bg, rgba(255,255,255,.55));
  transition: border-color .2s, box-shadow .2s;
}
.person:hover { border-color: var(--gold, #C8992F); box-shadow: 0 14px 34px -24px rgba(0,0,0,.5); }
/* "More" sits bottom-RIGHT of the portrait. */
.person__more { left: auto; right: 10px; }

/* Every photograph on the page opens full size. The board asked for it, and it
   is also the honest answer to a mosaic that necessarily crops: the cropped
   tile is the thumbnail, the lightbox is the whole frame. */
.zoomable { cursor: zoom-in; }
.lightbox {
  border: 0; padding: 0; background: transparent;
  width: min(1100px, 96vw); max-height: 94vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(8,6,5,.9); }
.lightbox img { width: 100%; height: auto; max-height: 84vh; object-fit: contain; display: block; border-radius: 6px; }
.lightbox__cap {
  margin: 10px 2px 0; color: #EFE9E0; font-size: .82rem;
  letter-spacing: .06em; text-align: center;
}
.lightbox__close {
  position: absolute; top: -14px; right: -6px;
  width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: #C8992F; color: #17110F; font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__inner { position: relative; }

/* ---------- shared photo frame ---------- */
/* Every content photograph gets the same edge treatment, so a picture reads as
   a deliberately placed object rather than as a coloured area that happens to
   end. Applied to hero media, story and section images, mosaic tiles, the photo
   band, partner and receipt artwork. Portraits inside leader cards keep
   their own frame via .person. */
.hero__media img,
.story__media img,
.story img,
.mosaic figure,
.photoband img,
.partner__media img,
.partner img,
.receipt img,
.event__media img {
  border: 1px solid var(--frame, rgba(28,23,19,.18));
  border-radius: 6px;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.55);
}
/* On dark grounds a light hairline reads better than a dark one. */
.hero__media img, .event__media img, .section--dark img, .photoband img {
  --frame: rgba(255,255,255,.22);
}