/* =====================================================
   CCHMUN — Slate Navy / Brass
   Matte surfaces, hairline structure, one accent metal.
   Motion is used only where it carries meaning.
   ===================================================== */

:root {
  /* Slate navy scale — lifted, with real separation between planes */
  --ink-900: #0D1524;   /* page ground */
  --ink-850: #101A2C;
  --ink-800: #132035;   /* alternating band */
  --ink-700: #182740;   /* panel */
  --ink-600: #1E3050;   /* raised panel / feature band */
  --ink-550: #24395D;   /* hover plane */

  --line:      rgba(168,195,232,0.17);
  --line-soft: rgba(168,195,232,0.10);
  --line-hair: rgba(168,195,232,0.06);

  /* Brass — structural, never a glow */
  --brass:        #CBAA68;
  --brass-bright: #EBD6A4;
  --brass-deep:   #90773A;
  /* AUDIT: --brass-deep as small text measures 3.80:1 on the --ink-800 band.
     This is the same metal, lifted just far enough to clear AA. */
  --brass-dim:    #A88F4E;
  --brass-line:   rgba(203,170,104,0.38);
  --brass-wash:   rgba(203,170,104,0.075);

  --paper:  #F4F7FB;
  --text:   rgba(226,235,247,0.84);
  /* AUDIT: raised so both tiers clear WCAG AA (4.5:1) on every ground
     the site uses, including the lighter --ink-600 feature band. */
  --muted:  rgba(206,219,238,0.74);
  --faint:  rgba(206,219,238,0.62);

  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Two extra faces the editor can put on a selection. Neither is
     used by the design itself — they exist so a title or a pull
     quote can be set apart without inventing a new component. */
  --font-quote:   'Cormorant Garamond', Georgia, serif;
  --font-stencil: 'Archivo', system-ui, sans-serif;

  --shell: 1180px;
  --nav-h: 68px;

  /* Geometry — rounded, but never capsules */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Matte glass — one recipe, used on a small, deliberate set of surfaces.
     Low saturation, a real border, one hairline highlight along the top
     edge: frosted glass over navy, not translucent plastic. */
  --glass-bg:     rgba(24, 39, 64, 0.62);
  --glass-bg-up:  rgba(30, 48, 80, 0.76);
  --glass-blur:   blur(22px) saturate(125%);
  --glass-border: rgba(178,202,235,0.14);
  --glass-shade:  0 26px 60px -30px rgba(0,0,0,0.75);

  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0.14, 0.3, 1);

  /* ── Depth ──────────────────────────────────────────
     One light source, fixed at the top left, for the whole
     site: highlight up-left, shadow down-right. On a ground
     this dark the "light" is a cool tint at very low alpha —
     enough to read as an edge catching light, never a glow.
     Four levels only, so depth stays meaningful. */
  --lit:       rgba(176, 202, 238, 0.055);
  --lit-soft:  rgba(176, 202, 238, 0.035);
  --shade:     rgba(2, 5, 12, 0.55);
  --shade-deep:rgba(2, 5, 12, 0.72);

  /* L1 — resting surface: cards, plates, panels */
  --d-1: -2px -2px 5px var(--lit), 3px 5px 12px var(--shade);
  /* L1 hover — the same surface, lifted */
  --d-2: -3px -3px 7px var(--lit), 5px 8px 20px var(--shade);
  /* L3 — genuinely above the page: dialogs, the price plate */
  --d-3: -3px -3px 9px var(--lit-soft), 10px 16px 36px var(--shade-deep);
  /* Recessed: inputs, tab tracks, wells, framed images */
  --d-in: inset 3px 4px 9px var(--shade), inset -2px -2px 6px var(--lit);
  /* Pressed: the moment of a click */
  --d-press: inset 2px 3px 7px var(--shade-deep), inset -1px -1px 3px var(--lit-soft);

  --t-depth: 190ms;
}

/* The matte-glass surface. Defined once so the treatment is identical
   everywhere it appears — and used rarely enough to still mean something:
   the header, the two dialogs, and the registration price plate. */
.matte {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shade);
}
.matte::after {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235,214,164,0.34) 22%, rgba(235,214,164,0.34) 78%, transparent);
  pointer-events: none;
  border-radius: inherit;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .matte { background: var(--ink-700); }
}

/* ── Reset & base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink-900); scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ── Dead-link backstop ─────────────────────────────
   Every link whose destination comes from the CMS carries
   data-cms-attr. Such a link is only a control while it HAS a
   destination: unset (the markup's built-in placeholder "#"),
   cleared by an editor (empty), or stripped entirely, it is not
   drawn for a visitor at all. One rule, keyed on the contract
   attribute rather than on any one component's class, so a link
   field added later is covered the day it is added — no per-field
   guard to remember.
   The negation is on <html>, which js/cms-edit.js flags: inside
   the editor the link stays visible and clickable, because a link
   with no destination is exactly the thing an editor clicks to
   set one. */
html:not([data-cms-edit]) a[data-cms-attr]:not([href]),
html:not([data-cms-edit]) a[data-cms-attr][href=""],
html:not([data-cms-edit]) a[data-cms-attr][href="#"] { display: none !important; }
/* …and a line of the footer that holds nothing but such a link
   goes with it, rather than leaving an empty row behind. */
html:not([data-cms-edit]) p:has(> a[data-cms-attr]:only-child:not([href])),
html:not([data-cms-edit]) p:has(> a[data-cms-attr][href=""]:only-child),
html:not([data-cms-edit]) p:has(> a[data-cms-attr][href="#"]:only-child) { display: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--brass); color: #101A2C; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.16;
  letter-spacing: -0.014em;
}
p { color: var(--text); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brass); color: #101A2C;
  padding: 12px 18px; font-size: 13px; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Small tracked label — the system's connective tissue */
.label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}
.label.brass, .brass { color: var(--brass); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  padding: 13px 24px;
  border-radius: var(--r-sm);
  transition: background var(--t-depth) var(--ease), color var(--t-depth) var(--ease),
              border-color var(--t-depth) var(--ease),
              transform var(--t-depth) var(--ease-out),
              box-shadow var(--t-depth) var(--ease-out);
}
.btn i { font-size: 11px; transition: transform .34s var(--ease-out); }
.btn-solid {
  background: var(--brass);
  color: #14203A;
  font-weight: 600;
  /* The brass sits proud of the page; its own edge catches the light. */
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22),
              inset -1px -2px 0 rgba(20,32,58,0.18),
              -2px -2px 4px var(--lit), 3px 5px 12px var(--shade);
}
.btn-solid:hover {
  background: var(--brass-bright);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.26),
              inset -1px -2px 0 rgba(20,32,58,0.2),
              -3px -3px 6px var(--lit), 5px 8px 18px var(--shade);
}
/* Pressed: the surface sinks and the light moves to the far edge. */
.btn-solid:active {
  background: var(--brass);
  transform: translateY(1px);
  box-shadow: inset 2px 3px 7px rgba(20,32,58,0.34),
              inset -1px -1px 3px rgba(255,255,255,0.14);
  transition-duration: 90ms;
}
.btn-quiet:active { transform: translateY(1px); transition-duration: 90ms; }
.btn:disabled, .btn[aria-disabled="true"] {
  box-shadow: none;
  opacity: .5;
  cursor: default;
  transform: none;
}
.btn-solid:hover i { transform: translateX(3px); }
.btn-quiet {
  color: var(--text);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 2px;
}
.btn-quiet:hover { color: var(--paper); border-bottom-color: var(--brass); }
.btn-sm { padding: 9px 17px; font-size: 13px; }
.btn-block { width: 100%; }

/* ── Header ────────────────────────────────────────── */
#header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  background: rgba(13,21,36,0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--lit-soft);
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
/* Once the page moves under it, the bar reads as a raised ledge. */
#header.scrolled {
  background: rgba(15,25,42,0.9);
  box-shadow: 0 1px 0 var(--lit), 0 10px 24px -14px var(--shade-deep);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #header { background: var(--ink-850); }
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }

/* Reading progress — a hairline along the header's bottom edge */
#scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass));
  transform: scaleX(0); transform-origin: left;
  transition: transform .12s linear, opacity .4s var(--ease);
  opacity: 0;
}
#header.scrolled #scroll-progress { opacity: 1; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--paper); }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: block; object-fit: contain;
  transition: transform .6s var(--ease-out), filter .4s var(--ease);
}
.brand:hover .brand-mark { transform: scale(1.04); }
.brand-word { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.01em; }

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
/* A menu entry whose section is hidden is dropped, not greyed out —
   the [hidden] flag is set by cms.js and must win inside the flex row. */
.nav-links li[hidden], #mobile-nav-overlay li[hidden], .footer-links li[hidden] { display: none; }
.nav-link-item {
  position: relative;
  font-size: 14px; color: var(--muted);
  padding: 4px 0;
  transition: color .22s var(--ease);
}
.nav-link-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav-link-item:hover { color: var(--paper); }
.nav-link-item:hover::after { transform: scaleX(1); }
.nav-link-item.active { color: var(--brass); }
.nav-link-item.active::after { transform: scaleX(1); }

/* The two social glyphs used to float loose beside the brass
   button with nothing tying them to it. They are now one unit,
   separated from the button by a hairline and given a real hit
   target, so the header reads as: links · divider · action. */
.header-right { display: flex; align-items: center; gap: 14px; }
.header-social {
  display: flex; align-items: center; gap: 2px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: var(--faint); font-size: 14px;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.icon-link:hover { color: var(--brass); background: rgba(168,195,232,0.06); }
.icon-link:active { box-shadow: var(--d-press); transition-duration: 90ms; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  margin-left: auto;
  border-radius: var(--r-sm);
  transition: box-shadow var(--t-depth) var(--ease), background var(--t-depth) var(--ease);
}
.hamburger:active { box-shadow: var(--d-press); background: var(--ink-800); transition-duration: 90ms; }
.hamburger.open { box-shadow: var(--d-in); background: var(--ink-800); }
.hamburger span { width: 22px; height: 1.5px; background: var(--paper); transition: transform .3s var(--ease), opacity .2s; }
.hamburger.open span:first-child { transform: translateY(3.2px) rotate(45deg); }
.hamburger.open span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

/* ── Mobile nav ────────────────────────────────────── */
#mobile-nav-overlay {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 88;
  background: var(--ink-900);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .44s var(--ease), visibility .44s;
  overflow-y: auto;
}
#mobile-nav-overlay.open { transform: translateY(0); visibility: visible; }
.mobile-nav-inner { padding: 20px 28px 48px; }
.mobile-nav-link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-hair);
  font-family: var(--font-display); font-size: 24px; color: var(--paper);
}
.m-num { font-size: 11px; letter-spacing: 0.12em; color: var(--brass); font-family: var(--font-ui); }
.mobile-cta { margin-top: 28px; width: 100%; }

/* =====================================================
   v19 — EDITORIAL LAYOUT
   The page reads as a conference programme: a photographic
   opening, an identity line, then sections that each take the
   composition their content needs — a split statement, a
   letter, an archive, a showcase, a register, a timeline, a
   roster, a fee schedule, a document list. No two neighbours
   share a composition, and the grounds alternate so the eye
   always knows where one section ends.
   ===================================================== */
:root {
  --shell: 1280px;
  --gutter: 32px;
  --h-primary:  clamp(40px, 5.4vw, 76px);
  --h-standard: clamp(34px, 4.2vw, 58px);
  --h-utility:  clamp(28px, 3vw, 40px);
}
.shell { max-width: var(--shell); padding: 0 var(--gutter); }

/* ── Section rhythm ────────────────────────────────── */
section { padding: 120px 0; position: relative; }
section[hidden] { display: none !important; }
section.band { background: var(--ink-800); border-block: 1px solid var(--line-hair); }

/* Grounds, per section, so the alternation survives a reorder of any
   two neighbours better than a strict odd/even would. */
#about        { background: var(--ink-900); }
#secretary    { background: var(--ink-800); border-block: 1px solid var(--line-hair); }
#muns         { background: var(--ink-900); border-block: 0; }
#committees   { background: var(--ink-850); border-block: 1px solid var(--line-hair); padding: 128px 0 112px; }
#schedule     { background: var(--ink-800); padding: 128px 0; }
#socials      { background: var(--ink-900); }
#important-dates { background: var(--ink-850); border-top: 1px solid var(--line-hair); }
#team         { background: var(--ink-800); padding: 128px 0; }
#registration { background: var(--ink-900); border-top: 1px solid var(--brass-line); padding: 128px 0; }
#sponsors     { background: var(--ink-850); padding: 88px 0; }
#resources    { background: var(--ink-900); padding: 104px 0; }
#contact      { background: var(--ink-800); padding: 88px 0; }

/* ── Section heads ─────────────────────────────────── */
.sec-head {
  max-width: 760px; margin-bottom: 56px; position: relative;
  --sec-h2: var(--h-standard);
}
#committees .sec-head, #schedule .sec-head, #team .sec-head,
#registration .sec-head, #secretary .sec-head { --sec-h2: var(--h-primary); }
#sponsors .sec-head, #resources .sec-head, #contact .sec-head { --sec-h2: var(--h-utility); margin-bottom: 40px; }
.sec-head-wide { max-width: 820px; }
/* Index and eyebrow share one line: a mono numeral, a brass rule, the
   label. The numeral is a ledger mark, set small and tabular. */
.sec-index {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; color: var(--brass-dim);
  font-variant-numeric: tabular-nums;
}
.sec-index:not(:empty)::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; margin: 0 14px 0 14px;
  background: var(--brass-line);
}
.sec-head .label { display: inline-block; vertical-align: middle; margin-bottom: 0; }
.sec-head h2 {
  margin-top: 22px;
  font-size: var(--sec-h2); font-weight: 300;
  line-height: 1.02; letter-spacing: -0.024em;
  text-wrap: balance;
}
.sec-sub { margin-top: 20px; color: var(--muted); font-size: 16.5px; line-height: 1.6; max-width: 52ch; }

/* Reveal — short, once, and only on structural blocks */
.animate-on-scroll { opacity: 0; transform: translateY(14px); }
.animate-on-scroll.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.stagger > * { opacity: 0; transform: translateY(12px); }
.stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ── Hero ──────────────────────────────────────────── */
/* A photographic opening that fills the first screen. The title sits low
   on the left where the photographs are darkest; the facts, the clock and
   the photograph index share one ruled strip along the foot. */
#intro {
  min-height: min(100svh, 1000px);
  padding: calc(var(--nav-h) + 72px) 0 0;
  display: flex; flex-direction: column;
  background: linear-gradient(178deg, #16233B 0%, #101A2C 46%, var(--ink-900) 100%);
  border-bottom: 1px solid var(--line-hair);
  overflow: hidden;
}
#meridian {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
@media (max-width: 700px) { #meridian { display: none; } }
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(96% 110% at 4% 70%, rgba(16,26,44,0.96) 0%, rgba(16,26,44,0.74) 46%, rgba(16,26,44,0.16) 78%, transparent 100%);
}

/* ── Hero carousel (hero.slides) ───────────────────────
   Six photographs cross-fading behind the headline. Three rules
   hold the design in place:

     · The slides are out of flow — absolute, inset 0, object-fit
       cover — so however many there are, whatever size they are and
       whenever they arrive, they move nothing. CLS is 0 by
       construction, not by measurement.
     · Exactly one layer of atmosphere at a time. When the carousel
       has slides the drawn canvas is switched off (see
       .has-hero-carousel below) — a photograph, a turning wireframe
       globe and a veil on top of each other is noise, not a hero.
     · The tint is the thing that makes the type legible, so it is a
       colour and an opacity the client owns, not a hard-coded scrim.
       Its two values arrive as custom properties from cms.js. */
.hero-carousel {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--hero-slide-fade, 1400ms) linear;
  will-change: opacity;
}
.hero-slide.is-on { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* The photographs are documentary, not decorative: held back a little
     so the brass and the paper white stay the only saturated things
     in the hero. */
  filter: saturate(0.72) contrast(0.94);
}

/* The tint. Colour and opacity are both CMS fields; the defaults are
   set in js/cms.js, which is also the only thing that writes these. */
.hero-tint {
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--hero-tint, #0E1B33);
  opacity: var(--hero-tint-opacity, 0.72);
}

/* One atmosphere at a time — the carousel wins over both the drawn
   canvas and the single still photograph. js/main.js reads the same
   class and never starts its loop, so nothing is merely hidden. */
#intro.has-hero-carousel #meridian { display: none; }
#intro.has-hero-carousel .hero-photo { display: none; }

/* Over a photograph the veil has to do more work than it does over the
   plain navy ground, so it closes the way it already does for the still
   hero photograph. */
#intro.has-hero-carousel .hero-veil {
  background: radial-gradient(118% 128% at 4% 42%, rgba(13,21,36,0.92) 0%, rgba(13,21,36,0.78) 44%, rgba(13,21,36,0.56) 74%, rgba(13,21,36,0.42) 100%);
}

/* Below 900px the type crosses the whole width — there is no empty
   right-hand third for a picture to sit in — so the veil stops being a
   pool on the left and becomes an even wash, exactly as it already does
   for the single still hero photograph. */
@media (max-width: 900px) {
  #intro.has-hero-carousel .hero-veil {
    background: linear-gradient(180deg, rgba(13,21,36,0.86) 0%, rgba(13,21,36,0.74) 50%, rgba(13,21,36,0.86) 100%);
  }
}

/* Phone: a photograph behind a headline on a 390px screen is a
   legibility problem, and the answer is the same one the canvas
   already uses at this width — stop the motion. One still frame
   stays (the client's photography is the point) but nothing
   rotates, the other five images are never fetched, and the tint
   closes another notch because the type crosses the whole width
   here with no empty third to sit in. js/main.js reads the same
   700px line and never starts the timer below it. */
@media (max-width: 700px) {
  #intro.has-hero-carousel .hero-tint { opacity: calc(var(--hero-tint-opacity, 0.72) + (1 - var(--hero-tint-opacity, 0.72)) * 0.45); }
  #intro.has-hero-carousel .hero-veil {
    background: linear-gradient(180deg, rgba(13,21,36,0.88) 0%, rgba(13,21,36,0.80) 55%, rgba(13,21,36,0.90) 100%);
  }
  .hero-slide { transition: none; }
}

/* Reduced motion: the first slide, still. No timer runs in JS either. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ── The carousel inside the visual editor ─────────────
   Three things have to be true at once here: the tint must be
   judgeable (so the photographs stay where they are, under it), the
   slide being edited must hold still (so its controls are not a moving
   target — the "slide n of m" chip in the hero panel steps it), and
   those controls must be reachable.

   The last one is why the cross-fade is swapped for display here. An
   element at less than full opacity is its own stacking context, and a
   control inside one cannot be lifted over the tint and the veil no
   matter what z-index it is given — it would be there, washed out to
   nothing, which is worse than absent. Showing one slide outright
   costs the editor nothing and hands the controls back. */
[data-cms-edit] .hero-slide {
  display: none;
  opacity: 1;
  transition: none;
  will-change: auto;
}
[data-cms-edit] .hero-slide.is-on {
  display: block;
  pointer-events: auto;
}
/* A slide whose photograph has not been chosen yet: an empty frame you
   can still click to give one. */
[data-cms-edit] .hero-slide.is-blank.is-on {
  outline: 1px dashed rgba(203,170,104,0.55);
  outline-offset: -8px;
}
/* Clear of the header above and the countdown ledger below-right. */
[data-cms-edit] .hero-slide > .cms-item-tools {
  top: 92px; right: 14px; bottom: auto; left: auto;
}
[data-cms-edit] .hero-slide > .cms-alt-chip {
  position: absolute; top: 126px; right: 14px; z-index: 20;
}
/* The add button belongs to a list that is out of flow; keeping it out of
   flow too is what stops the editor's chrome from moving the hero. */
[data-cms-edit] .cms-add[data-cms-add="hero.slides"] {
  position: absolute; left: 0; right: 0; bottom: 12px;
  z-index: 6; justify-content: center;
}

/* ── Hero photograph (theme.heroBackgroundImage) ──────
   An optional client picture, and the rule it lives under is that
   the type wins. It is desaturated, held well under 20% and sits
   BELOW the canvas and the veil, so it never becomes the subject.
   No new scrim element: the veil the hero already has simply goes
   opaque when a photograph is behind it, which is what keeps the
   title legible over a bright image at every width. */
.hero-photo {
  position: absolute; inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(0.92);
  opacity: 0;
}
#intro.has-hero-photo .hero-photo { opacity: .17; }
#intro.has-hero-photo .hero-veil {
  background: radial-gradient(120% 130% at 4% 42%, rgba(13,21,36,0.985) 0%, rgba(13,21,36,0.93) 44%, rgba(13,21,36,0.80) 74%, rgba(13,21,36,0.66) 100%);
}
/* Narrow screens have no empty right-hand third for a picture to live in —
   the type crosses the whole width — so the veil closes further still. */
@media (max-width: 900px) {
  #intro.has-hero-photo .hero-photo { opacity: .12; }
  #intro.has-hero-photo .hero-veil {
    background: linear-gradient(180deg, rgba(13,21,36,0.95) 0%, rgba(13,21,36,0.90) 55%, rgba(13,21,36,0.95) 100%);
  }
}

/* Over photographs the scrim is weighted to where the type is: the lower
   left. The top of the frame stays open so the photograph reads. */
#intro.has-hero-carousel .hero-veil {
  background:
    linear-gradient(0deg, rgba(10,17,30,0.94) 0%, rgba(10,17,30,0.62) 34%, rgba(10,17,30,0.16) 72%, rgba(10,17,30,0.30) 100%),
    linear-gradient(90deg, rgba(10,17,30,0.66) 0%, rgba(10,17,30,0.18) 62%, transparent 100%);
}
@media (max-width: 900px) {
  #intro.has-hero-carousel .hero-veil {
    background: linear-gradient(0deg, rgba(10,17,30,0.95) 0%, rgba(10,17,30,0.72) 48%, rgba(10,17,30,0.45) 100%);
  }
}

.hero-grid {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; align-items: flex-end;
  width: 100%;
  padding-bottom: 64px;
}
.hero-lead { max-width: 1040px; }

/* Entrance — staggered once, never repeated */
.hero-eyebrow, .hero-title .hl, .hero-motto, .hero-actions, .hero-base-inner {
  opacity: 0; transform: translateY(16px);
  animation: rise .95s var(--ease-out) forwards;
}
.hero-eyebrow    { animation-delay: .05s; }
.hero-title .hl:nth-child(1) { animation-delay: .14s; }
.hero-title .hl:nth-child(2) { animation-delay: .22s; }
.hero-title .hl:nth-child(3) { animation-delay: .30s; }
.hero-motto      { animation-delay: .40s; }
.hero-actions    { animation-delay: .50s; }
.hero-base-inner { animation-delay: .58s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero-eyebrow { margin-bottom: 26px; color: var(--brass-bright); }
.hero-title {
  font-size: clamp(50px, 8.4vw, 124px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.036em;
}
/* Direct children only. A descendant selector here turned every
   span the editor puts *inside* a line — a coloured word, a
   highlight — into a block, which broke the line in two. */
.hero-title > span, .hero-title > em { display: block; }
.hero-title > em { font-style: italic; color: var(--brass-bright); font-weight: 300; }
.hero-motto {
  margin-top: 30px;
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.hero-motto .sep { color: var(--brass-dim); margin: 0 12px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.hero-actions .btn-solid { padding: 15px 26px; font-size: 15px; }
.btn svg { flex: none; transition: transform .34s var(--ease-out); }
.btn-solid:hover svg { transform: translateX(3px); }

/* The foot strip. Solid enough to read against any photograph, never
   blurred: a printed rule with a band of navy under it. */
.hero-base {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(235,214,164,0.24);
  background: rgba(10,17,30,0.72);
}
.hero-base-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 48px;
  padding-top: 22px; padding-bottom: 22px;
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px 56px; }
.hero-facts dt {
  font-size: 10px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.hero-facts dd { font-size: 15px; color: var(--paper); line-height: 1.4; }

/* Countdown — one line of four numerals. Days leads by weight, not by
   a different size: the strip keeps one baseline. */
.hero-clock {
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 28px;
  padding-left: 48px; border-left: 1px solid var(--line);
}
.hero-clock > .label { grid-column: 1; max-width: 11ch; line-height: 1.5; margin: 0; }
.clock-rows { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 26px; }
.clock-rows li {
  --cd-h: 40px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.cd-num {
  position: relative; display: block;
  height: var(--cd-h); overflow: hidden;
  font-family: var(--font-display);
  font-size: 38px; font-weight: 300; line-height: var(--cd-h);
  color: var(--paper); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.clock-rows li:nth-child(n+3) .cd-num { color: var(--muted); }
.cd-num .digit { display: block; height: var(--cd-h); }
.cd-num .digit.out { animation: roll-out .42s var(--ease-out) forwards; }
.cd-num .digit.in  { position: absolute; inset: 0; animation: roll-in .42s var(--ease-out) forwards; }
@keyframes roll-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes roll-in  { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-label { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.clock-rows li:nth-child(1) .cd-label { color: var(--brass); }
.clock-rule { grid-column: 1; height: 1px; margin-top: 10px; background: var(--line-hair); overflow: hidden; align-self: start; }
.clock-rule span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--brass);
  transition: transform .9s linear;
}
.hero-index {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--faint); font-variant-numeric: tabular-nums;
  padding-left: 32px; border-left: 1px solid var(--line);
  align-self: stretch; display: flex; align-items: center;
}
.hero-index[hidden] { display: none; }
.hero-index .hi-now { color: var(--paper); }
.hero-index .hi-sep { margin: 0 8px; color: var(--brass-dim); }

/* ── Identity line ─────────────────────────────────── */
.ticker {
  position: relative;
  background: var(--ink-850);
  border-bottom: 1px solid var(--line-hair);
  overflow: hidden;
}
.ticker[hidden] { display: none; }
.ticker-viewport {
  display: flex; width: max-content;
  animation: ticker-run var(--ticker-duration, 40s) linear infinite;
}
.ticker.is-still .ticker-viewport, .ticker:not(.is-running) .ticker-viewport { animation: none; }
.ticker-track { display: flex; flex: none; margin: 0; }
.tk-item {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 32px); font-weight: 300;
  color: var(--paper); white-space: nowrap;
  padding: 20px 0;
}
.tk-item:nth-child(even) { font-style: italic; color: var(--brass-bright); }
.tk-item::after {
  content: ''; flex: none;
  width: 6px; height: 6px; margin: 0 38px;
  border: 1px solid var(--brass); transform: rotate(45deg);
}
@keyframes ticker-run { to { transform: translateX(-50%); } }
.ticker-clone { pointer-events: none; }

/* ── About ─────────────────────────────────────────── */
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 72px; align-items: end;
  margin-bottom: 64px;
}
.about-top .sec-head { margin-bottom: 0; }
.about-top .lede {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.42; color: var(--paper); font-weight: 300;
  max-width: 38ch; padding-bottom: 4px;
}
.about-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 44px 48px;
  align-items: start;
}
.about-figure {
  grid-column: 1 / span 7; grid-row: 1 / span 2;
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-800);
}
.about-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-layout .prose { grid-column: 9 / -1; grid-row: 1; }
.about-layout .fact-table { grid-column: 9 / -1; grid-row: 2; }
/* No photograph: the prose and the table share the width instead. */
html:not([data-cms-edit]) .about-figure:not(:has(img[src]:not([src=""]))) { display: none; }
html:not([data-cms-edit]) .about-layout:not(:has(.about-figure img[src]:not([src=""]))) .prose { grid-column: 1 / span 6; grid-row: 1; }
html:not([data-cms-edit]) .about-layout:not(:has(.about-figure img[src]:not([src=""]))) .fact-table { grid-column: 8 / -1; grid-row: 1; }
.prose p { font-size: 16px; line-height: 1.72; margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.fact-table { width: 100%; border-collapse: collapse; }
.fact-table caption {
  text-align: left; padding-bottom: 13px;
  border-bottom: 1px solid var(--brass-line);
}
.fact-table th, .fact-table td {
  padding: 15px 0; vertical-align: top;
  border-bottom: 1px solid var(--line-hair);
  font-size: 14.5px;
}
.fact-table th {
  width: 34%; text-align: left; font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); padding-top: 18px;
}
.fact-table td { color: var(--paper); line-height: 1.5; }

/* ── Message from the General Secretary ────────────── */
.gs-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 88px; align-items: start;
}
.gs-portrait {
  position: sticky; top: calc(var(--nav-h) + 40px);
  margin: 0; aspect-ratio: 4 / 5;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-700);
}
.gs-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gs-body .sec-head { margin-bottom: 40px; }
.gs-quote { margin: 0 0 40px; padding: 4px 0 4px 30px; border-left: 1px solid var(--brass); }
.gs-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(23px, 2.5vw, 33px); line-height: 1.36;
  color: var(--paper); letter-spacing: -0.01em;
}
.gs-message { font-size: 17px; line-height: 1.8; color: var(--text); max-width: 64ch; }
.gs-sign {
  margin-top: 48px; padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start;
}
.gs-signature { max-height: 76px; max-width: 240px; width: auto; margin-bottom: 14px; }
html:not([data-cms-edit]) .gs-signature:not([src]),
html:not([data-cms-edit]) .gs-signature[src=""] { display: none; }
.gs-name { font-family: var(--font-display); font-size: 25px; color: var(--paper); line-height: 1.2; }
.gs-role { margin-top: 6px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.gs-support { margin-top: 4px; font-size: 13px; color: var(--faint); }
html:not([data-cms-edit]) .gs-portrait:not(:has(img[src]:not([src=""]))) { display: none; }
html:not([data-cms-edit]) .gs-grid:not(:has(.gs-portrait img[src]:not([src=""]))) { grid-template-columns: minmax(0, 820px); }
html:not([data-cms-edit]) .gs-quote:has(> .cms-empty) { display: none; }

/* ── MUNs attended — an archive by year ─────────────── */
.year-tabs {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 0 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.year-tabs .day-tab .dt-name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.year-tabs .day-tab .dt-sub { min-height: 0; -webkit-line-clamp: 1; margin-top: 8px; }
.year-tabs .day-tab { padding: 14px 26px 16px 0; margin-right: 22px; background: none; box-shadow: none; }
.year-tabs .day-tab:hover { background: none; }
.year-tabs .day-tab[aria-selected="true"] { background: none; box-shadow: none; }
.year-tabs .day-tab:not([aria-selected="true"]) .dt-name { color: var(--faint); }
.mun-list { counter-reset: mun; }
.mun-row {
  border-bottom: 1px solid var(--line-hair);
  transition: background .34s var(--ease);
}
.mun-row.is-hidden { display: none; }
.mun-row:hover { background: var(--line-hair); }
.mun-row.is-open { background: transparent; }
.mun-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center; gap: 24px;
  padding: 26px 4px;
  text-align: left;
}
.mun-head:active { transform: translateY(1px); transition-duration: 90ms; }
.mun-name { font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); color: var(--paper); font-weight: 300; transition: transform .4s var(--ease-out); }
.mun-row:hover .mun-name { transform: translateX(3px); }
.mun-dates { font-family: var(--font-mono); font-size: 12.5px; color: var(--brass); text-align: right; letter-spacing: .04em; }
.mun-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .44s var(--ease); }
.mun-row.is-open .mun-detail { grid-template-rows: 1fr; }
.mun-detail > * { overflow: hidden; }
.mun-detail-inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px;
  padding: 0 4px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .34s var(--ease) .05s, transform .44s var(--ease-out) .05s;
}
.mun-detail-inner > * { margin-bottom: 36px; }
.mun-row.is-open .mun-detail-inner { opacity: 1; transform: none; }
.mun-media {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-800); cursor: zoom-in;
}
.mun-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mun-media.is-empty { display: none; }
.mun-detail-inner:has(.mun-media.is-empty) { grid-template-columns: minmax(0, 760px); }
[data-cms-edit] .mun-detail-inner:has(.mun-media.is-empty) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mun-facts { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-hair); }
.mun-facts dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.mun-facts dd { font-size: 15px; color: var(--paper); }
.mun-info > p { font-size: 15.5px; color: var(--muted); max-width: 62ch; }
.mun-students { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-hair); }
.mun-students .label { margin-bottom: 9px; }
.mun-students ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mun-students li { font-size: 13.5px; color: var(--text); padding-left: 13px; position: relative; }
.mun-students li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--brass); }

