/* ==========================================================================
   SHILPMUN 2026 Design System
   "Diplomatic Letterpress": the brochure's language translated to the web.
   Palette, typography and rules are locked to the SHILPMUN brand.
   ========================================================================== */

/* --- Horizon is a SHILPMUN branding face but is not a web font. If it is
   installed on the visitor's machine it is used automatically via local().
   To self-host it instead: drop Horizon.woff2 into assets/fonts/ and
   uncomment the url() line below. Montserrat carries the display role
   everywhere else, so nothing breaks if Horizon is absent. --------------- */
@font-face {
  font-family: 'Horizon';
  src: local('Horizon'), local('Horizon Regular'), local('Horizon-Regular');
  /* , url('../fonts/Horizon.woff2') format('woff2') */
  font-weight: 400 900;
  font-display: swap;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Brand */
  --navy: #18295b;
  --navy-deep: #0e1a3c;
  --navy-soft: #2c3d70;
  --red: #791f22;
  --red-bright: #99292d;
  /* --red-soft is only ever used on the navy bands, the footer and dark hover
     states. At its old #a8555a it sat at 2.7:1 against the band, so committee
     roles, award titles and footer headings were barely readable. 5.8:1. */
  --red-soft: #d0989d;
  /* Script faces have thin strokes, so signatures on dark need more headroom. */
  --script-light: #e8b4b8;

  /* Surfaces: the specified light-grey → white gradient */
  --bg-a: #d6d6d6;
  --bg-b: #ffffff;
  --paper: #fafafb;
  --paper-warm: #f2f2f4;

  /* Ink */
  --ink: #1b2648;
  --ink-mute: #4a5474;
  /* Was #8189a2, which only reached 3.3:1 on paper. Still the quietest ink in
     the ramp, now legible: 5.3:1. */
  --ink-faint: #5f6885;
  --on-dark: #eef0f5;
  --on-dark-mute: #a9b2ca;

  /* Lines */
  --rule: rgba(24, 41, 91, 0.2);
  --rule-strong: rgba(24, 41, 91, 0.42);
  --rule-red: rgba(121, 31, 34, 0.3);
  --rule-dark: rgba(238, 240, 245, 0.2);

  /* Type */
  --f-display: 'Horizon', 'Montserrat', 'Arial Narrow', sans-serif;
  --f-brand: 'Montserrat', 'Helvetica Neue', sans-serif;
  --f-script: 'Pinyon Script', 'Edwardian Script ITC', cursive;
  --f-agenda: 'Times New Roman', 'Tinos', 'Liberation Serif', serif;
  --f-body: 'Baskerville', 'Libre Baskerville', 'Baskerville Old Face', 'Hoefler Text', Georgia, serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --shell: 1280px;
  --shell-narrow: 880px;
  --sec-y: clamp(4.5rem, 11vw, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-plate: 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px -26px rgba(14, 26, 60, 0.5);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -30px rgba(14, 26, 60, 0.55);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: clamp(0.98rem, 0.9rem + 0.28vw, 1.075rem);
  line-height: 1.72;
  color: var(--ink);
  background: var(--bg-b);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* The specified background gradient + the brochure's archival watermark. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(168deg, var(--bg-a) 0%, #e6e6e8 34%, var(--bg-b) 78%, var(--bg-b) 100%);
}

/* The grade (greyscale, contrast, brightness, soft blur) is baked into the JPEG
   instead of being applied here. A fixed layer carrying both a filter and
   mix-blend-mode has to be re-blended against the page on every scrolled frame,
   which was the most expensive thing on the site. At 2.8% opacity the baked
   version is indistinguishable. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('../img/archive-wall.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.028;
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--navy); color: #fff; }

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

/* Fine paper grain.
   The inset only has to cover the largest step the keyframes translate by.
   Those percentages resolve against the element's own box, so at inset:-10%
   the widest move (4% of 120%) is 4.8% of the viewport and never exposes an
   edge. It used to sit at inset:-100%, i.e. a composited layer nine times the
   area of the viewport, which is what made scrolling expensive on phones. */
.grain {
  position: fixed;
  inset: -10%;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
  will-change: transform;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-2%, -3%); }
  33% { transform: translate(3%, -2%); }
  50% { transform: translate(-1%, 4%); }
  66% { transform: translate(2%, 2%); }
  83% { transform: translate(-3%, 1%); }
}

/* Decorative viewport frame, echoing the brochure's double border */
.frame {
  position: fixed;
  inset: 14px;
  z-index: 9980;
  pointer-events: none;
  border: 1px solid rgba(24, 41, 91, 0.14);
}
.frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(121, 31, 34, 0.1);
}
@media (max-width: 860px) { .frame { display: none; } }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}
/* Narrow sections cap their measure and stay centred in the page. */
.shell--narrow { width: min(100% - var(--gut) * 2, var(--shell)); }
.shell--narrow > * { max-width: var(--shell-narrow); margin-inline: auto; }

