/* ==========================================================================
   UCL Hedge Fund Society - stylesheet ("the gold terminal", scroll edition)
   Built on the HFS Design Theme:
     Black #0F1011 (backgrounds, text)   White #FFFFFF (backgrounds, text on black)
     Gold  #C8A24B (subtitles, labels, numbers, icons)   Cream #F0EBE1 (soft panels)
     Titles: The Seasons if licensed, otherwise Georgia.   Body: Trebuchet MS.
   A system monospace stack (--f-mono) carries market data, codes and readouts.
   Shape rule: square corners. Circles only for live dots, chart points and committee portraits
   (gold-ringed circles, as on the society's own posters).
   Motion: every scroll effect is driven by js/main.js and switches off under
   prefers-reduced-motion (content is then shown in its final state).
   Order: tokens, base, shared pieces, tape, nav, command palette, then one block per
   section in page order, then the committee page.
   ========================================================================== */

:root {
  /* brand palette */
  --black: #0f1011;
  --white: #ffffff;
  --gold: #c8a24b;
  --cream: #f0ebe1;

  /* Accessibility variant: brand gold is 2.4:1 on white and 2.0:1 on cream, so gold TEXT on
     light backgrounds uses this deeper gold (5.0:1 on cream, 6.0:1 on white). On black, brand
     gold is used as is (7.9:1). Rules, borders and icons always use brand gold. */
  --gold-ink: #7d5f1a;
  --gold-hover: #d6b465;

  /* tints derived from the palette */
  --black-2: #17181b;
  --cream-2: #e4ddcd;
  --white-74: rgba(255, 255, 255, 0.74);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-12: rgba(255, 255, 255, 0.12);
  --black-76: rgba(15, 16, 17, 0.76);
  --black-line: rgba(15, 16, 17, 0.16);
  --black-faint: rgba(15, 16, 17, 0.18);
  --gold-line: rgba(200, 162, 75, 0.42);
  --gold-faint: rgba(200, 162, 75, 0.12);
  --gold-grid: rgba(200, 162, 75, 0.07);

  /* fonts: add "The Seasons" at the front of --f-title once a web licence is in place */
  --f-title: Georgia, "Times New Roman", Times, serif;
  --f-body: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Liberation Mono", "Courier New", monospace;

  --max: 1240px;
  --gutter: clamp(18px, 5vw, 72px);
  --nav-h: 72px;
  --section-y: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a, button, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(200, 162, 75, 0.25); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--f-title); font-weight: 400; text-wrap: balance; }
::selection { background: var(--gold); color: var(--black); }

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* holds the logo <symbol>; takes no space */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- section themes ---------- */
.section { padding-block: var(--section-y); }
.section--black, .hero, .team-head, .footer, .nav {
  --label: var(--gold);
  --muted: var(--white-74);
  --rule: var(--gold-line);
  --focus: var(--gold);
  background: var(--black);
  color: var(--white);
}
.section--cream, .section--white {
  --label: var(--gold-ink);
  --muted: var(--black-76);
  --rule: var(--black-line);
  --focus: var(--black);
  color: var(--black);
}
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.muted { color: var(--muted); }

/* ---------- shared type ---------- */
.label {
  margin: 0 0 18px;
  font: 700 0.75rem/1.4 var(--f-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}
.label__meta { margin-left: 0.9em; font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; opacity: 0.8; }
.mono-label {
  margin: 0 0 20px;
  font: 400 0.78rem/1.5 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.mono-label--dark { color: var(--gold-ink); }
.mono-label span { margin: 0 0.35em; color: var(--white-50); }
.mono-label--dark span { color: var(--black-line); }
.mono-note { margin: 0; font: 400 0.8rem/1.5 var(--f-mono); color: var(--white-50); }

.h1 {
  max-width: 16ch;
  margin-bottom: 0.4em;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.h2 {
  max-width: 18ch;
  margin-bottom: 0.55em;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.h2 em, .hero__title em { font-style: italic; color: var(--gold); }
.section--cream .h2 em, .section--white .h2 em { color: var(--gold-ink); }

.lead { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; }

.textlink {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}
.section--black .textlink:hover, .footer .textlink:hover { color: var(--gold); }
.section--cream .textlink:hover, .section--white .textlink:hover { color: var(--gold-ink); }

.code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font: 700 0.72rem/1.4 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}
.code {
  padding: 4px 8px;
  border: 1px solid var(--gold);
  font: 400 0.74rem/1 var(--f-mono);
  letter-spacing: 0.08em;
  color: var(--gold);
}
.section--cream .code, .section--white .code { color: var(--gold-ink); }

.tag {
  display: inline-block;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid currentColor;
  font: 400 0.7rem/1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-ink);
}
.tag--ph { color: var(--black-76); border-color: var(--black-line); }

.ticks { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 10px; font: 400 1.1rem/1.3 var(--f-title); }
.ticks li::before { content: ""; width: 18px; height: 1px; background: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 700 0.95rem/1.1 var(--f-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.9rem; }
.btn--gold { background: var(--gold); color: var(--black); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--outline-gold { border-color: var(--gold); color: var(--gold); }
.btn--outline-gold:hover { background: var(--gold); color: var(--black); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--black); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: #2a2b2e; }
.btn--outline-dark { border-color: var(--black); color: var(--black); }
.btn--outline-dark:hover { background: var(--black); color: var(--white); }

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

/* ---------- terminal panel with corner brackets ---------- */
.panel { position: relative; border: 1px solid var(--gold-line); }
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel--black { --label: var(--gold); --muted: var(--white-74); --focus: var(--gold); background: var(--black); color: var(--white); }
.panel__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gold-line);
  font: 400 0.74rem/1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-50);
}
.panel__head span:first-child { color: var(--gold); }

/* ---------- market tape ---------- */
.tape {
  display: flex;
  align-items: stretch;
  height: 36px;
  background: var(--black);
  border-bottom: 1px solid var(--gold-line);
  font: 400 0.75rem/1 var(--f-mono);
  color: var(--white-74);
}
.tape__label, .tape__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  white-space: nowrap;
}
.tape__label { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; border-right: 1px solid var(--gold-line); }
.tape__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.tape__meta { display: none; border-left: 1px solid var(--gold-line); color: var(--white-50); }
.tape__status.is-open { color: var(--gold); }
.tape__next {
  display: none;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-left: 1px solid var(--gold-line);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.tape__next b { font-weight: 400; color: var(--gold); }
.tape__next:hover { background: var(--gold-faint); }
.tape__next:focus-visible { outline-offset: -3px; }
.tape__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.tape__track { display: flex; align-items: center; width: max-content; height: 100%; }
.tape__empty { padding: 0 18px; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 18px;
  border-right: 1px solid var(--gold-faint);
  white-space: nowrap;
}
.tick__sym { color: var(--white-50); }
.tick__px { color: var(--white); font-variant-numeric: tabular-nums; }
.tick__chg { font-variant-numeric: tabular-nums; }
.tick__chg.up { color: var(--gold); }
.tick__chg.down { color: var(--white-74); }
.tick__chg.flat { color: var(--white-50); }
.tape__pause {
  flex: none;
  min-width: 72px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--gold-line);
  background: transparent;
  color: var(--gold);
  font: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tape__pause:hover { background: var(--gold-faint); }
.tape__pause[hidden] { display: none; }
.tape__pause:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .tape__track { animation: tape var(--tape-dur, 90s) linear infinite; }
  .tape__viewport:hover .tape__track, .tape__viewport:focus-within .tape__track, .tape.is-paused .tape__track { animation-play-state: paused; }
}
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tape__viewport { overflow-x: auto; scrollbar-width: none; }
  .tape__viewport::-webkit-scrollbar { display: none; }
}
@media (min-width: 760px) { .tape__meta { display: flex; } }
@media (min-width: 1100px) { .tape__next:not([hidden]) { display: flex; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--gold-line); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
/* the society's logo (mark + wordmark, 4.319:1), white as designed; gold on hover like other links */
.brand { display: flex; align-items: center; min-width: 0; margin-right: auto; padding: 4px 0; color: var(--white); text-decoration: none; transition: color 0.2s; }
.brand:hover { color: var(--gold); }
.brand__logo { --logo-h: 34px; display: block; flex: none; width: calc(var(--logo-h) * 4.319); height: var(--logo-h); }
@media (min-width: 768px) { .brand__logo { --logo-h: 40px; } }
@media (min-width: 1180px) { .brand__logo { --logo-h: 44px; } }

/* links: a mono function-key code above each label, a gold bar that slides to the hovered or current link */
.nav__links { position: relative; display: none; align-self: stretch; }
.nav__links a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 11px;
  font-size: 0.93rem;
  line-height: 1.1;
  color: var(--white-74);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--white); }