/* ── Committees — the showcase ─────────────────────── */
.cm-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px 48px; flex-wrap: wrap;
  margin-bottom: 52px;
}
.cm-top .sec-head { margin-bottom: 0; }
.cm-controls { display: flex; align-items: center; gap: 10px; }
.cm-controls[hidden] { display: none; }
.cm-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; letter-spacing: .06em; color: var(--faint);
  margin-right: 20px; display: flex; align-items: baseline;
}
.cm-count .cm-now { font-size: 30px; color: var(--paper); letter-spacing: -0.02em; }
.cm-count-sep { margin: 0 10px; color: var(--brass-dim); }
.cm-arrow {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--paper);
  transition: border-color var(--t-depth) var(--ease), color var(--t-depth) var(--ease), background var(--t-depth) var(--ease);
}
.cm-arrow:hover { border-color: var(--brass); color: var(--brass-bright); }
.cm-arrow:active { background: var(--ink-800); transform: translateY(1px); }
.cm-arrow:disabled { opacity: .32; cursor: default; border-color: var(--line); color: var(--paper); }

/* Without the script the committees are simply listed, one after another. */
.committee-list { display: grid; gap: 72px; }
.committee-list.is-carousel { gap: 0; touch-action: pan-y; }
.cm-slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px; align-items: start;
}
/* Every slide shares one grid cell, so the stage is as tall as the tallest
   committee and changing slides never moves the page. */
.committee-list.is-carousel > .cm-slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.committee-list.is-carousel > .cm-slide.is-current {
  opacity: 1; visibility: visible;
  transition: opacity .5s var(--ease), visibility 0s;
}
.cm-text { display: flex; flex-direction: column; min-width: 0; }
.committee-list.is-carousel .cm-index { display: none; }
.cm-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--brass-dim); font-variant-numeric: tabular-nums; }
.cm-of:not(:empty) { color: var(--faint); margin-left: 6px; }
.cm-code {
  margin-top: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 6.6vw, 100px); line-height: .92; letter-spacing: -0.035em;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.cm-slide .c-title { display: flex; flex-direction: column; margin-top: 18px; }
.cm-slide .c-title > h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--brass-bright); font-weight: 400; }
.cm-slide .c-tag {
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--faint);
}
.cm-agenda { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.cm-agenda-label, .cm-format-label, .cm-guide-label {
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint);
}
.cm-agenda-text { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--paper); }
.cm-format { margin-top: 18px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.cm-format-text { font-size: 14.5px; color: var(--text); }
.cm-slide .c-body { margin-top: 20px; }
.cm-slide .c-body p { font-size: 15px; line-height: 1.66; color: var(--muted); max-width: 60ch; }
.c-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.c-points li { font-size: 12.5px; letter-spacing: 0.03em; color: var(--muted); padding-left: 15px; position: relative; }
.c-points li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--brass); }
.cm-actions {
  margin-top: 0; padding-top: 34px;
  display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap;
}
.cm-guide-status { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--muted); }
.cm-media { margin: 0; }
.cm-media .c-photo {
  display: block; width: 100%;
  aspect-ratio: 6 / 5;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-700);
  cursor: zoom-in;
}
.cm-media .c-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.cm-slide.is-current .c-photo img { transform: scale(1.0); }
.committee-list.is-carousel > .cm-slide:not(.is-current) .c-photo img { transform: scale(1.03); }
.c-photo.is-empty { display: none; }
/* No photograph: the text takes the width rather than leaving a hole. */
html:not([data-cms-edit]) .cm-slide:has(.c-photo.is-empty),
html:not([data-cms-edit]) .cm-slide:not(:has(.c-photo)) { grid-template-columns: minmax(0, 820px); }

/* The live site never draws a guide or register link that goes nowhere,
   and never prints a guide status once the guide itself is linked. */
html:not([data-cms-edit]) .cm-actions a:not([href]),
html:not([data-cms-edit]) .cm-actions a[href=""],
html:not([data-cms-edit]) .cm-actions a[href="#"] { display: none; }
.cm-actions:has(.c-doc[href]:not([href=""]):not([href="#"])) .cm-guide-status { display: none; }
html:not([data-cms-edit]) .cm-guide-status:has(.cm-guide-text:empty),
html:not([data-cms-edit]) .cm-guide-status:has(.cm-guide-text.cms-empty) { display: none; }
.cm-actions:has(.cm-register[href]:not([href=""]):not([href="#"])) .cm-register-popup { display: none; }
[data-cms-edit] .cm-register-popup { display: none; }
html:not([data-cms-edit]) .cm-agenda:has(.cm-agenda-text:empty),
html:not([data-cms-edit]) .cm-format:has(.cm-format-text:empty),
html:not([data-cms-edit]) .cm-code:empty,
html:not([data-cms-edit]) .c-tag:empty { display: none; }

.cm-tabs {
  display: flex; gap: 0; margin-top: 56px;
  border-top: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tabs[hidden] { display: none; }
.cm-tab {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 28px 4px 0; margin-top: -1px;
  border-top: 2px solid transparent;
  text-align: left; color: var(--faint);
  transition: color var(--t-depth) var(--ease), border-color var(--t-depth) var(--ease);
}
.cm-tab-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--brass-dim); }
.cm-tab-name { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.cm-tab:hover { color: var(--paper); }
.cm-tab[aria-selected="true"] { color: var(--paper); border-top-color: var(--brass); }

/* ── Schedule — day register + runsheet on a timeline ── */
.day-tabs {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 2px;
  margin-bottom: 18px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.day-underline {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--brass);
  border-radius: 2px;
  pointer-events: none;
}
.day-tabs.is-armed .day-underline { transition: transform .46s var(--ease), width .46s var(--ease); }
.day-tabs > .day-tab:first-of-type { margin-left: 0; }
.day-tab {
  position: relative;
  padding: 13px 22px 15px 0; margin-right: 18px;
  text-align: left;
  align-self: stretch;
  color: var(--muted);
  transition: color var(--t-depth) var(--ease);
}
.day-tab:hover { color: var(--paper); }
.day-tab[aria-selected="true"] { color: var(--paper); }
.day-tab:active { transform: translateY(1px); transition-duration: 90ms; }
.day-tab .dt-name { display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.day-tab .dt-sub {
  display: block; margin-top: 4px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em; line-height: 1.4;
}
.day-tab { max-width: min(100%, 212px); }
.day-tab[aria-selected="true"] .dt-sub { color: var(--brass); }

/* The timeline: one hairline down the page at the edge of the time
   column, a node per session on it. A featured session fills its node. */
.runsheet { position: relative; --tl-x: 214px; }
.runsheet:has(.run-row:not(.is-hidden))::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--tl-x);
  width: 1px; background: var(--line);
}
.run-row {
  position: relative;
  border-bottom: 1px solid var(--line-hair);
  transition: background .34s var(--ease);
}
.run-row.is-hidden { display: none; }
.run-row::after {
  content: ''; position: absolute; left: calc(var(--tl-x) - 4px); top: 30px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-800); border: 1px solid var(--brass-dim);
  pointer-events: none;
}
.run-row.sch-highlight::after { background: var(--brass); border-color: var(--brass); }
.run-row.sch-highlight .run-title { color: var(--brass-bright); }
.run-row:hover { background: var(--line-hair); }
.run-row.is-open { background: var(--brass-wash); }
.run-head:active { transform: translateY(1px); transition-duration: 90ms; }
.run-row.day-enter { animation: dayEnter .5s var(--ease-out) both; }
.run-row.day-enter:nth-child(2) { animation-delay: .04s; }
.run-row.day-enter:nth-child(3) { animation-delay: .08s; }
.run-row.day-enter:nth-child(4) { animation-delay: .12s; }
.run-row.day-enter:nth-child(5) { animation-delay: .16s; }
.run-row.day-enter:nth-child(n+6) { animation-delay: .2s; }
@keyframes dayEnter { from { opacity: 0; transform: translateY(8px); } }
.run-head {
  width: 100%;
  display: grid;
  grid-template-columns: var(--tl-x) minmax(0, 1fr) 130px 22px;
  align-items: start;
  column-gap: 0;
  padding: 22px 12px 22px 0;
  text-align: left;
}
.run-head > .run-time { padding-right: 26px; }
.run-head > .run-title { padding-left: 34px; }
.run-head > .run-cat { padding-left: 20px; }
.run-title { transition: transform .4s var(--ease-out); }
.run-row:hover .run-title { transform: translateX(3px); }
.run-time {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
  color: var(--brass); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.run-title { font-family: var(--font-display); font-size: 20px; line-height: 1.35; color: var(--paper); }
.run-cat {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--faint); text-align: right; padding-top: 7px;
}
.run-chevron {
  width: 9px; height: 9px; justify-self: end; margin-top: 10px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .38s var(--ease), border-color .3s;
}
.run-row.is-open .run-chevron { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--brass); }
.run-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .44s var(--ease);
}
.run-row.is-open .run-detail { grid-template-rows: 1fr; }
.run-detail > * { overflow: hidden; }
.run-detail-inner {
  padding: 0 14px 0 calc(var(--tl-x) + 34px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .34s var(--ease) .05s, transform .44s var(--ease-out) .05s;
}
.run-detail-inner > :last-child { margin-bottom: 24px; }
.run-row.is-open .run-detail-inner { opacity: 1; transform: none; }
.run-detail-inner p { font-size: 14.5px; color: var(--muted); max-width: 62ch; }
.run-venue { margin-top: 8px; font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; }
.run-venue:not(:empty)::before { content: 'Where \00b7\00a0'; color: var(--brass); }
.run-who { margin-top: 4px; font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; }
.run-who::before  { content: 'Who \00b7\00a0'; color: var(--brass); }
.run-detail-inner p:empty { display: none; }
[data-cms-edit] .run-detail-inner p:empty { display: block; }
.run-who:empty::before { content: none; }
.run-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.run-tags span {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); padding: 4px 9px; border-radius: 4px;
}
.runsheet-empty { padding: 34px 6px; color: var(--faint); font-size: 14px; }

/* ── Social events ─────────────────────────────────── */
/* The first event is the feature: a wide photograph with its text beside
   it. The rest stand side by side under a rule, photograph over text. */
.social-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 40px;
  counter-reset: social;
}
.social-item { min-width: 0; }
/* Two or four events after the feature sit two across; otherwise three. */
.social-list:has(> li.social-item:nth-of-type(3):last-of-type),
.social-list:has(> li.social-item:nth-of-type(5):last-of-type),
.social-list:has(> li.social-item:nth-of-type(2):last-of-type) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-item:first-of-type {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 56px; align-items: end;
  padding-bottom: 64px; border-bottom: 1px solid var(--line);
}
.so-media {
  position: relative; margin: 0 0 22px;
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-800);
}
.social-item:first-of-type .so-media { aspect-ratio: 16 / 10; margin: 0; }
.so-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.social-item:hover .so-media img { transform: scale(1.025); }
html:not([data-cms-edit]) .so-media:not(:has(img[src]:not([src=""]))) { display: none; }
html:not([data-cms-edit]) .social-item:first-of-type:not(:has(.so-media img[src]:not([src=""]))) { grid-template-columns: minmax(0, 760px); }
.so-when {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.so-num { color: var(--brass-dim); }
.so-time:not(:empty)::before { content: '\00b7'; margin-right: 14px; color: var(--brass-dim); }
.so-cat { margin-top: 14px; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); }
.social-item h3 { margin-top: 8px; font-size: clamp(22px, 2vw, 27px); font-weight: 300; line-height: 1.2; }
.social-item:first-of-type h3 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.02em; }
.so-desc { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 52ch; }
.so-venue { margin-top: 12px; font-size: 13px; color: var(--faint); }
.so-venue:not(:empty)::before { content: 'Where \00b7\00a0'; color: var(--brass); }
.so-link-wrap { margin-top: 14px; }
html:not([data-cms-edit]) .so-cat:empty,
html:not([data-cms-edit]) .so-desc:empty,
html:not([data-cms-edit]) .so-venue:empty { display: none; }

/* ── Important dates — a timeline ─────────────────── */
.dates-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.dates-layout .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 40px); }
.dates-ledger { position: relative; border-left: 1px solid var(--line); }
/* The timeline is the structure here; the archive numeral behind each row
   would say the same date a third time. */
.dates-ledger .date-row > .card-bg { display: none; }
.date-row {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px;
  padding: 26px 0 26px 40px;
  border-bottom: 1px solid var(--line-hair);
}
.date-row::before {
  content: ''; position: absolute; left: -5px; top: 36px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-850); border: 1px solid var(--brass-dim);
}
.date-row.is-next::before { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 4px var(--ink-850), 0 0 0 5px var(--brass-line); }
.date-row.is-past .d-stamp b, .date-row.is-past .d-text h3 { color: var(--muted); }
.d-stamp {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass);
  display: flex; flex-direction: column; gap: 4px;
}
.d-stamp b {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 300; line-height: .95;
  color: var(--paper); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.d-status {
  display: inline-block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.d-status[hidden] { display: none; }
.date-row.is-next .d-status { color: var(--brass-bright); }
.d-text h3 { font-size: 21px; line-height: 1.3; margin-bottom: 6px; font-weight: 400; }
.d-text p:not(.d-status) { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* ── Masterclass — the featured session ───────────── */
.feature-band {
  background: var(--ink-600);
  border-block: 1px solid var(--brass-line);
  padding: 112px 0;
}
.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 80px; align-items: center;
}
.mc-media {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-700);
}
.mc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:not([data-cms-edit]) .mc-media:not(:has(img[src]:not([src=""]))) { display: none; }
html:not([data-cms-edit]) .mc-grid:not(:has(.mc-media img[src]:not([src=""]))) { grid-template-columns: minmax(0, 1fr); }
.mc-main { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 48px; align-items: start; }
.mc-stamp { border-right: 1px solid var(--brass-line); padding-right: 28px; }
.mc-day {
  display: block;
  font-family: var(--font-display);
  font-size: 84px; line-height: 0.86; font-weight: 300;
  color: var(--brass-bright); letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.mc-month {
  display: block; margin-top: 14px;
  font-size: 11px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--muted); line-height: 1.7;
}
.mc-time { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--paper); line-height: 1.5; }
.mc-body h2 { font-size: var(--h-standard); font-weight: 300; line-height: 1.04; letter-spacing: -0.024em; margin: 16px 0 22px; text-wrap: balance; }
.mc-speaker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; }
.mc-speaker-name { font-family: var(--font-display); font-size: 21px; color: var(--paper); }
.mc-speaker-role { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
html:not([data-cms-edit]) .mc-speaker:not(:has(> span:not(.cms-empty))) { display: none; }
.mc-desc { max-width: 58ch; font-size: 16.5px; line-height: 1.66; }
.mc-list { display: flex; flex-wrap: wrap; gap: 11px 0; margin-top: 28px; }
.mc-list li {
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text);
  padding: 0 20px; border-left: 1px solid var(--brass-line);
}
.mc-list li:first-of-type { padding-left: 0; border-left: 0; }
.mc-note { margin-top: 30px; }

/* ── Secretariat ───────────────────────────────────── */
.roster {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 60px 36px;
  --roster-step: 56px;
}
.roster > * {
  grid-column: var(--rb-col, auto) / span var(--rb-span, 6);
  grid-row: var(--rb-row, auto);
  align-self: start;
  margin-top: calc(var(--rb-step, 0) * var(--roster-step));
}
/* Portrait across the top; the numeral sits on the role's line. */
.roster-entry {
  min-width: 0; position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
}
.roster-entry > * { grid-column: 1 / -1; }
.roster-entry > .portrait { grid-row: 1; }
.roster-entry > .r-num { grid-column: 1; grid-row: 2; }
.roster-entry > .r-role { grid-column: 2; grid-row: 2; }
.r-num {
  display: block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--brass-dim); font-variant-numeric: tabular-nums;
}
.portrait {
  aspect-ratio: 4 / 5;
  background: var(--ink-700);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  transition: box-shadow var(--t-depth) var(--ease);
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focal, 50% 50%);
  filter: grayscale(0.35) contrast(1.03);
  transition: filter .6s var(--ease), transform .8s var(--ease-out);
}
.roster-entry:hover .portrait img, .roster-entry:focus-within .portrait img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.portrait.is-empty::after, .portrait.is-fallback::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--brass-line);
}
.r-role { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.roster-entry h3 { font-size: 21px; line-height: 1.22; font-weight: 400; }
.r-sub { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.r-links { display: flex; gap: 15px; margin-top: 12px; }
html:not([data-cms-edit]) .r-links:not(:has(a:not([hidden]):not([href=""]):not([href="#"]):not([href="tel:"]):not([href="mailto:"]))) { display: none; }
.r-links a { color: var(--faint); font-size: 13px; transition: color .22s var(--ease); }
.r-links a:hover { color: var(--brass); }
.roster-entry.is-lead .r-role { color: var(--brass-bright); }
.roster-entry.is-lead > .portrait { box-shadow: 0 2px 0 var(--brass); }
.roster-entry.is-lead h3 { font-size: 27px; line-height: 1.16; font-weight: 300; letter-spacing: -0.01em; }

/* ── Registration ──────────────────────────────────── */
.reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 96px;
  align-items: start;
}
.reg-layout .sec-head { margin-bottom: 30px; --sec-h2: clamp(46px, 6.4vw, 96px); }
.reg-status {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 30px; padding: 9px 14px 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--paper);
}
.reg-status[hidden] { display: none; }
.rs-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: none; }
.rs-when { letter-spacing: .04em; text-transform: none; color: var(--muted); font-size: 13px; }
.rs-when:empty { display: none; }
.reg-status.is-soon { border-color: var(--brass-line); }
.reg-status.is-soon .rs-mark { background: var(--brass-bright); box-shadow: 0 0 0 3px var(--brass-wash); }
.reg-status.is-closed { color: var(--faint); }
.reg-status.is-closed .rs-mark { background: transparent; border: 1px solid var(--faint); }
.reg-desc { font-size: 17px; line-height: 1.64; max-width: 52ch; color: var(--text); }
.reg-perks-label { margin: 38px 0 0; padding-bottom: 11px; border-bottom: 1px solid var(--brass-line); max-width: 560px; }
.reg-perks { max-width: 560px; columns: 2; column-gap: 36px; }
.reg-perks li {
  break-inside: avoid;
  padding: 13px 0 13px 19px;
  border-bottom: 1px solid var(--line-hair);
  font-size: 14.5px; position: relative;
}
.reg-perks li::before {
  content: ''; position: absolute; left: 0; top: 23px;
  width: 8px; height: 1px; background: var(--brass);
}
.reg-panel {
  background: var(--ink-700);
  border: 0;
  border-top: 2px solid var(--brass);
  border-radius: var(--r-lg);
  box-shadow: var(--d-3);
  padding: 32px 30px 30px;
}
.reg-panel.visual-card { position: sticky; top: calc(var(--nav-h) + 40px); }
.reg-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 14px;
  color: var(--paper);
}
.reg-price .cur { font-size: 12px; color: var(--muted); letter-spacing: 0.14em; align-self: flex-start; padding-top: 8px; }
.reg-price .amt {
  font-family: var(--font-display);
  font-size: 60px; font-weight: 300; letter-spacing: -0.04em; line-height: 0.96;
  font-variant-numeric: tabular-nums;
}
.reg-price .per { font-size: 12px; color: var(--faint); letter-spacing: 0.06em; }
.reg-panel-note {
  font-size: 13px; line-height: 1.6; color: var(--muted);
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line-hair);
}
html:not([data-cms-edit]) .reg-panel-note:has(+ a[data-cms-attr][href="#"]),
.reg-panel-note:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.reg-panel .btn-solid { padding: 16px 24px; font-size: 15px; }

#registration.has-plans .reg-single { display: none; }
.reg-schedule:empty { display: none; }
.reg-schedule { margin: 15px 0 20px; }
.reg-plan { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.reg-plan:first-of-type { border-top: 0; padding-top: 3px; }
.reg-plan:last-of-type { padding-bottom: 3px; }
.rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rp-name { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass); }
.rp-price { display: flex; align-items: baseline; gap: 5px; color: var(--paper); font-variant-numeric: tabular-nums; margin-left: auto; }
.rp-price .cur { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.rp-price .amt { font-family: var(--font-display); font-size: 30px; font-weight: 300; letter-spacing: -0.025em; line-height: 1; }
.rp-per { font-size: 11.5px; color: var(--faint); letter-spacing: 0.06em; margin-top: 4px; text-align: right; }
.rp-per:empty { display: none; }
.rp-perks { margin-top: 10px; }
.rp-perks:empty { display: none; }
.rp-perks li { font-size: 13px; color: var(--muted); padding: 3px 0 3px 14px; position: relative; }
.rp-perks li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--brass); }
.rp-until { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-top: 9px; }
.rp-until:empty { display: none; }
.reg-plans-closed {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
  padding: 16px 0; margin-bottom: 4px;
  border-top: 1px solid var(--line-soft);
}
.dialog-notes:empty { display: none; }
.dialog-notes { margin: -8px 0 24px; }
.dialog-note { padding: 14px 0; border-top: 1px solid var(--line-hair); }
.dialog-note .label { color: var(--brass); }
.dialog-note .dn-body { font-size: 14px; color: var(--muted); margin-top: 6px; }
.dialog-note .dn-body:empty { display: none; }

/* ── Sponsors — a ruled register of marks ──────────── */
.tier + .tier { margin-top: 48px; }
.tier-label {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 12px;
}
.tier-label.brass { color: var(--brass); }
.tier-label.is-blank { display: none; }
[data-cms-edit] .tier-label.is-blank { display: block; color: var(--faint); }
[data-cms-edit] .tier-label.is-blank::after { content: 'name this tier'; }
.plate-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line-hair);
}
.plate-row-lead { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); border-top-color: var(--brass-line); }
.plate {
  min-height: 116px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px;
  border-right: 1px solid var(--line-hair);
  border-bottom: 1px solid var(--line-hair);
  background: transparent;
  color: var(--muted); font-size: 13.5px; text-align: center;
  transition: color var(--t-depth) var(--ease), background var(--t-depth) var(--ease);
}
.plate:hover { color: var(--paper); background: var(--line-hair); }
.plate-lead { min-height: 168px; color: var(--brass-bright); font-family: var(--font-display); font-size: 26px; letter-spacing: -0.01em; }
.plate-logo { max-width: 72%; max-height: 54px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(1.6) contrast(.9); opacity: .85; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.plate:hover .plate-logo { filter: none; opacity: 1; }
.plate-lead .plate-logo { max-height: 84px; }
.plate-logo:not([src]), .plate-logo[src=""] { display: none; }

/* ── Resources — the document centre ───────────────── */
.res-top .sec-head { margin-bottom: 40px; }
.arrival {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 24px 48px; align-items: center;
  padding: 34px 0;
  margin-bottom: 56px;
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--brass-line);
}
.arrival[hidden] { display: none; }
.arrival-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-bright);
  align-self: start; padding-top: 6px;
}
.arrival-body h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.25; }
.arrival-body p { margin-top: 8px; font-size: 15px; color: var(--muted); max-width: 60ch; }
.res-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 72px; align-items: start;
}
.res-layout:not(:has(.res-file)) { grid-template-columns: minmax(0, 620px); }
[data-cms-edit] .res-layout:not(:has(.res-file)) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.res-files { display: none; counter-reset: rf; }
.res-files:has(.res-file) { display: block; margin: 0; border-top: 1px solid var(--line); }
[data-cms-edit] .res-files { display: block; }
.res-file {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px 24px; align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-hair);
}
.rf-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--brass-dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rf-head { margin: 0; }
.rf-link {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 22px; color: var(--paper); line-height: 1.3;
  transition: color .22s var(--ease);
}
.rf-link[href]:not([href=""]):not([href="#"])::after {
  content: '\2197'; font-family: var(--font-ui); font-size: 15px; color: var(--brass);
  transition: transform .3s var(--ease-out);
}
.rf-link:hover { color: var(--brass-bright); }
.rf-link:hover::after { transform: translate(2px, -2px); }
.rf-link:not([href]), .rf-link[href=""], .rf-link[href="#"] { color: var(--muted); pointer-events: none; }
[data-cms-edit] .rf-link[href=""] { pointer-events: auto; }
.rf-desc { font-size: 14px; color: var(--muted); margin: 6px 0 0; max-width: 60ch; }
.rf-desc:empty { display: none; }
.rf-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; align-items: baseline; margin: 0; }
.rf-tag {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  padding: 3px 8px; border: 1px solid var(--brass-line); border-radius: 4px;
}
.rf-type { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.rf-tag:empty, .rf-type:empty { display: none; }
[data-cms-edit] .rf-tag:empty, [data-cms-edit] .rf-type:empty { display: inline-block; min-width: 54px; min-height: 1em; }
.res-state { display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--brass-line); padding-left: 30px; }
.res-state h3 { font-size: 22px; line-height: 1.25; margin: 12px 0 11px; font-weight: 400; }
.res-state p:last-of-type { font-size: 15px; color: var(--muted); max-width: 46ch; }
.res-layout:not(:has(.res-file)) .res-state { border-left: 0; padding-left: 0; border-top: 1px solid var(--brass-line); padding-top: 24px; }
.res-cta { margin-top: 22px; align-self: flex-start; }