section { position: relative; }
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(3rem, 7vw, 6rem); }

.grid { display: grid; gap: clamp(1.5rem, 3.4vw, 3rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* ==========================================================================
   4. Typography
   ========================================================================== */
.eyebrow {
  font-family: var(--f-brand);
  font-size: clamp(0.6rem, 0.53rem + 0.28vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.5;
}
.eyebrow--red { color: var(--red); }
.eyebrow--light { color: var(--on-dark-mute); }

.display {
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -0.022em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--navy);
}

/* --- The signature two-tone masthead (brochure section headers) ----------
   Centred by default: the page reads as a symmetrical document plate.
   Add .masthead--left to anchor one to the left rail. */
.masthead {
  position: relative;
  display: block;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  line-height: 1;
  text-align: center;
}
.mh-bold {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(2.1rem, 1.1rem + 4.6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 0.86;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 0.04em;
}
.mh-sub {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(1rem, 0.6rem + 1.7vw, 1.9rem);
  letter-spacing: 0.02em;
  border-bottom: 3px solid var(--navy);
  width: fit-content;
  margin-top: 0.12em;
  margin-inline: auto;
  padding-bottom: 0.04em;
}
.mh-script {
  display: block;
  font-family: var(--f-script);
  color: var(--red);
  font-size: clamp(2.6rem, 1rem + 7.6vw, 7rem);
  line-height: 0.78;
  letter-spacing: 0.01em;
  margin-top: -0.2em;
  margin-left: 0;
  position: relative;
  z-index: 2;
  padding-bottom: 0.2em;
}
/* When a second bold line is present the script must clear it, because centred
   there is no horizontal offset to hide behind. */
.mh-sub + .mh-script { margin-top: 0.06em; }
/* Reversed order ("CARRYING THE / Legacy / FORWARD"): the small bold line now
   sits below the script. Pinyon Script has long descenders and a 0.78 line
   height, so the gap is left to the script's own padding-bottom rather than
   pulled tighter, which would run FORWARD into the tail of the "g" and "y". */
.mh-script + .mh-sub { margin-top: 0; }
/* Left-anchored mastheads keep the brochure's tight overlap, because the
   script is offset sideways and never covers the words underneath. */
.masthead--left .mh-script { margin-top: -0.44em; }
.masthead--left .mh-sub + .mh-script { margin-top: -0.44em; }
/* Single-line variant: "THE Recognition", "TAKE Your Seat", "WRITE To Us" */
.masthead--inline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0;
  row-gap: 0.1em;
}
.masthead--inline .mh-script {
  margin-top: 0;
  margin-left: -0.24em;
  line-height: 0.9;
}
@media (max-width: 560px) {
  .masthead--inline { display: block; }
  .masthead--inline .mh-script { margin-left: 0; margin-top: -0.3em; }
}

/* Opt-out: anchor a masthead to the left rail. */
.masthead--left { text-align: left; }
.masthead--left .mh-sub { margin-inline: 0; }
.masthead--left .mh-script { margin-left: clamp(1.5rem, 12vw, 9rem); }
.masthead--left.masthead--inline { justify-content: flex-start; }
.masthead--left.masthead--inline .mh-script { margin-left: -0.24em; }

/* Legacy alias: .masthead is centred by default now. */
.masthead--center { text-align: center; }
.masthead--light .mh-bold,
.masthead--light .mh-sub { color: var(--on-dark); border-bottom-color: var(--on-dark); }
.masthead--light .mh-script { color: var(--red-soft); }
.band--red .masthead--light .mh-script { color: #f2d6d8; }

/* Section rule under a masthead */
.rule {
  height: 2px;
  background: var(--navy);
  border: 0;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  transform-origin: left center;
}
.rule--red { background: var(--red); }
.rule--thin { height: 1px; background: var(--rule); }
.rule--light { background: var(--rule-dark); height: 1px; }

h1, h2, h3, h4 { font-family: var(--f-brand); color: var(--navy); font-weight: 800; line-height: 1.14; }

h3 {
  font-size: clamp(1.05rem, 0.94rem + 0.5vw, 1.3rem);
  letter-spacing: -0.005em;
}

.h-serif {
  font-family: var(--f-agenda);
  font-weight: 700;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: 0;
}

.lede {
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink);
}

/* --- Centred page rhythm -------------------------------------------------
   Section intros, button rows and notices centre under their masthead.
   Long-form prose keeps a left rag inside its centred column, because centring
   multi-line body copy is the fastest way to make text unreadable. */
.sec > .shell > .lede,
.sec--tight > .shell > .lede,
.page-head .lede {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.sec > .shell > .btn-row,
.sec--tight > .shell > .btn-row,
.page-head .btn-row { justify-content: center; }

.shell > .notice,
.shell--narrow > .notice { max-width: 78ch; margin-inline: auto; }

.crumb { justify-content: center; }

.prose { margin-inline: auto; }

.prose p + p { margin-top: 1.05em; }
.prose { text-align: justify; hyphens: auto; }
/* Justification opens rivers in a narrow measure, so rag right on small screens. */
@media (max-width: 760px) { .prose { text-align: left; hyphens: none; } }
.prose strong { color: var(--navy); font-weight: 700; }
.prose em { font-style: italic; }

.text-red { color: var(--red); }
.text-navy { color: var(--navy); }
.text-mute { color: var(--ink-mute); }
.script { font-family: var(--f-script); color: var(--red); }

/* Theme quote */
.theme-quote {
  font-family: var(--f-agenda);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 0.72rem + 1.5vw, 1.85rem);
  line-height: 1.42;
  color: var(--navy);
  letter-spacing: 0.002em;
}
.theme-quote .hl { color: var(--red); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--f-brand);
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.08em 1.9em;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.5s var(--ease);
}
.btn:hover { color: #fff; }
.btn:hover::before { transform: scaleY(1); transform-origin: top center; }
.btn .btn-arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--solid { background: var(--navy); color: #fff; }
.btn--solid::before { background: var(--red); }
.btn--solid:hover { border-color: var(--red); color: #fff; }

.btn--red { border-color: var(--red); color: var(--red); }
.btn--red::before { background: var(--red); }
.btn--red:hover { color: #fff; }

.btn--light { border-color: var(--on-dark); color: var(--on-dark); }
.btn--light::before { background: var(--on-dark); }
.btn--light:hover { color: var(--navy-deep); }

.btn--sm { padding: 0.85em 1.4em; font-size: 0.64rem; letter-spacing: 0.16em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-brand);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 0.3em;
  border-bottom: 1.5px solid var(--rule-red);
  transition: border-color 0.4s var(--ease), gap 0.4s var(--ease);
}
.link-arrow:hover { border-color: var(--red); gap: 0.95em; }

/* ==========================================================================
   6. Header / navigation
   ========================================================================== */
.masthead-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 400;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.masthead-bar.is-stuck {
  background: rgba(250, 250, 251, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--rule), 0 14px 32px -26px rgba(14, 26, 60, 0.6);
}
.masthead-bar.is-hidden { transform: translateY(-100%); }
/* backdrop-filter is deliberately not in this list: transitioning it makes the
   compositor re-blur the region behind the bar on every frame of the fade. */
.masthead-bar { transition-property: background, box-shadow, transform; }

/* Touch devices tend to be the ones that can least afford a full-width live
   blur. They get an opaque bar instead, which reads the same at a glance. */
@media (hover: none), (pointer: coarse) {
  .masthead-bar.is-stuck { backdrop-filter: none; background: rgba(250, 250, 251, 0.97); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
}

.nav-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(126px, 15vw, 186px);
  line-height: 0;
}
.nav-logo img { width: 100%; transition: opacity 0.4s var(--ease); }
.nav-logo .logo-light { position: absolute; inset: 0; opacity: 0; }
body.nav-open .nav-logo .logo-dark { opacity: 0; }
body.nav-open .nav-logo .logo-light { opacity: 1; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.7vw, 1.85rem);
  list-style: none;
}
.nav-links a {
  position: relative;
  font-family: var(--f-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  padding-block: 0.35em;
  transition: color 0.35s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after,
.nav-links a[aria-current='page']::after { transform: scaleX(1); transform-origin: left center; }
.nav-links a[aria-current='page'] { color: var(--red); }

.nav-cta { display: flex; align-items: center; gap: 0.9rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 460;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 9px;
  width: 26px;
  height: 1.6px;
  background: var(--navy);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.nav-open .nav-toggle span { background: var(--on-dark); }

/* The header creates its own stacking context, so it must out-rank the
   drawer while the drawer is open or the close button is unreachable. */
body.nav-open .masthead-bar {
  z-index: 470;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

/* Scroll progress hairline */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 500;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ten menu items at the full display size overflow a short phone, and a
     centre-aligned flex column clips its overflow at BOTH ends, which puts the
     first links out of reach. `safe` opts out of centring once it would
     overflow; the scroll is the belt to that pair of braces. */
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6rem var(--gut) 3rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.nav-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/emblem-light.png') no-repeat center right -18% / auto 78%;
  opacity: 0.07;
}
.nav-drawer ul { list-style: none; position: relative; }
.nav-drawer li { overflow: hidden; }
.nav-drawer a {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  padding-block: 0.08em;
  /* No transform transition here: GSAP owns transform on these links, and a
     CSS transition on the same property corrupts its tween values. */
  transition: color 0.35s var(--ease), padding-left 0.45s var(--ease);
}
.nav-drawer a:hover { color: var(--red-soft); padding-left: 12px; }
.nav-drawer .drawer-meta {
  position: relative;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  color: var(--on-dark-mute);
  font-family: var(--f-brand);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 2;
}
.nav-drawer .drawer-meta a { font-size: inherit; font-family: inherit; text-transform: none; letter-spacing: 0.04em; display: inline; }

@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
}
body.nav-open { overflow: hidden; }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6.5rem, 13vh, 8.5rem) clamp(5rem, 11vh, 7rem);
  overflow: hidden;
}
.hero-emblem {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(88vh, 86vw);
  translate: -50% -50%;
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
}
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-eyebrow { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.hero-eyebrow .sep { color: var(--red); margin-inline: 0.6em; }
.hero-eyebrow .b { color: var(--red); }

.hero-lockup {
  display: block;
  width: min(100%, 600px);
  margin-inline: auto;
  margin-bottom: clamp(1.4rem, 3.2vw, 2.3rem);
}
.hero-lockup img { width: 100%; height: auto; }
@media (max-width: 700px) { .hero-lockup { width: min(78%, 330px); } }

.hero-quote { max-width: 30ch; margin-inline: auto; }

.hero-meta {
  margin-top: clamp(2rem, 4.5vw, 3.2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  border-block: 1px solid var(--rule);
}
.hero-meta > div {
  padding: clamp(0.9rem, 2vw, 1.35rem) clamp(1.1rem, 3vw, 2.6rem);
  text-align: center;
  border-left: 1px solid var(--rule);
}
.hero-meta > div:first-child { border-left: 0; }
.hero-meta dt {
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5em;
}
.hero-meta dd {
  font-family: var(--f-brand);
  font-weight: 800;
  font-size: clamp(0.82rem, 0.74rem + 0.3vw, 1rem);
  letter-spacing: 0.02em;
  color: var(--navy);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .hero-meta > div { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--rule); }
  .hero-meta > div:nth-child(-n + 2) { border-top: 0; }
  .hero-meta > div:nth-child(even) { border-left: 1px solid var(--rule); }
}

.hero-actions { margin-top: clamp(2rem, 4vw, 2.8rem); justify-content: center; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.6rem);
  translate: -50% 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-brand);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue i {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--rule-strong), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 16px;
  background: var(--red);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-18px); }
  60%, 100% { transform: translateY(50px); }
}
@media (max-height: 720px) { .scroll-cue { display: none; } }