.nav__code {
  font: 400 0.6rem/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--white-50);
  transition: color 0.2s;
}
.nav__links a:hover .nav__code, .nav__links a[aria-current] .nav__code { color: var(--gold); }
.nav__badge {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 6px;
  padding: 2px 4px;
  border: 1px solid var(--gold);
  font: 400 0.62rem/1 var(--f-mono);
  text-align: center;
  color: var(--gold);
  vertical-align: 0.15em;
}
.nav__badge[hidden] { display: none; }
.nav__label { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.nav__bar {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100px; height: 2px;
  background: var(--gold);
  transform-origin: left;
  transform: translateX(var(--bx, 0)) scaleX(var(--bw, 0));
  transition: transform 0.45s var(--ease), opacity 0.2s;
  pointer-events: none;
}

.nav__cmd {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: transparent;
  color: var(--white-74);
  font: 400 0.78rem/1 var(--f-mono);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.nav__cmd:hover { border-color: var(--gold); color: var(--white); background: var(--gold-faint); }
.nav__cmd-prompt { color: var(--gold); }
.nav__cmd-text { display: none; }
.nav__cmd-key { padding: 3px 5px; border: 1px solid var(--white-12); font: inherit; font-size: 0.68rem; color: var(--white-50); }

.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 700 0.9rem/1 var(--f-body);
  cursor: pointer;
}
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gold);
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* scroll progress drawn as a rising price line along the bottom edge of the nav */
.nav__curve {
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  width: 100%; height: 14px;
  overflow: visible;
  pointer-events: none;
}
.nav__curve path { fill: none; stroke-linejoin: round; }
.nav__curve-track { stroke: var(--gold-faint); stroke-width: 1; }
.nav__curve-line { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: var(--np, 1); }
.nav__tip {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--black);
  pointer-events: none;
  transform: translate(var(--tx, 0), var(--ty, 0));
  opacity: var(--tip-o, 0);
  transition: opacity 0.3s;
}

/* mobile menu: a full-height terminal panel */
.nav__mobile {
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--gold-line);
  background: var(--black);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile .wrap { display: flex; flex-direction: column; padding-block: 14px 28px; }
.nav__mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 0 14px;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: var(--black-2);
  color: var(--white-74);
  font: 400 0.9rem/1 var(--f-mono);
  text-align: left;
  cursor: pointer;
}
.nav__mobile-search span { color: var(--gold); }
.nav__mobile a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gold-line);
  font: 400 1.75rem/1.1 var(--f-title);
  color: var(--white);
  text-decoration: none;
}
.nav__mobile a:not(.btn) .nav__code { min-width: 3.4em; font-size: 0.7rem; color: var(--gold); }
.nav__mobile a:not(.btn):hover, .nav__mobile a[aria-current] { color: var(--gold); }
.nav__mobile .btn { margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .nav__mobile:not([hidden]) a, .nav__mobile:not([hidden]) .nav__mobile-search { animation: rise 0.5s var(--ease) both; }
  .nav__mobile:not([hidden]) a:nth-of-type(2) { animation-delay: 0.04s; }
  .nav__mobile:not([hidden]) a:nth-of-type(3) { animation-delay: 0.08s; }
  .nav__mobile:not([hidden]) a:nth-of-type(4) { animation-delay: 0.12s; }
  .nav__mobile:not([hidden]) a:nth-of-type(5) { animation-delay: 0.16s; }
  .nav__mobile:not([hidden]) a:nth-of-type(6) { animation-delay: 0.2s; }
  .nav__mobile:not([hidden]) a:nth-of-type(7) { animation-delay: 0.24s; }
}

@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
@media (min-width: 1180px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
  .nav__cmd { display: inline-flex; }
}
@media (min-width: 1380px) { .nav__cmd-text { display: inline; } }

/* ---------- command palette ---------- */
.cmd {
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 80px));
  margin: 10vh auto auto;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.cmd::backdrop { background: rgba(15, 16, 17, 0.72); }