/* ── Contact ───────────────────────────────────────── */
.contact-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.contact-col h3 { font-size: 22px; font-weight: 400; }
.contact-col .c-sub { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brass); margin: 8px 0 14px; }
.contact-col p { font-size: 14.5px; margin-bottom: 5px; }
.footer-links a,
.footer-contact a,
.contact-col a,
.r-links a { display: inline-flex; align-items: center; min-height: 24px; }
.contact-col a {
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.contact-col a:hover { color: var(--brass-bright); border-bottom-color: var(--brass); }

/* ── Footer ────────────────────────────────────────── */
#footer { background: #0A1220; border-top: 1px solid var(--brass-line); }
.footer-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 56px; padding-top: 72px; padding-bottom: 56px;
}
.footer-logo {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 30px; font-weight: 300; color: var(--paper); margin-bottom: 18px;
}
.footer-mark { width: 50px; height: 50px; flex: none; object-fit: contain; }
.footer-brand p { font-size: 14.5px; color: var(--muted); max-width: 44ch; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 22px; }
.footer-socials .fs-item { display: inline-flex; position: relative; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; color: var(--faint); transition: color .22s var(--ease); }
.footer-socials a:hover { color: var(--brass); }
.icon-link:not([href]), .icon-link[href=""], .icon-link[href="#"],
.footer-socials a:not([href]), .footer-socials a[href=""], .footer-socials a[href="#"] {
  color: var(--faint); pointer-events: none; cursor: default;
}
[data-cms-edit] .icon-link[href=""], [data-cms-edit] .icon-link[href="#"],
[data-cms-edit] .footer-socials a[href=""], [data-cms-edit] .footer-socials a[href="#"] { pointer-events: auto; }
.header-social .hs-item { display: inline-flex; position: relative; }
.social-svg { display: inline-flex; }
.social-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: none;
  font-size: 16px; line-height: 1;
}
.social-img {
  display: inline-block;
  width: 17px; height: 17px; flex: none;
  object-fit: contain; object-position: center;
  border-radius: 2px; opacity: .84;
  transition: opacity .22s var(--ease);
}
.header-social .social-img { width: 16px; height: 16px; }
.icon-link:hover .social-img, .footer-socials a:hover .social-img { opacity: 1; }
.social-img[hidden], .social-glyph[hidden], .social-svg[hidden] { display: none !important; }
.footer-links .label, .footer-contact .label { margin-bottom: 16px; }
.footer-links ul { columns: 2; column-gap: 28px; }
.footer-links li { margin-bottom: 9px; break-inside: avoid; }
.footer-links a, .footer-contact a { font-size: 14.5px; color: var(--muted); transition: color .22s var(--ease); }
.footer-links a:hover, .footer-contact a:hover { color: var(--brass); }
.footer-contact p { font-size: 14.5px; color: var(--muted); margin-bottom: 9px; }
.footer-bottom { border-top: 1px solid var(--line-hair); padding: 20px 0; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.footer-bottom p { font-size: 12px; letter-spacing: 0.05em; color: var(--faint); }
.footer-location { font-family: var(--font-mono); font-size: 11.5px !important; }
.footer-top { margin-left: auto; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; min-height: 32px; border-bottom: 1px solid var(--line); }
.footer-top:hover { color: var(--brass-bright); border-bottom-color: var(--brass); }
html:not([data-cms-edit]) .footer-location:empty { display: none; }

/* ── Back to top ───────────────────────────────────── */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: 0;
  background: var(--ink-700);
  box-shadow: var(--d-1);
  color: var(--muted); font-size: 12px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .38s var(--ease), visibility .38s,
              transform .42s var(--ease-out),
              box-shadow var(--t-depth) var(--ease), color .24s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--brass); box-shadow: var(--d-2); }
.back-to-top:active { color: var(--brass); box-shadow: var(--d-press); transition-duration: 90ms; }

/* ── Dialogs ───────────────────────────────────────── */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8,14,26,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.dialog-overlay.active { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.dialog-panel {
  width: 100%; max-width: 460px;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--lit), var(--d-3);
  padding: 28px 28px 30px;
  transform: translateY(16px) scale(0.97);
  transition: transform .46s var(--ease-out);
}
.dialog-overlay.active .dialog-panel { transform: none; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-head h3 { font-size: 23px; margin-top: 9px; font-weight: 400; }
.dialog-title { font-size: 25px; margin: 15px 0 11px; font-weight: 400; }
.dialog-close {
  font-size: 22px; line-height: 1; color: var(--faint);
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color .24s var(--ease), background .24s var(--ease);
}
.dialog-close:hover { color: var(--paper); background: var(--line-hair); }
.dialog-body { font-size: 14.5px; color: var(--muted); margin: 15px 0 24px; }
.dialog-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }


/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll { opacity: 1; transform: none; }
  .stagger > *, .stagger.is-visible > * { opacity: 1; transform: none; transition-delay: 0s; }
  .run-row.day-enter { animation: none; }
  .hero-eyebrow, .hero-title .hl, .hero-motto, .hero-actions, .hero-base-inner, .hero-facts, .hero-clock {
    opacity: 1; transform: none; animation: none;
  }
  .ticker-viewport { animation: none !important; }
  .committee-list.is-carousel > .cm-slide { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --gutter: 28px; }
  .nav-links { gap: 20px; }
  .nav-link-item { font-size: 13px; }
  .hero-base-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-index { display: none; }
  .gs-grid { gap: 56px; }
  .reg-layout { gap: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .mc-grid { gap: 56px; }
  .runsheet { --tl-x: 190px; }
  .run-head { grid-template-columns: var(--tl-x) minmax(0, 1fr) 110px 22px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  #main-nav, .header-right { display: none; }
  .hamburger { display: flex; }
  section, #committees, #schedule, #team, #registration { padding: 80px 0; }
  #sponsors, #resources, #contact { padding: 68px 0; }
  .feature-band { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }

  /* Hero: the strip stacks — facts on one row, the clock as a row of four. */
  /* The hero keeps the height of the screen here too: the strip is pinned
     to its foot, so a title that arrives from the CMS a moment after first
     paint changes nothing below it. */
  #intro { min-height: min(100svh, 900px); padding-top: calc(var(--nav-h) + 56px); }
  .hero-grid { padding-bottom: 48px; }
  .hero-base-inner { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; padding-bottom: 22px; }
  .hero-clock { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line-hair); grid-template-columns: 1fr; row-gap: 12px; }
  .hero-clock > .label { max-width: none; }
  .clock-rows { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .clock-rule { grid-column: 1; margin-top: 2px; }

  .about-top { grid-template-columns: 1fr; gap: 26px; margin-bottom: 44px; }
  .about-layout { grid-template-columns: 1fr; gap: 36px; }
  .about-layout > .about-figure,
  .about-layout > .prose,
  .about-layout > .fact-table,
  html:not([data-cms-edit]) .about-layout:not(:has(.about-figure img[src]:not([src=""]))) .prose,
  html:not([data-cms-edit]) .about-layout:not(:has(.about-figure img[src]:not([src=""]))) .fact-table { grid-column: 1; grid-row: auto; }

  .gs-grid { grid-template-columns: 1fr; gap: 40px; }
  .gs-portrait { position: relative; top: auto; max-width: 440px; }

  .cm-top { align-items: flex-start; flex-direction: column; margin-bottom: 36px; }
  .cm-slide { grid-template-columns: 1fr; gap: 28px; }
  .cm-media { order: -1; min-height: 0; }
  .cm-media .c-photo { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .cm-code { margin-top: 16px; }
  .cm-actions { margin-top: 0; }
  .committee-list:not(.is-carousel) { gap: 56px; }

  .runsheet { --tl-x: 7px; }
  .runsheet:has(.run-row:not(.is-hidden))::before { left: 7px; }
  .run-row::after { left: 3px; top: 26px; }
  .day-tabs, .year-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .day-tabs::-webkit-scrollbar, .year-tabs::-webkit-scrollbar { display: none; }
  .day-tab { align-self: auto; flex: none; padding: 11px 16px 13px 0; }
  .day-tab .dt-sub { min-height: 0; }
  .run-head {
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-areas: 'time chev' 'title chev' 'cat chev';
    gap: 4px 12px; padding: 18px 4px 18px 28px;
  }
  .run-head > .run-time, .run-head > .run-title, .run-head > .run-cat { padding: 0; }
  .run-time { grid-area: time; }
  .run-title { grid-area: title; font-size: 18px; }
  .run-cat { grid-area: cat; text-align: left; padding-top: 2px; }
  .run-chevron { grid-area: chev; align-self: center; margin-top: 0; }
  .run-detail-inner { padding: 0 4px 0 28px; }
  .run-detail-inner > :last-child { margin-bottom: 20px; }

  .social-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .social-item:first-of-type { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }

  .dates-layout { grid-template-columns: 1fr; gap: 40px; }
  .dates-layout .sec-head { position: static; }
  .date-row { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding-left: 28px; }
  .d-stamp b { font-size: 36px; }

  .mc-grid { grid-template-columns: 1fr; gap: 40px; }
  .mc-media { max-width: 420px; aspect-ratio: 4 / 5; }
  .mc-main { grid-template-columns: 1fr; gap: 28px; }
  .mc-stamp {
    border-right: 0; padding-right: 0;
    padding-bottom: 16px; border-bottom: 1px solid var(--brass-line);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
  }
  .mc-day { font-size: 56px; }
  .mc-month, .mc-time { margin-top: 0; }

  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; --roster-step: 0px; }
  .roster > * { grid-column: auto / span 1; grid-row: auto; margin-top: 0; }
  .roster-entry.is-lead h3 { font-size: 23px; }

  .reg-layout { grid-template-columns: 1fr; gap: 44px; }
  .reg-panel, .reg-panel.visual-card { max-width: 460px; position: static; top: auto; }
  .reg-perks { columns: 1; }

  .arrival { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .arrival-cta { justify-self: start; margin-top: 8px; }
  .res-layout, .res-layout:not(:has(.res-file)) { grid-template-columns: 1fr; gap: 40px; }
  [data-cms-edit] .res-layout:not(:has(.res-file)) { grid-template-columns: 1fr; }
  .res-state { border-left: 0; border-top: 1px solid var(--brass-line); padding-left: 0; padding-top: 24px; }

  .mun-head { grid-template-columns: minmax(0, 1fr) 22px; grid-template-areas: 'name chev' 'dates chev'; gap: 6px 12px; }
  .mun-name { grid-area: name; font-size: 20px; }
  .mun-dates { grid-area: dates; text-align: left; }
  .mun-head .run-chevron { grid-area: chev; align-self: center; }
  .mun-detail-inner, .mun-detail-inner:has(.mun-media.is-empty),
  [data-cms-edit] .mun-detail-inner:has(.mun-media.is-empty) { grid-template-columns: 1fr; gap: 20px; }
  .mun-detail-inner > * { margin-bottom: 24px; }
  .year-tabs .day-tab { padding: 12px 18px 14px 0; margin-right: 12px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .lightbox { padding: 20px; }
  .lightbox-close { top: 12px; right: 12px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  section, #committees, #schedule, #team, #registration { padding: 64px 0; }
  #sponsors, #resources, #contact { padding: 56px 0; }
  .feature-band { padding: 64px 0; }
  .sec-head h2 { margin-top: 16px; }
  .sec-index:not(:empty)::after { width: 16px; margin: 0 10px; }

  #intro { padding-top: calc(var(--nav-h) + 72px); }
  .hero-title { font-size: clamp(44px, 13vw, 60px); }
  .hero-actions { gap: 18px 24px; }
  /* Stacked by rule, not by whether today's words happen to fit side by
     side — otherwise the strip changes height when the content arrives. */
  .hero-facts { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-facts > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .hero-facts dt { margin: 0; }
  .cd-num { font-size: 30px; }
  .clock-rows li { --cd-h: 34px; }

  .cm-controls { width: 100%; }
  .cm-count { margin-right: auto; }
  .cm-arrow { width: 48px; height: 48px; }
  .cm-code { font-size: clamp(48px, 15vw, 64px); }

  .social-list { grid-template-columns: 1fr; gap: 44px; }

  .roster { gap: 32px 14px; }
  .roster-entry h3 { font-size: 18px; }
  .roster-entry.is-lead h3 { font-size: 20px; }
  .r-sub { font-size: 12.5px; }

  .reg-layout .sec-head { --sec-h2: clamp(40px, 12vw, 56px); }
  .reg-price .amt { font-size: 50px; }

  .res-file { grid-template-columns: 34px minmax(0, 1fr); }
  .rf-meta { grid-column: 2; justify-content: flex-start; }
  .rf-link { font-size: 19px; }

  .plate-row, .plate-row-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate-row-lead { grid-template-columns: 1fr; }
  .plate { min-height: 96px; padding: 16px; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-top { margin-left: 0; }
  .dialog-panel { padding: 24px 20px 26px; }
  .back-to-top { right: 14px; bottom: 14px; }
}


/* =====================================================
   EDIT MODE
   Only active when the page is opened inside the visual
   editor (js/cms-edit.js sets data-cms-edit on <html>).
   Nothing below affects the public site.
   ===================================================== */
[data-cms-edit] { --cms-accent: #6FB2FF; --cms-accent-soft: rgba(111,178,255,0.16); }

[data-cms-edit] [data-cms-editable] {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-color .18s ease, background .18s ease;
  cursor: text;
}
[data-cms-edit] [data-cms-editable]:hover {
  outline-color: var(--cms-accent);
  background: var(--cms-accent-soft);
}
[data-cms-edit] [data-cms-editable]:focus,
[data-cms-edit] [data-cms-active] {
  outline: 2px solid var(--cms-accent);
  background: var(--cms-accent-soft);
  cursor: text;
}
[data-cms-edit] [data-cms-link],
[data-cms-edit] [data-cms-attr],
[data-cms-edit] [data-cms-image] { cursor: pointer; }

/* An empty field still needs to be findable and clickable */
[data-cms-edit] [data-cms-editable]:empty::before {
  content: attr(data-cms-field);
  color: var(--cms-accent);
  opacity: .8;
  font-style: italic;
}
[data-cms-edit] [data-cms]:empty::before { content: 'empty'; }

/* Item controls */
[data-cms-edit] .cms-item-tools {
  position: absolute; top: 4px; right: 4px; z-index: 20;
  display: flex; gap: 2px;
  padding: 3px;
  background: rgba(9,15,26,0.94);
  border: 1px solid rgba(111,178,255,0.4);
  border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
[data-cms-edit] [data-cms-item]:hover > .cms-item-tools,
[data-cms-edit] .cms-item-tools:hover { opacity: 1; pointer-events: auto; }
[data-cms-edit] .cms-tool {
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 5px;
  font-family: var(--font-ui); font-size: 11px; line-height: 1;
  color: #DCE7F6; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-cms-edit] .cms-tool:hover { background: var(--cms-accent); color: #0B1220; }

/* Add buttons */
[data-cms-edit] .cms-add {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 4px;
}
[data-cms-edit] .cms-add-note { font-size: 13px; color: var(--faint); }
/* The menu list is edited in three places, and one of them is the header
   row itself — its add control has to sit in the row, not below it. */
[data-cms-edit] #main-nav { display: flex; align-items: center; }
[data-cms-edit] #main-nav .cms-add { padding: 0 0 0 14px; }
/* The year control belongs to the tab strip, so it sits tight
   under it rather than floating in the section's rhythm. */
[data-cms-edit] .cms-add-year { padding: 8px 0 0; }
[data-cms-edit] .cms-add-btn {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: var(--cms-accent);
  border: 1px dashed rgba(111,178,255,0.5);
  border-radius: 8px;
  padding: 8px 14px;
  transition: background .18s ease, color .18s ease;
}
[data-cms-edit] .cms-add-btn:hover { background: var(--cms-accent); color: #0B1220; border-style: solid; }

/* Photo placeholder */
[data-cms-edit] .cms-photo-btn {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui); font-size: 12px;
  color: var(--cms-accent);
  border: 1px dashed rgba(111,178,255,0.55);
  border-radius: 8px; padding: 7px 12px;
  background: rgba(9,15,26,0.7);
}
[data-cms-edit] .cms-photo-btn:hover { background: var(--cms-accent); color: #0B1220; }

/* Link / image popover */
[data-cms-edit] .cms-popover {
  position: absolute; z-index: 999;
  width: 300px; padding: 14px;
  background: #0F1A2C;
  border: 1px solid rgba(111,178,255,0.4);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85);
  font-family: var(--font-ui);
}
[data-cms-edit] .cms-pop-label {
  display: block; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cms-accent); margin-bottom: 8px;
}
[data-cms-edit] .cms-pop-input {
  width: 100%; padding: 9px 10px;
  background: #0A1220; color: #EAF1FA;
  border: 1px solid rgba(168,195,232,0.24);
  border-radius: 7px; font-size: 13px; font-family: var(--font-ui);
}
[data-cms-edit] .cms-pop-input:focus { outline: none; border-color: var(--cms-accent); }
/* The sections this page actually has, offered as choices so an
   in-page link is picked rather than remembered. A hidden section is
   still offered and says so — an entry pointing at one is dropped
   from the menus on the live site. */
[data-cms-edit] .cms-pop-sections {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; max-height: 108px; overflow-y: auto;
}
[data-cms-edit] .cms-pop-sections-label {
  width: 100%; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
[data-cms-edit] .cms-pop-section { margin-top: 0; }
[data-cms-edit] .cms-pop-section.is-hidden-section {
  border-color: rgba(168,195,232,0.3); color: var(--faint);
}
[data-cms-edit] .cms-pop-section.is-hidden-section::after {
  content: 'hidden'; margin-left: 6px; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}
[data-cms-edit] .cms-pop-hint { font-size: 11.5px; color: var(--faint); margin: 8px 0 12px; line-height: 1.5; }
[data-cms-edit] .cms-pop-actions { display: flex; gap: 8px; }
[data-cms-edit] .cms-pop-save,
[data-cms-edit] .cms-pop-cancel {
  font-size: 12.5px; padding: 7px 14px; border-radius: 7px; font-family: var(--font-ui);
}
[data-cms-edit] .cms-pop-save { background: var(--cms-accent); color: #0B1220; font-weight: 600; }
[data-cms-edit] .cms-pop-cancel { color: var(--muted); border: 1px solid rgba(168,195,232,0.2); }

/* What the check found. Deliberately quiet: a hairline, a
   thumbnail and a sentence in the margin. A wrong address is
   a thing to notice on the way past, not an alarm — and it
   never stops Apply, because a link that is not live yet is
   still the link the client means. */
[data-cms-edit] .cms-pop-check {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(168,195,232,0.12);
}
/* display:flex outranks the hidden attribute, so a popover on a field with
   nothing to check — a platform name, an internal note — drew an empty
   53px box with a rule over it under every input. */
[data-cms-edit] .cms-pop-check[hidden],
[data-cms-edit] .cms-pop-thumb[hidden] { display: none; }
[data-cms-edit] .cms-pop-thumb {
  flex: 0 0 auto;
  width: 56px; height: 42px; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0A1220; border: 1px solid rgba(168,195,232,0.14);
}
[data-cms-edit] .cms-pop-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-cms-edit] .cms-pop-thumb-state {
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); text-align: center; line-height: 1.3; padding: 0 3px;
}
[data-cms-edit] .cms-pop-thumb.is-empty { border-style: dashed; }
[data-cms-edit] .cms-pop-note {
  flex: 1 1 auto; margin: 0;
  font-size: 11.5px; line-height: 1.45; color: var(--faint);
}
[data-cms-edit] .cms-pop-note.is-warn { color: var(--brass-bright); }
[data-cms-edit] .cms-pop-note.is-ok { color: var(--faint); }

/* The same note, for a field typed straight into the page —
   a contact card's email, say. It sits after the value like
   a pencilled remark, and is never part of what is stored. */
[data-cms-edit] .cms-field-note {
  display: block; max-width: 34ch;
  margin: 3px 0 0; padding-left: 8px;
  border-left: 1px solid var(--brass-line);
  font-family: var(--font-ui); font-size: 10.5px; line-height: 1.45;
  font-style: normal; letter-spacing: 0;
  color: var(--brass-dim); text-transform: none;
}

/* A link is not obviously a link until you hover it, so mark the ones the
   editor can change. Elements that also hold editable text get a chip
   beside them instead, so the marker never lands inside the text. */
[data-cms-edit] [data-cms-attr]:not([data-cms])::after,
[data-cms-edit] [data-cms-link]:not([data-cms-field])::after {
  content: '↗';
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  vertical-align: super;
  color: var(--cms-accent);
}
[data-cms-edit] .cms-link-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 4px 9px;
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .06em;
  color: var(--cms-accent);
  border: 1px dashed rgba(111,178,255,0.5);
  border-radius: 6px;
  vertical-align: middle;
}
[data-cms-edit] .cms-link-chip:hover { background: var(--cms-accent); color: #0B1220; border-style: solid; }
/* A destination the site cannot reach — an "#id" no section on this page
   has, a hidden section, a bare "#" — is marked on the chip itself, in
   the brass the rest of the editor warns in. The sentence is on the
   chip's title and label; the mark is what makes it noticeable. */
[data-cms-edit] .cms-link-chip.is-broken {
  border-color: var(--brass); border-style: solid;
  color: var(--brass-bright);
}
[data-cms-edit] .cms-link-chip.is-broken:hover { background: var(--brass); color: #14203A; }

/* Reveal animations are for visitors, not for editing — replaying them on
   every save made the page flicker after each committed keystroke. */
[data-cms-edit] .animate-on-scroll,
[data-cms-edit] .stagger > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Keep the editor usable: no fixed or sticky element may float over the
   editing surface, and the dialogs are edited from the Advanced tab. */
[data-cms-edit] .dialog-overlay { display: none !important; }
[data-cms-edit] .back-to-top { display: none; }
[data-cms-edit] #header { position: absolute; }
[data-cms-edit] .reg-panel,
[data-cms-edit] .dates-layout .sec-head { position: static; }
[data-cms-edit] .day-tab .dt-sub { cursor: text; }

/* A photo path that does not resolve must say so, not disappear */
[data-cms-edit] .portrait.is-broken::before {
  content: attr(data-missing-src);
  position: absolute; inset: auto 8px 34px 8px;
  font-family: var(--font-ui); font-size: 10.5px; line-height: 1.4;
  color: #FFB4A2; text-align: center; word-break: break-all;
}


/* =====================================================
   VISUAL CARD BACKGROUNDS
   One system, several environments. Every card carries a
   decorative layer built from hairline SVG linework plus a
   shared paper grain — depth from texture and layering,
   not from blur, glow or gradients.

   Structure:  .visual-card > .card-bg (decoration)
                            > everything else (content, z-index 1)

   The linework drifts by exactly one tile width, so the loop
   is seamless and costs one composited transform. It is
   paused until the card is on screen.
   ===================================================== */
:root {
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='160' height='160' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  --tex-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='160' preserveAspectRatio='none'%3E %3Cg fill='none' stroke='%23A8C3E8' stroke-width='1' opacity='0.11'%3E %3Cellipse cx='310' cy='80' rx='290' ry='74'/%3E%3Cellipse cx='310' cy='80' rx='193' ry='74'/%3E %3Cellipse cx='310' cy='80' rx='96' ry='74'/%3E %3Cpath d='M22 44 Q310 24 598 44'/%3E%3Cpath d='M22 116 Q310 136 598 116'/%3E %3C/g%3E %3Cg fill='none' stroke='%23CBAA68' stroke-width='1' opacity='0.14'%3E %3Cline x1='18' y1='80' x2='602' y2='80'/%3E%3Ccircle cx='310' cy='80' r='2.6'/%3E %3C/g%3E%3C/svg%3E");
  --tex-schedule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' preserveAspectRatio='none'%3E %3Cg stroke='%23A8C3E8' stroke-width='1' opacity='0.085'%3E %3Cline x1='0' y1='0' x2='0' y2='120'/%3E %3Cline x1='130' y1='18' x2='130' y2='102'/%3E %3C/g%3E %3Cline x1='0' y1='60' x2='260' y2='60' stroke='%23CBAA68' stroke-width='1' opacity='0.1'/%3E %3C/svg%3E");
  --tex-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110' preserveAspectRatio='none'%3E %3Cg stroke='%23CBAA68' stroke-width='1.2' opacity='0.15'%3E %3Cpath d='M3 11 h10 M8 6 v10'/%3E%3Cpath d='M207 99 h10 M212 94 v10'/%3E %3C/g%3E%3C/svg%3E");
  --tex-portrait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='250' preserveAspectRatio='none'%3E %3Cg stroke='%23CBAA68' stroke-width='1.2' opacity='0.24' fill='none'%3E %3Cpath d='M12 30 v-18 h18'/%3E%3Cpath d='M188 30 v-18 h-18'/%3E %3Cpath d='M12 220 v18 h18'/%3E%3Cpath d='M188 220 v18 h-18'/%3E %3C/g%3E %3Cline x1='0' y1='170' x2='200' y2='170' stroke='%23A8C3E8' stroke-width='1' opacity='0.07'/%3E %3C/svg%3E");
  --tex-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='104'%3E %3Cg stroke='%23A8C3E8' stroke-width='1' opacity='0.07'%3E %3Cline x1='0' y1='26' x2='200' y2='26'/%3E%3Cline x1='0' y1='52' x2='200' y2='52'/%3E %3Cline x1='0' y1='78' x2='200' y2='78'/%3E%3Cline x1='0' y1='104' x2='200' y2='104'/%3E %3C/g%3E %3Cline x1='30' y1='0' x2='30' y2='104' stroke='%23CBAA68' stroke-width='1' opacity='0.12'/%3E %3C/svg%3E");
  --tex-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' preserveAspectRatio='none'%3E %3Cg fill='none' stroke='%23A8C3E8' stroke-width='1' opacity='0.1'%3E %3Cpath d='M24 24 h150 v48 h100'/%3E%3Cpath d='M24 24 v104 h96'/%3E %3Crect x='196' y='84' width='60' height='44'/%3E %3C/g%3E %3Cg stroke='%23CBAA68' stroke-width='1.1' opacity='0.14'%3E %3Cpath d='M24 140 h46 M24 136 v8 M70 136 v8'/%3E %3C/g%3E%3C/svg%3E");
  --tex-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E %3Cg stroke='%23A8C3E8' stroke-width='1' opacity='0.09'%3E %3Cline x1='0' y1='0' x2='26' y2='0'/%3E%3Cline x1='0' y1='0' x2='0' y2='26'/%3E %3C/g%3E%3C/svg%3E");
}

/* .visual-card makes its own stacking context, so the decoration can sit at
   z-index -1 — behind everything the card contains, without touching the
   position or z-index of any child. That matters: the editor's own item
   toolbar is absolutely positioned inside these cards. */
.visual-card { position: relative; isolation: isolate; }

.card-bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  transition: transform .75s var(--ease);
}
/* AUDIT 1 — texture is opt-in now. A .visual-card with no --variant modifier
   paints nothing at all, so "no texture" needs no extra markup and a card
   the client later gives a style to lights up without a re-render. */
.visual-card--map > .card-bg,
.visual-card--schedule > .card-bg,
.visual-card--portrait > .card-bg,
.visual-card--document > .card-bg,
.visual-card--architecture > .card-bg,
.visual-card--grid > .card-bg { background-image: var(--tex-grain); }

.card-bg::before,
.card-bg::after {
  content: '';
  position: absolute;
  pointer-events: none;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .86;
  transition: opacity .55s var(--ease);
}

/* The motif layer is twice the card so a full tile of drift never
   exposes an edge. --tile is the distance that returns it to itself. */
.card-bg::before {
  inset: 0 -100% 0 0;
  background-repeat: repeat;
  animation-name: texDriftX;
}
.visual-card.is-onscreen > .card-bg::before,
.visual-card.is-onscreen > .card-bg::after { animation-play-state: running; }
.visual-card:hover > .card-bg::before { opacity: 1; }

@keyframes texDriftX { to { transform: translate3d(calc(var(--tile, 200px) * -1), 0, 0); } }
@keyframes texDriftY { to { transform: translate3d(0, calc(var(--tile, 200px) * -1), 0); } }

/* -- Committees: a diplomatic chart -------------------- */
.visual-card--map .card-bg::before {
  --tile: 620px;
  background-image: var(--tex-map);
  background-size: 620px 100%;
  animation-duration: 46s;
}
.visual-card--map:hover > .card-bg { transform: translate3d(6px, 0, 0); }

/* -- Schedule: a printed runsheet ---------------------- */
.visual-card--schedule .card-bg::before {
  --tile: 260px;
  background-image: var(--tex-schedule);
  background-size: 260px 100%;
  animation-duration: 34s;
}
.visual-card--schedule:hover > .card-bg { transform: translate3d(4px, 0, 0); }

/* -- Dates & MUNs: the numeral, and register marks ------
   AUDIT 1: this used to be a boxed filing grid, which turned every
   dated row into a discrete plate between hairline separators. What
   the motif is actually about is the number the row is named after,
   so the number and two register ticks are all that is left. */
.visual-card--archive .card-bg::before {
  --tile: 220px;
  background-image: var(--tex-archive);
  background-size: 220px 100%;
  animation-duration: 44s;
}
.visual-card--archive .card-bg::after {
  content: attr(data-numeral);
  inset: auto -6px -26px auto;
  font-family: var(--font-display);
  font-size: 132px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--brass);
  opacity: .05;
  animation-name: numeralDrift;
  animation-duration: 38s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes numeralDrift { to { transform: translate3d(-7px, -4px, 0); } }
/* A numeral that bleeds off three edges of a 100px row is not a ghost
   numeral, it is a rendering artefact — at 1440 the date ledger showed two
   cropped ovals hard against the right margin. Sized to the row it names,
   and pulled inside the edge. */
.date-row > .card-bg::after { font-size: 82px; inset: auto 6px -8px auto; opacity: .055; }
.mun-row > .card-bg::after { font-size: 108px; inset: auto 12px -12px auto; opacity: .05; }
.visual-card--archive:hover > .card-bg { transform: translate3d(0, -3px, 0); }
.visual-card--archive:hover > .card-bg::after { opacity: .085; }

/* -- Secretariat: crop marks, and grain that moves -----
   Confined to the image box: crop marks belong around the photograph,
   and the name beneath it must sit on clean ground. */
.visual-card--portrait > .card-bg { bottom: auto; aspect-ratio: 4 / 5; }

.visual-card--portrait .card-bg::before {
  inset: 0;
  background-image: var(--tex-portrait);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: none;
}
.visual-card--portrait .card-bg::after {
  --tile: 160px;
  inset: 0 -100% 0 0;
  background-image: var(--tex-grain);
  background-repeat: repeat;
  animation-name: texDriftX;
  animation-duration: 40s;
}
.visual-card--portrait:hover > .card-bg { transform: translate3d(3px, 0, 0); }

/* -- Registration & resources: a printed document ------ */
.visual-card--document .card-bg::before {
  --tile: 104px;
  inset: 0 0 -100% 0;
  background-image: var(--tex-document);
  background-size: 200px 104px;
  animation-name: texDriftY;
  animation-duration: 42s;
}
/* Grain drifting across the sheet reads as light moving over paper,
   with no gradient anywhere in it. */
.visual-card--document .card-bg::after {
  --tile: 160px;
  inset: 0 -100% 0 0;
  background-image: var(--tex-grain);
  background-repeat: repeat;
  animation-name: texDriftX;
  animation-duration: 38s;
}
.visual-card--document:hover > .card-bg { transform: translate3d(0, -3px, 0); }

/* -- Contact & pre-event: a plan drawing --------------- */
.visual-card--architecture .card-bg::before {
  --tile: 300px;
  background-image: var(--tex-arch);
  background-size: 300px 100%;
  animation-duration: 42s;
}
.visual-card--architecture:hover > .card-bg { transform: translate3d(5px, 0, 0); }

/* -- Sponsors: a quiet measuring grid ------------------ */
.visual-card--grid .card-bg::before {
  --tile: 26px;
  background-image: var(--tex-grid);
  background-size: 26px 26px;
  animation-duration: 36s;
}
.visual-card--grid:hover > .card-bg { transform: translate3d(3px, 0, 0); }

/* The feature band sits on a lighter ground, where the same alpha reads
   roughly twice as strong. Damp the decoration to match the darker cards. */
.feature-band .card-bg { opacity: .5; }

/* -- Mobile: keep the texture, drop the motion --------- */
@media (max-width: 700px) {
  .card-bg::before, .card-bg::after { animation: none !important; opacity: .7; }
  /* The motif layer is twice the card only so a full tile of drift never
     exposes an edge. With the drift gone there is nothing to expose, and
     the second tile was painting outside the clip on every one of the 42
     decorated surfaces. The tiled motifs are unchanged by the crop; the
     portrait's crop marks are sized to the layer rather than tiled, so
     they are re-sized to the same 200% and draw pixel-for-pixel as before. */
  .card-bg::before { inset: 0; }
  .visual-card--portrait .card-bg::before { background-size: 200% 100%; }
  .visual-card--archive .card-bg::after { font-size: 96px; opacity: .045; }
  .visual-card:hover > .card-bg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-bg { transition: none; }
  .card-bg::before, .card-bg::after { animation: none !important; }
  .visual-card:hover > .card-bg { transform: none; }
}


/* =====================================================
   SECTION BACKGROUNDS  (layout.sections[id].bgStyle)
   One large, still surface instead of forty small moving
   ones. Same linework tokens the cards use, drawn once
   behind a whole section at section scale — static by
   rule: no canvas, no animation, no hover response
   outside the hero. Content sits above it untouched;
   this is a ground, never a panel, and never glass.
   ===================================================== */
section[data-bg]:not([data-bg=""]):not([data-bg="none"])::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: var(--sec-bg-image, none), var(--tex-grain);
  background-size: var(--sec-bg-size, auto), 160px 160px;
  background-repeat: var(--sec-bg-repeat, repeat), repeat;
  background-position: var(--sec-bg-pos, 0 0), 0 0;
  opacity: .5;
}
/* Everything the section holds already sits in the flow; lifting the shell
   is enough to keep it clear of the ground without touching any component. */
section[data-bg]:not([data-bg=""]):not([data-bg="none"]) > .shell,
section[data-bg]:not([data-bg=""]):not([data-bg="none"]) > .cms-sec-tools { position: relative; z-index: 1; }

/* A grid and a ruled sheet are genuinely tiles, so they tile. A chart and a
   plan are drawings — one of each, centred, at section scale. Repeating
   either one turns a drawing into wallpaper, which is the failure this
   whole pass exists to undo. */
section[data-bg="grid"]     { --sec-bg-image: var(--tex-grid);     --sec-bg-size: 26px 26px; }
section[data-bg="document"] { --sec-bg-image: var(--tex-document); --sec-bg-size: 200px 104px; }
section[data-bg="map"] {
  --sec-bg-image: var(--tex-map);
  --sec-bg-size: min(1180px, 96%) auto;
  --sec-bg-repeat: no-repeat;
  --sec-bg-pos: center;
}
section[data-bg="architecture"] {
  --sec-bg-image: var(--tex-arch);
  --sec-bg-size: min(900px, 88%) auto;
  --sec-bg-repeat: no-repeat;
  --sec-bg-pos: center;
}
/* A lighter ground reads the same alpha roughly twice as strongly. */
section[data-bg].band::before,
section[data-bg].feature-band::before { opacity: .3; }
/* A phone has no room behind its text for a drawing to be about anything,
   so the ground drops back to a suggestion rather than a picture. */
@media (max-width: 700px) {
  section[data-bg]:not([data-bg=""]):not([data-bg="none"])::before { opacity: .26; }
  section[data-bg].band::before,
  section[data-bg].feature-band::before { opacity: .18; }
}


/* =====================================================
   DEPTH — CONSISTENCY PASS
   Everything below keeps the physical language honest:
   the same light source, states that read at a glance,
   and no effect allowed to cost readability.
   ===================================================== */

/* Focus must survive on a raised surface, so it is drawn as a ring that
   sits outside the element rather than competing with its shadow. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.day-tab:focus-visible,
.back-to-top:focus-visible { outline-offset: 4px; }

/* Anything switched off loses its elevation before it loses its contrast. */
[disabled], [aria-disabled="true"] { box-shadow: none !important; transform: none !important; }

/* Depth is drawn, never measured: no shadow or press state changes an
   element's size, so nothing on the page can reflow because of one. */
.btn, .day-tab, .plate, .portrait, .back-to-top, .run-head,
.committee-row, .date-row, .run-row { will-change: auto; }

@media (hover: none) {
  /* Without a pointer there is no hover, so the resting state has to carry
     the affordance on its own — and taps must land on a real target. */
  .day-tab { min-height: 48px; }
  .back-to-top { width: 46px; height: 46px; }
  .committee-row:hover, .date-row:hover, .run-row:hover { box-shadow: none; }

  /* AUDIT: every remaining text link on the site was a 16-17px tall tap
     target. The rules below give each one a 44px band without changing
     where the text sits, so the ledgers and columns keep their rhythm. */
  .footer-links a,
  .footer-contact a,
  .contact-col a,
  .r-links a,
  .mc-link,
  .footer-socials a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .footer-socials a { min-width: 44px; justify-content: center; }
  /* The rows they sit in were spaced for 16px lines; take the old gap back
     out so the taller targets do not double the block's height. */
  .footer-links li { margin-bottom: 0; }
  .footer-contact p { margin-bottom: 0; }
  .footer-socials { gap: 6px; margin-top: 8px; }
  .brand { min-height: 44px; }
}

@media (max-width: 700px) {
  /* Smaller surfaces need smaller shadows or the whole page reads as murk. */
  :root {
    --d-1: -1px -1px 3px var(--lit), 2px 3px 8px var(--shade);
    --d-2: -2px -2px 5px var(--lit), 3px 5px 12px var(--shade);
    --d-3: -2px -2px 6px var(--lit-soft), 6px 10px 22px var(--shade-deep);
    --d-in: inset 2px 3px 6px var(--shade), inset -1px -1px 4px var(--lit);
  }
  .hero-clock { padding: 18px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .day-tab, .plate, .portrait, .back-to-top,
  .committee-row, .date-row, .run-row, .run-head { transition: none !important; }
  .btn-solid:active, .day-tab:active, .run-head:active,
  .btn-quiet:active, .back-to-top:active { transform: none; }
}

/* =====================================================
   LIGHTBOX · EDITOR-DRIVEN EXTRAS
   ===================================================== */
/* -- Lightbox ------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: rgba(6,11,20,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-figure {
  max-width: min(1100px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  transform: scale(.97);
  transition: transform .34s var(--ease-out);
}
.lightbox.active .lightbox-figure { transform: none; }
.lightbox img {
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--d-3);
}
.lightbox figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--paper);
  background: var(--ink-700); box-shadow: var(--d-1);
  transition: box-shadow var(--t-depth) var(--ease);
}
.lightbox-close:hover { box-shadow: var(--d-2); }
.lightbox-close:active { box-shadow: var(--d-press); }


/* =====================================================
   EDITOR-DRIVEN EXTRAS
   =====================================================
   Everything below exists because the CMS can now create
   it. None of it is decoration: a note only appears when
   an editor writes one, and a hidden section is hidden.
   ===================================================== */

/* Free notes an editor can add under any section heading.
   They read as an aside to the heading above, not as
   another card — deliberately the quietest text on the
   page so adding one never competes with the section. */
/* The container always exists — it holds the template the CMS
   clones from — so emptiness is judged by whether a note came
   out of it, not by :empty. */
.sec-notes { display: none; }
.sec-notes:has(.sec-note) { display: block; margin: -6px 0 26px; max-width: 62ch; }
.sec-note {
  color: var(--faint);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line-hair);
}
.sec-note:last-child { margin-bottom: 0; }

/* Inline formatting the editor can apply to a selection. */
.nowrap, .no-break { white-space: nowrap; }
sup, sub { font-size: .68em; line-height: 0; }
mark {
  background: rgba(203,170,104,0.22);
  color: inherit;
  padding: 0 .18em;
  border-radius: 2px;
}

/* =====================================================
   EDIT-MODE CHROME (only ever inside the CMS iframe)
   ===================================================== */

/* Formatting bar. It follows the selection, so it is
   deliberately compact and monochrome — the colours in it
   are the content's, not the bar's. */
[data-cms-edit] .cms-fmt {
  position: fixed; z-index: 400;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 10px;
  background: var(--ink-600);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 10px 26px rgba(6,10,20,0.5);
  font-family: var(--font-ui);
}
[data-cms-edit] .cms-fmt-group {
  display: flex; align-items: center; gap: 2px;
  padding-right: 5px; margin-right: 1px;
  border-right: 1px solid rgba(168,195,232,0.12);
}
[data-cms-edit] .cms-fmt-group:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
[data-cms-edit] .cms-fmt-btn {
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--paper);
  font-size: 12.5px; line-height: 1; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
[data-cms-edit] .cms-fmt-btn:hover { background: rgba(168,195,232,0.14); }
[data-cms-edit] .cms-fmt-btn.is-on { background: var(--brass); color: #14203A; }
[data-cms-edit] .cms-fmt-nowrap { font-size: 11px; letter-spacing: .02em; }
[data-cms-edit] .cms-fmt-mark { background: rgba(203,170,104,0.3); padding: 0 3px; border-radius: 2px; }
[data-cms-edit] .cms-fmt-swatch {
  width: 18px; height: 18px; padding: 0;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 50%;
  cursor: pointer;
}
[data-cms-edit] .cms-fmt-swatch:hover { transform: scale(1.12); }
[data-cms-edit] .cms-fmt-pick {
  width: 22px; height: 22px; padding: 0;
  border: 0; background: none; cursor: pointer;
}

/* Section tools sit in the section's top corner, out of the
   way of its own heading, and only while editing. */
[data-cms-edit] .cms-sec-tools {
  position: absolute; top: 6px; right: 10px; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(13,21,36,0.86);
  font-family: var(--font-ui); font-size: 11px;
  opacity: .35;
  transition: opacity .18s ease;
}
[data-cms-edit] section:hover > .cms-sec-tools,
[data-cms-edit] .cms-sec-tools:focus-within { opacity: 1; }
[data-cms-edit] .cms-sec-name {
  color: var(--faint); letter-spacing: .07em; text-transform: uppercase;
  margin-right: 4px;
}
[data-cms-edit] .cms-sec-btn {
  height: 22px; padding: 0 7px;
  border: 1px solid rgba(168,195,232,0.16); border-radius: 5px;
  background: transparent; color: var(--paper);
  font-size: 11px; line-height: 1; cursor: pointer;
}
[data-cms-edit] .cms-sec-btn:hover { background: var(--brass); color: #14203A; border-color: var(--brass); }
[data-cms-edit] .cms-sec-accent {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
}
[data-cms-edit] .cms-hidden-section { opacity: .42; outline: 1px dashed rgba(203,170,104,0.4); outline-offset: -6px; }

/* Remove-year control on a MUNs tab. */
[data-cms-edit] .cms-year-kill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 8px;
  border-radius: 4px;
  background: rgba(201,139,122,0.18); color: #E7B7AB;
  font-size: 10px; cursor: pointer;
}
[data-cms-edit] .cms-year-kill:hover { background: #C98B7A; color: #1A1010; }

/* An empty photo slot is invisible on the live site — there is
   nothing to show. Inside the CMS it has to be the opposite: it
   is the only thing you can click to add the picture. */
[data-cms-edit] .c-photo.is-empty {
  display: block;
  position: relative;
  background: rgba(168,195,232,0.05);
  outline: 1px dashed rgba(203,170,104,0.45);
  outline-offset: -3px;
  cursor: pointer;
}
[data-cms-edit] .c-photo.is-empty::after,
[data-cms-edit] .mun-media.is-empty::after {
  content: 'add photo';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass);
  pointer-events: none;
}
[data-cms-edit] .c-photo.is-empty img,
[data-cms-edit] .mun-media.is-empty img {
  display: block; width: 100%; height: 100%; opacity: 0;
}
[data-cms-edit] .mun-media.is-empty {
  display: block;
  position: relative;
  cursor: pointer;
  outline: 1px dashed rgba(203,170,104,0.45);
  outline-offset: -3px;
}

/* Small editor chips: a control for a value that has no
   text of its own on the page — the countdown's target
   date, the announcement's on/off. */
[data-cms-edit] .cms-chip {
  display: inline-flex; align-items: center;
  margin-top: 12px; padding: 4px 10px;
  border: 1px dashed rgba(203,170,104,0.5); border-radius: 6px;
  background: transparent; color: var(--brass);
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em;
  cursor: pointer;
}
[data-cms-edit] .cms-chip:hover { background: var(--brass); color: #14203A; border-style: solid; }
[data-cms-edit] .cms-chip.is-on { border-style: solid; }

/* The internal staffing note on a runsheet row. It exists only inside
   the editor — the public template has no field for it — and it is
   marked so it cannot be mistaken for something visitors read. */
[data-cms-edit] .cms-internal-chip {
  margin-top: 10px; font-size: 10px; letter-spacing: .06em;
  border-style: solid; border-color: rgba(203,170,104,0.32);
  opacity: 0.86;
}
/* The switch that decides whether an emptied row list means "empty" or
   "put the shipped schedule back". Over the day tabs, where the rows are. */
[data-cms-edit] .cms-sched-empty { margin: 0 0 12px; }

/* ── The four controls on a social mark ────────────
   A social button is a 17px picture carrying four values: its
   address, its platform, an optional picture of the client's own,
   and the words a screen reader reads. None of them can be aimed
   at on the mark itself, so in the editor each mark becomes a
   small stack — the mark, then its chips — and the two rows of
   marks wrap instead of running off the header. Nothing here is
   on the live site; it all sits under [data-cms-edit]. */
/* The drag grip sits 22px to the LEFT of the thing it moves, which on a
   row of 17px marks lands on top of the neighbour. Both rows open out in
   the editor so every grip has its own air and every mark can be hovered,
   clicked and tapped as itself. */
[data-cms-edit] .header-social { gap: 26px; }
[data-cms-edit] .footer-socials { flex-wrap: wrap; gap: 12px 26px; }
[data-cms-edit] .footer-socials .fs-item {
  flex-direction: column; align-items: flex-start; gap: 3px;
}
/* In the FOOTER the cluster is simply there, always, under its mark:
   it is the row a phone can reach, and nothing up there is crowded.
   In the HEADER the same four chips under five marks would make the
   sticky bar four rows tall and push the page down, so there they
   drop out of the bar on hover or keyboard focus instead — and come
   back as a permanent stack wherever there is no hover to use. */
[data-cms-edit] .header-social .cms-social-tools {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  width: max-content; max-width: 210px;
  padding: 6px; border-radius: 8px;
  background: rgba(9,15,26,0.96);
  border: 1px solid rgba(111,178,255,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
[data-cms-edit] .header-social .hs-item:hover .cms-social-tools,
[data-cms-edit] .header-social .hs-item:focus-within .cms-social-tools,
[data-cms-edit] .header-social .cms-social-tools:hover {
  opacity: 1; pointer-events: auto;
}
@media (hover: none) {
  [data-cms-edit] .header-social { flex-wrap: wrap; gap: 12px 26px; }
  [data-cms-edit] .header-social .hs-item {
    flex-direction: column; align-items: flex-start; gap: 3px;
  }
  [data-cms-edit] .header-social .cms-social-tools {
    position: static; opacity: 1; pointer-events: auto;
    max-width: none; padding: 0; background: none; border: 0;
  }
}
[data-cms-edit] .cms-social-tools {
  display: flex; flex-wrap: wrap; gap: 3px;
  max-width: 172px;
}
[data-cms-edit] .cms-social-tools .cms-chip {
  margin-top: 0; padding: 3px 7px;
  font-size: 9.5px; letter-spacing: .04em;
  min-height: 22px;
}
/* On a touchscreen a 22px chip is not a target. The whole cluster
   opens out so every chip is a real one. */
@media (hover: none) {
  [data-cms-edit] .cms-social-tools { max-width: none; gap: 5px; }
  [data-cms-edit] .cms-social-tools .cms-chip {
    min-height: 34px; padding: 6px 11px; font-size: 11px;
  }
}

/* An "alt" chip sits beside every editable image, so the text a
   screen reader will read is set where the picture is. */
[data-cms-edit] .cms-alt-chip {
  margin: 0 0 0 6px; padding: 2px 7px;
  vertical-align: middle; font-size: 10px;
}

/* Site identity, sharing and analytics: values with no
   appearance on the page, gathered in the footer beside the
   site name they describe. */
[data-cms-edit] .cms-site-meta {
  margin-top: 20px; padding: 14px 16px;
  border: 1px dashed rgba(168,195,232,0.22);
  border-radius: var(--r-lg);
  background: rgba(13,21,36,0.5);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
[data-cms-edit] .cms-site-meta-title {
  flex: 1 0 100%;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
[data-cms-edit] .cms-site-meta .cms-chip { margin-top: 0; }

/* The hero's atmosphere: a photograph and the live backdrop, both
   judged on the hero rather than in a form. Same panel language as
   the site-identity block, sat at the foot of the hero itself. */
[data-cms-edit] .cms-hero-bg {
  position: relative; z-index: 5;
  margin: 28px auto 0; max-width: 1180px;
  padding: 12px 16px 14px;
  border: 1px dashed rgba(168,195,232,0.22);
  border-radius: var(--r-lg);
  background: rgba(13,21,36,0.72);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
[data-cms-edit] .cms-hero-bg .cms-chip { margin-top: 0; }

/* A tint level and a carousel speed are judgements about a
   photograph, so they are made against the photograph: a slider
   and a typable number sharing one value, both writing the hero
   behind the panel on every movement. Same dashed vocabulary as
   the chips they replaced; nothing here is decorative. */
[data-cms-edit] .cms-range {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px dashed rgba(203,170,104,0.5); border-radius: 6px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em;
  color: var(--brass);
  cursor: default;
}
[data-cms-edit] .cms-range.is-set { border-style: solid; }
[data-cms-edit] .cms-range-name { color: var(--faint); white-space: nowrap; }
[data-cms-edit] .cms-range-slide {
  width: 116px; height: 16px; margin: 0; padding: 0;
  accent-color: var(--brass);
  background: transparent; cursor: pointer;
}
[data-cms-edit] .cms-range-num {
  width: 52px; padding: 2px 4px;
  border: 1px solid rgba(203,170,104,0.35); border-radius: 4px;
  background: rgba(13,21,36,0.6); color: var(--brass);
  font-family: var(--font-ui); font-size: 11px; text-align: right;
}
[data-cms-edit] .cms-range-unit { color: var(--faint); }
/* The floor, and the fade that outruns its hold: said in words on
   the control that caused it. It warns; it never refuses — the
   value the client asked for is the value that is stored. */
[data-cms-edit] .cms-range-warn {
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 10.5px; line-height: 1.45; letter-spacing: .02em;
  color: #E7B48C;
  text-transform: none;
}
[data-cms-edit] .cms-range.is-warned { border-color: #E7B48C; border-style: solid; }
[data-cms-edit] .cms-range-colour .cms-sec-accent { width: 26px; height: 20px; }
@media (hover: none) {
  [data-cms-edit] .cms-range-slide { height: 28px; }
  [data-cms-edit] .cms-range-num { padding: 6px 4px; }
}

/* ── Nothing is hidden from the person editing it ──────
   The live site drops chrome whose copy is empty: a button
   with no label, the motto line with no words. In the editor
   that is a one-way door — the field goes with the element,
   and the only way back is the Advanced form. So in edit mode
   the empty shell stays, showing its "empty" placeholder.

   The rules that do the hiding are scoped to a page that is not
   being edited (see "Chrome that only exists to join two pieces of
   copy" above), rather than overridden here with a display value
   that would have to guess what each element normally is. */

/* The announcement popup, brought into the page so its copy
   can be edited without an overlay covering everything. */
[data-cms-edit] .cms-announce {
  grid-column: 1 / -1;          /* the hero shell is a grid */
  margin: 40px 0 0;
  padding: 16px 18px 18px;
  border: 1px dashed rgba(168,195,232,0.22);
  border-radius: var(--r-lg);
  background: rgba(13,21,36,0.5);
}
[data-cms-edit] .cms-announce-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
[data-cms-edit] .cms-announce-title {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
[data-cms-edit] .cms-announce-head .cms-chip { margin-top: 0; }
[data-cms-edit] .cms-announce .dialog-close { display: none; }
[data-cms-edit] .cms-announce .dialog-panel {
  transform: none; max-width: none; box-shadow: none; padding: 0;
  background: transparent;
}

/* =====================================================
   INLINE FORMATTING IS ALWAYS INLINE
   =====================================================
   Editors can put a coloured span, a highlight or a sized
   run inside any field on the site. None of those may be
   caught by a layout rule meant for the field itself, or
   the text breaks onto a new line the moment it is
   styled. This is the backstop for every such rule.
   ===================================================== */
[data-cms] span, [data-cms] mark, [data-cms] b, [data-cms] i,
[data-cms] u, [data-cms] s, [data-cms] sup, [data-cms] sub,
[data-cms-field] span, [data-cms-field] mark, [data-cms-field] b,
[data-cms-field] i, [data-cms-field] u, [data-cms-field] s,
[data-cms-field] sup, [data-cms-field] sub {
  display: inline;
  margin: 0;
  padding: 0;
  width: auto;
  animation: none;
  opacity: inherit;
  transform: none;
}
[data-cms] sup, [data-cms-field] sup, [data-cms] sub, [data-cms-field] sub {
  display: inline;                 /* keeps its own vertical-align */
}
[data-cms] mark, [data-cms-field] mark { padding: 0 .18em; }
[data-cms] .nowrap, [data-cms-field] .nowrap,
[data-cms] .no-break, [data-cms-field] .no-break { white-space: nowrap; }

[data-cms-edit] .cms-fmt-select {
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(168,195,232,0.18); border-radius: 6px;
  background: rgba(9,15,26,0.8); color: var(--paper);
  font-family: var(--font-ui); font-size: 11px;
  cursor: pointer;
}

/* Buttons an editor added to a section. They are quiet by
   default — a section already has its own primary action, and
   two loud CTAs beside each other is how a page loses its
   hierarchy. A button with no link is not drawn at all. */
.sec-actions { display: none; }
.sec-actions:has(.sec-btn[href]:not([href=""])) {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 0 0 30px;
}
/* The wrapper exists so the editor's item controls have somewhere
   to live that is not inside the anchor — a button inside a link is
   not a thing a browser can do anything sensible with. */
.sec-btn-wrap { display: inline-flex; position: relative; }
.sec-btn-wrap:has(.sec-btn:not([href])),
.sec-btn-wrap:has(.sec-btn[href=""]),
.sec-btn-wrap:has(.sec-btn[href="#"]) { display: none; }
/* …but a button you cannot see is a button you cannot give a link to,
   so in the editor an empty one stays on screen, marked as unfinished. */
[data-cms-edit] .sec-actions,
[data-cms-edit] .sec-btn-wrap:has(.sec-btn[href=""]),
[data-cms-edit] .sec-btn-wrap:has(.sec-btn:not([href])),
[data-cms-edit] .sec-btn-wrap:has(.sec-btn[href="#"]) { display: inline-flex; opacity: .75; }
[data-cms-edit] .sec-actions { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 30px; }

[data-cms-edit] .cms-lead-row {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 22px;
}
[data-cms-edit] .cms-lead-label {
  margin-right: 6px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
[data-cms-edit] .cms-lead-btn { margin-top: 0; min-width: 30px; justify-content: center; }
[data-cms-edit] .cms-lead-btn.is-on { background: var(--brass); color: #14203A; border-style: solid; }
/* One band: a stepper with the count between its two halves, read
   as a single control rather than three loose chips. */
[data-cms-edit] .cms-roster-row { flex-wrap: wrap; gap: 8px; }
[data-cms-edit] .cms-band {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid rgba(203,170,104,0.35);
  border-radius: var(--r-sm);
}
[data-cms-edit] .cms-band .cms-band-step { border: 0; min-width: 20px; padding: 3px 5px; }
[data-cms-edit] .cms-band-count {
  min-width: 16px; text-align: center;
  font-family: var(--font-ui); font-size: 12px; color: var(--brass-bright);
}
[data-cms-edit] .cms-band-x { color: var(--faint); }
[data-cms-edit] .cms-band-x:hover { background: #7A2E2E; color: #F4E6E6; }
[data-cms-edit] .cms-lead-sep {
  width: 1px; height: 18px; margin: 0 4px;
  background: rgba(203,170,104,0.3);
}
[data-cms-edit] .cms-lead-note {
  font-family: var(--font-ui); font-size: 11px; color: var(--faint);
  margin-left: 2px;
}
/* The two sentences under the chips. They take the whole width of the
   wrapping row so they read as prose rather than as another control,
   and the honest one — what the pattern does to the roster that exists
   — is marked when the two disagree. */
[data-cms-edit] .cms-roster-plan,
[data-cms-edit] .cms-roster-fit {
  flex: 0 0 100%; margin: 0;
  font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
  color: var(--faint);
}
[data-cms-edit] .cms-roster-plan { color: var(--brass-bright); margin-top: 4px; }
[data-cms-edit] .cms-roster-fit.is-warn { color: #E8C99A; }
[data-cms-edit] .cms-band-reset.is-on { background: var(--brass); color: #14203A; border-style: solid; }
[data-cms-edit] .cms-sched-restore { margin-left: 8px; }
/* Focal point: the controls sit on the frame they change. */
[data-cms-edit] .cms-focal-btn {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em;
  color: var(--cms-accent);
  border: 1px dashed rgba(111,178,255,0.55);
  border-radius: var(--r-sm); padding: 4px 8px;
  background: rgba(9,15,26,0.72);
  cursor: pointer;
}
[data-cms-edit] .cms-focal-clear { left: auto; right: 8px; }
[data-cms-edit] .cms-focal-btn:hover { background: var(--cms-accent); color: #0B1220; }
[data-cms-edit] .portrait.is-focal-armed { cursor: crosshair; outline: 2px solid var(--cms-accent); outline-offset: -2px; }
[data-cms-edit] .portrait.is-focal-armed .cms-photo-btn { display: none; }

/* A field an editor cleared. It must occupy nothing — an empty
   hero line that still reserves its leading pushes everything
   below it down for no reason. In the CMS it stays reachable,
   marked, so the text can be put back. */
/* !important is earned here: this is a state, and it has to beat
   every layout rule that targets the element by its own selector
   (.hero-title > span, for one). A cleared field occupies nothing,
   whatever else the stylesheet says about it. */
.cms-empty { display: none !important; }
[data-cms-edit] .cms-empty {
  display: block !important;
  min-height: 1em; min-width: 90px;
  outline: 1px dashed rgba(203,170,104,0.35);
  outline-offset: 2px;
}
[data-cms-edit] .cms-empty::after {
  content: 'empty';
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

/* Drag grip. It sits outside the element's own box so it never
   covers the words, and it only appears on hover — the page has
   to stay readable while you work on it. */
[data-cms-edit] .cms-grip {
  position: absolute; top: 50%; left: -22px;
  transform: translateY(-50%);
  width: 16px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(9,15,26,0.9);
  color: var(--brass);
  font-size: 11px; line-height: 1;
  cursor: grab;
  opacity: 0;
  /* A drag has to own the gesture: without this a finger on the grip
     scrolls the page instead of moving the element. */
  touch-action: none;
  transition: opacity .14s ease;
}
[data-cms-edit] .cms-grip::before { content: '\2059'; letter-spacing: -1px; }
[data-cms-edit] [data-cms-grip]:hover > .cms-grip,
[data-cms-edit] .cms-grip:hover,
[data-cms-edit] .cms-grip:focus { opacity: 1; }
[data-cms-edit] .cms-grip:active { cursor: grabbing; }
[data-cms-edit] .is-moving { outline: 1px dashed var(--brass); outline-offset: 4px; }
[data-cms-edit] [data-cms-moved] > .cms-grip { opacity: .5; color: var(--brass-bright); }

/* ── No pointer that hovers ────────────────────────────
   On a tablet there is no hover, so every control that waits
   for one is a control that does not exist: the item toolbars
   (move, delete, day, feature, background) and the drag grips
   were unreachable by touch entirely. On those devices they
   are simply always there. Nothing moves on a desktop. */
@media (hover: none) {
  [data-cms-edit] .cms-item-tools { opacity: .92; pointer-events: auto; }
  [data-cms-edit] .cms-grip { opacity: .75; }
  [data-cms-edit] .cms-sec-tools { opacity: .92; }
  /* Finger-sized, since a finger is what is being asked for. */
  [data-cms-edit] .cms-tool { min-width: 32px; height: 32px; }
  [data-cms-edit] .cms-grip { width: 26px; height: 32px; left: -30px; }
  [data-cms-edit] .cms-sec-btn { height: 30px; padding: 0 10px; }

  /* The header menu is a tight horizontal row of short words, and a
     toolbar that is always there is wider than the word it sits on: the
     ten toolbars overlapped each other, and six of the ten ✕ buttons
     were covered by the next entry's toolbar — a finger aiming at one
     entry deleted another. So in that row the tools drop UNDER the
     entry they belong to and stack into a single column, so a toolbar
     is never wider than the entry it belongs to and can never reach
     across the one beside it.

     The same list in the mobile menu and the footer is a column of
     full-width rows and needs none of this. */
  [data-cms-edit] #main-nav .nav-links > li > .cms-item-tools {
    flex-direction: column;
    top: 100%; bottom: auto; left: 0; right: auto;
  }
}

/* Chrome that only exists to join two pieces of copy must go when
   the copy does. A lone slash between two blanks, or an underlined
   button with no label, reads as breakage rather than as restraint. */
/* A separator belongs to the pair it separates: drop it when
   either side is gone, and drop the whole line when all three are. */
/* Every one of these is scoped to a page nobody is editing. In the
   editor the empty shell has to stay: the field lives inside it, so
   hiding the element is hiding the only way to type the words back. */
html:not([data-cms-edit]) .cms-empty + .sep,
html:not([data-cms-edit]) .sep:has(+ .cms-empty) { display: none; }
html:not([data-cms-edit]) .hero-motto:not(:has(> span:not(.sep):not(.cms-empty))) { display: none; }
html:not([data-cms-edit]) .btn:has(> .cms-empty:not(.reg-closed-label)) { display: none; }
html:not([data-cms-edit]) .sec-head:has(> h2.cms-empty) .sec-index { display: none; }


/* =====================================================
   REGISTRATION CLOSED
   =====================================================
   registration.closeDateISO is a moment, not a switch: the
   page reads the visitor's own clock and, once it is past,
   every Register affordance stops being an affordance. It
   keeps its place in the layout — the plate is still there,
   it simply no longer offers anything — so nothing reflows
   and nobody hunts for a button that vanished.
   The two labels live side by side in the markup so the
   closed wording is real, editable content rather than a
   string hidden in a script. */
.reg-closed-label { display: none; }
.btn.is-reg-closed > .reg-open-label { display: none; }
.btn.is-reg-closed > .reg-closed-label { display: inline; }
.btn.is-reg-closed {
  background: transparent;
  color: var(--faint);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 500;
  opacity: 1;
  cursor: default;
  pointer-events: none;
  transform: none;
}
.btn.is-reg-closed > i { display: none; }

/* The hero clock can hold two targets, so it holds two labels.
   Only the one belonging to the live target is drawn. */
.cd-label-main.is-off, .cd-label-alt.is-off { display: none; }

/* ── Both states are edited, so both states are shown ──
   In the editor nothing is closed and nothing is hidden:
   the closed wording sits beside the live wording as a
   marked chip, and both countdown labels are on screen. */
[data-cms-edit] .btn > .reg-closed-label {
  display: inline-flex; align-items: center;
  margin-left: 10px; padding: 2px 8px;
  border: 1px dashed rgba(203,170,104,0.45); border-radius: 6px;
  background: rgba(13,21,36,0.4);
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em;
  color: var(--brass);
}
[data-cms-edit] .btn > .reg-closed-label::before {
  content: 'closed \203A'; margin-right: 6px; opacity: .65;
}
[data-cms-edit] .cd-label-main.is-off,
[data-cms-edit] .cd-label-alt.is-off { display: block; }
[data-cms-edit] .cd-label-alt { opacity: .78; }
[data-cms-edit] .cd-label-alt::before {
  content: 'until the earlier deadline \2014 ';
  font-size: 10px; letter-spacing: .06em; color: var(--faint);
}

/* The announcement's own controls, in the panel the editor
   builds in the hero: how often, and how many days. */
[data-cms-edit] .cms-announce-opts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 2px;
}
[data-cms-edit] .cms-announce-opts .cms-chip { margin-top: 0; }
[data-cms-edit] .cms-announce-opts .cms-chip.is-on {
  background: var(--brass); color: #14203A; border-style: solid;
}
[data-cms-edit] .cms-opt-label {
  margin-right: 4px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
[data-cms-edit] .cms-regclose { display: block; margin-top: 14px; }

/* The registration popup's own copy, surfaced beside the panel
   that opens it — the dialog itself is hidden while editing. */
[data-cms-edit] .cms-dialog-chips {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
[data-cms-edit] .cms-dialog-chips .cms-chip { margin-top: 0; }
[data-cms-edit] .cms-dialog-chips .cms-chip.is-on {
  background: var(--brass); color: #14203A; border-style: solid;
}

/* One row per audience-specific note, plus the button that makes
   another one. Same treatment as the chips above it. */
[data-cms-edit] .cms-dialog-notes {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
[data-cms-edit] .cms-dialog-notes .cms-chip { margin-top: 0; }
[data-cms-edit] .cms-dialog-notes .cms-chip.is-on {
  background: var(--brass); color: #14203A; border-style: solid;
}
[data-cms-edit] .cms-note-del { opacity: .7; }
/* A plan's last day, on the plan's own row in the schedule. */
[data-cms-edit] .cms-plan-until { display: inline-block; margin-top: 10px; }

/* A note in the announcement panel: the one rule about this
   popup that is not visible in any control. */
[data-cms-edit] .cms-announce-note {
  margin: 10px 0 0;
  max-width: 62ch;
  font-family: var(--font-ui); font-size: 11.5px; line-height: 1.6;
  color: var(--faint);
}

/* =====================================================
   v19 — EDITOR SURFACES FOR THE NEW SECTIONS
   ===================================================== */
/* A section visitors do not see yet is still fully editable here, and
   says so: a dashed edge and its switch at the top. */
[data-cms-edit] section.cms-off,
[data-cms-edit] .arrival.cms-off,
[data-cms-edit] .ticker.cms-off { outline: 1px dashed rgba(203,170,104,0.45); outline-offset: -6px; }
[data-cms-edit] .cms-switch { margin: 0 0 18px; }
[data-cms-edit] .cms-switch:not(.is-on) { color: #E8C99A; border-color: rgba(232,201,154,0.6); }
[data-cms-edit] .arrival > .cms-switch { grid-column: 1 / -1; justify-self: start; margin: 0; }

/* The identity line holds still in the editor and shows its own controls. */
[data-cms-edit] .ticker-viewport { animation: none; width: auto; flex-wrap: wrap; padding: 0 var(--gutter); }
[data-cms-edit] .ticker-track { flex-wrap: wrap; }
[data-cms-edit] .cms-ticker-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px var(--gutter) 0;
  font-family: var(--font-ui);
}
[data-cms-edit] .cms-ticker-bar .cms-chip { margin: 0; }
[data-cms-edit] .cms-ticker-name { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
[data-cms-edit] .ticker .cms-add { padding: 10px 0 14px; }
[data-cms-edit] .tk-item { position: relative; }

/* Empty picture frames: visible, clickable, and saying what goes there. */
[data-cms-edit] .about-figure:not(:has(img[src]:not([src=""]))),
[data-cms-edit] .gs-portrait:not(:has(img[src]:not([src=""]))),
[data-cms-edit] .mc-media:not(:has(img[src]:not([src=""]))),
[data-cms-edit] .so-media:not(:has(img[src]:not([src=""]))) {
  outline: 1px dashed rgba(111,178,255,0.5); outline-offset: -8px;
}
[data-cms-edit] .about-figure:not(:has(img[src]:not([src=""])))::after,
[data-cms-edit] .gs-portrait:not(:has(img[src]:not([src=""])))::after,
[data-cms-edit] .mc-media:not(:has(img[src]:not([src=""])))::after,
[data-cms-edit] .so-media:not(:has(img[src]:not([src=""])))::after {
  content: 'Click to set a photograph'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12px; color: var(--cms-accent); pointer-events: none;
}
[data-cms-edit] .about-figure img, [data-cms-edit] .gs-portrait img,
[data-cms-edit] .mc-media img, [data-cms-edit] .so-media img { min-height: 100%; cursor: pointer; }
[data-cms-edit] .gs-signature:not([src]), [data-cms-edit] .gs-signature[src=""] {
  display: block; width: 180px; height: 48px;
  outline: 1px dashed rgba(111,178,255,0.45); outline-offset: 2px;
}
[data-cms-edit] .gs-portrait { position: relative; top: auto; }
[data-cms-edit] .about-figure > .cms-alt-chip,
[data-cms-edit] .gs-portrait > .cms-alt-chip,
[data-cms-edit] .mc-media > .cms-alt-chip,
[data-cms-edit] .so-media > .cms-alt-chip { position: absolute; left: 12px; bottom: 12px; z-index: 3; }

/* Committees: the tools of the committee on show stay on it. */
[data-cms-edit] .cm-slide > .cms-item-tools { top: 0; right: 0; }
[data-cms-edit] .cm-media .c-photo.is-empty { display: flex; min-height: 280px; aspect-ratio: 6 / 5; }
[data-cms-edit] .cms-date-chip { margin-top: 10px; }

/* Several links at once. */
[data-cms-edit] .cms-bulk { width: min(440px, calc(100vw - 24px)); }
[data-cms-edit] .cms-bulk-input {
  width: 100%; padding: 9px 10px; resize: vertical;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--paper); background: #0A1322;
  border: 1px solid rgba(168,195,232,0.25); border-radius: 8px;
}
[data-cms-edit] .cms-bulk-list { max-height: 240px; overflow: auto; margin: 10px 0; display: grid; gap: 6px; }
[data-cms-edit] .cms-bulk-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; align-items: center;
  font-size: 12px; color: var(--text);
}
[data-cms-edit] .cms-bulk-row.is-warn { color: #E8C99A; }
[data-cms-edit] .cms-bulk-thumb { grid-row: span 2; width: 44px; height: 33px; border-radius: 4px; overflow: hidden; background: #0A1322; border: 1px solid rgba(168,195,232,0.2); }
[data-cms-edit] .cms-bulk-thumb img { width: 100%; height: 100%; object-fit: cover; }
[data-cms-edit] .cms-bulk-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }
[data-cms-edit] .cms-bulk-note { font-size: 11.5px; color: var(--faint); }
[data-cms-edit] .cms-bulk-row.is-warn .cms-bulk-note { color: #E8C99A; }
[data-cms-edit] .cms-bulk .cms-pop-actions { flex-wrap: wrap; }
[data-cms-edit] .cms-pop-save:disabled { opacity: .45; cursor: default; }
[data-cms-edit] .cms-add[data-cms-add="committees.items"] { padding-top: 24px; }

/* =====================================================
   v20 — BOLD LAYER
   Large condensed capitals, one Menu, a photographic wordmark
   hero, a full-screen countdown, marquee bands, numbered
   committee plates, a council written across the page, a
   framed invitation, a brass registration band and an index-
   style footer. Navy and brass throughout; motion is reveal-
   on-scroll, the running band and hover. All of it stands still
   under prefers-reduced-motion.
   ===================================================== */
:root {
  --font-bold: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --bold-stretch: 76%;
  --h-mega: clamp(56px, 8.4vw, 140px);
  --ink-000: #070C16;
}
body { background: var(--ink-000); }
/* A fixed film of grain over every ground. Static, never animated. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background-image: var(--tex-grain); background-size: 160px 160px; opacity: .55;
  mix-blend-mode: soft-light;
}
[data-cms-edit] body::after { display: none; }

.bold, .sec-head h2, .mc-body h2, .cm-code, .social-item h3, .roster-entry.is-lead h3,
.arrival-body h3, .tk-item, .cd-num, .mobile-nav-link .m-label, .footer-links a {
  font-family: var(--font-bold);
  font-stretch: var(--bold-stretch);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
section, section.band, #about, #secretary, #muns, #committees, #schedule, #socials,
#important-dates, #team, #resources, #contact, #sponsors { background: transparent; border-block: 0; }
#secretary, #schedule, #contact { background: var(--ink-900); }

/* ── Section heads: tracked eyebrow over a wall of capitals ── */
.sec-head { max-width: none; }
.sec-head .label { letter-spacing: .32em; font-size: 12px; color: var(--muted); }
.sec-index { color: var(--brass); }
.sec-head h2 {
  --sec-h2: clamp(48px, 7vw, 116px);
  font-size: var(--sec-h2);
  line-height: .9; margin-top: 14px; font-weight: 800;
  color: var(--paper);
}
#sponsors .sec-head h2, #contact .sec-head h2, #resources .res-top .sec-head h2 { --sec-h2: clamp(40px, 5vw, 76px); }
.sec-sub { font-size: 17px; }

/* Reveal: a heading rises out of its own line box; pictures open from the
   bottom edge. Keyed on the classes js/main.js already sets. */
.animate-on-scroll .sec-head h2, .sec-head.animate-on-scroll h2 { clip-path: inset(0 0 100% 0); transform: translateY(40%); }
.animate-on-scroll.is-visible .sec-head h2, .sec-head.animate-on-scroll.is-visible h2 {
  clip-path: inset(0 0 -10% 0); transform: none;
  transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal-media { clip-path: inset(18% 0 0 0 round var(--r-md)); }
.reveal-media img { transform: scale(1.14); }
.reveal-media.is-visible { clip-path: inset(0 0 0 0 round var(--r-md)); transition: clip-path 1.1s var(--ease-out); }
.reveal-media.is-visible img { transform: scale(1); transition: transform 1.4s var(--ease-out); }
html:not(.js) .reveal-media, [data-cms-edit] .reveal-media { clip-path: none; }
[data-cms-edit] .reveal-media img, [data-cms-edit] .sec-head h2 { transform: none !important; clip-path: none !important; }

/* ── Header: crest left, Menu right ──────────────────────── */
#header, #header.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#header.scrolled::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,12,22,.86), rgba(7,12,22,0));
}
.brand-word { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: .02em; }
html:not([data-cms-edit]) #main-nav, html:not([data-cms-edit]) .header-right { display: none; }
.hamburger {
  display: inline-flex; flex-direction: row; gap: 12px; width: auto; height: 44px;
  margin-left: auto; padding: 0 4px;
  font-family: var(--font-ui); font-weight: 600; font-size: 17px; color: var(--paper);
  box-shadow: none !important; background: none !important;
  position: relative; z-index: 95;
}
.menu-plus { position: relative; width: 16px; height: 16px; flex: none; }
.menu-plus::before, .menu-plus::after {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--brass);
  transition: transform .4s var(--ease-out);
}
.menu-plus::after { transform: rotate(90deg); }
.hamburger.open .menu-plus::before { transform: rotate(45deg); }
.hamburger.open .menu-plus::after { transform: rotate(135deg); }
.hamburger:hover .menu-word { color: var(--brass-bright); }
[data-cms-edit] .hamburger { display: none; }

/* ── The Menu: a full-screen index ───────────────────────── */
#mobile-nav-overlay {
  inset: 0; z-index: 89;
  background: var(--ink-000);
  transform: translateY(-100%);
  transition: transform .7s var(--ease), visibility .7s;
}
#mobile-nav-overlay.open { transform: none; transition: transform .7s var(--ease), visibility 0s; }
.menu-inner {
  min-height: 100%;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 96px;
  padding-top: calc(var(--nav-h) + 64px); padding-bottom: 64px;
}
.mobile-nav-inner { padding: 0; }
.menu-kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }
.mobile-nav-link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--paper); font-size: inherit;
}
.mobile-nav-link .m-label { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; transition: transform .45s var(--ease-out), color .3s var(--ease); }
.m-num { font-family: var(--font-mono); font-size: 12px; color: var(--brass); }
.m-arrow { width: 22px; height: 2px; background: var(--muted); position: relative; justify-self: end; transition: transform .45s var(--ease-out), background .3s; }
.m-arrow::after { content: ''; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; color: var(--muted); transform: rotate(45deg); }
.mobile-nav-link:hover .m-label, .mobile-nav-link:focus-visible .m-label { transform: translateX(14px); color: var(--brass-bright); }
.mobile-nav-link:hover .m-arrow { transform: translateX(6px); background: var(--brass); }
#mobile-nav-overlay li { opacity: 0; transform: translateY(24px); }
#mobile-nav-overlay.open li { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
#mobile-nav-overlay.open li:nth-child(2) { transition-delay: .06s; } #mobile-nav-overlay.open li:nth-child(3) { transition-delay: .1s; }
#mobile-nav-overlay.open li:nth-child(4) { transition-delay: .14s; } #mobile-nav-overlay.open li:nth-child(5) { transition-delay: .18s; }
#mobile-nav-overlay.open li:nth-child(n+6) { transition-delay: .22s; }
.menu-details { align-self: start; padding-top: 4px; }
.menu-edition { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: 30px; color: var(--paper); }
.menu-meta { margin-top: 10px; color: var(--muted); font-size: 15px; }
.mobile-cta { margin-top: 32px; width: auto; }

/* ── Hero: the wordmark ──────────────────────────────────── */
#intro { min-height: 100svh; padding-top: calc(var(--nav-h) + 40px); }
.hero-grid { align-items: stretch; padding-bottom: 32px; }
.hero-lead { max-width: none; width: 100%; display: flex; flex-direction: column; }
.hero-motto {
  order: -2; margin: 0 0 auto;
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em; text-transform: none; color: var(--paper); line-height: 1.15; max-width: 14ch;
}
.hero-motto .sep { display: none; }
.hero-motto > span:not(.sep)::after { content: '.'; }
.hero-motto > span:not(.sep) { display: inline; margin-right: .28em; }
.hero-eyebrow { order: -1; margin: 24px 0 0; }
.hero-title {
  margin-top: auto;
  font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800;
  font-size: clamp(64px, 15.5vw, 300px); line-height: .8; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--paper);
}
.hero-title > span, .hero-title > em { display: block; }
.hero-title > em { font-style: normal; color: var(--brass); font-weight: 800; }
.hero-title .hl { transform: translateY(40%); animation-duration: 1.2s; }
.hero-actions { margin-top: 30px; }
.hero-base { background: transparent; border-top: 0; }
.hero-base-inner { grid-template-columns: minmax(0, 1fr) auto auto; padding-top: 0; padding-bottom: 30px; }
.hero-base-label, .hero-base-year {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--paper);
}
.hero-index { border-left: 0; padding-left: 0; margin-right: 32px; }

/* ── Countdown band ──────────────────────────────────────── */
#countdown { background: var(--ink-000); padding: 140px 0; }
.cd-band { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cd-clock { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; }
.cd-clock > .label { max-width: none; font-family: var(--font-mono); letter-spacing: .34em; font-size: 13px; color: var(--brass); }
.cd-clock .clock-rows { display: flex; gap: 0; margin-top: 34px; }
.cd-clock .clock-rows li { --cd-h: clamp(84px, 11vw, 176px); position: relative; align-items: center; padding: 0 clamp(18px, 3vw, 52px); }
.cd-clock .clock-rows li + li::before {
  content: ''; position: absolute; left: -7px; top: calc(var(--cd-h) * .36);
  width: 12px; height: 12px; background: var(--brass); transform: rotate(45deg);
  box-shadow: 0 calc(var(--cd-h) * .28) 0 var(--brass);
}
.cd-clock .cd-num { font-size: var(--cd-h); color: var(--paper); font-weight: 800; letter-spacing: -0.02em; }
.cd-clock .clock-rows li:nth-child(n+3) .cd-num { color: var(--paper); }
.cd-clock .cd-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .34em; color: var(--muted); margin-top: 8px; }
.cd-clock .clock-rows li:nth-child(1) .cd-label { color: var(--muted); }
.cd-clock .clock-rule { width: min(420px, 60vw); margin-top: 28px; }
#countdown .hero-facts { order: -1; margin-bottom: 0; justify-content: center; gap: 8px 48px; }
#countdown .hero-facts dt { display: none; }
#countdown .hero-facts dd { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 38px); }
#countdown .hero-facts > div:first-child { order: 2; }
#countdown .hero-facts > div:first-child dd { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .3em; color: var(--muted); }
#countdown .hero-facts { flex-direction: column; align-items: center; gap: 10px; }
.cd-actions { margin-top: 48px; }
.btn-xl { padding: 20px 38px; font-size: 16px; letter-spacing: .24em; text-transform: uppercase; border-radius: var(--r-sm); }

/* ── Marquee band ────────────────────────────────────────── */
.ticker { background: transparent; border-block: 1px solid var(--brass-line); }
.tk-item { font-size: clamp(34px, 4.4vw, 64px); color: var(--brass); padding: 14px 0; font-style: normal !important; }
.tk-item:nth-child(even) { color: var(--brass-bright); }
.tk-item::after { width: 10px; height: 10px; margin: 0 28px; background: var(--brass); border: 0; }

/* ── About / Secretary: capitals, same bones ─────────────── */
.about-top .lede { font-family: var(--font-ui); font-weight: 500; font-size: clamp(20px, 2vw, 26px); }
.gs-quote { border-left-width: 3px; }
.gs-quote p { font-family: var(--font-ui); font-style: normal; font-weight: 600; }
.gs-name { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: 34px; }

/* ── Committees: numbered plates, two across ─────────────── */
.committee-list, .committee-list.is-carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 48px; }
.committee-list.is-single { grid-template-columns: minmax(0, 760px); }
.committee-list > .cm-slide, .committee-list.is-carousel > .cm-slide {
  grid-area: auto; opacity: 1; visibility: visible;
  display: flex; flex-direction: column; gap: 0;
}
.committee-list .cm-index { display: flex !important; justify-content: space-between; align-items: center; order: 0; }
.cm-media { order: -1; margin-bottom: 26px; position: relative; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.cm-media::before { content: ''; position: absolute; inset: 26px; z-index: 2; border: 2px solid rgba(244,247,251,.85); pointer-events: none; }
.cm-media .c-photo { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.cm-media .c-photo img { filter: saturate(.55) contrast(1.05); transition: transform 1.2s var(--ease-out), filter .6s var(--ease); }
.cm-slide:hover .c-photo img { transform: scale(1.05); filter: saturate(.9); }
.cm-media .c-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,21,36,.15), rgba(13,21,36,.55)); mix-blend-mode: multiply; pointer-events: none; }
.cm-media .c-photo { position: relative; }
html:not([data-cms-edit]) .cm-media:has(.c-photo.is-empty) { display: none; }
.cm-index { font-size: 13px; letter-spacing: .2em; }
.cm-dots { display: flex; gap: 6px; order: 2; }
.cm-dots i { width: 18px; height: 6px; background: var(--line); border-radius: 2px; }
.cm-dots i.on { background: var(--brass); }
.cm-code { margin-top: 14px; font-size: clamp(42px, 4.2vw, 68px); line-height: .9; }
.cm-slide .c-title > h3 { font-family: var(--font-ui); font-size: 17px; color: var(--muted); font-weight: 500; }
.cm-agenda { margin-top: 24px; padding: 20px 24px; border: 0; border-radius: var(--r-md); background: var(--ink-900); }
.cm-agenda-label { letter-spacing: .3em; }
.cm-agenda-text { font-weight: 600; font-size: 18px; }
.cm-actions .btn-solid { letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
.c-doc { letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
.cm-guide-status { border: 1px solid var(--brass-line); border-radius: var(--r-sm); padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.cm-guide-label { color: var(--brass-dim); }

/* ── Schedule: bigger times ──────────────────────────────── */
.run-title { font-family: var(--font-ui); font-weight: 600; font-size: 20px; }
.day-tab .dt-name { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: 24px; }

/* ── Social events: alternating photograph and capitals ──── */
.social-list, .social-list:has(> li.social-item:nth-of-type(3):last-of-type),
.social-list:has(> li.social-item:nth-of-type(5):last-of-type),
.social-list:has(> li.social-item:nth-of-type(2):last-of-type) { grid-template-columns: 1fr; gap: 140px; }
.social-item, .social-item:first-of-type {
  grid-column: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px;
  align-items: end; padding: 0; border: 0;
}
.social-item:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.social-item:nth-of-type(even) .so-media { order: 2; }
.social-item:nth-of-type(even) .so-text { text-align: right; }
.social-item:nth-of-type(even) .so-when { justify-content: flex-end; }
.so-media, .social-item:first-of-type .so-media { aspect-ratio: 3 / 2; margin: 0; border-radius: var(--r-md); }
.so-when { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.so-num { display: none; }
.social-item h3, .social-item:first-of-type h3 { font-size: clamp(44px, 5.2vw, 84px); line-height: .9; margin-top: 12px; letter-spacing: -0.01em; }
.so-desc { font-size: 17px; max-width: 46ch; }
.social-item:nth-of-type(even) .so-desc { margin-left: auto; }

/* ── Important dates / Masterclass ───────────────────────── */
.d-stamp b { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; font-size: 52px; }
.d-text h3 { font-family: var(--font-ui); font-weight: 600; }
.feature-band { background: var(--ink-800); border-block: 1px solid var(--brass-line); }
.mc-day { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; font-size: 110px; color: var(--brass); }
.mc-body h2 { font-size: clamp(40px, 5vw, 84px); line-height: .9; }

/* ── Executive council: names written across the page ────── */
.roster { position: relative; row-gap: 56px; }
#team { isolation: isolate; }
/* The executive band: the same cards, carrying the section's weight —
   a brass role tag, the name in capitals, and a caption that fills with
   brass when the card is pointed at or focused. */
.roster-entry.is-lead > h3 { font-size: clamp(26px, 2.6vw, 40px); line-height: .95; color: var(--paper); }
.roster-entry.is-lead > .r-role {
  justify-self: start; padding: 5px 10px; border: 1px solid var(--brass-line); border-radius: var(--r-sm);
  font-family: var(--font-mono); letter-spacing: .14em; font-size: 11px; color: var(--brass);
}
.roster-entry.is-lead > .r-num { align-self: center; }
.roster-entry.is-lead { padding-bottom: 18px; border-bottom: 2px solid transparent; transition: border-color .4s var(--ease); }
.roster-entry.is-lead:hover, .roster-entry.is-lead:focus-within { border-bottom-color: var(--brass); }
.roster-entry.is-lead > .portrait img { transform: rotate(0); }
.roster-entry.is-lead:hover > .portrait, .roster-entry.is-lead:focus-within > .portrait { transform: rotate(-1.5deg); transition: transform .6s var(--ease-out); }
.roster-entry > h3 { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
.roster-entry:not(.is-lead) > h3 { font-size: 22px; }

/* ── Registration: a brass-lined band ────────────────────── */
#registration {
  position: relative; overflow: hidden;
  background: #16223A repeating-linear-gradient(135deg, rgba(203,170,104,.05) 0 1px, transparent 1px 14px);
  border-block: 0;
}
.reg-ghost {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); z-index: 0; margin: 0; pointer-events: none;
  font-family: var(--font-bold); font-stretch: 100%; font-weight: 800; font-size: clamp(160px, 26vw, 460px); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(203,170,104,.28);
}
#registration > .shell { position: relative; z-index: 1; }
.reg-layout .sec-head { --sec-h2: clamp(64px, 9vw, 160px); }
.reg-layout .sec-head h2 { line-height: .86; }
.reg-perks { columns: auto; display: flex; flex-wrap: wrap; gap: 12px; border: 0; }
.reg-perks li {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.reg-perks li::before { display: none; }
.reg-perks-label { border-bottom: 0; margin-bottom: 14px; }
.reg-panel { background: rgba(7,12,22,.72); border-top: 3px solid var(--brass); }
.reg-panel .btn-solid { padding: 20px 26px; letter-spacing: .2em; text-transform: uppercase; }

/* ── Before you arrive: a framed invitation ──────────────── */
.arrival {
  position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px;
  padding: 64px 72px; margin: 0 0 72px;
  border: 0; background: rgba(19,32,53,.35);
}
.arrival::before, .arrival::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.arrival::before { left: 0; top: 0; border-left: 2px solid var(--brass); border-top: 2px solid var(--brass); box-shadow: calc(100cqw) 0 0 -100px transparent; }
.arrival::after { right: 0; bottom: 0; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); }
.arrival-label { grid-column: 1 / -1; font-size: 13px; letter-spacing: .34em; padding: 0; }
.arrival-body h3 { font-size: clamp(44px, 5.4vw, 92px); line-height: .9; }
.arrival-body p { font-size: 17px; margin-top: 18px; }
.arrival-cta { align-self: end; padding: 18px 28px; letter-spacing: .2em; text-transform: uppercase; }
.rf-link { font-family: var(--font-bold); font-stretch: var(--bold-stretch); font-weight: 800; text-transform: uppercase; font-size: 28px; }

/* ── Footer: an index ────────────────────────────────────── */
#footer { background: var(--ink-000); border-top: 1px solid var(--line-soft); }
.footer-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px 96px; padding-top: 110px; }
.footer-brand { grid-column: 2; grid-row: 1; }
.footer-links { grid-column: 1; grid-row: 1 / span 2; }
.footer-contact { grid-column: 2; grid-row: 2; }
.footer-links ul { columns: 1; }
.footer-links li { margin: 0; }
.footer-links a {
  display: flex !important; justify-content: space-between; align-items: center; min-height: 0;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
  font-size: clamp(34px, 4vw, 60px); line-height: 1; color: var(--paper);
  transition: color .3s var(--ease), padding .45s var(--ease-out);
}
.footer-links a::after { content: '\2192'; font-family: var(--font-ui); font-weight: 400; font-size: 26px; color: var(--muted); transition: transform .45s var(--ease-out), color .3s; }
.footer-links a:hover { color: var(--brass-bright); padding-left: 12px; }
.footer-links a:hover::after { transform: translateX(6px); color: var(--brass); }
.footer-links .label, .footer-contact .label { letter-spacing: .3em; }
.footer-about { font-family: var(--font-mono); font-size: 13px !important; color: var(--brass) !important; line-height: 1.7; }

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .menu-inner { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 28px); }
  #intro { min-height: 100svh; }
  .hero-title { font-size: clamp(56px, 19vw, 150px); }
  .hero-base-inner { grid-template-columns: 1fr auto; }
  #countdown { padding: 96px 0; }
  .cd-clock .clock-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd-clock .clock-rows li { --cd-h: clamp(52px, 14vw, 84px); padding: 0 6px; }
  .cd-clock .clock-rows li + li::before { width: 7px; height: 7px; left: -4px; }
  .cd-clock .cd-label { font-size: 10px; letter-spacing: .2em; }
  .committee-list, .committee-list.is-carousel { grid-template-columns: 1fr; gap: 64px; }
  .social-item, .social-item:first-of-type, .social-item:nth-of-type(even) { grid-template-columns: 1fr; gap: 24px; }
  .social-item:nth-of-type(even) .so-media { order: 0; }
  .social-item:nth-of-type(even) .so-text { text-align: left; }
  .social-item:nth-of-type(even) .so-when { justify-content: flex-start; }
  .social-item:nth-of-type(even) .so-desc { margin-left: 0; }
  .social-list { gap: 80px !important; }
  .arrival { padding: 40px 24px; grid-template-columns: 1fr; }
  .reg-ghost { top: auto; bottom: 20px; transform: none; font-size: 44vw; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand, .footer-links, .footer-contact { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-head h2, .reveal-media, .reveal-media img { clip-path: none !important; transform: none !important; }
  #mobile-nav-overlay li { opacity: 1; transform: none; }
}
.hamburger span { width: auto; height: auto; background: none; transform: none; }
.hamburger .menu-plus { width: 16px; height: 16px; }
#about .sec-head h2, #secretary .sec-head h2 { --sec-h2: clamp(40px, 4.8vw, 80px); overflow-wrap: normal; hyphens: manual; }
.committee-list .cm-index { justify-content: flex-start; gap: 4px; }
.cm-dots { margin-left: auto; }
#important-dates .sec-head h2 { --sec-h2: clamp(40px, 4.4vw, 76px); }
.mc-body h2 { font-size: clamp(36px, 4vw, 68px); }
#countdown .hero-facts { width: 100%; max-width: none; }
#countdown .hero-facts > div { width: 100%; }

/* =====================================================
   v21 — FIXES AND LIVING GROUNDS
   ===================================================== */
/* Menu button: the old hamburger bars must not rotate the word. */
.hamburger.open span:first-child, .hamburger.open span:last-child,
.hamburger .menu-word, .hamburger.open .menu-word { transform: none !important; opacity: 1; width: auto; height: auto; background: none; }
.hamburger .menu-plus { transform: none !important; }

/* Header: a solid ledge once the page moves, so big headings never run
   under the crest; the reading progress rides the very top edge. */
#header.scrolled::before { background: rgba(7,12,22,.94); border-bottom: 1px solid var(--line-soft); }
#scroll-progress { top: 0; bottom: auto; height: 2px; }
#header.menu-open::before { background: transparent; border: 0; }

/* Countdown: one diamond pair per gap, centred on the numerals. */
.cd-clock .clock-rows li + li::before {
  left: 0; top: calc(var(--cd-h) * .5); transform: translate(-50%, -50%) rotate(45deg);
  width: 10px; height: 10px; box-shadow: none;
}
.cd-clock .clock-rows li + li::after {
  content: ''; position: absolute; left: 0; top: calc(var(--cd-h) * .5 + 26px);
  width: 10px; height: 10px; background: var(--brass); transform: translate(-50%, -50%) rotate(45deg);
}
.cd-clock .clock-rows li + li::before { top: calc(var(--cd-h) * .5 - 26px); }
.cd-clock .clock-rule { margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  .cd-clock .clock-rows li + li::before { top: calc(var(--cd-h) * .5 - 12px); width: 6px; height: 6px; }
  .cd-clock .clock-rows li + li::after { top: calc(var(--cd-h) * .5 + 12px); width: 6px; height: 6px; }
}

/* About: heading, then the lead under it — never a stray line floating right. */
.about-top { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.about-top .lede { max-width: 56ch; }

/* Committees with no photograph, agenda or format still read as plates. */
.cm-code.is-borrowed:empty::before { content: attr(data-fallback); }
html:not([data-cms-edit]) .cm-code.is-borrowed:empty { display: block; }
.c-tag.is-lent { display: none !important; }
html:not([data-cms-edit]) .cm-slide:not(:has(.c-photo:not(.is-empty))) {
  padding: 32px; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19,32,53,.55), rgba(13,21,36,0));
}
.cm-actions { margin-top: auto; }
.committee-list > .cm-slide { height: 100%; }
@media (max-width: 900px) { [data-cms] .nowrap, [data-cms-field] .nowrap { white-space: normal; } }

/* Secretariat: no rotating portraits, no ghost word — the portraits are the picture. */
.roster-entry.is-lead:hover > .portrait, .roster-entry.is-lead:focus-within > .portrait { transform: none; }

/* A nudge made with the drag grip is a desktop composition: on a phone the
   page reflows, and a 400px offset would throw a card off the screen. */
@media (max-width: 900px) { html:not([data-cms-edit]) [data-cms-moved] { translate: none !important; } }

/* Registration: no "Included" over an empty list; the year sits low and
   quiet, never behind the price. */
.reg-ghost { top: auto; bottom: -4vw; right: auto; left: 38%; transform: none; font-size: clamp(160px, 22vw, 380px); -webkit-text-stroke-color: rgba(203,170,104,.16); }
.reg-panel .card-bg { display: none; }
.reg-panel { background: #0B1322; }

/* Footer contacts: one line each, any number of them. */
.footer-contacts { margin: 0 0 14px; }
.fc-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.fc-item:first-child { padding-top: 0; }
.fc-name { color: var(--paper) !important; font-weight: 600; margin: 0 !important; }
.fc-note { font-size: 12px !important; color: var(--faint) !important; margin: 2px 0 0 !important; }
.fc-line { margin: 4px 0 0 !important; }
.fc-line a { color: var(--brass-bright) !important; }
html:not([data-cms-edit]) .fc-note:empty,
html:not([data-cms-edit]) .fc-line:has(> a:empty),
html:not([data-cms-edit]) .fc-line:has(> a[href=""]) { display: none; }
html:not([data-cms-edit]) .footer-contacts:not(:has(.fc-item)) { display: none; }
.back-to-top { right: auto; left: 22px; }

/* ── Living grounds ─────────────────────────────────────── */
main > section { isolation: isolate; }
main > section > .shell { position: relative; z-index: 1; }
/* Ambient: two sheets of hairline contour drifting past each other. */
section.ambient::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Cg fill='none' stroke='%23A8C3E8' stroke-width='1' opacity='.07'%3E%3Cpath d='M0 60 C180 20 360 100 540 60 S 720 40 720 40'/%3E%3Cpath d='M0 150 C160 110 380 190 540 150 S 720 130 720 130'/%3E%3Cpath d='M0 240 C200 200 340 280 540 240 S 720 220 720 220'/%3E%3Cpath d='M0 330 C170 290 390 370 540 330 S 720 310 720 310'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='none' stroke='%23CBAA68' stroke-width='1' opacity='.06'%3E%3Ccircle cx='280' cy='280' r='120'/%3E%3Ccircle cx='280' cy='280' r='200'/%3E%3Ccircle cx='280' cy='280' r='270'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 720px 420px, 560px 560px;
  background-position: 0 0, 80% 30%;
  background-repeat: repeat, no-repeat;
  animation: ground-drift 60s linear infinite;
  animation-play-state: paused;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
section.ambient.bg-live::before { animation-play-state: running; }
@keyframes ground-drift {
  from { background-position: 0 0, 80% 30%; }
  to   { background-position: -720px 0, 70% 40%; }
}
/* Spotlight: a soft pool of light and a fine grid revealed where the pointer is. */
section[data-bg="spotlight"] { --mx: 50%; --my: 40%; }
section[data-bg="spotlight"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1 !important;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(203,170,104,.10), transparent 60%),
    var(--tex-grid);
  background-size: auto, 26px 26px;
  -webkit-mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.08) 100%);
          mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.08) 100%);
  transition: none;
}
/* A photograph behind a section, under its tint. */
.sec-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sec-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transform: scale(1.06); transition: transform 8s linear; }
section.bg-live .sec-photo img { transform: scale(1); }
.sec-photo-tint { position: absolute; inset: 0; background: var(--sec-tint, #0D1524); opacity: var(--sec-tint-opacity, .8); }
section.has-sec-photo.ambient::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  section.ambient::before { animation: none; }
  .sec-photo img { transform: none; transition: none; }
}
@media (max-width: 700px) { section.ambient::before { animation: none; opacity: .7; } }

/* ── Editor furniture for the above ─────────────────────── */
[data-cms-edit] .cms-nav-restore { margin-left: 12px; white-space: nowrap; }
[data-cms-edit] .cms-nav-restore.is-warn { color: #E8C99A; border-color: rgba(232,201,154,.7); border-style: solid; }
[data-cms-edit] #main-nav { display: flex; align-items: center; flex-wrap: wrap; margin-left: auto; }
[data-cms-edit] #main-nav .nav-links > li > .cms-item-tools,
[data-cms-edit] .footer-links li > .cms-item-tools { opacity: 1 !important; visibility: visible !important; }
[data-cms-edit] .cms-reg-warn {
  margin: 0 0 20px; padding: 12px 14px; border: 1px solid rgba(232,201,154,.7); border-radius: 8px;
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: #F1D9AE; background: rgba(60,40,10,.35);
}
[data-cms-edit] .cms-sec-tint { width: 26px; height: 22px; }
[data-cms-edit] .cms-sec-range { width: 72px; height: 22px; accent-color: var(--brass-bright); cursor: pointer; }

/* ═════ v21 — EVERY SCREEN FITS ═════
   A phone widens its whole page to fit the widest thing on it, which
   shrinks everything else. Nothing may be wider than the screen. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
.sec-head h2, .c-title, .cm-code, .reg-layout .sec-head h2 { overflow-wrap: break-word; }

/* Tablet portrait and small laptops */
@media (max-width: 1024px) {
  .sec-head h2 { --sec-h2: clamp(44px, 7.4vw, 76px); }
  .reg-layout .sec-head { --sec-h2: clamp(52px, 9vw, 96px); }
  .reg-ghost { font-size: clamp(120px, 24vw, 260px); }
}
/* Phones */
@media (max-width: 560px) {
  .sec-head h2 { --sec-h2: clamp(32px, 10.5vw, 48px); line-height: .94; }
  #sponsors .sec-head h2, #contact .sec-head h2, #resources .res-top .sec-head h2 { --sec-h2: clamp(30px, 9.5vw, 42px); }
  .reg-layout .sec-head { --sec-h2: clamp(36px, 11.5vw, 52px); }
  .reg-ghost { font-size: 38vw; left: auto; right: -2vw; bottom: 8px; }
  .sec-head .label { letter-spacing: .2em; }
}
/* Small phones (320–360) */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .sec-head h2 { --sec-h2: clamp(28px, 10vw, 36px); }
  .reg-layout .sec-head { --sec-h2: clamp(32px, 11vw, 40px); }
  .cm-code { font-size: 44px; }
  .cd-num { font-size: 26px; }
}
/* Countdown facts: one centred line each at every width, never a
   64px grid column that stacks the venue a word at a time. */
#countdown .hero-facts { display: flex; }
#countdown .hero-facts > div { display: block; text-align: center; }
#countdown .hero-facts dd { max-width: 100%; overflow-wrap: break-word; }
@media (max-width: 560px) {
  #countdown .hero-facts dd { font-size: clamp(22px, 7.4vw, 30px); }
  #countdown .hero-facts > div:first-child dd { font-size: 11px; letter-spacing: .18em; }
  .cd-clock > .label { letter-spacing: .2em; font-size: 11px; }
  .cd-clock .cd-label { letter-spacing: .12em; font-size: 9px; }
}
@media (max-width: 360px) {
  .cd-clock .clock-rows li { --cd-h: 44px; padding: 0 3px; }
}
html.cms-wait #intro .hero-lead, html.cms-wait #intro .hero-base { visibility: hidden; }

/* =====================================================
   v22 — MOTION, INTERACTION, PHONES
   Settings are words on <html> written from content/theme:
   data-motion, data-heading-fx, data-label-fx, data-image-fx,
   data-pointer-fx, data-cursor, data-m-committees.
   ===================================================== */
:root { --scrollbar: var(--brass); --ease-lift: cubic-bezier(.16, 1, .3, 1); --ease-snap: cubic-bezier(.7, 0, .2, 1); }

/* ── Scrollbar: brass on the page navy ─────────────────── */
html { scrollbar-color: color-mix(in srgb, var(--scrollbar) 78%, transparent) var(--ink-900); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--scrollbar) 70%, var(--ink-900)); border-radius: 10px; border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar); }
::selection { background: color-mix(in srgb, var(--brass) 38%, transparent); color: var(--paper); }

/* ── Hero: waits for its words, then the lines lift out of a mask ── */
html.cms-wait .hero-eyebrow, html.cms-wait .hero-title .hl, html.cms-wait .hero-motto,
html.cms-wait .hero-actions, html.cms-wait .hero-base-inner { animation-play-state: paused; }
html.fx-ready:not([data-motion="off"]) .hero-title .hl {
  animation-name: hl-lift; animation-duration: 1.25s; animation-timing-function: var(--ease-lift);
  transform-origin: 0 100%;
}
@keyframes hl-lift {
  0%   { opacity: 1; transform: translateY(70%) skewY(5deg); clip-path: inset(-20% -5% 100% -5%); }
  100% { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
}
/* Depth on scroll: the photograph settles back, the words rise faster. */
#intro { --hp: 0; }
#intro .hero-carousel { scale: calc(1 + var(--hp) * .12); transform-origin: 50% 30%; }
#intro .hero-title > :nth-child(1) { translate: 0 calc(var(--hp) * -40px); }
#intro .hero-title > :nth-child(2) { translate: 0 calc(var(--hp) * -80px); }
#intro .hero-title > :nth-child(3) { translate: 0 calc(var(--hp) * -120px); }
#intro .hero-motto { translate: 0 calc(var(--hp) * 60px); }

/* ── Section headings: words rise out of their own masks ── */
.sec-head h2.fx-split { clip-path: none !important; transform: none !important; }
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
.fx-wi { display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; }
.fx-split.fx-in .fx-wi {
  transform: none;
  transition: transform 1.05s var(--ease-lift);
  transition-delay: calc(var(--wi, 0) * 65ms);
}
html[data-motion="calm"] .fx-split.fx-in .fx-wi { transition-duration: .7s; transition-delay: calc(var(--wi, 0) * 35ms); }
.sec-head h2.fx-scramble { clip-path: none !important; transform: none !important; }
/* The hairline beside a section number draws itself in. */
html.fx-ready:not([data-motion="off"]) .sec-head .sec-index:not(:empty)::after { transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease-lift) .15s; }
html.fx-ready:not([data-motion="off"]) .sec-head.is-visible .sec-index:not(:empty)::after { transform: none; }

/* ── Photographs: a brass panel draws back, the picture settles ── */
.fx-curtain { position: relative; overflow: hidden; }
.fx-curtain::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ink-700); box-shadow: inset 3px 0 0 var(--brass);
  transform: scaleX(1); transform-origin: 100% 50%;
}
.fx-curtain img { scale: 1.18; }
.fx-curtain.fx-open::before { transform: scaleX(0); transition: transform 1.05s var(--ease-snap); }
.fx-curtain.fx-open img { scale: 1; transition: scale 1.6s var(--ease-lift) .25s; }
.cm-media.fx-curtain::before { inset: 0; border: 0; }
.roster-entry:nth-child(2n) .fx-curtain.fx-open::before { transition-delay: .08s; }
.roster-entry:nth-child(3n) .fx-curtain.fx-open::before { transition-delay: .16s; }

/* ── Buttons: pulled toward the pointer; a brass sweep from where it enters ── */
.fx-magnet { translate: var(--mx, 0) var(--my, 0); }
.btn-solid, .hamburger, .back-to-top, .cm-register, .footer-credit { transition-property: background, color, border-color, transform, box-shadow, translate, opacity, visibility; }
.btn-solid { overflow: hidden; isolation: isolate; }
.btn-solid::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--brass-bright);
  clip-path: circle(0 at var(--fx-x, 50%) 50%);
  transition: clip-path .55s var(--ease-lift);
}
@media (hover: hover) {
  html:not([data-pointer-fx="off"]) .btn-solid:hover::after { clip-path: circle(140% at var(--fx-x, 50%) 50%); }
  html:not([data-pointer-fx="off"]) .btn-solid:hover { background: var(--brass); }
  .btn-solid > * { transition: translate .4s var(--ease-lift); }
  .btn-solid.fx-magnet > * { translate: calc(var(--mx, 0) * .4) calc(var(--my, 0) * .4); }
}

/* ── Cards that tilt under the pointer, with a light that follows ── */
.cm-slide, .roster-entry .portrait, .reg-panel, .social-item figure, .gs-portrait {
  transition: transform .6s var(--ease-lift), box-shadow .4s var(--ease);
  transform-style: preserve-3d;
}
.fx-tilt { transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) !important; transition-duration: .12s !important; }
.cm-slide::after, .reg-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--brass) 14%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cm-slide.fx-tilt::after, .reg-panel.fx-tilt::after { opacity: 1; }
.reg-panel { position: relative; }

/* ── Touch: a ripple from where the finger lands ───────── */
.fx-pressable { overflow: hidden; isolation: isolate; }
.fx-press {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: color-mix(in srgb, var(--brass-bright) 30%, transparent);
  transform: scale(0); opacity: 1;
  animation: fx-press .65s var(--ease-lift) forwards;
}
.btn-solid .fx-press { background: rgba(255, 255, 255, .28); }
@keyframes fx-press { to { transform: scale(1); opacity: 0; } }

/* ── Cursor ring (mouse only) ──────────────────────────── */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brass) 80%, transparent);
  opacity: 0; transition: opacity .3s var(--ease), width .35s var(--ease-lift), height .35s var(--ease-lift), margin .35s var(--ease-lift), background .3s, border-color .3s;
}
.fx-cursor.is-on { opacity: 1; }
.fx-cursor.is-hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: color-mix(in srgb, var(--brass) 12%, transparent); border-color: var(--brass-bright); }
.fx-cursor.is-media { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-color: rgba(244, 247, 251, .8); }
.fx-cursor.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
html[data-cursor="none"] .fx-cursor, html[data-pointer-fx="off"] .fx-cursor, html[data-motion="off"] .fx-cursor { display: none; }