/* ==========================================================================
   8. Page banner (interior pages)
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: clamp(8rem, 17vh, 12rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
/* Centred watermark, so the banner is symmetrical rather than right-weighted. */
.page-head::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: min(60vw, 620px);
  aspect-ratio: 1.18;
  background: url('../img/emblem-navy.png') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.page-head > .shell { position: relative; z-index: 2; }
.crumb {
  display: flex;
  gap: 0.6em;
  font-family: var(--f-brand);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}
.crumb a { color: var(--navy); transition: color 0.3s var(--ease); }
.crumb a:hover { color: var(--red); }

/* ==========================================================================
   9. Plates, cards, stats
   ========================================================================== */
.plate {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--navy);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: var(--shadow-plate);
}
.plate::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.plate--red { border-color: var(--red); }
.plate--red::after { border-color: var(--rule-red); }

.card {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rule);
  padding: clamp(1.35rem, 2.8vw, 2.1rem);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease), background 0.55s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-lift);
}

/* Icon-led info rows (Know Your Conference) */
.info-row {
  display: grid;
  grid-template-columns: clamp(52px, 8vw, 78px) 1fr;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: start;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
}
.info-row:last-child { border-bottom: 1px solid var(--rule); }
.info-row .ico { color: var(--navy); }
.info-row .ico svg { width: 100%; height: auto; }
.info-row h3 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.05rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 0.98;
}
.info-row .val {
  font-family: var(--f-brand);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(0.94rem, 0.82rem + 0.55vw, 1.25rem);
  color: var(--red);
  letter-spacing: 0.005em;
  margin-top: 0.35em;
  line-height: 1.3;
}
.info-row .note { font-size: 0.9rem; color: var(--ink-mute); margin-top: 0.55em; line-height: 1.6; }