.cmd__form { display: flex; flex-direction: column; max-height: inherit; }
.cmd__field { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--gold-line); }
.cmd__prompt { font: 400 1rem/1 var(--f-mono); color: var(--gold); }
.cmd__input {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 400 1.05rem/1 var(--f-mono);
  outline: none;
}
.cmd__input::placeholder { color: var(--white-50); }
.cmd__esc { min-height: 32px; padding: 0 8px; border: 1px solid var(--white-12); border-radius: 0; background: transparent; font: 400 0.7rem/1 var(--f-mono); color: var(--white-74); cursor: pointer; }
.cmd__esc:hover { border-color: var(--gold); color: var(--white); }
.cmd__list { flex: 1; margin: 0; padding: 6px 0; overflow-y: auto; list-style: none; }
.cmd__opt {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 18px;
  cursor: pointer;
}
.cmd__opt-code { font: 400 0.74rem/1.4 var(--f-mono); letter-spacing: 0.1em; color: var(--gold); }
.cmd__opt-label { font-size: 1rem; }
.cmd__opt-hint { font: 400 0.7rem/1.4 var(--f-mono); color: var(--white-50); text-transform: uppercase; letter-spacing: 0.08em; }
.cmd__opt[aria-selected="true"] { background: var(--gold); color: var(--black); }
.cmd__opt[aria-selected="true"] .cmd__opt-code, .cmd__opt[aria-selected="true"] .cmd__opt-hint { color: var(--black); }
.cmd__empty { padding: 18px; color: var(--white-50); font: 400 0.85rem/1.5 var(--f-mono); }
.cmd__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-top: 1px solid var(--gold-line); font: 400 0.7rem/1.4 var(--f-mono); color: var(--white-50); }
.cmd__foot b { font-weight: 400; color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .cmd[open] { animation: cmd-in 0.25s var(--ease) both; }
}
@keyframes cmd-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- headline word reveal (JS splits [data-split] headings into words) ---------- */
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.14em 0; margin: 0 -0.06em -0.14em 0; }
.js .split .w > span { display: inline-block; transform: translateY(108%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js .split.in .w > span { transform: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(44px, 5.5vw, 80px);
  background-image:
    linear-gradient(var(--gold-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}
.hero__grid { display: grid; gap: 48px; align-items: center; }
[data-parallax] { transform: translate3d(0, var(--py, 0), 0); }
.hero__title {
  max-width: 14ch;
  margin-bottom: 0.4em;
  font-size: clamp(2.75rem, 8.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 0.14em;
  vertical-align: -0.08em;
  background: var(--gold);
}
.hero__lead { max-width: 30em; margin-bottom: 34px; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; }
.hero__terms {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 22px;
  font: 400 0.8rem/1.5 var(--f-mono);
  color: var(--white-50);
  text-decoration: none;
}
.hero__terms span:first-child { color: var(--gold); }
.hero__terms:hover span { color: var(--white); }
@media (max-width: 479px) { .hero .actions .btn { flex: 1 1 100%; } }
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
  .hero__title { max-width: 15ch; font-size: clamp(3.2rem, 4.9vw, 4.4rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise 0.9s var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero__copy > :nth-child(5) { animation-delay: 0.3s; }
  .caret { animation: blink 1s steps(1) 1.2s 6; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* the illustrative chart */
.chart { margin: 0; }
.chart__plot { position: relative; aspect-ratio: 8 / 5; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.chart__svg { width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--gold-line); stroke-width: 1; stroke-dasharray: 2 6; }
.candle line { stroke: var(--gold); stroke-width: 1.1; }
.candle rect { stroke: var(--gold); stroke-width: 1; }
.candle.up rect { fill: var(--gold); }
.candle.dn rect { fill: var(--black); }
.chart__ma { fill: none; stroke: var(--cream); stroke-opacity: 0.8; stroke-width: 1.8; stroke-linejoin: round; }
.chart__cross {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  border-right: 1px solid var(--gold);
  opacity: 0.6;
  pointer-events: none;
  transform: translateX(calc(var(--cx, 9.82%) - 100%));
  transition: transform 0.45s var(--ease);
}
.chart__plot.is-scrubbing .chart__cross { transition: none; }
.chart__readout {
  position: absolute;
  top: 0; left: 0;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--gold);
  background: var(--black);
  font: 400 0.72rem/1.3 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  pointer-events: none;
}
.chart__readout b { font-weight: 400; color: var(--gold); margin-right: 8px; }
.chart__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.chart__marks li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.chart__marks li::before {
  content: "";
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--black);
}
.chart__marks li::after { content: ""; position: absolute; left: -0.5px; bottom: 4px; width: 1px; height: 24px; background: var(--gold); }
.chart__marks button {
  position: absolute;
  bottom: 28px;
  left: 0;
  transform: translateX(-50%);
  padding: 6px 9px;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: var(--black);
  font: 400 0.72rem/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-74);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.chart__marks button b { margin-right: 6px; font-weight: 400; color: var(--gold); }
.chart__marks button:hover, .chart__marks button[aria-pressed="true"] { border-color: var(--gold); color: var(--white); }
.chart__marks button[aria-pressed="true"] { background: var(--gold); color: var(--black); }
.chart__marks button[aria-pressed="true"] b { color: var(--black); }
.chart__marks li:first-child button { transform: translateX(-20%); }
.chart__legend { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.chart__legend li { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--gold-faint); font-size: 0.9rem; color: var(--white-50); transition: color 0.3s; }
.chart__legend li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--gold-faint); }
.chart__legend b { display: block; margin-bottom: 2px; font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-50); transition: color 0.3s; }
.chart__legend li[aria-current] { color: var(--white); }
.chart__legend li[aria-current] b { color: var(--gold); }
.chart__cap { margin-top: 12px; font: 400 0.74rem/1.5 var(--f-mono); color: var(--white-50); }
@media (min-width: 640px) {
  .chart__legend { grid-template-columns: repeat(4, 1fr); }
  .chart__legend li { padding: 12px 12px 12px 0; border-bottom: 0; }
  .chart__legend li:nth-child(even) { padding-left: 0; border-left: 0; }
  .chart__legend li + li { padding-left: 12px; border-left: 1px solid var(--gold-faint); }
}
@media (prefers-reduced-motion: no-preference) {
  .candle { transform-box: fill-box; transform-origin: center; animation: candle-in 0.5s var(--ease) both; animation-delay: calc(var(--i) * 22ms + 150ms); }
  .chart__ma { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease) 1s forwards; }
  .chart__marks li { animation: fade-in 0.5s var(--ease) both; animation-delay: calc(1.5s + var(--n) * 0.2s); }
  .chart__readout, .chart__cross { animation: fade-in 0.5s var(--ease) 1.6s both; }
}
@keyframes candle-in { from { opacity: 0; transform: scaleY(0.15); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* firms the committee have interned at: an endless strip of logos with names */
.firms-strip {
  display: grid;
  gap: 14px;
  margin-top: clamp(48px, 5.5vw, 72px);
  padding: 22px 0;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.firms-strip__label { margin: 0; max-width: 46ch; font: 400 0.76rem/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-74); }
.firms-strip__label b { display: block; margin-bottom: 6px; font: 400 2.2rem/1 var(--f-title); letter-spacing: 0; color: var(--gold); }
.firms-strip__viewport { position: relative; min-width: 0; }
.firms-strip__track { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; margin: 0; padding: 0; list-style: none; }
.firms-strip__pause {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: transparent;
  color: var(--gold);
  font: 400 0.72rem/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.firms-strip__pause:hover { background: var(--gold-faint); }
.firms-strip__pause[hidden] { display: none; }
/* moving: one row that loops; the copy made by js/main.js makes the loop seamless */
.firms-strip.is-moving .firms-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.firms-strip.is-moving .firms-strip__track { flex-wrap: nowrap; width: max-content; gap: 0; animation: tape var(--firms-dur, 60s) linear infinite; }
.firms-strip.is-moving .firm { padding-right: 52px; }
.firms-strip.is-moving .firms-strip__viewport:hover .firms-strip__track,
.firms-strip.is-paused .firms-strip__track { animation-play-state: paused; }
@media (min-width: 900px) {
  .firms-strip { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: 28px; }
}

/* one firm: its mark drawn through a mask in a single colour, then its name */
.firm { display: flex; flex: none; align-items: center; gap: 12px; color: var(--white-74); white-space: nowrap; transition: color 0.25s; }
.firm__mark { display: block; flex: none; width: calc(var(--h) * var(--ar)); max-width: 100%; height: var(--h); }
@supports ((mask-size: contain) or (-webkit-mask-size: contain)) {
  .firm__mark { background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
}
.firm__name { font: 400 1.15rem/1 var(--f-title); color: var(--white); }
.firm:hover { color: var(--gold); }
.firm:hover .firm__name { color: var(--gold); }
}

/* ---------- about + factsheet ---------- */
.about { display: grid; gap: 40px; }
.about__copy .lead { margin-bottom: 0.8em; }
.sheet { margin: 0; }
.sheet > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; padding: 11px 18px; border-top: 1px solid var(--gold-faint); }
.sheet > div:first-child { border-top: 0; }
.sheet dt { font: 400 0.72rem/1.7 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-50); }
.sheet dd { margin: 0; font-size: 0.98rem; line-height: 1.45; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; } }
@media (max-width: 419px) { .sheet > div { grid-template-columns: 1fr; gap: 2px; } }
/* factsheet rows type in one after another */
@media (prefers-reduced-motion: no-preference) {
  .js .panel.reveal .sheet > div { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .js .panel.reveal.in .sheet > div { opacity: 1; transform: none; }
  .js .panel.reveal.in .sheet > div:nth-child(2) { transition-delay: 0.06s; }
  .js .panel.reveal.in .sheet > div:nth-child(3) { transition-delay: 0.12s; }
  .js .panel.reveal.in .sheet > div:nth-child(4) { transition-delay: 0.18s; }
  .js .panel.reveal.in .sheet > div:nth-child(5) { transition-delay: 0.24s; }
  .js .panel.reveal.in .sheet > div:nth-child(6) { transition-delay: 0.3s; }
  .js .panel.reveal.in .sheet > div:nth-child(7) { transition-delay: 0.36s; }
  .js .panel.reveal.in .sheet > div:nth-child(8) { transition-delay: 0.42s; }
}

/* ---------- what we do: four programmes as tabs ---------- */
.wwd__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.wwd__head .h2 { margin-bottom: 0; }
.wwd__intro { margin: 0; font: 400 0.78rem/1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* tabs: a progress line on top of each fills while that panel is showing */
.wwd__tabs { display: none; }
.wwd.is-tabbed .wwd__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: clamp(28px, 4vw, 48px) 0 0; }
@media (min-width: 760px) { .wwd.is-tabbed .wwd__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; } }
.wwd__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  padding: 16px 0 14px;
  border: 0;
  background: none;
  color: var(--white-50);
  text-align: left;
  cursor: pointer;
}
.wwd__tabnum { font: 400 0.72rem/1 var(--f-mono); color: var(--gold); }
.wwd__tabcode { font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.1em; transition: color 0.3s; }
.wwd__tabname { grid-column: 1 / -1; font: 400 clamp(1.1rem, 1.6vw, 1.4rem)/1.2 var(--f-title); transition: color 0.3s; }
.wwd__tab:hover .wwd__tabname, .wwd__tab[aria-selected="true"] .wwd__tabname { color: var(--white); }
.wwd__tab[aria-selected="true"] .wwd__tabcode { color: var(--gold); }
.wwd__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wwd__tabbar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-faint); overflow: hidden; }
.wwd__tabbar::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.wwd__tab.is-past .wwd__tabbar::after, .wwd__tab[aria-selected="true"] .wwd__tabbar::after { transform: none; }
.wwd.is-auto .wwd__tab[aria-selected="true"] .wwd__tabbar::after { animation: wwd-fill var(--wwd-dur, 7s) linear both; }
.wwd.is-away .wwd__tabbar::after, .wwd.is-held .wwd__tabbar::after { animation-play-state: paused !important; }
@keyframes wwd-fill { from { transform: scaleX(0); } to { transform: none; } }