/* ── Live grounds ──────────────────────────────────────── */
.fx-ground { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main > section[data-bg="constellation"], main > section[data-bg="globe"], main > section[data-bg="ripple"] { position: relative; overflow: hidden; }
main > section[data-bg="globe"] .fx-ground { -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 60%); mask-image: linear-gradient(90deg, transparent 25%, #000 60%); }

/* Ambient linework now leans away from the pointer and drifts with scroll. */
main > section.ambient::before { translate: calc(var(--ax, 0) * -22px) calc(var(--ay, 0) * -22px); transition: translate 1.2s var(--ease-lift); }

/* ── The Menu: opens as a circle from the button, the index lifts in ── */
html.fx-ready:not([data-motion="off"]) #mobile-nav-overlay {
  transform: none; clip-path: circle(0 at calc(100% - 52px) 36px);
  transition: clip-path .85s var(--ease-snap), visibility 0s linear .85s;
}
html.fx-ready:not([data-motion="off"]) #mobile-nav-overlay.open { clip-path: circle(150% at calc(100% - 52px) 36px); transition: clip-path .9s var(--ease-snap), visibility 0s; }
html.fx-ready:not([data-motion="off"]) #mobile-nav-overlay li { opacity: 1; transform: none; overflow: hidden; }
html.fx-ready:not([data-motion="off"]) #mobile-nav-overlay .mobile-nav-link { transform: translateY(105%); transition: transform .5s var(--ease-lift); }
html.fx-ready:not([data-motion="off"]) #mobile-nav-overlay.open .mobile-nav-link { transform: none; transition: transform .9s var(--ease-lift) calc(.18s + var(--mi, 0) * 55ms); }
#mobile-nav-overlay li:nth-child(1) { --mi: 0; } #mobile-nav-overlay li:nth-child(2) { --mi: 1; } #mobile-nav-overlay li:nth-child(3) { --mi: 2; }
#mobile-nav-overlay li:nth-child(4) { --mi: 3; } #mobile-nav-overlay li:nth-child(5) { --mi: 4; } #mobile-nav-overlay li:nth-child(6) { --mi: 5; }
#mobile-nav-overlay li:nth-child(7) { --mi: 6; } #mobile-nav-overlay li:nth-child(8) { --mi: 7; } #mobile-nav-overlay li:nth-child(n+9) { --mi: 8; }

/* ── Back to top: a brass ring that fills as you read ──── */
.back-to-top {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  color: var(--brass-bright);
  left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
}
.back-to-top .btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.btt-track { fill: none; stroke: var(--line-soft); stroke-width: 1.5; }
.btt-fill { fill: none; stroke: var(--brass); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: var(--btt, 100); transition: stroke-dashoffset .15s linear; }
.btt-arrow { width: 14px; height: 14px; position: relative; transition: transform .45s var(--ease-lift); }
.back-to-top:hover { color: var(--paper); }
.back-to-top:hover .btt-arrow { transform: translateY(-3px); }
.back-to-top.is-docked { opacity: 0; visibility: hidden; transform: translateY(12px); }

/* ── Footer: bottom line with the credit button left of Back to top ── */
.footer-bottom-inner { align-items: center; }
.footer-bottom-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.footer-bottom-actions .footer-top { margin: 0; }
.footer-credit {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--brass-line); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-bright); overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), translate .4s var(--ease-lift);
}
.footer-credit[hidden] { display: none; }
.footer-credit svg { width: 11px; height: 11px; transition: transform .45s var(--ease-lift); }
.footer-credit::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brass);
  transform: translateY(101%); transition: transform .5s var(--ease-lift);
}
.footer-credit:hover, .footer-credit:focus-visible { color: #14203A; border-color: var(--brass); }
.footer-credit:hover::before, .footer-credit:focus-visible::before { transform: none; }
.footer-credit:hover svg { transform: translate(2px, -2px); }
[data-cms-edit] .footer-credit.cms-off { display: inline-flex; opacity: .55; outline: 1px dashed var(--brass-line); }

/* ── Content that is empty never leaves a hole ─────────── */
html:not([data-cms-edit]) .contact-col p:has(> a:empty),
html:not([data-cms-edit]) .contact-col p:has(> .cms-empty),
html:not([data-cms-edit]) .contact-col .c-sub:empty { display: none; }
html:not([data-cms-edit]) .reg-perks li:empty { display: none; }
html:not([data-cms-edit]) .reg-perks:not(:has(li:not(:empty))) { display: none; }
.d-stamp b { white-space: nowrap; }

/* =====================================================
   Phones and small tablets — made for a thumb
   ===================================================== */
@media (hover: none) {
  .btn, .day-tab, .run-head, .cm-slide, .mobile-nav-link, .footer-credit { -webkit-tap-highlight-color: transparent; }
  .btn:active, .footer-credit:active { scale: .97; transition: scale .12s var(--ease); }
  .cm-slide:active { scale: .99; transition: scale .2s var(--ease); }
}

@media (max-width: 700px) {
  /* Hero: the motto and words gather at the bottom; nothing floats at the top. */
  #intro { min-height: 100svh; padding-top: calc(var(--nav-h) + 20px); }
  .hero-grid { padding-bottom: 12px; }
  .hero-motto { order: 1; margin: 18px 0 0; font-size: 17px; font-weight: 500; color: var(--muted); max-width: none; }
  .hero-eyebrow { order: -1; margin: auto 0 14px; }
  .hero-title { margin-top: 0; font-size: clamp(60px, 21vw, 110px); }
  .hero-actions { order: 2; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
  .hero-actions .btn-solid { letter-spacing: .16em; text-transform: uppercase; font-size: 13px; padding: 15px 22px; }
  .hero-base-inner { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .hero-base-label { display: none; }
  .hero-base-inner { grid-template-columns: 1fr auto; }

  /* Countdown: tighter, with the register action at thumb width. */
  #countdown { padding: 72px 0 80px; }
  #countdown .btn-solid { width: min(100%, 320px); }

  /* Committees: a swipe deck — one committee at a time, the next peeking in. */
  html:not([data-cms-edit]) .committee-list.fx-deck {
    display: flex !important; grid-template-columns: none; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .committee-list.fx-deck::-webkit-scrollbar { display: none; }
  html:not([data-cms-edit]) .committee-list.fx-deck > .cm-slide {
    flex: 0 0 86%; scroll-snap-align: start; height: auto;
    transform: perspective(900px) rotateY(calc(var(--deck, 0) * -9deg)) scale(calc(1 - (var(--deck, 0) * var(--deck, 0)) * .06));
    transition: transform .25s linear;
  }
  html[data-motion="off"] .committee-list.fx-deck > .cm-slide { transform: none; }
  html:not([data-cms-edit]) .committee-list.fx-deck > .cm-slide:not(:has(.c-photo:not(.is-empty))) { padding: 26px 22px; }
  .committee-list.fx-deck .cm-actions { margin-top: 26px; }
  .cm-slide .c-body p { font-size: 14.5px; }

  /* Schedule: days are chips you can thumb through; long subtitles stay one line. */
  .day-tabs, .year-tabs { scroll-snap-type: x proximity; gap: 8px; border-bottom: 0; padding-bottom: 4px; mask-image: none; -webkit-mask-image: none; }
  .day-tabs .day-tab {
    scroll-snap-align: center; flex: none; max-width: 190px; margin: 0;
    padding: 10px 14px 11px; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    transition: border-color .3s var(--ease), background .3s var(--ease), color .3s;
  }
  .day-tabs .day-tab[aria-selected="true"] { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, transparent); }
  .day-tabs .day-underline { display: none; }
  .day-tab .dt-name { font-size: 18px; }
  .day-tab .dt-sub { -webkit-line-clamp: 1; min-height: 0; white-space: nowrap; text-overflow: ellipsis; display: block; }

  /* Important dates: the day never breaks from its suffix. */
  .date-row { grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); gap: 16px; padding-left: 24px; }
  .d-stamp b { font-size: clamp(30px, 9vw, 40px); }

  /* Secretariat: role tags lose their boxes; names stay on the grid. */
  .roster-entry .r-role { border: 0 !important; padding: 0 !important; background: none !important; font-size: 10px; }
  .roster-entry h3 { font-size: 17px !important; }

  /* Registration: the price panel sits right under the words. */
  .reg-layout { gap: 28px; }
  .reg-panel, .reg-panel.visual-card { max-width: none; }

  /* Contact: compact rows; tap targets for numbers and addresses. */
  .contact-columns { gap: 0 !important; }
  .contact-col { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
  .contact-col h3 { font-size: 20px; }
  .contact-col p { margin-top: 6px; }
  .contact-col a { display: inline-block; padding: 6px 0; }

  /* Footer: bottom line stacks cleanly; the ring never covers it. */
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .footer-bottom-actions { margin-left: 0; justify-content: flex-start; width: 100%; }
  .back-to-top { width: 48px; height: 48px; }

  /* The live grounds thin out on a phone. */
  main > section[data-bg="globe"] .fx-ground { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); opacity: .7; }
}

/* Motion off: everything is simply there. */
html[data-motion="off"] .fx-wi, html[data-motion="off"] .fx-curtain img { transform: none !important; scale: 1 !important; }
html[data-motion="off"] .fx-curtain::before { display: none; }
html[data-motion="off"] #intro .hero-carousel, html[data-motion="off"] #intro .hero-title > *, html[data-motion="off"] #intro .hero-motto { scale: none; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-wi, .fx-curtain img { transform: none !important; scale: 1 !important; }
  .fx-curtain::before, .fx-cursor, .fx-press { display: none !important; }
  #intro .hero-carousel, #intro .hero-title > *, #intro .hero-motto { scale: none !important; translate: none !important; }
  .committee-list.fx-deck > .cm-slide { transform: none !important; }
}
[data-cms-edit] .fx-wi, [data-cms-edit] .fx-curtain img { transform: none !important; scale: 1 !important; }
[data-cms-edit] .fx-curtain::before { display: none; }
[data-cms-edit] #intro .hero-carousel, [data-cms-edit] #intro .hero-title > *, [data-cms-edit] #intro .hero-motto { scale: none; translate: none; }

/* Editor: motion panel and the section ground menu */
[data-cms-edit] .cms-motion { margin-top: 12px; row-gap: 10px; column-gap: 18px; }
[data-cms-edit] .cms-motion-row { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #C9D3E3; }
[data-cms-edit] .cms-motion-select, [data-cms-edit] .cms-sec-select {
  font: 500 12px/1.2 var(--font-ui); color: #F4F7FB; background: #111C2E;
  border: 1px solid rgba(203,170,104,.45); border-radius: 6px; padding: 5px 8px; cursor: pointer;
}
[data-cms-edit] .cms-sec-select { max-width: 190px; }
[data-cms-edit] .cms-motion-hint { flex-basis: 100%; font-size: 11.5px; color: #8C9AB0; }

.reg-perks-label[hidden] { display: none; }

/* =====================================================
   v23 — CURTAIN, RUNNING LINES, INK TITLE, FEATURED
   COMMITTEE, REGISTRATION ROUTES, IMAGE POSITIONS
   ===================================================== */

/* ── Opening curtain ───────────────────────────────────── */
#intro-curtain { position: fixed; inset: 0; z-index: 10000; pointer-events: none; display: none;
  /* If scripts never run, the curtain still gets out of the way. */
  animation: ic-bail 0s 6s forwards; }
@keyframes ic-bail { to { visibility: hidden; } }
html.curtain-on #intro-curtain, #intro-curtain.is-open { display: block; }
html.no-curtain #intro-curtain { display: none !important; }
.ic-half {
  position: absolute; top: 0; bottom: 0; width: 50.1%; overflow: hidden;
  background: #070C16;
  transition: transform 1.15s cubic-bezier(.77, 0, .18, 1);
}
.ic-left { left: 0; }
.ic-right { right: 0; }
.ic-half img {
  position: absolute; top: 50%; width: min(38vw, 170px); height: auto; max-width: none;
  animation: ic-logo .8s cubic-bezier(.16, 1, .3, 1) both;
}
.ic-left img { right: 0; transform: translate(50%, -50%); }
.ic-right img { left: 0; transform: translate(-50%, -50%); }
@keyframes ic-logo { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
.ic-seam {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 0; translate: -50% -50%;
  background: #CBAA68; animation: ic-seam .75s .45s cubic-bezier(.7, 0, .2, 1) forwards;
}
@keyframes ic-seam { to { height: 100vh; } }
#intro-curtain.is-open .ic-left { transform: translateX(-100%); }
#intro-curtain.is-open .ic-right { transform: translateX(100%); }
#intro-curtain.is-open .ic-seam { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { #intro-curtain { display: none !important; } }
[data-cms-edit] #intro-curtain { display: none !important; }

/* ── Running lines ─────────────────────────────────────── */
.mq {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--brass-line);
  background: rgba(7, 12, 22, .9);
  font-family: var(--font-bold); font-stretch: var(--bold-stretch, 76%); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; font-size: 14px; line-height: 1; color: var(--brass-bright);
}
.mq[hidden] { display: none; }
.mq-track { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; padding: 14px var(--gutter); list-style: none; }
.mq-item { white-space: nowrap; }
.mq.is-running .mq-track { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; }
.mq-run { padding: 14px 0; }
.mq-strip { display: flex; width: max-content; animation: mq-run var(--mq-dur, 40s) linear infinite; }
.mq-half { display: inline-flex; align-items: center; flex: none; }
.mq-word { white-space: nowrap; }
.mq-dot { width: 6px; height: 6px; margin: 0 22px; background: var(--brass); transform: rotate(45deg); flex: none; }
@keyframes mq-run { to { transform: translateX(-50%); } }
.mq:hover .mq-strip { animation-play-state: paused; }
html[data-motion="off"] .mq-strip { animation: none; }
@media (prefers-reduced-motion: reduce) { .mq-strip { animation: none !important; } }

/* Hero: under the menu bar, over the photographs, never under the header. */
.mq-hero { position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: 4; }
#intro.has-marquee { padding-top: calc(var(--nav-h) + 44px + 40px); }
[data-cms-edit] .mq-hero { position: relative; top: auto; margin: 0 0 24px; }
[data-cms-edit] #intro.has-marquee { padding-top: calc(var(--nav-h) + 20px); }
/* Committees: across the very top of the section. */
#committees.has-marquee { padding-top: 0 !important; }
.mq-committees { margin-bottom: 112px; background: var(--ink-900); }
[data-cms-edit] .mq.cms-off { opacity: .5; outline: 1px dashed var(--brass-line); }

/* ── The hero title's ink window ──────────────────────── */
.hero-title.has-reveal { position: relative; }
.hero-reveal {
  position: absolute; left: -.35em; right: -.35em; top: -.3em; bottom: -.3em;
  z-index: 3; pointer-events: none; overflow: hidden; border-radius: 2px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.rv-field {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: .05em 0; background: #03050A;
}
.rv-row {
  display: flex; gap: .5em; width: max-content; font-size: .2em; line-height: 1; letter-spacing: .02em;
  animation: rv-drift 26s linear infinite; translate: calc((var(--rvx, .5) - .5) * -80px) 0;
}
.rv-row:nth-child(even) { animation-direction: reverse; translate: calc((var(--rvx, .5) - .5) * 80px) 0; margin-left: -2.2em; }
@keyframes rv-drift { to { transform: translateX(-25%); } }
.rv-w { color: var(--rv-c0); animation: rv-colour 3.6s steps(1) infinite; animation-delay: calc(var(--d, 0) * -.3s); }
@keyframes rv-colour {
  0% { color: var(--rv-c0); } 16.66% { color: var(--rv-c1); } 33.33% { color: var(--rv-c2); }
  50% { color: var(--rv-c3); } 66.66% { color: var(--rv-c4); } 83.33% { color: var(--rv-c5); }
}
.rv-title { position: absolute; left: .35em; right: .35em; top: .3em; }
.rv-line {
  background-image: linear-gradient(100deg, #5C4A26 0%, #F6E6BF 18%, #9A7F4B 34%, #FFF7E2 50%, #7A6135 66%, #EBD29C 82%, #4E3F20 100%);
  background-size: 260% 100%; background-position: calc(var(--rvx, .5) * 100%) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  -webkit-text-stroke: .01em rgba(255, 246, 222, .35);
  filter: drop-shadow(0 .025em 0 rgba(0, 0, 0, .7));
}
#intro .rv-title > :nth-child(1) { translate: 0 calc(var(--hp) * -40px); }
#intro .rv-title > :nth-child(2) { translate: 0 calc(var(--hp) * -80px); }
#intro .rv-title > :nth-child(3) { translate: 0 calc(var(--hp) * -120px); }
@media (max-width: 700px) { .rv-row { font-size: .24em; } }

/* ── Committees: one featured, full width, at the top ─── */
.cm-featured-label { display: none; }
.committee-list > .cm-slide.is-featured { order: -1; grid-column: 1 / -1; }
.cm-slide.is-featured .cm-featured-label {
  display: inline-block; align-self: flex-start; margin-bottom: 14px; padding: 7px 12px;
  border: 1px solid var(--brass); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-bright);
}
html:not([data-cms-edit]) .cm-slide.is-featured .cm-featured-label.cms-empty { display: none; }
.cm-slide.is-featured .cm-index { display: none !important; }
@media (min-width: 901px) {
  .committee-list > .cm-slide.is-featured {
    display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center;
    padding: 44px; border: 1px solid var(--brass-line); border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(203, 170, 104, .08), rgba(13, 21, 36, 0) 60%);
  }
  .cm-slide.is-featured .cm-media { order: 2; margin: 0; }
  .cm-slide.is-featured .cm-code { font-size: clamp(64px, 7vw, 124px); }
  .cm-slide.is-featured .c-title > h3 { font-size: 20px; }
}
[data-cms-edit] .cm-slide:not(.is-featured) .cm-featured-label { display: none; }
[data-cms-edit] .cm-slide { position: relative; }
[data-cms-edit] .cms-feature-chip { position: absolute; top: 12px; right: 12px; z-index: 6; margin: 0; }

/* ── Registration: routes first, the delegation block below ── */
#registration { padding-bottom: 112px; }
.reg-top {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: center;
}
html:not([data-cms-edit]) .reg-top:not(:has(.reg-emblem img[src]:not([src=""]))) { grid-template-columns: minmax(0, 900px); }
html:not([data-cms-edit]) .reg-emblem:not(:has(img[src]:not([src=""]))) { display: none; }
.reg-top .sec-head h2 { --sec-h2: clamp(64px, 8vw, 150px); line-height: .86; }
.reg-top .sec-sub { max-width: 58ch; font-size: 18px; }
.reg-emblem { margin: 0; justify-self: center; width: min(100%, 420px); position: relative; }
.reg-emblem img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
[data-cms-edit] .reg-emblem { min-height: 220px; border: 1px dashed var(--brass-line); border-radius: var(--r-md); }
[data-cms-edit] .reg-emblem img { min-height: 200px; }
.reg-ghost { top: clamp(220px, 22vw, 360px); bottom: auto; left: auto; right: -2vw; font-size: clamp(160px, 24vw, 420px); }

.reg-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.reg-tags li {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
html:not([data-cms-edit]) .reg-tags:not(:has(li)) { display: none; }

.reg-options { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.reg-option { border-bottom: 1px solid var(--line); }
.reg-option-link {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 24px 10px; color: var(--paper);
}
.reg-option-link::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brass);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.ro-num { font-family: var(--font-mono); font-size: 13px; color: var(--brass); transition: color .3s; }
.ro-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ro-label {
  font-family: var(--font-bold); font-stretch: var(--bold-stretch, 76%); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 54px); line-height: .92; letter-spacing: -.005em;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), color .3s;
}
.ro-desc { font-size: 14.5px; color: var(--muted); transition: color .3s; }
html:not([data-cms-edit]) .ro-desc:empty, html:not([data-cms-edit]) .ro-desc.cms-empty { display: none; }
.ro-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px solid var(--brass); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-bright);
  transition: color .3s, border-color .3s, background .3s;
}
.ro-cta svg { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.ro-pending { display: none; }
.reg-option-link .reg-closed-label { display: none; }
@media (hover: hover) {
  .reg-option-link[href]:hover::before, .reg-option-link[href]:focus-visible::before { transform: scaleX(1); }
  .reg-option-link[href]:hover .ro-label, .reg-option-link[href]:focus-visible .ro-label { transform: translateX(10px); color: #14203A; }
  .reg-option-link[href]:hover .ro-num, .reg-option-link[href]:hover .ro-desc { color: #14203A; }
  .reg-option-link[href]:hover .ro-cta { color: var(--brass-bright); background: #14203A; border-color: #14203A; }
  .reg-option-link[href]:hover .ro-cta svg { transform: translate(3px, -3px); }
}
.reg-option-link.is-pending { cursor: default; }
.reg-option-link.is-pending .ro-cta { border-color: var(--line); color: var(--muted); }
.reg-option-link.is-pending .reg-open-label, .reg-option-link.is-pending .ro-cta svg { display: none; }
.reg-option-link.is-pending .ro-pending { display: inline; }
.reg-option-link.is-reg-closed { cursor: default; }
.reg-option-link.is-reg-closed .reg-open-label, .reg-option-link.is-reg-closed .ro-cta svg { display: none; }
.reg-option-link.is-reg-closed .reg-closed-label { display: inline; }
.reg-option-link.is-reg-closed .ro-label { color: var(--muted); }
html:not([data-cms-edit]) .reg-options:not(:has(.reg-option)) { display: none; }

.reg-delegation {
  position: relative; z-index: 1;
  margin-top: clamp(80px, 10vw, 140px); padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--brass-line);
}
.reg-delegation[hidden] { display: none; }
.reg-del-head { margin-bottom: 36px; }
.reg-del-head .label { color: var(--brass); letter-spacing: .3em; }
.reg-del-head h3 {
  margin-top: 12px; font-family: var(--font-bold); font-stretch: var(--bold-stretch, 76%); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 64px); line-height: .92; color: var(--paper);
}
[data-cms-edit] .reg-delegation.cms-off { opacity: .55; outline: 1px dashed var(--brass-line); outline-offset: 12px; }

/* Popup: the same routes, one ruled line each. */
.dialog-options { margin: 18px 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dialog-options[hidden] { display: none; }
.dialog-option { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--paper); transition: padding .35s cubic-bezier(.16, 1, .3, 1), color .3s; }
.do-label { font-family: var(--font-bold); font-stretch: var(--bold-stretch, 76%); font-weight: 800; text-transform: uppercase; font-size: 22px; }
.do-cta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-bright); }
a.dialog-option:hover { padding-left: 12px; color: var(--brass-bright); }
.dialog-option.is-pending .do-cta { color: var(--muted); }
#reg-popup-link[hidden] { display: none; }