/* Stat strip (COMMITTEE HIGHLIGHTS / legacy figures) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats > div {
  text-align: center;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) 0.8rem;
  border-left: 1px solid var(--rule);
}
.stats > div:first-child { border-left: 0; }
.stat-v {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat-v.is-small { font-size: clamp(0.95rem, 0.8rem + 0.75vw, 1.35rem); letter-spacing: 0.03em; line-height: 1.25; }
.stat-l {
  margin-top: 0.7em;
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(odd) { border-left: 0; }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* ==========================================================================
   10. Committee cards
   ========================================================================== */
.cmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cmt {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.cmt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s var(--ease);
}
.cmt::after {
  content: '';
  position: absolute;
  right: -14%;
  bottom: -22%;
  width: 62%;
  aspect-ratio: 1.18;
  z-index: -1;
  background: url('../img/emblem-navy.png') no-repeat center / contain;
  opacity: 0.05;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.cmt:hover { transform: translateY(-5px); border-color: var(--navy); box-shadow: var(--shadow-lift); }
.cmt:hover::before { clip-path: inset(0 0 0 0); }
.cmt:hover::after {
  background-image: url('../img/emblem-light.png');
  opacity: 0.14;
  transform: rotate(-7deg) scale(1.06);
}

.cmt-abbr {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--navy);
  transition: color 0.5s var(--ease);
}
.cmt-prefix {
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75em;
  transition: color 0.5s var(--ease);
}
.cmt-name {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.7em;
  line-height: 1.45;
  transition: color 0.5s var(--ease);
}
.cmt-agenda {
  font-family: var(--f-agenda);
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--navy);
  margin-top: 1.15em;
  padding-top: 1.15em;
  border-top: 1px solid var(--rule);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.cmt-foot {
  margin-top: auto;
  padding-top: 1.4em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
.tag {
  font-family: var(--f-brand);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.42em 0.75em;
  border: 1px solid var(--rule-strong);
  color: var(--navy);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.tag--red { color: var(--red); border-color: var(--rule-red); }
.cmt-more {
  margin-left: auto;
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color 0.5s var(--ease), gap 0.4s var(--ease);
}
.cmt:hover .cmt-abbr,
.cmt:hover .cmt-agenda { color: var(--on-dark); }
.cmt:hover .cmt-prefix,
.cmt:hover .cmt-more { color: var(--red-soft); }
.cmt:hover .cmt-name { color: var(--on-dark-mute); }
.cmt:hover .cmt-agenda { border-color: var(--rule-dark); }
.cmt:hover .tag { color: var(--on-dark); border-color: var(--rule-dark); }
.cmt:hover .tag--red { color: var(--red-soft); }
.cmt:hover .cmt-more { gap: 0.95em; }

/* Filter bar */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.filter {
  font-family: var(--f-brand);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.72em 1.1em;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  transition: all 0.4s var(--ease);
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ==========================================================================
   11. Dark bands
   ========================================================================== */
.band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-dark);
}
.band--red { background: linear-gradient(160deg, var(--red-bright) 0%, var(--red) 60%, #5f171a 100%); }
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/emblem-light.png') no-repeat center center / auto 155%;
  opacity: 0.05;
  pointer-events: none;
}
.band h1, .band h2, .band h3 { color: var(--on-dark); }
.band .eyebrow { color: var(--on-dark-mute); }
.band p { color: var(--on-dark-mute); }
.band .lede { color: var(--on-dark); }

/* The cool grey secondary ink only reaches 3.7:1 against the red band, so the
   red band gets a warm one at 5.7:1 instead. */
.band--red .eyebrow,
.band--red p { color: #f2d6d8; }
.band--red .lede { color: #fff; }

/* Marquee */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding-block: clamp(0.85rem, 1.8vw, 1.25rem);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-set { display: flex; align-items: center; flex-shrink: 0; }
.marquee-set span {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 0.7rem + 0.7vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-inline: clamp(1rem, 2.2vw, 1.8rem);
  white-space: nowrap;
  opacity: 0.82;
}
.marquee-set b { color: var(--red-soft); font-weight: 900; padding-inline: 0; }

/* ==========================================================================
   12. Letter / quote block
   ========================================================================== */
.letter { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .letter { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }

.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.portrait { position: relative; }
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
  filter: saturate(0.92) contrast(1.02);
  transition: filter 0.6s var(--ease), transform 0.7s var(--ease);
}
.portrait:hover img { filter: none; transform: scale(1.015); }
.portrait figcaption {
  margin-top: 0.75rem;
  font-family: var(--f-brand);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.5;
}
.portrait figcaption small {
  display: block;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 0.56rem;
  color: var(--red);
  margin-top: 0.35em;
}

/* Single-author letter (Chief Faculty Advisor): one centred plate, capped to a
   comfortable reading measure rather than the full 1280px shell. */
.fa-letter { max-width: 76ch; margin-inline: auto; }
.fa-letter .plate { padding: clamp(1.6rem, 4vw, 3.2rem); }
.fa-letter .signature { margin-top: 2.2rem; }

.pullquote {
  font-family: var(--f-agenda);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 0.9rem + 1.15vw, 1.72rem);
  line-height: 1.45;
  color: var(--navy);
  padding-left: clamp(1rem, 2.5vw, 1.8rem);
  border-left: 3px solid var(--red);
}
.signature {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.signature .name {
  font-family: var(--f-script);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  color: var(--red);
}
.signature .role {
  font-family: var(--f-brand);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.5em;
}

/* --- Names on dark bands -------------------------------------------------
   Portrait captions and signatures default to ink colours that are correct on
   paper and invisible on navy: the caption was 1.1:1 and the signature 1.5:1
   against the band. These blocks appear on both surfaces, so the dark variants
   are scoped rather than patched per instance. */
.band .portrait figcaption { color: var(--on-dark); }
.band .portrait figcaption small { color: var(--red-soft); }
.band .portrait img { border-color: var(--rule-dark); }
.band .signature { border-top-color: var(--rule-dark); }
.band .signature .name { color: var(--script-light); }
.band .signature .role { color: var(--on-dark-mute); }
.band .pullquote { color: var(--on-dark); border-left-color: var(--red-soft); }
.band .gloss dt { color: var(--on-dark); border-top-color: var(--rule-dark); }
.band .gloss dd { color: var(--on-dark-mute); }

/* ==========================================================================
   13. Awards
   ========================================================================== */
.pool {
  text-align: center;
  padding-block: clamp(1.5rem, 4vw, 2.8rem);
  border-block: 3px solid var(--red);
}
.pool .amt {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 1.4rem + 8.4vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pool .lbl {
  font-family: var(--f-brand);
  font-size: clamp(0.62rem, 0.56rem + 0.24vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.9em;
}

.award-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(0.95rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.5s var(--ease), border-color 0.5s var(--ease);
}
.award-row:hover { padding-left: 0.8rem; border-color: var(--rule-strong); }
.award-row .t {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--red);
  line-height: 1;
}
.award-row .a {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   14. Registration / contact
   ========================================================================== */
.track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--navy);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-top-color 0.55s var(--ease);
}
.track:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-top-color: var(--red); }
.track .n {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--red);
}
.track h3 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.track .who {
  font-family: var(--f-brand);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.track p { font-size: 0.94rem; line-height: 1.65; color: var(--ink-mute); }
.track .btn { margin-top: auto; align-self: flex-start; }
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
  border-style: dashed;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.7);
}
.contact-card img.avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  border: 1px solid var(--rule-strong);
}
.contact-list { list-style: none; display: grid; gap: 0.55rem; }
.contact-list a, .contact-list span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: 0.94rem;
  color: var(--ink-mute);
  word-break: break-word;
  transition: color 0.35s var(--ease);
}
.contact-list a:hover { color: var(--red); }
.contact-list .k {
  flex-shrink: 0;
  font-family: var(--f-brand);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  width: 4.4em;
}