/* panels: stacked without JS; with tabs they share one grid cell, so switching never changes the height */
.wwd__panels { margin-top: clamp(28px, 4vw, 44px); }
.wwd__item { display: grid; gap: 28px; padding: 32px 0; border-top: 1px solid var(--gold-line); }
.wwd__item:first-child { padding-top: 0; border-top: 0; }
.wwd.is-tabbed .wwd__panels { display: grid; margin-top: 20px; }
.wwd.is-tabbed .wwd__item { grid-area: 1 / 1; padding: 0; border-top: 0; }
.wwd.is-tabbed .wwd__item:not(.is-active) { visibility: hidden; }
@media (min-width: 900px) {
  .wwd__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
}
.wwd__title { margin-bottom: 0.4em; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
.wwd__line { max-width: 36ch; margin: 0; font-size: 1.08rem; color: var(--white-74); }
.wwd__copy .ticks { margin-top: 20px; }
.wwd__copy .textlink { display: inline-block; margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 11px; border: 1px solid var(--gold-line); font: 400 0.7rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-74); }

.wwd__visual { padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--gold-line); background: var(--black-2); }
.logos__lead { margin: 0 0 18px; font: 400 0.74rem/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-50); }

/* EPF: six pods, each a portfolio manager (filled) and four analysts */
.pods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .pods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pod { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--gold-faint); transition: border-color 0.3s; }
.pod:hover { border-color: var(--gold); }
.pod__tag { font: 400 0.68rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-74); }
.pod--macro .pod__tag { color: var(--gold); }
.pod__team { display: flex; align-items: center; gap: 6px; }
.pod__team i { width: 10px; height: 10px; border: 1px solid var(--gold); border-radius: 50%; }
.pod__team i.pm { width: 16px; height: 16px; margin-right: 4px; background: var(--gold); }
.wwd__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--gold-line); }
.wwd__stats div { display: flex; flex-direction: column; padding: 14px 8px 0 0; }
.wwd__stats dt { font: 400 0.66rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-50); }
.wwd__stats dd { margin: auto 0 0; padding-top: 4px; font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--f-title); color: var(--gold); font-variant-numeric: tabular-nums; }