/* ── Photographs placed left, right or centred ─────────── */
@media (min-width: 901px) {
  #about[data-img-align="right"] .about-figure { grid-column: 6 / -1; }
  #about[data-img-align="right"] .about-layout .prose,
  #about[data-img-align="right"] .about-layout .fact-table { grid-column: 1 / span 4; }
  #about[data-img-align="center"] .about-figure { grid-column: 2 / span 10; grid-row: 1; }
  #about[data-img-align="center"] .about-layout .prose { grid-column: 1 / span 6; grid-row: 2; }
  #about[data-img-align="center"] .about-layout .fact-table { grid-column: 8 / -1; grid-row: 2; }

  #secretary[data-img-align="right"] .gs-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  #secretary[data-img-align="right"] .gs-portrait { order: 2; }
  #secretary[data-img-align="center"] .gs-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #secretary[data-img-align="center"] .gs-portrait { position: relative; top: auto; width: min(100%, 460px); }
  #secretary[data-img-align="center"] .gs-body { max-width: 860px; width: 100%; }

  #masterclass[data-img-align="right"] .mc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  #masterclass[data-img-align="right"] .mc-media { order: 2; }
  #masterclass[data-img-align="center"] .mc-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #masterclass[data-img-align="center"] .mc-media { width: min(100%, 440px); }
}
@media (max-width: 900px) {
  #secretary[data-img-align="center"] .gs-portrait, #masterclass[data-img-align="center"] .mc-media { margin-inline: auto; }
  #secretary[data-img-align="right"] .gs-portrait, #masterclass[data-img-align="right"] .mc-media { margin-left: auto; }
}
[data-cms-edit] .cms-align {
  position: absolute; top: 8px; left: 8px; z-index: 7; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 4px 6px; border-radius: 6px; background: rgba(7, 12, 22, .88); font-size: 11px; color: #C9D3E3;
}
[data-cms-edit] .about-figure, [data-cms-edit] .gs-portrait, [data-cms-edit] .mc-media, [data-cms-edit] .roster-entry { position: relative; }
[data-cms-edit] .cms-align-name { margin-right: 2px; }
[data-cms-edit] .cms-align .cms-chip { margin: 0; }
[data-cms-edit] .cms-align .cms-chip.is-on { background: var(--brass); color: #14203A; }

/* ── Menu: the index never runs under the crest ───────── */
#header.menu-open::before { background: #070C16 !important; border-bottom: 1px solid var(--line-soft) !important; }
#mobile-nav-overlay .menu-inner { padding-top: calc(var(--nav-h) + clamp(32px, 7vh, 72px)); }
#mobile-nav-overlay { overscroll-behavior: contain; }
@media (max-height: 640px) { .mobile-nav-link .m-label { font-size: clamp(26px, 5.4vh, 40px); } .mobile-nav-link { padding: 9px 0; } }

/* ── Phones ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mq-committees { margin-bottom: 72px; }
  .reg-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  html:not([data-cms-edit]) .reg-top:not(:has(.reg-emblem img[src]:not([src=""]))) { grid-template-columns: minmax(0, 1fr); }
  .reg-emblem { width: min(64%, 280px); order: -1; justify-self: start; }
  .reg-ghost { top: 4%; right: -4vw; font-size: 40vw; }
}
@media (max-width: 700px) {
  .mq { font-size: 12.5px; }
  .mq-run, .mq-track { padding-block: 12px; }
  .mq-dot { margin: 0 16px; width: 5px; height: 5px; }
  #intro.has-marquee { padding-top: calc(var(--nav-h) + 40px + 20px); }
  .mq-committees { margin-bottom: 56px; }
  .reg-top .sec-head h2 { --sec-h2: clamp(44px, 14vw, 72px); }
  .reg-option-link { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 12px; padding: 20px 4px; }
  .ro-cta { grid-column: 2; justify-self: start; }
  .ro-label { font-size: clamp(28px, 9vw, 40px); }
  .reg-tags li { font-size: 11px; padding: 8px 11px; }
  .dialog-option { flex-wrap: wrap; }
}

/* =====================================================
   v24 — HERO BUTTON ABOVE THE INK, ABOUT CAROUSEL,
   CALMER RUNNING LINES, EDITOR TIDY-UPS
   ===================================================== */

/* The ink window may pass behind the hero words, never over the buttons. */
#intro .hero-actions, #intro .hero-motto, #intro .hero-eyebrow { position: relative; z-index: 6; }
.hero-reveal { bottom: -.12em; }

/* ── About: the photograph carousel ────────────────────── */
.about-gallery { position: relative; margin: 52px 0 8px; }
.about-gallery[hidden] { display: none; }
.ag-track {
  position: relative; margin: 0; padding: 0; list-style: none;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--ink-800);
}
.ag-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; clip-path: inset(0 0 0 100%); }
.ag-slide.is-on {
  opacity: 1; visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
.ag-slide img { width: 100%; height: 100%; object-fit: cover; scale: 1.07; }
.ag-slide.is-on img { scale: 1; transition: scale 7s linear; }
html[data-motion="off"] .ag-slide.is-on, html[data-motion="off"] .ag-slide.is-on img { transition: none; scale: 1; }
.ag-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px;
  background: linear-gradient(180deg, rgba(7, 12, 22, 0), rgba(7, 12, 22, .82));
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
}
html:not([data-cms-edit]) .ag-cap:empty, html:not([data-cms-edit]) .ag-cap.cms-empty { display: none; }
[data-cms-edit] .ag-cap { position: static; padding: 6px 8px; background: none; }
.ag-bar { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.ag-dots { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.ag-dot {
  width: 26px; height: 4px; border: 0; border-radius: 2px; background: var(--line); cursor: pointer;
  transition: background .3s var(--ease), width .4s cubic-bezier(.16, 1, .3, 1);
}
.ag-dot.is-on { background: var(--brass); width: 44px; }
.ag-dot:hover { background: var(--brass-dim); }
.ag-arrow {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--brass-line); border-radius: 50%; background: transparent; color: var(--brass-bright); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), translate .35s cubic-bezier(.16, 1, .3, 1);
}
.ag-arrow:hover { border-color: var(--brass); color: var(--paper); }
.ag-prev:hover { translate: -3px 0; }
.ag-next:hover { translate: 3px 0; }
.about-gallery.is-single .ag-bar { display: none; }
html:not([data-cms-edit]) .about-gallery:not(.is-live) { display: none; }
@media (max-width: 700px) {
  .about-gallery { margin: 36px 0 4px; }
  .ag-track { aspect-ratio: 4 / 3; }
  .ag-arrow { width: 40px; height: 40px; }
}
/* In the editor every photograph is on the page, side by side, so each
   one can be clicked, replaced and deleted. */
