/* Arts Club of Washington Scholarship Competition — "The Screening Room"
   Dark cinematic canvas · poster typography · heritage gold as the glow. */

:root {
  --screen: #0d0c0e;        /* the theater */
  --screen-2: #16141a;      /* raised surfaces */
  --screen-3: #1f1c24;      /* cards */
  --ink: #ece7dd;           /* light on dark */
  --dim: #a8a198;           /* secondary text (raised 2026-08-04, T5 mobile readability) */
  --gold: #e0b44e;          /* marquee gold — the one electric accent */
  --gold-deep: #9c7c2c;
  --accent: #8d7686;        /* charcoal plum lifted for dark ground */
  --oxblood: #a44b54;
  --oxblood-text: #cf7680; /* AA-passing tint for oxblood TEXT on dark (2026-08-04 a11y) */
  --line: #2c2833;
  --frame: 2px solid var(--gold);
  /* burnished gold-leaf ramp — quoted from the Monroe House parlor frames */
  --gilt-hi: #e7c878;
  --gilt: #c9a44f;
  --gilt-mid: #a8842f;
  --gilt-shade: #7a5f22;
}

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-var.woff2") format("woff2");
  font-weight: 200 700; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--screen);
  color: var(--ink);
  line-height: 1.72;
  font-size: 19px;
  overflow-x: hidden;
}

/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-weight: 600; text-transform: uppercase; line-height: 1.02;
  letter-spacing: .015em;
}
/* balance heading rag / avoid widows where supported (safe no-op fallback) */
h1, h2, h3 { text-wrap: balance; }
.hero-sub, .notify p { text-wrap: pretty; }
h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: .5em; }
h3 { font-size: 1.15rem; letter-spacing: .08em; margin-bottom: .4em; }
a { color: var(--gold); }
img { max-width: 100%; display: block; }

.kicker {
  font-family: Arial, sans-serif; font-size: 1rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2em;
}
/* tighten kicker tracking so nbsp lockups fit (tablet + phone) */
@media (max-width: 900px) {
  .kicker { letter-spacing: .12em; }
}
@media (max-width: 480px) {
  .kicker { letter-spacing: .1em; }
}
.center { text-align: center; }
.fine { font-size: 1rem; color: var(--dim); }
/* portrait captions (history page) read as captions, not body copy */
.ph-caption { font-size: .88rem; line-height: 1.5; margin-top: .6rem; letter-spacing: .01em; }

/* --- nav --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .65rem 1.5rem;
  background: rgba(13, 12, 14, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-mark img { height: 54px; width: auto; }
.nav-links { margin-left: auto; display: flex; flex-wrap: nowrap; gap: .85rem; align-items: center; }
.nav-links a {
  font-family: Arial, sans-serif; font-size: 1rem; letter-spacing: .1em;
  white-space: nowrap;
  text-transform: uppercase; text-decoration: none; color: var(--dim);
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-toggle { display: none; }

/* --- cinematic hero --- */
.hero {
  position: relative; overflow: hidden;
  min-height: 58vh; display: flex; align-items: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(201,162,72,.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(141,118,134,.14), transparent 60%),
    var(--screen);
}
.hero-tall { min-height: 92vh; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.06);
  animation: drift 38s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.4%, -1.2%); }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,9,11,.985) 42%, rgba(10,9,11,.8) 70%, rgba(10,9,11,.92));
}
.hero-photo .hero-veil { opacity: .6; }
/* text on the right when the photo's subject sits left */
.hero-text-right .hero-bg::after {
  background: linear-gradient(260deg, rgba(10,9,11,.985) 42%, rgba(10,9,11,.8) 70%, rgba(10,9,11,.92));
}
.hero-text-right .hero-inner > * { margin-left: auto; }
@media (max-width: 860px) {
  .hero-text-right .hero-inner > * { margin-left: 0; }
  .hero-inner > * { max-width: none; }
  .hero-text-right .hero-bg::after {
    background: linear-gradient(180deg, rgba(10,9,11,.985) 30%, rgba(10,9,11,.88) 60%, rgba(10,9,11,.97));
  }
}
/* letterbox bars */
.hero::before, .hero::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: #000; z-index: 3;
}
.hero::before { top: 0; } .hero::after { bottom: 0; }
/* projector beam */
.hero-veil {
  position: absolute; inset: 0;
  background: conic-gradient(from 100deg at 8% 0%,
    transparent 0deg, rgba(236,231,221,.05) 12deg,
    rgba(201,162,72,.09) 22deg, transparent 34deg);
}
.hero-inner {
  position: relative; z-index: 4;
  padding: 5.5rem 2rem 4.5rem;
  max-width: 1160px; margin: 0 auto; width: 100%;
}
/* Keep type in the scrimmed safe column so it never rides the subject. */
.hero-inner > * { max-width: 560px; }
.hero .kicker { color: var(--gold); }
.hero h1 {
  color: var(--ink);
  text-shadow: 0 0 60px rgba(201,162,72,.25);
  font-size: clamp(2.6rem, 6vw, 5rem);
}
/* Line-break hygiene: words wrap whole or not at all. break-word/anywhere
   is reserved for whitelisted long tokens (emails); qa_wordbreak.py gates. */