/* LUSIF: one hub wired to three desks */
.net__hub { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 400 1.3rem/1 var(--f-title); }
.net__hub .code { background: var(--gold); color: var(--black); }
.net__desks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 36px 0 0; list-style: none; }
.net__desks::before { content: ""; position: absolute; top: 18px; left: 16.66%; right: 16.66%; height: 1px; background: var(--gold); transform-origin: center; }
.net__desks::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 18px; background: var(--gold); }
.net__desk { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border: 1px solid var(--gold-faint); text-align: center; }
.net__desk::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 18px; background: var(--gold); transform-origin: top; }
.net__desk.is-us { border-color: var(--gold); }
.net__uni { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1 var(--f-title); color: var(--gold); }
.net__desk b { font: 400 0.72rem/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.net__desk span:last-child { font-size: 0.84rem; color: var(--white-50); }

/* FE x IC and careers: firm logos, drawn in one colour like the firms strip */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(32px, 4vw, 56px); margin: 0; padding: 8px 0; list-style: none; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--white); transition: color 0.25s; }
.logo__name { font: 400 1.7rem/1 var(--f-title); }
.speaker .logo__name { font-size: 1.3rem; }
.logo:hover { color: var(--gold); }
.speakers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.speaker { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--gold-faint); color: var(--white); }
.speaker .firm__mark { max-width: 100%; }
.speaker__who { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; color: var(--white-50); }
.speaker__who b { font: 400 1.2rem/1.2 var(--f-title); color: var(--white); }
.speaker__date { font: 400 0.76rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 479px) { .speaker { grid-template-columns: 1fr auto; } .speaker .firm__mark { grid-column: 1 / -1; } }

/* each time a panel opens its pieces arrive in turn (motion allowed only) */
@keyframes wwd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wwd-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes wwd-draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes wwd-draw-y { from { transform: scaleY(0); } to { transform: none; } }
.js .wwd.is-tabbed .wwd__item.is-active .wwd__copy > *,
.js .wwd.is-tabbed .wwd__item.is-active .pod,
.js .wwd.is-tabbed .wwd__item.is-active .wwd__stats div,
.js .wwd.is-tabbed .wwd__item.is-active .net__desk,
.js .wwd.is-tabbed .wwd__item.is-active .logo,
.js .wwd.is-tabbed .wwd__item.is-active .speaker,
.js .wwd.is-tabbed .wwd__item.is-active .chips li { animation: wwd-rise 0.6s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms); }
.js .wwd.is-tabbed .wwd__item.is-active .pod__team i { animation: wwd-pop 0.4s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms + 300ms); }
.js .wwd.is-tabbed .wwd__item.is-active .net__desks::before { animation: wwd-draw-x 0.6s var(--ease) 0.15s both; }
.js .wwd.is-tabbed .wwd__item.is-active .net__desk::before { animation: wwd-draw-y 0.35s var(--ease) 0.6s both; }
.wwd__copy > :nth-child(2), .pod:nth-child(2), .net__desk:nth-child(2), .logo:nth-child(2), .speaker:nth-child(2), .chips li:nth-child(2), .wwd__stats div:nth-child(1) { --d: 1; }
.wwd__copy > :nth-child(3), .pod:nth-child(3), .net__desk:nth-child(3), .logo:nth-child(3), .chips li:nth-child(3), .wwd__stats div:nth-child(2) { --d: 2; }
.wwd__copy > :nth-child(4), .pod:nth-child(4), .chips li:nth-child(4), .wwd__stats div:nth-child(3) { --d: 3; }
.wwd__copy > :nth-child(5), .pod:nth-child(5) { --d: 4; }
.pod:nth-child(6) { --d: 5; }
.pod__team i:nth-child(2) { --d: 1; } .pod__team i:nth-child(3) { --d: 2; } .pod__team i:nth-child(4) { --d: 3; } .pod__team i:nth-child(5) { --d: 4; }

/* ---------- research: scroll-lit statement + scrubbed pipeline ---------- */
.statement {
  max-width: 24ch;
  margin: 0 0 clamp(48px, 6vw, 80px);
  font: 400 clamp(2rem, 4.4vw, 3.6rem)/1.16 var(--f-title);
  letter-spacing: -0.01em;
}
.statement em { font-style: italic; color: var(--gold-ink); }
.js .statement .lw { color: rgba(15, 16, 17, 0.22); transition: color 0.25s; }
.js .statement .lw.on { color: var(--black); }
.js .statement em .lw.on { color: var(--gold-ink); }

.pipe2 { position: relative; }
.pipe2__rail { position: relative; height: 2px; margin-bottom: 26px; background: var(--black-line); }
.pipe2__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--pf, 1)); }
.pipe2__stages { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; padding: 0; list-style: none; }
.pipe2__stages li { display: flex; flex-direction: column; gap: 6px; transition: opacity 0.4s var(--ease); }
.pipe2__step {
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid var(--gold);
  font: 400 0.72rem/1 var(--f-mono);
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  transition: background-color 0.3s, color 0.3s;
}
.pipe2__stages b { font: 400 1.6rem/1.15 var(--f-title); }
.pipe2__stages li.on .pipe2__step { background: var(--black); color: var(--gold); border-color: var(--black); }
@media (min-width: 760px) { .pipe2__stages { grid-template-columns: repeat(4, 1fr); } }

.outputs { display: grid; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.output { padding: 24px 0; border-top: 1px solid var(--black-line); }
.output__num { display: block; font: 400 clamp(2.6rem, 4.4vw, 3.6rem)/1 var(--f-title); color: var(--gold-ink); }
.output__title { margin: 0.25em 0 0.35em; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.2; }
.output p { margin: 0; max-width: 34ch; }
@media (min-width: 900px) {
  .outputs { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black-line); }
  .output { padding: 28px 28px 4px; border-top: 0; border-left: 1px solid var(--black-line); }
  .output:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- events: pinned horizontal timeline ---------- */
.events { padding-bottom: 0; }
.events__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.events__head .h2 { margin-bottom: 0; }
.events__note { max-width: 34ch; margin: 0; font-size: 0.95rem; }

/* catch-up controls under the strip: each shows only when it would move the track */
.evnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin: 18px 0 0; }
.evnav__btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--gold-line);
  background: none;
  color: var(--white);
  font: 700 0.86rem/1.2 var(--f-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.25s, visibility 0.25s;
}
.evnav__btn:hover { border-color: var(--gold); color: var(--gold); }
.evnav__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.evnav__btn > span[aria-hidden] { color: var(--gold); }
.evnav__sub { font: 400 0.68rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-50); }
.evnav__btn--now { margin-left: auto; border-color: var(--gold); }
.evnav__btn--now .evnav__back, .evnav__btn--now.is-back .evnav__fwd { display: none; }
.evnav__btn--now.is-back .evnav__back { display: inline; }
/* hidden but still holding its place, so the pinned panel does not jump */
.evnav__btn.is-off { visibility: hidden; opacity: 0; }