/* ==========================================================================
   15. Guide (glossary / procedure)
   ========================================================================== */
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.6vw, 2rem);
  padding-block: clamp(1.3rem, 2.8vw, 2rem);
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step .num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  line-height: 0.9;
  color: var(--red);
  letter-spacing: -0.04em;
  opacity: 0.55;
  min-width: 2ch;
}
.step h3 { margin-bottom: 0.5em; font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.28rem); }
.step p { color: var(--ink-mute); font-size: 0.97rem; }

.gloss { display: grid; gap: 0; }
.gloss dt {
  font-family: var(--f-brand);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.gloss dd {
  font-size: 0.95rem;
  line-height: 1.66;
  color: var(--ink-mute);
  padding-block: 0.4rem 1.1rem;
}

/* Accordion */
.acc { border-top: 1px solid var(--rule); }
.acc:last-of-type { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding-block: clamp(1.05rem, 2.2vw, 1.5rem);
  font-family: var(--f-brand);
  font-weight: 800;
  font-size: clamp(0.9rem, 0.84rem + 0.28vw, 1.05rem);
  letter-spacing: 0.01em;
  color: var(--navy);
  transition: color 0.35s var(--ease);
}
.acc-btn:hover { color: var(--red); }
summary.acc-btn { list-style: none; cursor: pointer; }
summary.acc-btn::-webkit-details-marker { display: none; }
summary.acc-btn::marker { content: ''; }
.acc-btn .sign {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.acc-btn .sign::before,
.acc-btn .sign::after {
  content: '';
  position: absolute;
  background: var(--red);
  inset: 7px 0 auto 0;
  height: 1.5px;
  transition: transform 0.45s var(--ease);
}
.acc-btn .sign::after { transform: rotate(90deg); }
.acc[open] .acc-btn .sign::after { transform: rotate(0deg); }
.acc-body { overflow: hidden; }
.acc-body > div { padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ink-mute); font-size: 0.97rem; max-width: 72ch; }

/* ==========================================================================
   16. Notice / TBA
   ========================================================================== */
.notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: clamp(0.95rem, 2vw, 1.3rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px dashed var(--rule-red);
  background: rgba(121, 31, 34, 0.035);
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--ink-mute);
}
.notice .tagline {
  font-family: var(--f-brand);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  flex-shrink: 0;
  padding-top: 0.35em;
}