h1, h2, h3 { overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.hero-split h1 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
.hero-sub { margin-top: 1.4rem; font-size: 1.2rem; color: var(--dim); line-height: 1.55; }
.hero-cta { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* foil marquee word */
.foil {
  background: linear-gradient(168deg, #f0d48a 0%, #e0b44e 28%, #a37f2e 52%, #e8c465 74%, #c69a3d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}

/* --- split hero: type panel + clean photo panel (no scrim over subjects) --- */
/* Photo column is wider + landscape-shaped so cover-fit doesn't side-crop a
   1.35:1 crew shot into a tall portrait hole (Scott 2026-07-26 "crunched").
   Was 46/54 + min-height:88vh → panel AR ~0.89; people looked squeezed. */
.hero-split {
  /* photo column landscape; optional full-width CTA bar on row 2 */
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  grid-template-rows: auto auto;
  align-items: stretch;
}
.hero-split.hero-tall { min-height: 0; }
.hero-panel-type { grid-column: 1; grid-row: 1; }
.hero-panel-photo-col { grid-column: 2; grid-row: 1; }
.hero-cta-bar {
  grid-column: 1 / -1; grid-row: 2;
  border-top: 1px solid var(--line);
  background: var(--screen);
  padding: .85rem 1.5rem;
}
.hero-panel-type {
  /* height:0 + min-height:100% = type cannot inflate the row; photo's
     aspect-ratio owns the hero height (stops landscape→portrait crunch) */
  position: relative; display: flex; align-items: center; overflow: hidden;
  height: 0; min-height: 100%;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(201,162,72,.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(141,118,134,.14), transparent 60%),
    var(--screen);
}
.hero-texture {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  /* A gear texture is atmosphere, never content. The Judges clapperboard
     carries legible handwriting (scene / take / date / operator name), and
     at .12 under a scrim that thinned to .35 it read as writing THROUGH the
     headline and standfirst. Keep the texture subliminal and never let the
     scrim thin enough for it to become readable. */
  opacity: .05; filter: saturate(.35) brightness(.6) blur(2px);
  pointer-events: none;
}
.hero-panel-type::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(10,9,11,.88), rgba(10,9,11,.78));
  pointer-events: none;
}
.hero-panel-type .hero-veil, .hero-panel-type .hero-inner { z-index: 2; }
.hero-split .hero-inner { max-width: 520px; padding: 2.4rem 2rem; margin: 0 auto; width: 100%; }
.hero-split .hero-inner > * { max-width: none; }
.hero-split .hero-sub { margin-top: 1rem; font-size: 1.1rem; }
.hero-split .hero-cta { margin-top: 1rem; }
/* type column is freer now that CTAs live in the full-width bar */
.hero-split h1 { font-size: clamp(2.2rem, 4.2vw, 4.2rem); line-height: 1.02; }
.hero-split .kicker { font-size: .82rem; }
/* photo column = image + credit UNDER it (never over a signature) */
.hero-panel-photo-col {
  display: flex; flex-direction: column; min-width: 0; background: var(--screen);
}
.hero-panel-photo {
  position: relative; margin: 0; overflow: hidden; min-height: 0;
  aspect-ratio: 4 / 3; width: 100%;
  border-bottom: 1px solid var(--line);
}
.hero-panel-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* credit under the frame — own row, clear of photographer signature */
.hero-credit {
  position: static; margin: 0; padding: .55rem .85rem .65rem;
  max-width: none; max-height: none;
  background: var(--screen-2);
  opacity: 1; line-height: 1.35; overflow: visible; white-space: normal;
  font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.hero-credit a {
  color: var(--dim); font-size: inherit; text-decoration: none;
}
.hero-credit a:hover { color: var(--gold); }
@media (max-width: 860px) {
  .hero-split, .hero-split.hero-tall {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-panel-type {
    grid-column: 1; grid-row: auto;
    height: auto; min-height: 0; /* undo desktop height:0 lock on stack */
  }
  .hero-panel-photo-col { grid-column: 1; grid-row: auto; }
  .hero-cta-bar { grid-column: 1; grid-row: auto; }
  .hero-split .hero-inner { padding: 3rem 1.4rem 2.4rem; }
  .hero-panel-photo {
    aspect-ratio: 4 / 3; min-height: 0; height: auto; max-height: none;
  }
  .hero-credit { padding: .45rem 1rem .55rem; font-size: 10px; }
}

/* film leader countdown circle */
.leader {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 260px; height: 260px; z-index: 2; opacity: .85; pointer-events: none;
}
/* split hero: leader lives on the photo panel, TOP-RIGHT and prominent
   (2026-07-23 Scott direction) — clear of the H1/type panel at every width
   and clear of the photo subjects' head boxes (QA-gated in qa_alignment) */
.hero-panel-photo .leader {
  right: 1.2rem; top: 1.2rem; bottom: auto; left: auto; transform: none;
  width: 210px; height: 210px; opacity: .92; z-index: 2;
  filter: drop-shadow(0 0 8px rgba(10,9,11,.7));
}
/* laptop: shrink so the circle clears left-group head boxes under cover-crop */
@media (max-width: 1100px) {
  .hero-panel-photo .leader { width: 140px; height: 140px; right: .9rem; top: .9rem; }
}
@media (max-width: 860px) {
  .hero-panel-photo .leader { width: 120px; height: 120px; right: .75rem; top: .75rem; }
}
/* only hide leaders still parked ON a photo panel — CTA-cluster leader stays */
@media (max-width: 1000px) { .hero-panel-photo .leader { display: none; } }
@media (prefers-reduced-motion: reduce) { #leader-burn { display: none; } }

/* CTA cluster — desktop: one row countdown | leader | buttons */
.hero-cta-bar { min-width: 0; max-width: 100%; box-sizing: border-box; }
.hero-cta-bar .hero-cta-cluster,
.hero-cta-cluster {
  margin-top: 0; display: flex; align-items: center; justify-content: flex-start;
  gap: 1rem 1.6rem; flex-wrap: nowrap; min-width: 0; width: 100%;
  max-width: 100%; box-sizing: border-box;
}
.hero-cta-cluster .clock-inline {
  margin-top: 0; flex: 0 1 auto; min-width: 0; max-width: 100%;
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: .7rem;
}
.hero-cta-cluster .clock-inline > div {
  display: flex; flex-direction: row; align-items: baseline; gap: .22rem;
  text-align: left; white-space: nowrap; flex: 0 0 auto;
}
.hero-cta-cluster .clock-inline b {
  display: inline; font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.hero-cta-cluster .clock-inline span {
  font-size: .7rem; letter-spacing: .14em;
}
.hero-cta-cluster .clock-until { margin-left: .25rem; }
.hero-cta-cluster .clock-until span {
  font-size: .68rem; letter-spacing: .12em; color: var(--dim);
}
.hero-cta-cluster .leader {
  position: static; transform: none; display: block; flex: 0 0 auto;
  width: 88px; height: 88px; opacity: .95; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(10,9,11,.65)); margin: 0;
}
.hero-cta-cluster .hero-cta {
  margin-top: 0; margin-left: auto; flex: 0 0 auto;
  display: flex; flex-wrap: nowrap; gap: .65rem; min-width: 0;
}
.hero-cta-cluster .btn {
  padding: .75rem 1.4rem; font-size: 1rem; letter-spacing: .14em;
  white-space: nowrap;
}
/* Below ~1100: wrap the bar (tablet still too tight for one row).
   Match .hero-cta-bar .hero-cta-cluster specificity so wrap wins. */
@media (max-width: 1100px) {
  .hero-cta-bar { padding: .8rem 1.2rem; }
  .hero-cta-bar .hero-cta-cluster,
  .hero-cta-cluster {
    flex-wrap: wrap; gap: .75rem 1.1rem;
    justify-content: center; align-items: center;
  }
  .hero-cta-cluster .clock-inline {
    flex: 1 1 100%; width: 100%; max-width: 100%;
    flex-wrap: wrap; justify-content: center; gap: .4rem .7rem;
  }
  .hero-cta-cluster .clock-inline b { font-size: clamp(1.2rem, 2.8vw, 1.7rem); }
  .hero-cta-cluster .clock-until {
    flex: 1 1 100%; margin-left: 0; text-align: center;
  }
  .hero-cta-cluster .leader { width: 72px; height: 72px; }
  .hero-cta-cluster .hero-cta {
    margin-left: 0; flex: 1 1 auto;
    justify-content: center; flex-wrap: wrap;
  }
}
@media (max-width: 860px) {
  .hero-cta-bar { padding: .75rem 1rem; }
  .hero-cta-cluster .clock-inline b {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }
  .hero-cta-cluster .clock-inline span,
  .hero-cta-cluster .clock-until span {
    font-size: .6rem; letter-spacing: .1em;
  }
  .hero-cta-cluster .leader { width: 56px; height: 56px; }
  /* flex-basis 100% forces buttons onto their own full-width row */
  .hero-cta-cluster .hero-cta {
    flex: 1 1 100%; width: 100%; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: .55rem;
  }
  .hero-cta-cluster .btn {
    flex: 0 0 auto; width: 100%; max-width: 100%;
    text-align: center; box-sizing: border-box;
    padding: .85rem 1rem; font-size: 1rem; letter-spacing: .12em;
  }
}
/* Absolute film-leader overlays collide with type on stacked heroes */
@media (max-width: 1000px) {
  .hero > .leader { display: none; }
}

/* deadline countdown */
.clock {
  margin-top: 2.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap;
  font-family: Arial, sans-serif;
}
.clock div { text-align: center; }
.clock b {
  display: block; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.clock span {
  font-size: 1rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}

.btn {
  display: inline-block; padding: 1rem 2.2rem;
  background: var(--gold); color: #14110a; text-decoration: none;
  font-family: Arial, sans-serif; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; font-size: 1rem;
  transition: all .25s;
}
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
.btn:hover::after { left: 130%; }
.btn:hover { background: var(--ink); box-shadow: 0 0 30px rgba(201,162,72,.4); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--gold); }
.btn-ghost:hover { background: rgba(201,162,72,.12); color: var(--gold); }
.text-link { text-decoration: none; }
.text-link:hover { color: var(--ink); }
.big-link { font-size: 1.25rem; }
/* long unbroken email addresses must wrap, never overflow, at 390 */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* --- ticker --- */
/* sits fully BELOW the hero (including credit under the photo) — never
   overlays the image frame. Smooth glide: JS sets --tick-duration from
   measured half-width so velocity is constant px/s; CSS only transforms. */
.ticker {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--screen-2); padding: .7rem 0; position: relative; z-index: 1;
  margin: 0; flex-shrink: 0;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none;
}
.ticker::before {
  left: 0; background: linear-gradient(90deg, var(--screen-2), transparent);
}
.ticker::after {
  right: 0; background: linear-gradient(270deg, var(--screen-2), transparent);
}
.ticker-track {
  display: flex; flex-wrap: nowrap; white-space: nowrap; width: max-content;
  gap: 0; /* CRITICAL: gap breaks -50% seam */
  animation: tick var(--tick-duration, 48s) linear infinite;
  will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
  font-family: Arial, sans-serif; font-size: .92rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.ticker-track > span {
  flex: 0 0 auto; padding-right: 2.5rem; box-sizing: content-box;
}
@keyframes tick {
  from { transform: translate3d(0, 0, 0); }
  /* JS sets --tick-shift to a whole-pixel half-width; the -50% fallback
     lands on fractional pixels and made the loop seam visibly jag. */
  to { transform: translate3d(var(--tick-shift, -50%), 0, 0); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* --- sections --- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 5rem 2rem; }
.band { background: var(--screen-2); max-width: none; }
.band > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
section.band { padding: 5rem 2rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.two-col > * { min-width: 0; }
a[href^="mailto:"], .big-link { overflow-wrap: anywhere; }

/* emblem showcase: glow frame */
.emblem-lg {
  max-width: 300px; margin: 0 auto; padding: 2.4rem;
  background: #f6f1e7;
  /* gilt gallery frame — same Monroe-parlor moulding as the committee plate */
  border: 8px solid transparent;
  border-image: linear-gradient(137deg,
    var(--gilt-shade) 0%, var(--gilt) 16%, var(--gilt-hi) 32%,
    var(--gilt-mid) 50%, var(--gilt-hi) 68%, var(--gilt) 84%,
    var(--gilt-shade) 100%) 1;
  box-shadow:
    inset 0 0 0 1px rgba(122,95,34,.7),
    inset 0 0 0 5px #f6f1e7,
    inset 0 0 0 6px rgba(201,164,79,.5),
    inset 0 3px 10px rgba(60,44,16,.22),
    0 0 0 1px rgba(74,57,20,.85),
    0 24px 50px rgba(0,0,0,.6),
    0 0 60px rgba(201,162,72,.14);
  position: relative;
}
.emblem-lg::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(var(--gilt), var(--gilt)) top left / 11px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top left / 1px 11px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top right / 11px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top right / 1px 11px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom left / 11px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom left / 1px 11px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom right / 11px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom right / 1px 11px no-repeat;
}
.emblem-lg::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -46px; height: 46px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(224,180,78,.18), transparent 75%);
  pointer-events: none;
}

/* Optional ornate gallery frame (slim double-fillet gold).
   Kept OFF by default — enable via body.frame-ornate for A/B review.
   2026-07-23 verdict: do not ship as default (wall density tips theme-park);
   see public/gilt-frame-trial.css + site/qa-gilt-frame/ before/after shots.
   Screenshots: site/qa-frame-options/ */
body.frame-ornate .emblem-lg,
body.frame-ornate .poster-plate,
body.frame-ornate .foot-plate {
  border: 1px solid #c9a248;
  outline: 3px solid #2a2430;
  outline-offset: -8px;
  box-shadow:
    inset 0 0 0 1px rgba(201,162,72,.85),
    inset 0 0 0 5px #f6f1e7,
    inset 0 0 0 6px rgba(168,132,52,.7),
    0 18px 40px rgba(0,0,0,.55);
}
body.frame-ornate .emblem-lg::after,
body.frame-ornate .poster-plate::after,
body.frame-ornate .foot-plate::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(201,162,72,.35);
}
body.frame-ornate .poster-plate,
body.frame-ornate .foot-plate { position: relative; }
.ph { border: 1px solid var(--line); filter: saturate(.65) contrast(1.05); }

/* --- history portraits: hung, not pasted ---
   Anna Bartsch-Dunne and Jane Work are the two people this program is
   built on. At full column width their scans read as slabs of archive;
   framed and sized like pictures on the Monroe-parlor wall they read as
   portraits. Same gilt moulding as the committee door plate. */
.portrait { max-width: 340px; margin: 0 auto; }
.portrait img {
  display: block; width: 100%; height: auto;
  border: 7px solid transparent;
  border-image: linear-gradient(137deg,
    var(--gilt-shade) 0%, var(--gilt) 16%, var(--gilt-hi) 32%,
    var(--gilt-mid) 50%, var(--gilt-hi) 68%, var(--gilt) 84%,
    var(--gilt-shade) 100%) 1;
  box-shadow:
    inset 0 0 0 1px rgba(122, 95, 34, .7),
    0 0 0 1px rgba(74, 57, 20, .85),
    0 16px 34px rgba(0, 0, 0, .45);
  /* portraits keep more of their own tone than the reportage grade */
  filter: saturate(.78) contrast(1.03);
}
.portrait .ph-caption { text-align: center; margin-top: .9rem; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 2rem 0 1rem; }
.card {
  background: var(--screen-3); border: 1px solid var(--line);
  padding: 2rem 1.6rem; border-top: 3px solid var(--gold);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  border-color: rgba(224,180,78,.35);
}
.card .big { font-size: 1.45rem; color: var(--gold); margin-top: .4rem; font-family: Arial, sans-serif; font-weight: 700; }

.rules { padding-left: 1.2rem; }
.rules li { margin-bottom: .7rem; }

.crit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; margin: 2rem auto; }
.crit-grid > div { border-left: 3px solid var(--gold); padding-left: 1rem; }
.crit-grid h3 { color: var(--ink); font-size: 1.1rem; }
.crit-grid p { font-size: 1.05rem; color: var(--dim); }

/* dates */
/* horizontal margins must stay auto so .band > * centering isn't defeated */
.dates-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2.2rem auto 1.2rem; }
.date-chip {
  background: var(--screen-3); border: 1px solid var(--line);
  padding: 1.1rem 1.5rem; min-width: 210px; text-align: center;
}
.date-chip span {
  display: block; color: var(--gold); font-family: Arial, sans-serif;
  font-weight: 700; font-size: 1rem; letter-spacing: .06em; margin-bottom: .2rem;
}
.date-chip.tbc::after { content: " \2022 proposed"; font-size: 1rem; color: var(--oxblood); letter-spacing: .1em; }

.timeline { max-width: 760px; margin: 1rem auto 2.5rem; }
.tl-row {
  display: grid; grid-template-columns: 220px 30px 1fr; gap: .8rem;
  align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
.tl-date { color: var(--gold); text-align: right; font-family: Arial, sans-serif; font-weight: 700; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); justify-self: center; align-self: center; box-shadow: 0 0 12px rgba(201,162,72,.6); }
.tl-row.tbc .tl-dot { background: transparent; border: 2px solid var(--gold); box-shadow: none; }
.tl-tag { display: block; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* storyboard steps: 16:9 frames */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.steps li {
  counter-increment: step; position: relative;
  background: var(--screen-3); border: 1px solid var(--line);
  aspect-ratio: 16/8; padding: 1.8rem 1.8rem 1.8rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.steps li::before {
  content: "0" counter(step);
  position: absolute; right: .6rem; top: -1.4rem;
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; font-weight: 600;
  font-size: 7rem; color: transparent;
  -webkit-text-stroke: 1px rgba(201,162,72,.35);
  line-height: 1;
}
.steps li::after {
  content: "REC \25CF"; position: absolute; left: 1.2rem; top: .9rem;
  font-family: Arial, sans-serif; font-size: 1rem; letter-spacing: .22em;
  color: var(--oxblood);
}
.steps h3 { color: var(--gold); margin-top: 1rem; }
.steps p { font-size: 1.05rem; color: var(--dim); }

/* policy */
.policy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pol { padding: 2.4rem; background: var(--screen-3); border: 1px solid var(--line); }
.pol.ok { border-top: 4px solid #6d9b7c; }
.pol.no { border-top: 4px solid var(--oxblood); }
.pol h3 { letter-spacing: .2em; font-size: 1rem; margin-bottom: 1.1rem; }
.pol.ok h3 { color: #6d9b7c; }
.pol.no h3 { color: var(--oxblood-text); }
.pol ul { padding-left: 1.1rem; }
.pol li { margin-bottom: .6rem; }

/* judges */
.judges-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 2rem 0; }
.judge { text-align: center; }
.judge-frame {
  border: 1px solid var(--gold); padding: 2.6rem;
  aspect-ratio: 3/3.6; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(224,180,78,.14), transparent 65%),
    var(--screen-3);
  box-shadow: inset 0 -30px 50px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.4);
}
.judge-frame img { opacity: .2; max-width: 65%; filter: invert(80%) sepia(30%) saturate(400%); }
.judge-q {
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; font-weight: 600;
  font-size: 5.5rem; color: transparent;
  -webkit-text-stroke: 1.5px rgba(201,162,72,.4);
}
.judge h3 { margin-top: 1.1rem; color: var(--gold); }

/* faq */
.faq { max-width: 800px; }
.faq dt {
  color: var(--gold); font-size: 1.05rem; margin-top: 1.1rem;
  font-family: Arial, sans-serif; font-weight: 700; cursor: pointer;
  padding: .55rem 2rem .55rem 0; position: relative; user-select: none;
  border-bottom: 1px solid var(--line); transition: color .2s;
}
.faq dt:hover, .faq dt:focus-visible { color: var(--ink); }
/* the real <button> injected by site.js inherits the dt's look */
.faq .faq-q {
  all: unset; display: block; width: 100%; box-sizing: border-box;
  cursor: pointer; font: inherit; color: inherit;
}
.faq .faq-q:hover, .faq .faq-q:focus-visible { color: var(--ink); }
.faq .faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq dt::after {
  /* fixed square, inset from the edge: the 45° open-rotation's bounding box
     must stay inside the dt (rotated overflow trips the alignment QA gate) */
  content: "+"; position: absolute; right: .45rem; top: 50%;
  width: 1.1em; height: 1.1em; line-height: 1.05; text-align: center;
  transform: translateY(-50%); font-size: 1.3rem; font-weight: 400;
  color: var(--gold); transition: transform .25s;
}
.faq dt.open::after { transform: translateY(-50%) rotate(45deg); }
.faq dd {
  margin: 0; color: var(--dim); overflow: hidden;
  max-height: 0; opacity: 0; padding: 0;
  transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
}
.faq dt.open + dd { max-height: 260px; opacity: 1; padding: .7rem 0 1.1rem; border-bottom: 1px solid var(--line); }

/* downloads / placeholders */
.dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 2rem; }
.dl-card {
  background: var(--screen-3); border: 1px solid var(--line);
  padding: 2rem; text-align: center;
}
.dl-card img { height: 100px; margin: 0 auto 1.2rem; background: #f6f1e7; padding: .7rem; }
.dl-type {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 92px; margin: 0 auto 1.2rem;
  border: 1px solid var(--gold); border-top-width: 14px;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: .18em; color: var(--gold);
}
a.dl-card { display: block; color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
a.dl-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.dl-meta {
  display: inline-block; margin-top: 1.1rem; padding: .35rem 1rem;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: Arial, sans-serif; font-size: 1rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.ph-tag {
  display: inline-block; margin-top: 1.1rem; padding: .35rem 1rem;
  border: 1px dashed var(--gold); color: var(--gold);
  font-family: Arial, sans-serif; font-size: 1rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.placeholder-block {
  text-align: center; border: 1px dashed var(--gold);
  padding: 3.8rem 2rem; background: var(--screen-2);
}

/* facts / listing */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; margin-top: 1.5rem; }
.facts > div { background: var(--screen-3); border: 1px solid var(--line); padding: 1.7rem; border-top: 3px solid var(--gold); min-width: 0; }
.facts h3 { color: var(--gold); }
.listing {
  background: var(--screen-3); border-left: 4px solid var(--gold);
  padding: 1.9rem 2.1rem; font-style: italic; max-width: 840px; color: var(--dim);
}

/* universities — explicit light-on-dark so cards never read as a black void
   (tall .reveal wraps + IO threshold used to leave this section at opacity:0) */
.juris {
  margin-top: 3.2rem; color: var(--ink);
  border-bottom: 2px solid var(--gold); padding-bottom: .4rem;
}
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.uni {
  background: #24212b; border: 1px solid #3a3542; padding: 1.3rem 1.5rem;
  transition: border-color .2s; overflow: hidden; color: var(--ink);
}
.uni-tone { display: flex; height: 5px; margin: -1.3rem -1.5rem 1.1rem; }
.uni-tone i { flex: 1; }
.uni-tone-neutral i { background: var(--cream, #e8e3d5); opacity: .35; }
.uni:hover { border-color: var(--gold); }
.uni h3 {
  font-size: 1.15rem; color: #f2ede4 !important; text-transform: none;
  letter-spacing: 0; font-family: Georgia, serif; font-weight: 600;
}
.uni p { font-size: 1rem; color: #b7b0a6; }
.uni p.fine { color: #9f978c; }
/* never hide the invited list behind a stuck reveal animation */
.uni-grid, .juris, .uni { opacity: 1 !important; transform: none !important; }

/* film-strip divider */
.filmstrip {
  height: 26px; margin-top: 4rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, var(--screen-3) 4px, transparent 5px) 0 0 / 26px 26px repeat-x,
    #060507;
}
footer { margin-top: 0 !important; }

/* poster wall (art forms) */
.poster-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.2rem; padding: 1rem 0;
}
.poster {
  text-align: center; padding: 1.8rem 1.4rem 1.4rem;
  background: var(--screen-3); border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.poster:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.poster-plate {
  display: block; margin: 0 auto 1.1rem; padding: .9rem; background: #f6f1e7;
  border: 4px solid #2a2430; outline: 1px solid rgba(201,162,72,.55); outline-offset: -7px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  max-width: 170px;
}
.poster h3 { text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }
.poster.current-form { border-color: var(--gold); box-shadow: 0 0 34px rgba(224,180,78,.22); }

/* footer */
footer { margin-top: 4rem; border-top: 1px solid var(--line); background: #0a090b; }
.foot-strip { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; padding: 2.6rem 2rem 0; }
.foot-strip img {
  height: 74px; width: auto; background: #f6f1e7; padding: .55rem;
  border: 1px solid var(--line); transition: transform .25s, box-shadow .25s;
}
.foot-strip img:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(201,162,72,.3); }
.foot-main { text-align: center; padding: 2.6rem 2rem 3.4rem; font-size: 1.05rem; color: var(--dim); line-height: 1.65; }
.foot-plate {
  display: inline-block; margin: 0 auto 1.4rem; padding: 1.3rem 1.6rem 1.1rem;
  background: #f6f1e7; border: 4px solid #2a2430;
  outline: 1px solid rgba(201,162,72,.55); outline-offset: -7px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.foot-mark { height: 96px; display: block; }
.foot-endorse { font-size: 1.2rem; color: var(--ink); margin-bottom: .6rem; }
.current-form { border-color: var(--gold); box-shadow: 0 0 30px rgba(201,162,72,.25); }
.foot-fund {
  margin: 2.2rem auto 0; max-width: 520px; padding: 1.6rem 1.2rem 0;
  border-top: 1px solid var(--line);
}
.foot-fund-lead { font-size: 1rem; color: var(--dim); margin: 0; }
.foot-fund-name {
  margin: .85rem 0 .7rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.35; color: var(--ink);
}
.foot-fund-close { font-size: 1rem; color: var(--dim); margin: 0; font-style: italic; }
.foot-nav {
  /* columns shrink to their text so the visible text mass is truly centered
     (equal 1fr tracks left the right track's whitespace pushing the block
     visually left of center).
     Track count MUST equal len(FOOT_GROUPS) in build_site.py — at 3 tracks
     the 2026-08-07 fourth group ("The Club's Site") was stranded on a
     second row under column one with the rest of the row empty. */
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 2.4rem 3.4rem; max-width: 1040px; margin: 2.6rem auto 0;
  text-align: left;
}
.foot-col h3 {
  font-family: Arial, sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 1rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0 0 .72rem; }
.foot-col a {
  color: var(--dim); text-decoration: none; font-size: 1.05rem;
  border-bottom: 1px solid transparent;
}
.foot-col a:hover { color: var(--ink); border-bottom-color: rgba(201,162,72,.45); }
.foot-dev { margin-top: 2.2rem; font-size: 1rem; opacity: .8; }
.foot-dev a { color: inherit; text-decoration: none; }

/* Members' Room — discreet gold-filleted crest plate (committee entrance) */
.committee-door-wrap {
  margin: 2.4rem auto 0;
  display: flex;
  justify-content: center;
}
.committee-door {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  border-radius: 2px;
}
.committee-door:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
.committee-door-plate {
  position: relative;
  display: block;
  padding: 1rem 1.2rem 0.85rem;
  background: #f6f1e7;
  /* gilt gallery frame — a nod to the gold-leaf frames in the Monroe House
     parlors: burnished (not flat) gold, double fillet, real moulding depth */
  border: 6px solid transparent;
  border-image: linear-gradient(137deg,
    var(--gilt-shade) 0%, var(--gilt) 16%, var(--gilt-hi) 32%,
    var(--gilt-mid) 50%, var(--gilt-hi) 68%, var(--gilt) 84%,
    var(--gilt-shade) 100%) 1;
  box-shadow:
    inset 0 0 0 1px rgba(122, 95, 34, 0.7),   /* inner gilt fillet */
    inset 0 0 0 4px #f6f1e7,                  /* cream mat */
    inset 0 0 0 5px rgba(201, 164, 79, 0.5),  /* second fillet */
    inset 0 2px 8px rgba(60, 44, 16, 0.25),   /* moulding depth */
    0 0 0 1px rgba(74, 57, 20, 0.85),         /* outer bead */
    0 12px 26px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* faintest corner ornament — short gilt miters, not flourishes */
.committee-door-plate::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  background:
    linear-gradient(var(--gilt), var(--gilt)) top left / 9px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top left / 1px 9px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top right / 9px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) top right / 1px 9px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom left / 9px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom left / 1px 9px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom right / 9px 1px no-repeat,
    linear-gradient(var(--gilt), var(--gilt)) bottom right / 1px 9px no-repeat;
}
.committee-door-plate img {
  /* committee skews older — the crest must read without squinting */
  height: 96px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
}
.committee-door-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(224, 180, 78, 0.0) 42%,
    rgba(224, 180, 78, 0.35) 50%,
    rgba(224, 180, 78, 0.0) 58%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 2;
}
.committee-door:hover .committee-door-plate,
.committee-door:focus-visible .committee-door-plate {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(146, 114, 42, 0.85),
    inset 0 0 0 4px #f6f1e7,
    inset 0 0 0 5px rgba(224, 180, 78, 0.6),
    inset 0 2px 8px rgba(60, 44, 16, 0.25),
    0 0 0 1px rgba(74, 57, 20, 0.85),
    0 16px 32px rgba(0, 0, 0, 0.55);
}
.committee-door:hover .committee-door-foil,
.committee-door:focus-visible .committee-door-foil {
  transform: translateX(120%);
}
.committee-door-engrave {
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 231, 221, 0.55);
  transition: color 0.3s ease;
}
.committee-door:hover .committee-door-engrave,
.committee-door:focus-visible .committee-door-engrave {
  color: var(--gold);
}

/* four tracks need ~1040px; pair them up before they crowd the gutters */
@media (max-width: 1080px) {
  .foot-nav { grid-template-columns: repeat(2, auto); max-width: 620px; }
}
@media (max-width: 760px) {
  /* single stacked column: centering the block on its widest line still
     leaves every shorter line ragged-left (~36px of ink sitting left of
     viewport center). Center the text itself so each line's ink is
     symmetric about the viewport axis. */
  .foot-nav { grid-template-columns: auto; gap: 1.8rem; max-width: none; text-align: center; }
}

/* nav brand lockup */
/* flex-shrink 0: without it flexbox squeezes the lockup box below its
   nowrap content (scrollWidth > clientWidth — qa_screenshots overflow) */
.nav-mark { display: flex; flex-shrink: 0; align-items: center; gap: .85rem; text-decoration: none; }
.nav-word {
  font-family: Georgia, serif; color: var(--ink); line-height: 1.25;
  font-size: 1.02rem; letter-spacing: .02em; white-space: nowrap;
}
.nav-word em {
  display: block; font-style: normal; font-family: Arial, sans-serif;
  font-size: .95rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-top: .15rem;
}
@media (max-width: 1360px) { .nav-word { display: none; } }
/* The lockup + 10 nav links + gutters need ~1553px. Showing the gold
   tagline from 1361 up made the lockup 529px wide instead of 96px, so
   1366-1557 - i.e. every common laptop: 1366, 1440, 1512, 1536 - scrolled
   sideways with CONTACT off screen. The club wordmark is the part worth
   keeping at those widths; the tagline waits until the row genuinely
   fits. Covered by qa_overflow.py, which now tests these widths. */
@media (max-width: 1559px) { .nav-word em { display: none; } }

/* home awards plaque */
.award-plaque {
  max-width: 340px; margin: 0 auto; text-align: center;
  border: 1px solid var(--gold); padding: 2.4rem 1.6rem;
  background: var(--screen-3); box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}
.award-plaque span {
  display: block; font-family: Arial, sans-serif; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.award-plaque b {
  display: block; font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 4.6rem; color: var(--gold); line-height: 1.1; margin: .3rem 0 .8rem;
}

/* proof grid */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.4rem; }
.proof {
  position: relative; background: var(--screen-3); border: 1px solid var(--line);
  padding: 2.2rem 2rem 2rem 2.2rem; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.proof:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  border-color: rgba(224,180,78,.35);
}
.proof-n {
  position: absolute; right: .8rem; top: -1.2rem;
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; font-weight: 600;
  font-size: 6rem; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(201,162,72,.3);
}
.proof h3 { color: var(--gold); max-width: 92%; overflow-wrap: normal; }
.proof p { font-size: 1.05rem; color: var(--dim); }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } }

/* big stat callouts */
.stats-wrap { padding: 3.2rem 2rem; }
.stats-band {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2rem;
  text-align: center;
}
.stats-band b {
  display: block; font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--gold); line-height: 1;
}
.stats-band span {
  font-family: Arial, sans-serif; font-size: 1rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}

/* full-bleed graded photo band — caption BELOW image, not over signature */
.photo-band {
  /* 16:9 bands (Scott go 2026-08-07): crops a 3:2 still ~16% instead of
     the old 2.58:1 band's ~42%. Height-capped on large screens — the
     image contracts and centers on the band background instead of
     growing past ~680px tall. The caption row must ride the SAME width,
     or its edges float off the photo on every desktop viewport, so both
     rules read this one token. */
  --band-w: min(100%, calc(16 / 9 * min(62vh, 680px)));
  margin: 0; position: relative; display: flex; flex-direction: column;
  background: var(--screen);
}
.photo-band img {
  aspect-ratio: 16 / 9;
  width: var(--band-w);
  margin-inline: auto;
  object-fit: cover; display: block;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.photo-band figcaption {
  position: static; display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  justify-content: space-between; align-items: baseline;
  max-width: none; max-height: none; margin: 0;
  width: var(--band-w); margin-inline: auto;
  padding: .45rem 0 .55rem;
  font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim);
  background: transparent; opacity: .72; line-height: 1.35;
  overflow: visible; white-space: normal;
}
.photo-band figcaption a { color: var(--dim); text-decoration: none; }
.photo-band figcaption a:hover { color: var(--gold); }
.photo-band-cap { color: var(--ink); opacity: .85; }
@media (max-width: 860px) {
  .photo-band figcaption { font-size: 10px; padding: .4rem 1rem .5rem; }
}

/* notify block */
.notify { text-align: center; max-width: 640px; margin: 0 auto; }
.notify p { color: var(--dim); margin-bottom: 1.8rem; }

/* sticky mobile CTA */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem;
  background: rgba(10, 9, 11, .96); border-top: 1px solid var(--gold);
  backdrop-filter: blur(8px);
}
.mobile-cta span {
  font-family: Arial, sans-serif; font-size: 1rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.mobile-cta .btn { padding: .75rem 1.4rem; font-size: 1rem; }
@media (max-width: 700px) {
  .mobile-cta { display: flex; }
  /* Clear sticky mobile CTA (~102px) so footer/content isn't covered */
  body { padding-bottom: 120px; }
}

/* accessibility */
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .hero-bg img { animation: none; transform: none; }
  .btn::after { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .faq dd, .card, .proof, .nav-links { transition: none; }
  .card:hover, .proof:hover { transform: none; }
  body::after { display: none; }
  .foot-strip img, .btn { transition: none; }
}

/* reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 860px) {
  .two-col, .policy-cols, .steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .cards-3 { grid-template-columns: 1fr; }
  .steps li { aspect-ratio: auto; min-height: 150px; }
  /* Fixed column + wrapping: nowrap in a max-content column overflowed
     the viewport on long dates ("Sunday, April 11, 2027 PROPOSED"),
     caught by Scott 2026-07-27; qa_overflow.py now guards this. */
  /* 150px fits the longest nbsp-joined date ("February 28, 2027") whole;
     the old 128px column relied on break-word splitting the date. */
  .tl-row { grid-template-columns: 150px 22px 1fr; }
  .tl-date { font-size: 16px; letter-spacing: 0; }
  .hero-tall { min-height: 72vh; }
}

/* condensed nav: 9 items (incl. Universities) need hamburger below ~1180 */
@media (max-width: 1180px) {
  .nav { padding: .6rem 1rem; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: none;
    font-size: 1.6rem; color: var(--ink); cursor: pointer;
  }
  .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10,9,11,.97); border-bottom: 1px solid var(--gold);
    backdrop-filter: blur(8px);
    flex-direction: column; padding: 1.2rem 1.5rem 1.6rem; gap: .9rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links a { font-size: 1.05rem; padding: .55rem 0; }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media (min-width: 1181px) {
  .nav-links { flex-wrap: nowrap; gap: .85rem; }
  .nav-links a { font-size: .92rem; letter-spacing: .08em; }
}

/* Faculty letter — typeset sheet on the page */
.faculty-letter { max-width: 720px; margin: 0 auto; }
.faculty-letter > h2 { margin-bottom: 1.4rem; }
.letter-sheet {
  background: #f7f2e8; color: #2a2420;
  border: 1px solid rgba(201,162,72,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 3rem);
  text-align: left;
}
.letter-sheet p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem; line-height: 1.7; color: #2a2420;
  margin: 0 0 1.15rem;
}
.letter-salutation { font-style: italic; }
.letter-audience {
  font-family: Arial, sans-serif !important;
  font-size: .95rem !important; color: #6a6258 !important;
  margin: 0 0 1.25rem !important;
}
.letter-sheet strong { font-weight: 700; color: #1f1a16; }
.letter-closing { margin-top: 1.6rem !important; margin-bottom: .35rem !important; }
.letter-sign {
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
  font-weight: 600; letter-spacing: .04em; text-transform: none;
  font-size: 1.15rem !important; margin-bottom: .15rem !important;
}
.letter-sign-title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important; font-style: italic;
  font-size: 1rem !important; letter-spacing: 0; color: #6a6258;
}
.letter-meta {
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important; color: #6a6258 !important; margin: 0 !important;
  overflow-wrap: anywhere; /* long email + domain must never overflow at 390 */
}
.letter-meta a { color: #6a6258; }
.letter-take { margin-top: 1.6rem; text-align: center; }

/* nine-artform story gallery (artforms.html) */
.af-gallery { display: grid; gap: 2.4rem; }
.af-card {
  display: grid; grid-template-columns: 240px 1fr; gap: 2.4rem;
  align-items: center; padding: 2.4rem;
  background: var(--screen-3); border: 1px solid var(--line);
  border-left: 5px solid var(--af, var(--line));
}
.af-plate {
  display: block; padding: 1.1rem; background: #f6f1e7;
  border: 4px solid #2a2430; outline: 1px solid rgba(201,162,72,.55);
  outline-offset: -7px; box-shadow: 0 10px 26px rgba(0,0,0,.55);
  justify-self: center; width: 100%; max-width: 210px; box-sizing: border-box;
}
.af-plate img { display: block; width: 100%; height: auto; }
.af-copy h2 { color: #fff; margin-bottom: .2em; }
.af-badge {
  color: var(--gold); font-family: Arial, sans-serif; font-size: 1rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .6rem;
}
.af-swatch { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.af-swatch span {
  width: 1rem; height: 1rem; background: var(--af);
  border: 1px solid rgba(255,255,255,.35); border-radius: 2px; flex: none;
}
.af-card.af-current {
  border-color: var(--gold); border-left-color: var(--gold);
  box-shadow: 0 0 34px rgba(224,180,78,.22);
}
@media (max-width: 760px) {
  .af-card { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.6rem; }
  .af-plate { max-width: 180px; }
}

/* ---- Notify opt-in form (T6, 2026-08-04) ---- */
.signup { max-width: 620px; }
.signup .role-toggle {
  display: inline-flex; border: 1px solid var(--line); margin: 1.2rem 0 1.4rem;
}
.signup .role-toggle button {
  font-family: Arial, sans-serif; font-size: .85rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .7rem 1.5rem; cursor: pointer;
  background: transparent; color: var(--dim); border: 0;
}
.signup .role-toggle button.on {
  background: var(--gold); color: #171410; font-weight: 700;
}
.signup .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
/* hidden must beat display:grid (role toggle swaps field sets) */
.signup [hidden], .signup-done[hidden], #signup-form[hidden] { display: none !important; }
.signup label {
  display: block; font-family: Arial, sans-serif; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin: 0 0 .35rem;
}
.signup .f { margin-bottom: 1rem; }
.signup input[type=email], .signup input[type=tel], .signup input[type=text],
.signup select {
  width: 100%; box-sizing: border-box; padding: .85rem .9rem;
  background: var(--screen-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  font-family: Georgia, serif; font-size: 1.05rem;
}
.signup input:focus, .signup select:focus {
  outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
.signup .consent {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; margin: 1.1rem 0 1.4rem; font-size: 1rem;
  color: var(--dim); line-height: 1.5;
}
.signup .consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--gold); }
.signup .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.signup .msg { margin-top: 1rem; font-size: 1.05rem; }
.signup .msg.err { color: var(--oxblood-text); }
.signup .msg.okk { color: var(--gold); }
.signup-done { border-left: 3px solid var(--gold); padding-left: 1.2rem; }
.signup-done h3 { color: var(--gold); }
@media (max-width: 640px) {
  .signup .grid2 { grid-template-columns: 1fr; }
}