.strip { display: none; }
.events__viewport { padding-bottom: var(--section-y); }
.events__track { display: grid; gap: 16px; margin: 32px 0 0; padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2)); list-style: none; }

.ev {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--gold-line);
  background: var(--black-2);
  transition: border-color 0.3s, opacity 0.3s, transform 0.3s var(--ease);
}
.ev:hover { border-color: var(--gold); }
.ev__date { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ev__day { font: 400 3.4rem/0.9 var(--f-title); color: var(--gold); font-variant-numeric: tabular-nums; }
.ev__dow { font: 400 0.74rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-50); }
.ev__status { position: absolute; top: 22px; right: 22px; margin: 0; font: 400 0.68rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-74); }
.ev__status:empty { display: none; }
.ev__status span { display: inline-block; padding: 3px 7px; border: 1px solid var(--white-12); }
.ev__firm { margin: 6px 0 0; font: 400 0.72rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ev__firm span { color: var(--white-50); margin: 0 0.3em; }
.ev__title { margin-top: 4px; font-size: 1.5rem; line-height: 1.18; }
.ev__meta { margin: 0; font: 400 0.78rem/1.5 var(--f-mono); color: var(--white-74); }
.ev__meta span { color: var(--gold); margin: 0 0.3em; }
.ev__desc { margin: 4px 0 0; font-size: 0.95rem; color: var(--white-74); }
.ev__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 14px; }
.ev__link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.ev__link:hover { background: var(--gold-hover); }
.ev__ics {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 700 0.86rem/1 var(--f-body);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.ev__ics:hover { color: var(--gold); }
.ev__ics::after { content: ""; display: inline-block; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: 0.15em; transition: transform 0.2s; }
.ev__ics[aria-expanded="true"]::after { transform: rotate(180deg); }
.ev__actions { position: relative; }
/* add-to-calendar choices, opening upwards so the pinned panel never clips them */
.calmenu {
  position: absolute;
  left: 0; bottom: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 4px 0;
  border: 1px solid var(--gold);
  background: var(--black);
}
.calmenu[hidden] { display: none; }
.calmenu__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: var(--white);
  font: 700 0.9rem/1.2 var(--f-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.calmenu__opt span { font: 400 0.68rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-50); }
.calmenu__opt:hover, .calmenu__opt:focus-visible { background: var(--gold); color: var(--black); outline: none; }
.calmenu__opt:hover span, .calmenu__opt:focus-visible span { color: var(--black); }
.ev--deadline { border-style: dashed; background: transparent; }
.ev--deadline .ev__title { font-size: 1.3rem; }
.ev--partner { background: transparent; }
.ev.is-next { border-color: var(--gold); }
.ev.is-next .ev__status span { border-color: var(--gold); background: var(--gold); color: var(--black); }
.ev.is-live .ev__status span { border-color: var(--gold); color: var(--gold); }
.ev.is-done { opacity: 0.66; }
.ev.is-done .ev__actions { display: none; }

@media (min-width: 760px) {
  .strip {
    display: grid;
    grid-template-columns: repeat(31, minmax(0, 1fr));
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
  }
  .strip li { position: relative; display: flex; }
  .strip li + li { border-left: 1px solid var(--gold-faint); }
  .strip__day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 8px 0 6px;
    border: 0;
    background: none;
    font: 400 0.66rem/1 var(--f-mono);
    color: var(--white-50);
  }
  .strip__day::after { content: ""; width: 60%; height: 3px; background: transparent; }
  button.strip__day { cursor: pointer; color: var(--white); }
  button.strip__day::after { background: var(--gold); }
  button.strip__day.is-deadline::after { background: none; border-top: 1px dashed var(--gold); height: 0; margin-top: 2px; }
  button.strip__day:hover, button.strip__day.is-current { background: var(--gold-faint); }
  .strip__day.is-past { color: var(--white-50); }
  button.strip__day.is-past::after { background: var(--gold-line); }
  .strip__day.is-today { color: var(--black); background: var(--white); opacity: 1; }
  .strip__day.is-today::before { content: "Today"; position: absolute; top: -18px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

  /* without pinning (reduced motion, short screens) the track is a swipeable row */
  .events__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold-line) transparent; }
  .events__track { display: flex; width: max-content; gap: 20px; }
  .events__track::after { content: ""; flex: none; width: 1px; }
  .ev { flex: none; width: clamp(300px, 30vw, 360px); min-height: 380px; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
}
/* pinned: the section is as tall as the horizontal travel; the inner panel sticks while the track pans */
.events.is-pinned .events__pin { height: var(--pin-h, auto); }
.events.is-pinned .events__sticky {
  position: sticky;
  top: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
.events.is-pinned .events__viewport { overflow: visible; padding-bottom: 0; }
.events.is-pinned .events__track { transform: translate3d(var(--tx, 0), 0, 0); will-change: transform; }
.events.is-pinned { padding-bottom: 0; }
.events.is-pinned .events__pin { padding-bottom: 0; }

/* ---------- committee teaser + firms board ---------- */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.head-row .h2 { margin-bottom: 0; }
.seats { display: grid; grid-template-columns: 1fr 1fr; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--black); }
.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px 22px 0;
  border-bottom: 1px solid var(--black-line);
}
.seat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--black-line); }
.seat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.seat:nth-child(even)::after { left: 16px; }
.seat:hover::after { transform: scaleX(1); }
.seat__img {
  width: 72px; height: 72px;
  margin-bottom: 12px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-2);
  box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--gold);
  transition: transform 0.4s var(--ease);
}
.seat:hover .seat__img { transform: scale(1.06); }
.seat__code { font: 400 0.7rem/1.4 var(--f-mono); letter-spacing: 0.14em; color: var(--gold-ink); }
.seat__name { font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.2 var(--f-title); }
.seat__role { font: 700 0.7rem/1.4 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--black-76); }
@media (min-width: 760px) {
  .seats { grid-template-columns: repeat(3, 1fr); }
  .seat, .seat:nth-child(even) { padding: 22px 18px 24px; border-left: 1px solid var(--black-line); }
  .seat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .seat::after, .seat:nth-child(even)::after { left: 18px; }
  .seat:nth-child(3n + 1)::after { left: 0; }
}
@media (min-width: 1100px) {
  .seats { grid-template-columns: repeat(6, 1fr); }
  .seat:nth-child(n) { padding-left: 18px; border-left: 1px solid var(--black-line); }
  .seat:first-child { padding-left: 0; border-left: 0; }
  .seat:nth-child(n)::after { left: 18px; }
  .seat:first-child::after { left: 0; }
}