[data-cms-edit] .about-gallery .ag-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
  aspect-ratio: auto; padding: 12px; overflow: visible;
}
[data-cms-edit] .about-gallery .ag-slide {
  position: relative; inset: auto; opacity: 1; visibility: visible; clip-path: none;
  aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden;
}
[data-cms-edit] .about-gallery .ag-slide img { scale: 1; }
[data-cms-edit] .about-gallery .ag-bar { display: none; }

/* ── Editor: chrome that used to sit on top of other chrome ── */
[data-cms-edit] .cms-motion { max-width: 100%; }
[data-cms-edit] .cms-motion-row { flex: 0 0 auto; }
[data-cms-edit] .cms-align { max-width: calc(100% - 16px); }
[data-cms-edit] .cms-feature-chip { max-width: calc(100% - 24px); text-align: right; }
[data-cms-edit] .cms-sec-tools { flex-wrap: wrap; max-width: 100%; row-gap: 6px; }
[data-cms-edit] .cms-item-tools { z-index: 8; }
[data-cms-edit] .cms-align + .cms-item-tools, [data-cms-edit] .cms-feature-chip + .cms-item-tools { top: 8px; }
[data-cms-edit] .mq .cms-switch { position: relative; z-index: 3; }
[data-cms-edit] .about-gallery { padding-top: 26px; }
[data-cms-edit] .about-gallery .cms-add { position: relative; z-index: 3; }

/* Editor: the site header is fixed for visitors, which put its own chrome
   under the first section's tool bar. In the editor it stands in the flow,
   so every control has a row of its own. */
[data-cms-edit] #header { position: relative; z-index: 95; height: auto; }
[data-cms-edit] #header .shell { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
[data-cms-edit] .header-right { flex-wrap: wrap; row-gap: 8px; }
[data-cms-edit] #intro, [data-cms-edit] #intro.has-marquee { padding-top: 24px; }
[data-cms-edit] .mq-hero { position: relative; top: auto; }
[data-cms-edit] #main-nav { flex-wrap: wrap; }
[data-cms-edit] #main-nav .nav-links { flex-wrap: wrap; row-gap: 6px; }
[data-cms-edit] #scroll-progress { display: none; }

/* Editor: no two controls in the same place. */
[data-cms-edit] .cms-hero-bg.cms-motion { margin-bottom: 76px; }
[data-cms-edit] .cms-feature-chip { left: 12px; right: auto; top: 12px; text-align: left; }
[data-cms-edit] .cm-slide .cms-align + .cms-feature-chip { top: 52px; }
[data-cms-edit] .cms-add:not([style*="position: absolute"]) { margin-top: 20px; }
[data-cms-edit] .about-gallery .cms-add { margin-top: 26px; }
[data-cms-edit] .hero-slide .cms-alt-chip { top: 210px; right: 16px; left: auto; bottom: auto; }

/* Hero depth, kept clear of itself: the whole block drifts as one and each
   line adds only a little, so a rising line can never reach the eyebrow and
   the motto can never land on the Register button. */
#intro .hero-lead { translate: 0 calc(var(--hp) * -22px); }
#intro .hero-title > :nth-child(1), #intro .rv-title > :nth-child(1) { translate: 0 calc(var(--hp) * -12px); }
#intro .hero-title > :nth-child(2), #intro .rv-title > :nth-child(2) { translate: 0 calc(var(--hp) * -24px); }
#intro .hero-title > :nth-child(3), #intro .rv-title > :nth-child(3) { translate: 0 calc(var(--hp) * -36px); }
#intro .hero-motto { translate: 0 calc(var(--hp) * 16px); }
@media (max-width: 900px) {
  #intro .hero-motto { translate: none; }
  #intro .hero-lead { translate: 0 calc(var(--hp) * -12px); }
}
[data-cms-edit] #main-nav { position: relative; z-index: 70; }
[data-cms-edit] .nav-links .cms-item-tools { z-index: 72; }
/* The hero's bottom strip gains its photo index and year after the CMS
   answers; the room for them is reserved so nothing above it moves. */
.hero-base-inner { min-height: 22px; }
@media (max-width: 900px) { .hero-base-inner { min-height: 42px; } }
@media (hover: none) {
  /* No hover means every entry shows its own toolbar, so the entries need
     room for one each — otherwise a finger lands on the neighbour's ✕. */
  [data-cms-edit] #main-nav .nav-links { gap: 14px 38px; row-gap: 84px; }
}
[data-cms-edit] .nav-links .cms-item-tools, [data-cms-edit] .footer-links .cms-item-tools,
[data-cms-edit] #mobile-nav-overlay .cms-item-tools { width: max-content; flex-wrap: nowrap; }

/* =====================================================
   v25 — FOOTER LINES, THE LETTER, THE SIGNATURE
   ===================================================== */
/* Footer lines stack; nothing dragged in an older version may sit on another. */
footer [data-cms-moved], #footer [data-cms-moved] { translate: none !important; }
.fc-item { position: relative; }

/* The Secretary-General's letter keeps its paragraphs, bold and lists. */
.gs-message { display: block; }
.gs-message > p { margin: 0 0 1.05em; }
.gs-message > p:last-child { margin-bottom: 0; }
.gs-message strong, .gs-message b { font-weight: 700; color: var(--paper); }
.gs-message em, .gs-message i { font-style: italic; }
.gs-message ul, .gs-message ol { margin: 0 0 1.05em 1.3em; padding: 0; }
.gs-message ul { list-style: none; }
.gs-message ul > li { position: relative; padding-left: .2em; }
.gs-message ul > li::before { content: ''; position: absolute; left: -1em; top: .72em; width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); }
.gs-message ol { list-style: decimal; }
.gs-message li + li { margin-top: .4em; }
.gs-message h3, .gs-message h4 { margin: 1.4em 0 .5em; font-family: var(--font-bold); font-stretch: var(--bold-stretch, 76%); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--paper); }
.gs-message h3 { font-size: 1.25em; }
.gs-message h4 { font-size: 1.05em; }
.gs-message blockquote { margin: 0 0 1.05em; padding-left: 1em; border-left: 2px solid var(--brass); color: var(--paper); }
[data-cms-edit] .gs-message:empty::before { content: 'Paste or write the letter here'; color: var(--faint); }

/* The signature, larger. */
.gs-signature { max-height: 140px; max-width: min(100%, 420px); }
[data-cms-edit] .gs-signature:not([src]), [data-cms-edit] .gs-signature[src=""] { width: 340px; height: 110px; }
@media (max-width: 560px) { .gs-signature { max-height: 110px; max-width: 80%; } }

/* ── Arrivals: text lifts out of its line, rows slide along their rule ── */
html.fx-ready:not([data-motion="off"]) .fx-rise {
  clip-path: inset(0 0 100% 0); transform: translateY(28px);
}
html.fx-ready:not([data-motion="off"]) .fx-rise.fx-risen {
  clip-path: inset(-10% -2% -20% -2%); transform: none;
  transition: clip-path 1s var(--ease-lift) calc(var(--ri, 0) * 90ms), transform 1s var(--ease-lift) calc(var(--ri, 0) * 90ms);
}
html.fx-ready:not([data-motion="off"]) .fx-row { transform: translate3d(-28px, 0, 0) skewX(-4deg); transform-origin: 0 100%; }
html.fx-ready:not([data-motion="off"]) .fx-row.fx-rowed {
  transform: none;
  transition: transform 1s var(--ease-lift) calc(var(--ri, 0) * 75ms);
}
html[data-motion="calm"] .fx-rise.fx-risen, html[data-motion="calm"] .fx-row.fx-rowed { transition-duration: .6s; }

/* A brass line sweeps across the top of each section as it arrives. */
.fx-sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-bright) 50%, var(--brass) 80%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; opacity: .9;
}
.fx-sweep.is-in { transform: scaleX(1); opacity: .35; transition: transform 1.4s var(--ease-lift), opacity 1.6s ease 1s; }

/* Photographs drifting against the page need a little room to drift in. */
[data-fx-drift] { will-change: translate; }
.fx-curtain img[data-fx-drift], .ag-slide img[data-fx-drift] { height: calc(100% + 40px) !important; margin-top: -20px; }