/* Day plates (dress code) */
.day {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  overflow: hidden;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.day:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.day .d-n {
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
}
.day .d-date {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-block: 0.55em 1.1em;
  line-height: 1;
}
.day .d-dress-l {
  font-family: var(--f-brand);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
}
.day .d-dress {
  font-family: var(--f-script);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  line-height: 1.05;
  color: var(--red);
  margin-top: 0.15em;
}

/* ==========================================================================
   16b. Gallery
   ========================================================================== */
.gallery {
  columns: 3 280px;
  column-gap: clamp(0.6rem, 1.4vw, 1rem);
}
@media (max-width: 700px) { .gallery { columns: 2 150px; } }

.shot {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: clamp(0.6rem, 1.4vw, 1rem);
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  cursor: zoom-in;
  isolation: isolate;
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 0.75s var(--ease), filter 0.6s var(--ease);
}
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 41, 91, 0.5), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.5rem 1rem 0.9rem;
  font-family: var(--f-brand);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.shot:hover img { transform: scale(1.045); filter: none; }
.shot:hover::after,
.shot:hover figcaption { opacity: 1; }
.shot:hover figcaption { transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9994;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(9, 17, 40, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.lightbox .lb-cap {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--f-brand);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.lightbox .lb-cap b { color: var(--on-dark); font-weight: 800; }
.lb-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--on-dark);
  font-size: 1.1rem;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--on-dark); }