.board { display: grid; gap: 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--black-line); }
.board__num { margin: 0 0 6px; font: 400 clamp(4.2rem, 9vw, 7.5rem)/0.9 var(--f-title); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.board__stat .muted { max-width: 22ch; margin: 0; }
.firm-wall { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--black-line); }
.firm-wall .firm { min-height: 64px; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--black-line); color: var(--black); }
.firm-wall .firm__name { font-size: 1.1rem; color: var(--black); }
.firm-wall .firm:hover, .firm-wall .firm:hover .firm__name { color: var(--gold-ink); }
@media (min-width: 480px) { .firm-wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .firm-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) and (max-width: 1239px) { .firm-wall { grid-template-columns: repeat(2, 1fr); } }
.firm-wall .firm { min-width: 0; }
.firm-wall .firm--word .firm__mark { flex: 0 1 auto; }
@media (min-width: 1000px) {
  .board { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
}

/* ---------- society life: photos (wipe in) + cadence ---------- */
.life { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.photos { display: grid; gap: 16px; }
.photo { display: flex; flex-direction: column; margin: 0; }
.photo__frame { overflow: hidden; }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cream-2); }
.photo figcaption { margin-top: 10px; font: 400 0.72rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .wipe img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
  .js .wipe.in img { clip-path: inset(0 0 0 0); transform: none; }
  .js .wipe figcaption { opacity: 0; transition: opacity 0.6s 0.5s; }
  .js .wipe.in figcaption { opacity: 1; }
  .js .photos .wipe:nth-child(2) img { transition-delay: 0.12s; }
  .js .photos .wipe:nth-child(3) img { transition-delay: 0.24s; }
}
.cadence__list { margin: 0; }
.cadence__list > div { padding: 16px 18px; border-top: 1px solid var(--gold-faint); }
.cadence__list > div:first-child { border-top: 0; }
.cadence__list dt { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cadence__list dd { margin: 0; font-size: 0.95rem; color: var(--white-74); }
.cadence__list dd b { display: block; margin-bottom: 2px; font: 400 1.1rem/1.3 var(--f-title); color: var(--white); }
.beat { display: block; flex: none; width: 72px; height: 14px; border-bottom: 1px solid var(--gold-line); }
.beat--weekly { background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 7px) left bottom / 100% 100% no-repeat; }
.beat--ongoing { background: linear-gradient(var(--gold), var(--gold)) left bottom / 100% 2px no-repeat; }
.beat--termly {
  background:
    linear-gradient(var(--gold), var(--gold)) 4% 100% / 3px 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 100% / 3px 100% no-repeat,
    linear-gradient(var(--gold), var(--gold)) 96% 100% / 3px 100% no-repeat;
}
.beat--seasonal { background: linear-gradient(var(--gold), var(--gold)) 70% 100% / 24% 100% no-repeat; }
@media (min-width: 640px) { .photos { grid-template-columns: 1fr 1fr; } .photo--lead { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .life { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  .photo--lead img { aspect-ratio: 16 / 9; }
}

/* ---------- get involved: open applications ---------- */
.involved { display: grid; gap: 40px; }
.involved__copy .lead { max-width: 40ch; margin-bottom: 28px; }
.roster { background: var(--black-2); border: 1px solid var(--gold-line); }
.roster__list { margin: 0; padding: 0; list-style: none; }
.roster__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  align-items: center;
  padding: 20px 18px;
  border-top: 1px solid var(--gold-faint);
  transition: background-color 0.2s;
}
.roster__row:first-child { border-top: 0; }
.roster__row:hover { background: var(--black); }
.roster__title { font-size: 1.35rem; line-height: 1.2; }
.roster__desc { margin: 4px 0 0; font-size: 0.93rem; color: var(--white-74); }
.roster__due { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font: 400 0.74rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white-74); }
.roster__left { color: var(--gold); }
.roster__left.is-urgent { padding: 2px 6px; background: var(--gold); color: var(--black); }
.roster__btn { grid-column: 2; grid-row: 1 / span 2; }
.roster__row.is-closed { opacity: 0.5; }
.roster__row.is-closed .roster__btn { display: none; }
.roster__note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--gold-faint); font: 400 0.74rem/1.5 var(--f-mono); color: var(--white-50); }
@media (min-width: 1000px) { .involved { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; } }
@media (max-width: 479px) {
  .roster__row { grid-template-columns: 1fr; }
  .roster__btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- join + calculator ---------- */
.join { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.plans { display: grid; gap: 20px; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3.4vw, 40px); background: var(--white); border: 1px solid var(--gold); }
.plan__price { margin: 0 0 6px; font: 400 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--f-title); color: var(--gold-ink); }
.plan__price small { margin-left: 0.4em; font: 400 0.76rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--black-76); }
.plan > p:not(.plan__price):not(.mono-label) { max-width: 44ch; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.calc { margin: 0; }
.calc__picks { margin: 0; padding: 12px 18px 6px; border: 0; }
.calc__legend { padding: 0 0 8px; font-size: 0.92rem; color: var(--white-74); }
.calc__picks label { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.calc__picks input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.calc__picks input::before { content: ""; width: 10px; height: 10px; background: var(--gold); transform: scale(0); transition: transform 0.15s var(--ease); }
.calc__picks input:checked::before { transform: scale(1); }
.calc__picks input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.calc__picks b { font: 400 0.74rem/1 var(--f-mono); color: var(--gold); margin-right: 6px; }
.calc__range { margin: 4px 0 14px; }
.calc__picks .calc__range label { justify-content: space-between; min-height: 32px; cursor: default; }
.calc__range output { font: 400 1.5rem/1 var(--f-title); color: var(--gold); font-variant-numeric: tabular-nums; }
.calc__range input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; border: 0; background: transparent; cursor: pointer; }
.calc__range input[type="range"]::before { content: none; }
.calc__range input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--gold) var(--fill, 33%), var(--gold-line) var(--fill, 33%)); }
.calc__range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border: 0; background: var(--gold); }
.calc__range input[type="range"]::-moz-range-track { height: 3px; background: var(--gold-line); }
.calc__range input[type="range"]::-moz-range-progress { height: 3px; background: var(--gold); }
.calc__range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--gold); }
.calc__range input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.calc__scale { display: flex; justify-content: space-between; margin: 2px 0 0; font: 400 0.66rem/1 var(--f-mono); color: var(--white-50); }
.calc__sub { margin: 0; padding-top: 12px; border-top: 1px solid var(--white-12); font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.calc__sub span { color: var(--white-50); letter-spacing: 0.06em; text-transform: none; }
.calc__out { padding: 14px 18px 20px; border-top: 1px solid var(--gold-line); }
.calc__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.calc__head span + span { color: var(--white-50); }
.calc__out--year { background: rgba(200, 162, 75, 0.06); }
.calc__per--year .calc__big { font: 400 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--f-title); color: var(--gold); font-variant-numeric: tabular-nums; }
.calc__sum { margin: 0 0 4px; font: 400 0.82rem/1.4 var(--f-mono); color: var(--white-74); }
.calc__per { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.calc__per output { font: 400 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--f-title); color: var(--gold); font-variant-numeric: tabular-nums; }
.calc__per span { font: 400 0.76rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-74); }
.calc__note { margin: 8px 0 0; font-size: 0.88rem; color: var(--white-50); }
.join__notes { display: grid; gap: 12px 48px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--black-line); }
.join__notes p { margin: 0; max-width: 60ch; }
.join__notes strong { color: var(--black); }
@media (min-width: 800px) { .plans { grid-template-columns: 1fr 1fr; } .join__notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .join { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }

/* ---------- contact + footer ---------- */
.footer { padding: var(--section-y) 0 32px; border-top: 1px solid var(--gold-line); }
.footer--slim { padding-top: clamp(48px, 6vw, 72px); }
.contact { display: grid; gap: 40px; padding-bottom: clamp(56px, 7vw, 96px); }
.contact .lead { max-width: 38ch; margin-bottom: 26px; }
.channels { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gold-line); }
.channels a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--gold-line);
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.2s, padding 0.3s var(--ease);
}
.channels a:hover { background: var(--gold-faint); padding-left: 12px; }
.channels svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.channels span { display: flex; flex-direction: column; min-width: 0; font: 400 1.25rem/1.25 var(--f-title); }
.channels small { font: 400 0.8rem/1.5 var(--f-mono); color: var(--white-50); overflow-wrap: anywhere; }
.footer__grid { display: grid; gap: 36px; padding-top: 40px; border-top: 1px solid var(--gold-line); }
.footer--slim .footer__grid { padding-top: 0; border-top: 0; }
.footer__word { margin: 0 0 18px; }
.footer__logo { display: block; width: clamp(220px, 24vw, 300px); max-width: 100%; height: auto; aspect-ratio: 431.9 / 100; color: var(--white); }
.footer__tag { margin: 0; font: italic 400 1.1rem/1.4 var(--f-title); color: var(--gold); }
.footer__head { margin: 0 0 12px; font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer__col a { padding: 5px 0; color: var(--white-74); text-decoration: none; overflow-wrap: anywhere; }
.footer__col a:hover, .footer__bottom a:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--gold-line);
  font: 400 0.78rem/1.6 var(--f-mono);
  color: var(--white-50);
}
.footer__bottom p { margin: 0; max-width: 80ch; }
.footer__bottom a { color: var(--white); }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .footer__grid { grid-template-columns: 2fr 1fr 1.2fr; }
}