@media (prefers-reduced-motion: reduce) {
  .fx-rise, .fx-row { clip-path: none !important; transform: none !important; }
  .fx-sweep { display: none; }
  [data-fx-drift] { translate: none !important; }
}
html[data-motion="off"] .fx-sweep { display: none; }
[data-cms-edit] .fx-rise, [data-cms-edit] .fx-row { clip-path: none !important; transform: none !important; }
[data-cms-edit] .fx-sweep { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* Nothing loops for a visitor who asked for stillness. */
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .hero-reveal { display: none !important; }
}

/* ── v26: the sign-off, set like the foot of a letter ───── */
.gs-sign { gap: 0; }
.gs-ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#secretary[data-sign="right"] .gs-sign { align-items: flex-end; text-align: right; }
#secretary[data-sign="left"] .gs-sign { align-items: flex-start; text-align: left; }
.gs-closing {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 19px; color: var(--text); margin: 0 0 6px;
}
.gs-sign .gs-signature { max-height: 170px; max-width: min(100%, 460px); margin: 0 0 10px; }
/* The signature is always gold on a see-through ground. */
#secretary[data-sign-ink="invert"] .gs-signature[src]:not([src=""]) { filter: url(#gs-ink); }
#secretary[data-sign-ink="as-is"] .gs-signature[src]:not([src=""]) { filter: url(#gs-ink-light); }
.gs-sign .gs-name { font-size: 28px; line-height: 1.05; }
.gs-sign .gs-role { margin-top: 8px; }
.gs-org { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.gs-mail { margin-top: 6px; font-size: 14px; }
.gs-email { color: var(--brass-bright); text-decoration: underline; text-decoration-color: var(--brass-line); text-underline-offset: 3px; transition: text-decoration-color .25s var(--ease); }
.gs-email[href]:hover { text-decoration-color: var(--brass-bright); }
html:not([data-cms-edit]) .gs-closing.cms-empty,
html:not([data-cms-edit]) .gs-org.cms-empty,
html:not([data-cms-edit]) .gs-mail:has(> .cms-empty) { display: none; }
@media (max-width: 560px) {
  .gs-sign .gs-signature { max-height: 120px; max-width: 86%; }
  .gs-sign .gs-name { font-size: 23px; }
}
[data-cms-edit] .gs-sign { position: relative; }
[data-cms-edit] .gs-sign > .cms-sign-bar { position: static; margin: 0 0 14px; align-self: flex-start; }
[data-cms-edit] .gs-sign > .cms-sign-bar .cms-switch { margin: 0 0 0 6px; }
[data-cms-edit] .gs-closing:empty::before { content: 'Closing line'; color: var(--faint); }
[data-cms-edit] .gs-org:empty::before { content: 'Organisation line'; color: var(--faint); }
[data-cms-edit] .gs-email:empty::before { content: 'Email address'; color: var(--faint); }

/* ── v26: the footer map ─────────────────────────────────── */
.footer-map { margin: 0 0 22px; }
.fm-frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--brass-line); background: var(--ink-900);
}
.fm-iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(.85) invert(.9) hue-rotate(180deg) contrast(.92) brightness(.95);
  transition: filter .5s var(--ease);
}
.fm-frame:hover .fm-iframe, .fm-frame:focus-within .fm-iframe { filter: grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.95); }
.fm-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 0; font-size: 13px;
}
.fm-place { color: var(--paper); font-weight: 600; }
.footer-contact .fm-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--brass-bright); }
.footer-map[hidden] { display: none; }
.fc-item[hidden] { display: none; }
@media (max-width: 560px) { .fm-frame { aspect-ratio: 4 / 3; } }
[data-cms-edit] .fm-iframe { pointer-events: none; }
[data-cms-edit] .footer-map.cms-off { opacity: .5; outline: 1px dashed var(--brass-line); outline-offset: 4px; }
[data-cms-edit] .fc-item.cms-off { opacity: .45; }
[data-cms-edit] .cms-map-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
[data-cms-edit] .cms-map-bar .cms-chip { margin: 0; }

/* ── v27: the credit button's pixel owl ────────────────── */
.egg-stage { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; contain: strict; will-change: transform; }
[data-cms-edit] .footer-bottom-actions > .cms-switch { margin: 0; order: -1; }
@media (max-width: 700px) {
  .back-to-top.visible.is-tucked { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }
}

/* =====================================================
   v29 — the conference's own clock, a viewer for photographs,
   the header that says where you are, and arrivals.
   ===================================================== */

/* ── Countdown: in session, and concluded ─────────────── */
.cd-label-live.is-off, .cd-label-ended.is-off { display: none; }
.cd-label-ended {
  max-width: 30ch; margin: 0 auto;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; color: var(--paper);
  text-wrap: balance;
}
.hero-clock[data-stage="ended"] .clock-rows,
.hero-clock[data-stage="ended"] .clock-rule { display: none; }
.hero-clock[data-stage="live"] .cd-label-live { color: var(--brass-bright); }
.hero-clock[data-stage="live"] .cd-label-live::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px;
  border-radius: 50%; background: var(--brass-bright); vertical-align: 1px;
  animation: cdLive 2.4s var(--ease-soft) infinite;
}
@keyframes cdLive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
[data-cms-edit] .cd-label-live.is-off, [data-cms-edit] .cd-label-ended.is-off { display: block; opacity: .78; }
[data-cms-edit] .cd-label-live::after, [data-cms-edit] .cd-label-ended::after {
  display: block; margin-top: 4px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .06em; text-transform: none; color: var(--faint);
}
[data-cms-edit] .cd-label-live::after { content: 'shown while the conference is in session'; }
[data-cms-edit] .cd-label-ended::after { content: 'shown once the conference has ended'; font-size: 11px; }

/* Add to calendar — a quiet line under the facts, two real links. */
.cd-cal {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 30px; font-size: 13px;
}
.cd-cal[hidden] { display: none; }
.cd-cal-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cd-cal-link {
  position: relative; color: var(--muted); padding: 2px 0;
  transition: color .22s var(--ease);
}
.cd-cal-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brass); transform: scaleX(.25); transform-origin: left; opacity: .6;
  transition: transform .34s var(--ease), opacity .34s var(--ease);
}
.cd-cal-link:hover, .cd-cal-link:focus-visible { color: var(--paper); }
.cd-cal-link:hover::after, .cd-cal-link:focus-visible::after { transform: scaleX(1); opacity: 1; }
html[data-event-stage="ended"]:not([data-cms-edit]) .cd-cal { display: none; }
[data-cms-edit] .cd-cal.cms-off { opacity: .45; }

/* ── The runsheet: now and next ──────────────────────── */
.run-live {
  display: block; width: max-content; margin-top: 8px; padding: 2px 7px 3px;
  border: 1px solid var(--brass-line); border-radius: 4px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-bright);
}
.run-row.is-now { background: var(--brass-wash); box-shadow: inset 2px 0 0 var(--brass); }
.run-row.is-now .run-live { background: var(--brass); border-color: var(--brass); color: var(--ink-900); }
.run-row.is-now .run-live::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%;
  background: var(--ink-900); vertical-align: 1px; animation: cdLive 2.4s var(--ease-soft) infinite;
}
@media (max-width: 700px) { .run-live { display: inline-block; margin: 0 0 0 10px; vertical-align: 1px; } }

/* ── Header: where you are ───────────────────────────── */


/* ── Arriving at a section from a link ───────────────── */
section.is-arrived .sec-index { color: var(--brass-bright); transition: color .3s var(--ease); }
section.is-arrived .sec-head .label { animation: arrivedLabel 1.4s var(--ease-out); }
@keyframes arrivedLabel { 0% { letter-spacing: .32em; opacity: .4; } 100% { letter-spacing: inherit; opacity: 1; } }
section.is-arrived > .fx-sweep.is-in { opacity: .9; transition: transform 1.1s var(--ease-lift), opacity 1.4s ease .6s; }
@media (prefers-reduced-motion: reduce) { section.is-arrived .sec-head .label { animation: none; } }

/* ── Photograph viewer ───────────────────────────────── */
.lightbox-figure figcaption { display: flex; gap: 18px; align-items: baseline; justify-content: center; }
.lb-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--brass); }
.lb-count:empty { display: none; }
.lightbox-nav {
  position: absolute; top: 50%; z-index: 2;
  width: 48px; height: 48px; margin-top: -24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--paper);
  background: var(--ink-700); box-shadow: var(--d-1);
  transition: box-shadow var(--t-depth) var(--ease), transform .3s var(--ease-out);
}
.lightbox-nav[hidden] { display: none; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lightbox-nav:hover { box-shadow: var(--d-2); }
.lb-prev:hover { transform: translateX(-2px); }
.lb-next:hover { transform: translateX(2px); }
.lightbox img { will-change: transform; }
.lightbox-figure.lb-from-right { animation: lbFromRight .42s var(--ease-out); }
.lightbox-figure.lb-from-left { animation: lbFromLeft .42s var(--ease-out); }
@keyframes lbFromRight { from { opacity: .2; transform: translateX(34px); } }
@keyframes lbFromLeft { from { opacity: .2; transform: translateX(-34px); } }
.lightbox.is-closing { opacity: 0; transition: opacity .34s var(--ease); }
.ag-slide.lb-able.is-on { cursor: zoom-in; }
.c-photo.lb-able, .mun-media.lb-able { cursor: zoom-in; }
@media (max-width: 700px) {
  .lightbox-nav { top: auto; bottom: 18px; margin-top: 0; }
  .lb-prev { left: 18px; }
  .lb-next { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-figure.lb-from-right, .lightbox-figure.lb-from-left { animation: none; }
}
@media (min-width: 701px) { .run-row.is-now .run-head > .run-time { padding-left: 12px; } }

/* The menu marks the section being read. */
.mobile-nav-link.is-current .m-label { color: var(--brass-bright); }
.mobile-nav-link.is-current .m-num { position: relative; }
.mobile-nav-link.is-current .m-num::after {
  content: ''; position: absolute; left: 0; right: 14px; bottom: -6px; height: 1px; background: var(--brass);
  transform-origin: left; animation: currentRule .8s var(--ease-lift) .5s both;
}
@keyframes currentRule { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav-link.is-current .m-num::after { animation: none; } }
/* V30: a stable conference navigation and a six-event programme. */
:root {
  --brass: #E0B74F;
  --brass-bright: #F5D985;
  --brass-deep: #B38B31;
  --brass-dim: #CEAB55;
  --brass-line: rgba(224,183,79,.48);
  --brass-wash: rgba(224,183,79,.10);
}
#header, #header.scrolled { background: var(--ink-900); border-bottom: 1px solid var(--line-soft); }
#header.scrolled::before { display: none; }
#header .header-inner { gap: 28px; }

html:not([data-cms-edit]) #main-nav { display: flex; margin-left: auto; }
#main-nav .nav-links { gap: 28px; }
#main-nav .nav-link-item { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--paper); line-height: 1.3; }
#main-nav .nav-link-item[aria-current="page"] { color: var(--brass); }
#main-nav .nav-link-item[aria-current="page"]::after { transform: scaleX(1); }
.nav-break { margin-left: .3em; }
#header .hamburger { margin-left: 0; flex-shrink: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 5px; }
.standalone-page main { padding-top: calc(var(--nav-h) + 28px); min-height: 65vh; }
.page-return { padding-bottom: 12px; font-size: 14px; color: var(--brass); }
.standalone-page main > section { padding-top: 44px; }
.standalone-page #intro-curtain { display: none; }
#socials .social-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 28px !important; }
#socials .social-item, #socials .social-item:first-of-type, #socials .social-item:nth-of-type(even) { display: block; padding: 0; border: 0; }
#socials .social-item .so-media { display: block; position: relative; aspect-ratio: 3/2; margin: 0 0 18px; border-radius: 0; background: var(--ink-800); overflow: hidden; }
#socials .so-media img { z-index: 1; }
#socials .so-media img:not([src]), #socials .so-media img[src=""] { display: none; }
.event-photo-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--muted); font: 14px var(--font-ui); border: 1px solid var(--line-soft); }
#socials .social-item .so-text { text-align: left; }
#socials .social-item h3 { font-family: var(--font-ui); font-size: clamp(21px,2vw,28px); font-weight: 600; text-transform: none; line-height: 1.2; margin-top: 8px; letter-spacing: 0; }
#socials .social-item .so-when { justify-content: flex-start; font-size: 12px; letter-spacing: .05em; }
#socials .so-desc { font-size: 15px; margin-left: 0; }
#socials .so-desc:empty, #socials .so-cat:empty, #socials .so-venue:empty { display: none; }
#socials .so-when:not(:has(.so-day:not(:empty),.so-time:not(:empty))) { display: none; }
@media(max-width: 800px) {
  #header .header-inner { gap: 18px; }
  #header .brand-word { display: none; }
  #main-nav .nav-links { gap: 18px; }
  #main-nav .nav-link-item { font-size: 13px; }
  #socials .social-list { gap: 32px 18px !important; }
}
@media(max-width: 560px) {
  :root { --nav-h: 108px; }
  #header .header-inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 49px 50px; gap: 0; }
  #header .brand { grid-column: 1; grid-row: 1; width: fit-content; }
  #header .brand-mark { width: 28px; height: 28px; }
  #header .brand-word { display: inline; font-size: 17px; }
  #header .hamburger { grid-column: 2; grid-row: 1; font-size: 14px; }
  html:not([data-cms-edit]) #main-nav { grid-column: 1 / -1; grid-row: 2; margin: 0; align-self: stretch; border-top: 1px solid var(--line-soft); }
  #main-nav .nav-links { width: 100%; justify-content: space-between; gap: 12px; }
  #main-nav .nav-link-item { display: block; padding: 7px 0; min-height: 44px; font-size: 12px; }
  .nav-break { display: block; margin: 0; }
  #socials .social-list { grid-template-columns: 1fr; gap: 30px !important; }
  #socials .social-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
  #socials .social-item .so-media { order: 0; margin: 0; }
  #socials .social-item h3 { font-size: 21px; }
  #socials .event-photo-placeholder { font-size: 12px; padding: 10px; }
  .standalone-page main > section { padding-top: 24px; }
}
@media(max-width:560px) {
  #socials .social-item, #socials .social-item:first-of-type, #socials .social-item:nth-of-type(even) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: center; }
}
#socials { padding-block: 72px; }
#socials.ambient::before { display: none; }
#socials .sec-head { margin-bottom: 32px; }
#socials .sec-head h2 { font-size: clamp(34px,4.2vw,54px); line-height: 1.06; }
/* V31 — conference wayfinding, facts and dates. */
#main-nav .nav-links { gap: 22px; }
#main-nav .nav-link-item {
  font-family: var(--font-ui); font-weight: 650; font-size: 15px;
  color: var(--brass-bright); min-height: 46px; padding: 10px 2px;
}
#main-nav .nav-link-item:hover { color: var(--paper); }
#main-nav .nav-link-item[aria-current="page"] { color: var(--paper); }
#main-nav .nav-link-item[aria-current="page"]::after { background: var(--brass); height: 2px; }
/* The heading spans the registration composition, so a photograph cannot cover it. */
#registration .reg-top { grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: start; gap: 36px 56px; }
#registration .reg-top > .sec-head { grid-column: 1 / -1; grid-row: 1; margin: 0; min-width: 0; }
#registration .reg-top > .sec-head h2 { --sec-h2: clamp(42px,7.7vw,120px); max-width: 100%; overflow-wrap: anywhere; }
#registration .reg-intro { grid-column: 1; grid-row: 2; min-width: 0; }
#registration .reg-options { margin-top: 0; }
#registration .reg-emblem { grid-column: 2; grid-row: 2; width: 100%; max-width: 520px; margin: 0; align-self: start; }
#registration .reg-emblem img { display: block; width: 100%; height: auto; max-width: 100%; filter: none; border-radius: 2px; }
#registration .reg-ghost { display: none; }
/* The facts fill the space beneath the About photograph. */
#about .about-layout { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 28px 48px; }
#about .about-layout > .about-figure { grid-column: 1 / span 6; grid-row: 1; }
#about .about-layout > .fact-table { grid-column: 1 / span 6; grid-row: 2; opacity: 1; transform: none; }
#about .about-layout > .prose { grid-column: 8 / -1; grid-row: 1 / span 2; }
#about .fact-table caption { font-family: var(--font-ui); font-size: 25px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--brass-bright); padding: 0 0 18px; }
#about .fact-table th, #about .fact-table td { padding: 17px 0; font-size: 19px; line-height: 1.4; }
#about .fact-table th { width: 33%; padding-right: 16px; font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
/* Each activity caption belongs to its photograph. */
#socials .social-item .so-text { text-align: center; }
#socials .social-item .so-when { justify-content: center; }
#socials .so-desc { margin-inline: auto; }
/* Four milestones alternate around one continuous horizontal line. */
#important-dates .dates-layout { display: block; }
#important-dates .sec-head { position: static; margin: 0 0 36px; }
#important-dates .sec-head h2 { font-size: clamp(36px,4.5vw,58px); line-height: 1.05; writing-mode: horizontal-tb; transform: none; }
.dates-timeline-wrap { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--brass) var(--ink-800); padding: 8px 2px 16px; }
#important-dates .dates-ledger {
  --milestone-count: 4; position: relative; border: 0; display: grid;
  grid-template-columns: repeat(var(--milestone-count), minmax(215px,1fr));
  grid-template-rows: 1fr 1fr; width: max(100%,calc(var(--milestone-count)*215px));
  isolation: isolate;
}
#important-dates .dates-ledger::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--brass-line); }
#important-dates .date-row {
  grid-column: var(--milestone-column,auto); grid-row: 1; align-self: end;
  display: flex; flex-direction: column; gap: 10px; padding: 0 24px 34px 12px;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  transform: none !important; opacity: 1 !important; min-width: 0; overflow: visible;
}
#important-dates .date-row:nth-of-type(even) { grid-row: 2; align-self: start; padding: 34px 24px 0 12px; }
#important-dates .date-row::before { top: auto; bottom: -5px; left: 12px; width: 10px; height: 10px; background: var(--ink-900); border: 2px solid var(--brass); box-shadow: none; }
#important-dates .date-row:nth-of-type(even)::before { top: -5px; bottom: auto; }
#important-dates .date-row::after { content: ''; position: absolute; left: 16px; bottom: 5px; height: 20px; width: 1px; background: var(--brass-line); }
#important-dates .date-row:nth-of-type(even)::after { top: 5px; bottom: auto; }
#important-dates .d-stamp { flex-direction: row; align-items: baseline; gap: 8px; font-size: 15px; letter-spacing: 0; }
#important-dates .d-stamp b { font-size: 36px; }
#important-dates .date-tbc { font-size: 14px; color: var(--brass-bright); text-transform: none; }
#important-dates .d-text h3 { font-family: var(--font-ui); font-size: 20px; line-height: 1.25; font-weight: 600; text-transform: none; overflow-wrap: anywhere; }
#important-dates .d-text p { font-size: 15px; }
#important-dates .d-status { letter-spacing: .04em; font-size: 11px; }
.compact-footer { padding: 24px 0 !important; border-top: 1px solid var(--line); background: var(--ink-900); }
.compact-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.compact-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; color: var(--paper); }
.compact-brand img { object-fit: contain; width: 30px; height: 30px; }
.compact-footer p { max-width: 55ch; font-size: 12px; color: var(--muted); }
.compact-footer nav { display: flex; flex-shrink: 0; gap: 22px; font-size: 14px; color: var(--brass-bright); }

@media(max-width:900px) {
  #registration .reg-top { gap: 28px; }
  #registration .ro-label { font-size: clamp(26px,4vw,42px); }
  #about .about-layout { column-gap: 28px; }
  #about .fact-table th, #about .fact-table td { font-size: 16px; }
  #main-nav .nav-link-item { font-size: 13px; }
}
@media(max-width:700px) {
  #about .about-layout { display: flex; flex-direction: column; gap: 28px; }
  #about .about-layout > * { width: 100%; }
  #about .about-figure { order: 0; }
  #about .fact-table { order: 1; }
  #about .prose { order: 2; }
  #registration .reg-top { grid-template-columns: minmax(0,1fr); }
  #registration .reg-top > .sec-head, #registration .reg-intro, #registration .reg-emblem { grid-column: 1; }
  #registration .reg-intro { grid-row: 2; }
  #registration .reg-emblem { grid-row: 3; order: 0; max-width: none; }
  #socials .social-item, #socials .social-item:first-of-type, #socials .social-item:nth-of-type(even) { display: block; }
  #socials .social-item .so-media { margin-bottom: 16px; }
  #socials .social-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #socials .social-item h3 { font-size: 20px; }
  .compact-footer-inner { flex-wrap: wrap; gap: 16px; }
  .compact-footer p { order: 3; flex-basis: 100%; }
  #important-dates .sec-head { margin-bottom: 24px; }
}
@media(max-width:560px) {
  #main-nav .nav-links { gap: 10px; }
  #main-nav .nav-link-item { font-size: 12px; min-height: 48px; padding: 8px 0; }
  #socials .social-list { grid-template-columns: 1fr; }
  #socials .social-item h3 { font-size: 23px; }
  #socials .social-item .so-media { aspect-ratio: 16/10; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
.timeline-scroll-hint { display: none; margin: 16px 0 0; color: var(--brass-bright); font-size: 13px; }
.timeline-has-overflow + .timeline-scroll-hint { display: block; }
.dates-timeline-wrap::-webkit-scrollbar { height: 5px; }
.dates-timeline-wrap::-webkit-scrollbar-thumb { background: var(--brass-dim); }
/* V32 editing model and stable photo geometry. */
#team-list.free-team { display:block !important; position:relative; height:var(--team-canvas-height,1200px); width:100%; }
#team-list.free-team > .roster-entry { position:absolute !important; left:var(--free-x,0%); top:var(--free-y,0px); width:var(--free-width,29%); max-width:none; margin:0 !important; transform:none !important; translate:none !important; grid-column:auto !important; grid-row:auto !important; }
#team-list.free-team > .roster-entry .portrait { width:100%; }
.cms-portrait-layout { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;padding:14px;background:#182740;color:#F4F7FB;font:14px/1.4 system-ui,sans-serif; }
.cms-portrait-layout p { flex-basis:100%;margin:0; }
.cms-portrait-layout input {width:90px;}
.cms-free-move,.cms-free-size,.cms-frame-photo,.cms-layout-settings {position:absolute;z-index:75;min-height:32px;padding:6px 10px;border:1px solid #E0B74F;border-radius:3px;background:#0D1524;color:#F5D985;font:600 12px/1.3 system-ui,sans-serif;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0;}
.cms-frame-photo {top:8px;right:8px;}
.cms-layout-settings {right:12px;top:12px;}
.cms-free-move {top:-34px;left:0;cursor:move;touch-action:none;}
.cms-free-size {bottom:0;right:0;cursor:nwse-resize;touch-action:none;}
.cms-arranging {outline:2px dashed #E0B74F;z-index:80;}
.cms-refine-panel {position:fixed;right:16px;top:82px;z-index:9999;max-height:calc(100vh - 100px);overflow:auto;width:min(310px,calc(100vw - 32px));box-sizing:border-box;background:#101A2C;border:1px solid #E0B74F;padding:20px;color:#F4F7FB;font:14px/1.5 system-ui,sans-serif;box-shadow:0 10px 32px #0008;}
.cms-refine-panel h3{font:600 20px/1.2 system-ui,sans-serif;margin:0 45px 16px 0;}
.cms-refine-panel p{font-size:13px;color:#d2d9e4;}
.cms-refine-panel label{display:block;margin:16px 0;font-size:14px;}
.cms-refine-panel input,.cms-refine-panel select{display:block;width:100%;accent-color:#E0B74F;min-height:32px;}
.cms-refine-panel button,.cms-portrait-layout button{padding:8px 12px;min-height:36px;background:#182740;color:#F4F7FB;border:1px solid #67758a;border-radius:3px;margin:4px;font:600 13px system-ui,sans-serif;cursor:pointer;}
.cms-refine-panel .cms-refine-close{position:absolute;right:8px;top:7px;padding:5px;}
.cms-refine-primary{background:#E0B74F!important;color:#0D1524!important;border-color:#E0B74F!important;}
.ic-half{will-change:transform;backface-visibility:hidden;transition:transform 1.1s cubic-bezier(.65,0,.2,1);}
#intro-curtain.is-open .ic-left{transform:translate3d(-100%,0,0);}
#intro-curtain.is-open .ic-right{transform:translate3d(100%,0,0);}
html.curtain-on{overflow-y:hidden;scrollbar-gutter:stable;}
/* Native wheel/touch input has no delayed script queue; in-page links retain smooth scrolling. */
@media(max-width:700px){
 #team-list.free-team{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 16px!important;height:auto;}
 #team-list.free-team > .roster-entry{position:relative!important;left:auto;top:auto;width:auto;}
 .cms-free-move,.cms-free-size{display:none;}
}
@media(prefers-reduced-motion:reduce){.ic-half{transition:none;}}

#registration .reg-emblem {aspect-ratio:4/3;overflow:hidden;position:relative;}
#registration .reg-emblem img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
#team-list.free-team > .roster-entry {z-index:var(--free-layer,1);}
#team-list.free-team > .roster-entry.cms-arranging{z-index:10000!important;}
/* Photo controls occupy their own corner, clear of existing entry tools. */
.cms-frame-photo {top:auto;bottom:8px;left:8px;right:auto;z-index:95;}
/* Simple mode mirrors the public page; all existing controls remain one toggle away. */
html[data-cms-edit][data-editor-detail="simple"] .cms-item-tools,
html[data-cms-edit][data-editor-detail="simple"] .cms-add,
html[data-cms-edit][data-editor-detail="simple"] .cms-field-note,
html[data-cms-edit][data-editor-detail="simple"] .cms-alt-chip,
html[data-cms-edit][data-editor-detail="simple"] .cms-site-meta,
html[data-cms-edit][data-editor-detail="simple"] .cms-chip,
html[data-cms-edit][data-editor-detail="simple"] .cms-link-chip,
html[data-cms-edit][data-editor-detail="simple"] .cms-align,
html[data-cms-edit][data-editor-detail="simple"] .cms-sec-tools,
html[data-cms-edit][data-editor-detail="simple"] .cms-hero-bg,
html[data-cms-edit][data-editor-detail="simple"] .cms-roster-row,
html[data-cms-edit][data-editor-detail="simple"] .cms-roster-plan,
html[data-cms-edit][data-editor-detail="simple"] .cms-roster-fit,
html[data-cms-edit][data-editor-detail="simple"] .cms-empty,
html[data-cms-edit][data-editor-detail="simple"] .cms-hidden-section,
html[data-cms-edit][data-editor-detail="simple"] .cms-off,
html[data-cms-edit][data-editor-detail="simple"] #header .header-right {display:none!important;}
html[data-cms-edit][data-editor-detail="simple"] #header .header-inner {min-height:68px;height:auto;flex-wrap:nowrap;}
html[data-cms-edit][data-editor-detail="simple"] #main-nav .nav-links {flex-wrap:nowrap;row-gap:0;}
html[data-cms-edit][data-editor-detail="simple"] #main-nav .nav-links > li {padding:0;}
/* Unfilled event images do not leave public placeholder panels. */
html:not([data-cms-edit]) #socials .so-media:not(:has(img[src]:not([src=""]))) {display:none;}
html:not([data-cms-edit]) .event-photo-placeholder {display:none;}

/* V33: six conference facts in two rows; compact letter sign-off. */
#about .fact-table { display: block; }
#about .fact-table caption { display: block; text-align: left; }
#about .fact-table tbody { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 20px; }
#about .fact-table tr { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
#about .fact-table th, #about .fact-table td { display: block; width: auto; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
#about .fact-table th { font-size: 14px; margin-bottom: 7px; }
#about .fact-table td { font-size: 17px; }
#secretary[data-sign] .gs-sign { margin-top: 14px; padding-top: 12px; align-items: flex-start; text-align: left; }
#secretary .gs-sign .gs-signature { width: 280px; max-width: 100%; height: auto; max-height: 160px; object-fit: contain; object-position: left center; margin: 0 0 8px; filter: brightness(0) invert(1) !important; }
@media(max-width:560px) { #about .fact-table tbody { gap: 14px 10px; } #about .fact-table td { font-size: 14px; } #about .fact-table th { font-size: 12px; } }



/* V34: full-width conference facts and tighter signature spacing. */
#about .about-layout > .fact-table { grid-column: 1 / -1; grid-row: 2; }
#about .about-layout > .prose { grid-row: 1; }
#about .fact-table tbody { grid-template-columns: repeat(3,minmax(0,1fr)); }
#secretary[data-sign] .gs-sign { border-top: 0; margin-top: 1em; padding-top: 0; }
#secretary .gs-sign .gs-signature { width: 220px; max-height: 118px; }

/* Keep the letter closing one line below its final paragraph. */
#secretary .gs-message, #secretary .gs-message > :last-child { margin-bottom: 0; padding-bottom: 0; }
#secretary[data-sign] .gs-sign { margin-top: 20px; padding-top: 0; }