.lb-prev { left: clamp(0.6rem, 2vw, 2rem); }
.lb-next { right: clamp(0.6rem, 2vw, 2rem); }
.lb-close {
  position: absolute;
  top: clamp(0.8rem, 2.5vw, 2rem);
  right: clamp(0.8rem, 2.5vw, 2rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--on-dark);
  transition: background 0.35s var(--ease);
}
.lb-close:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 600px) { .lb-btn { width: 42px; height: 42px; } }

/* Empty state */
.gallery-empty {
  text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 3vw, 2rem);
  border: 1px dashed var(--rule-red);
  background: rgba(121, 31, 34, 0.03);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.footer {
  position: relative;
  background: linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-dark-mute);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 3vw, 2.2rem);
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -46%;
  translate: -50% 0;
  width: min(120vw, 1100px);
  aspect-ratio: 1.18;
  background: url('../img/emblem-light.png') no-repeat center / contain;
  opacity: 0.045;
  pointer-events: none;
}
.footer-inner { position: relative; z-index: 2; }
.footer-top {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.2rem, 5vw, 3.4rem);
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.75fr)); } }
.footer img.f-logo { width: min(100%, 280px); margin-bottom: 1.4rem; }
.footer .f-theme {
  font-family: var(--f-agenda);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 34ch;
}
.footer h4 {
  font-family: var(--f-brand);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red-soft);
  margin-bottom: 1.2rem;
}
.footer ul { list-style: none; display: grid; gap: 0.62rem; }
.footer ul a, .footer address a, .footer address span {
  font-size: 0.93rem;
  color: var(--on-dark-mute);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
  display: inline-block;
}
.footer ul a:hover, .footer address a:hover { color: #fff; transform: translateX(3px); }
.footer address { font-style: normal; line-height: 1.75; font-size: 0.93rem; }
.footer-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--f-brand);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(169, 178, 202, 0.72);
}
.footer-bot a { transition: color 0.35s var(--ease); }
.footer-bot a:hover { color: #fff; }

/* ==========================================================================
   18. Page transition + motion primitives
   ========================================================================== */
/* The curtain ships in the markup rather than being injected by script, so an
   incoming page is already covered on its first frame. Without JS it never
   shows at all (see the <noscript> block in each page head). */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  clip-path: inset(0 0 0 0);
}
.curtain img { width: min(38vw, 210px); opacity: 0.9; }

/* Nothing is going to animate it away, so never let it cover the page. */
@media (prefers-reduced-motion: reduce) { .curtain { display: none !important; } }

/* Reveal primitives: GSAP animates from these.
   Until an element has been revealed (.is-in), CSS transitions are suppressed:
   a transition on transform/opacity fights the tween and corrupts its values.
   Hover transitions resume the moment the reveal finishes.

   No blanket will-change here. It used to sit on every [data-reveal] element,
   which on a long page meant dozens of permanent compositor layers, most of
   them for content still below the fold. GSAP promotes each element for the
   duration of its own tween, which is the only time it helps. */