/* ---------- committee page ---------- */
.team-head { padding: clamp(44px, 5.5vw, 80px) 0 clamp(40px, 5vw, 64px); }
.team-head__grid { display: grid; gap: 36px; }
.team-head__lead { max-width: 46ch; }
.glance { margin: 0; }
.glance > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 12px; padding: 11px 18px; border-top: 1px solid var(--gold-faint); }
.glance > div:first-child { border-top: 0; }
.glance dt { font: 400 0.72rem/1.7 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-50); }
.glance dd { margin: 0; font-size: 0.98rem; line-height: 1.45; }
@media (min-width: 1000px) { .team-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: end; } }

.team__rule { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; font: 400 0.72rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.team__rule::after { content: ""; flex: 1; height: 1px; background: var(--black-line); }
/* equal columns: the gap holds the divider, so every portrait is the same size */
.people { --gap: 28px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.person { position: relative; padding: 24px 0; border-bottom: 1px solid var(--black-line); }
.person::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); width: 1px; background: var(--black-line); }
.person:nth-child(2n + 1)::before { display: none; }
.person__photo { position: relative; aspect-ratio: 1; margin-bottom: 16px; background: var(--cream-2); overflow: hidden; }
.person__photo img {
  position: absolute;
  inset: 8%;
  width: 84%; height: 84%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--cream-2), 0 0 0 3px var(--gold);
  transition: transform 0.6s var(--ease);
}
.person:hover .person__photo img { transform: scale(1.05); }
.person__photo::before, .person__photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity 0.25s, transform 0.35s var(--ease);
}
.person__photo::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; transform-origin: top left; }
.person__photo::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; transform-origin: bottom right; }
.person:hover .person__photo::before, .person:hover .person__photo::after,
.person:focus-within .person__photo::before, .person:focus-within .person__photo::after { opacity: 1; transform: scale(1.5); }
.person__code { margin: 0 0 6px; font: 400 0.72rem/1.4 var(--f-mono); letter-spacing: 0.14em; color: var(--gold-ink); }
.person__name { margin: 0 0 4px; font: 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.2 var(--f-title); }
.person__role { margin: 0; font: 700 0.7rem/1.4 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
/* three per row on tablet, six per row on desktop */
@media (min-width: 640px) {
  .people { --gap: 32px; grid-template-columns: repeat(3, 1fr); }
  .person { padding: 26px 0; border-bottom: 0; }
  .person:nth-child(n)::before { display: block; }
  .person:nth-child(3n + 1)::before { display: none; }
  .person:nth-child(n + 4) { border-top: 1px solid var(--black-line); }
}
@media (min-width: 1100px) {
  .people { grid-template-columns: repeat(6, 1fr); }
  .person:nth-child(n) { border-top: 0; }
  .person:nth-child(n)::before { display: block; }
  .person:first-child::before { display: none; }
}
.seat-band__row { display: grid; gap: 28px; align-items: center; }
.seat-band__row .h2 { margin-bottom: 0.3em; }
.seat-band__row .lead { max-width: 40ch; margin: 0; }
@media (min-width: 900px) { .seat-band__row { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* ---------- reveal on scroll (only when JS runs and motion is allowed) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}