.js [data-reveal]:not(.is-in) { transition: none !important; }
.js [data-reveal] { opacity: 0; }
.js [data-reveal='up'] { transform: translateY(28px); }
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='left'] { transform: translateX(-26px); }
.js [data-reveal='right'] { transform: translateX(26px); }
.js .rule[data-reveal='rule'] { opacity: 1; transform: scaleX(0); }
.js [data-reveal='clip'] { opacity: 1; clip-path: inset(0 0 100% 0); }

.line-mask { display: block; overflow: hidden; }
.js .line-mask > span { display: block; }

/* Custom cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
  transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s var(--ease);
  opacity: 0;
  /* No mix-blend-mode: this element moves with the pointer, and a blended
     element that moves forces the whole page to re-composite every frame.
     The border colour is already translucent, so it reads the same. */
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 52px; height: 52px; background: rgba(121, 31, 34, 0.1); border-color: var(--rule-red); }
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  translate: -50% -50%;
  opacity: 0;
}
.cursor-dot.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* Utility */
.u-center { text-align: center; }
.mt-1 { margin-top: clamp(0.8rem, 1.6vw, 1.1rem); }
.mt-2 { margin-top: clamp(1.3rem, 2.6vw, 1.9rem); }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-4 { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.mb-2 { margin-bottom: clamp(1.3rem, 2.6vw, 1.9rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  translate: -50% -110%;
  z-index: 9999;
  background: var(--navy);
  color: #fff;
  padding: 0.85em 1.4em;
  font-family: var(--f-brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: translate 0.3s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* ==========================================================================
   18b. Small screens
   The layout is fluid throughout, so this section is about the things fluid
   type and auto-fit grids cannot fix on their own: long unbreakable strings,
   display type that outgrows a 360px viewport, and tap targets.
   ========================================================================== */

/* Display faces set in vw units can exceed the line box on a narrow phone.
   Allowing a break is better than clipping, since the body hides overflow-x. */
.mh-bold, .mh-sub, .mh-script, .display, .cmt-abbr, .award-row .t, .track h3 {
  overflow-wrap: break-word;
}

/* Body copy breaks a word only when it genuinely cannot fit on its own line. */
.prose, .acc-body > div, .footer address, .gloss dd { overflow-wrap: break-word; }

/* E-mail addresses have no break opportunity at all, so they get the stronger
   rule; `anywhere` also lets the flex item shrink below its content width. */
.contact-list a, .contact-list span { overflow-wrap: anywhere; min-width: 0; }
.contact-list a { flex-wrap: wrap; }

/* Same problem inside a notice: a flex child will not shrink past its content,
   so the munsoc@ address pushed the block wide at 320px. */
.notice > * { min-width: 0; }
.notice a { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  /* Pinyon Script is wide per character; the longest headings here
     ("Secretaries-General", "Committees & Agendas") need the extra room. */
  .mh-script { font-size: clamp(2.1rem, 1.1rem + 6.4vw, 3.4rem); }
  .masthead { margin-bottom: clamp(1rem, 4vw, 1.5rem); }

  /* Two portraits side by side leave each about 140px wide. Stack them. */
  .portraits { grid-template-columns: 1fr; gap: 1.2rem; max-width: 320px; margin-inline: auto; }

  /* The icon rail costs more than it gives at this width. */
  .info-row { grid-template-columns: 1fr; gap: 0.9rem; }
  .info-row .ico { display: none; }

  .plate, .fa-letter .plate { padding: 1.25rem 1.1rem; }
  .plate::after { inset: 4px; }
}

/* Short viewports: the drawer and the hero both assume vertical room. */
@media (max-height: 700px) {
  .nav-drawer { padding-top: 5rem; }
  .nav-drawer a { font-size: clamp(1.35rem, 5.5vw, 2rem); }
  .nav-drawer .drawer-meta { margin-top: 1.5rem; padding-top: 1rem; }
}

/* Touch targets. The AAA guidance is 44px; several controls sat near 32. */
@media (hover: none), (pointer: coarse) {
  .filter { padding: 0.95em 1.25em; }
  .nav-drawer a { padding-block: 0.22em; }
  .contact-list a { padding-block: 0.3em; }
  .footer ul a { padding-block: 0.2em; }
  /* Hover-only affordances never resolve on touch, so show them outright. */
  .shot figcaption { opacity: 1; transform: none; }
  .shot::after { opacity: 1; }
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .grain { animation: none; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .rule[data-reveal='rule'] { transform: none !important; }
  .cursor, .cursor-dot { display: none; }
}

/* ==========================================================================
   20. Print
   ========================================================================== */
@media print {
  .masthead-bar, .footer, .grain, .frame, .cursor, .cursor-dot, .scroll-cue, .curtain, .progress { display: none !important; }
  body::before, body::after { display: none; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}