/* ==========================================================================
   MODEL G20 2026 — PAGE COMPOSITIONS
   Layouts that exist once. Anything reused twice belongs in components.css.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(2rem, 6vh, 4rem);
  overflow: hidden;
}
.hero__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  align-items: center;
  overflow: hidden;
  /* Weighted to the right so the type column stays clean. */
  -webkit-mask-image: radial-gradient(96% 96% at 70% 48%, #000 12%, transparent 70%);
  mask-image: radial-gradient(96% 96% at 70% 48%, #000 12%, transparent 70%);
}
.hero__map .worldmap { width: min(126%, 1560px); margin-inline: auto; }
.hero__map .wm-dot { fill: rgba(96, 8, 8, 0.2); }

/* The theme line, and the rotating word beneath it. */
.hero__rot {
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  flex-wrap: wrap;
}
.hero__rot .rotator {
  font-family: var(--font-display);
  font-size: 1.35em;
  font-weight: var(--fw-medium);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: var(--ls-hero);
  font-weight: var(--fw-light);
  color: var(--text);
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: var(--fw-light);
}
.hero__theme {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: var(--fw-light);
  color: var(--text-body);
  line-height: 1.42;
  max-width: 34ch;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.2rem;
  padding-top: 0.4rem;
}
.hero__meta-item { display: grid; gap: 0.28rem; }
.hero__meta-item dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--fw-semi);
}
.hero__meta-item dd {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: var(--fw-medium);
  margin: 0;
}
.hero__panel { display: grid; gap: 1.35rem; padding: clamp(1.3rem, 2.6vw, 2rem); }
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  color: var(--text-faint);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scroll-hint 2.4s var(--e-in-out) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (max-height: 720px) { .hero__scroll { display: none; } }

/* Rotating word — "negotiation / consensus / statecraft / diplomacy".
   The box is sized to the longest word and clips tightly, so the outgoing
   word is gone before it can collide with the line above. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.16em;
  line-height: 1.16;
  color: var(--accent);
}
.rotator > span {
  grid-area: 1 / 1;
  line-height: 1.16;
  opacity: 0;
  transform: translateY(112%);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out-expo);
  white-space: nowrap;
}
.rotator > span.is-in { opacity: 1; transform: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-112%); }

/* ==========================================================================
   WORLD MAP (dot-matrix, equirectangular)
   ========================================================================== */
.worldmap {
  position: relative;
  width: 100%;
}
.worldmap__canvas { width: 100%; height: auto; display: block; overflow: visible; }
.wm-dot { fill: var(--a-maroon-16); transition: fill var(--d-base) var(--e-out); }
.on-dark .wm-dot { fill: rgba(239,221,198,.16); }

.wm-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.wm-node__halo {
  fill: var(--a-maroon-16);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.wm-node__pin {
  fill: var(--maroon-600);
  stroke: var(--parchment-100);
  stroke-width: 0.9;
  transition: r var(--d-base) var(--e-spring), fill var(--d-base) var(--e-out);
}
.on-dark .wm-node__pin { fill: var(--parchment-300); stroke: var(--maroon-800); }
.wm-node:hover .wm-node__halo, .wm-node.is-active .wm-node__halo { opacity: 1; }
.wm-node:hover .wm-node__pin, .wm-node.is-active .wm-node__pin { r: 5.2; }
.wm-node.is-org .wm-node__pin { fill: var(--maroon-400); }

/* Pulsing ring on the host node */
.wm-host__ring {
  fill: none;
  stroke: var(--maroon-600);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-ping 3.4s var(--e-out) infinite;
}
.wm-host__ring:nth-of-type(2) { animation-delay: 1.1s; }
.wm-host__ring:nth-of-type(3) { animation-delay: 2.2s; }
@keyframes wm-ping {
  0%   { opacity: 0.7; transform: scale(0.35); }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* Great-circle arcs converging on the host */
.wm-arc {
  fill: none;
  stroke: var(--a-maroon-28);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: wm-draw 3.2s var(--e-out) forwards;
}
.on-dark .wm-arc { stroke: rgba(239,221,198,.3); }
@keyframes wm-draw { to { stroke-dashoffset: 0; } }

/* Map info panel */
/* Anchored bottom-left, over the empty South Pacific, so the panel never
   covers a landmass or a delegation pin. */
.wm-info {
  position: absolute;
  bottom: clamp(0.4rem, 1.6vw, 1.2rem);
  left: clamp(0.4rem, 1.6vw, 1.2rem);
  width: min(300px, calc(100% - 2rem));
  padding: 1.15rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--a-ivory-80);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--a-ivory-62);
  box-shadow: var(--sh-lg);
  display: grid;
  gap: 0.55rem;
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out-expo);
}
.wm-info.is-idle { opacity: 0.86; }
.wm-info__name { font-family: var(--font-display); font-size: 1.42rem; color: var(--text); line-height: 1.14; }
.wm-info__grid { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; font-size: var(--fs-xs); }
.wm-info__grid dt { color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; padding-top: 2px; }
.wm-info__grid dd { margin: 0; color: var(--text-body); font-weight: var(--fw-medium); }
@media (max-width: 700px) { .wm-info { position: static; width: 100%; margin-bottom: 1rem; } }

.wm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.wm-legend span { display: inline-flex; align-items: center; gap: 0.5em; }
.wm-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* ==========================================================================
   HOME — tracks, agenda, feature strip
   ========================================================================== */
.track-list { display: grid; }
.track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.3rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: color var(--d-base) var(--e-out);
}
.track:last-child { border-bottom: 1px solid var(--line); }
.track::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  background: var(--a-maroon-06);
  opacity: 0;
  border-radius: var(--r-md);
  transition: opacity var(--d-base) var(--e-out);
  z-index: -1;
}
.track:hover::before { opacity: 1; }
.track__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.1em;
  padding-top: 0.15rem;
  align-self: start;
}
.track__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--text);
  font-weight: var(--fw-light);
  line-height: 1.2;
  transition: transform var(--d-slow) var(--e-out-expo);
}
.track:hover .track__title { transform: translateX(8px); }
.track__desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.4rem; max-width: 68ch; }
.track__go {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex: none;
  transition: all var(--d-base) var(--e-out);
}
.track:hover .track__go { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: rotate(-45deg); }
@media (max-width: 620px) {
  .track { grid-template-columns: auto minmax(0, 1fr); }
  .track__go { display: none; }
}

/* Feature: theme statement over dark ground */
.theme-band {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: clamp(2.6rem, 7vw, 6.5rem) clamp(1.6rem, 5vw, 5rem);
  background:
    radial-gradient(100% 140% at 8% 0%, var(--maroon-600), transparent 55%),
    linear-gradient(150deg, var(--maroon-800), var(--maroon-950) 70%);
}
.theme-band__glyph {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(48%, 420px);
  opacity: 0.16;
  color: var(--parchment-300);
  pointer-events: none;
}
.theme-band > .shell { position: relative; z-index: 1; }

/* ==========================================================================
   COMMITTEES
   ========================================================================== */
.cmt-card {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-slow) var(--e-out-expo), box-shadow var(--d-slow) var(--e-out), border-color var(--d-base) var(--e-out);
}
.cmt-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--line-accent); }
.cmt-card__seal {
  position: absolute;
  right: -34px; top: -34px;
  width: 148px; height: 148px;
  color: var(--accent);
  opacity: 0.06;
  pointer-events: none;
  transition: transform var(--d-cine) var(--e-out-expo), opacity var(--d-slow) var(--e-out);
}
.cmt-card:hover .cmt-card__seal { transform: rotate(28deg) scale(1.12); opacity: 0.12; }
.cmt-card__abbr {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.cmt-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.1vw, 1.72rem);
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cmt-card__agenda {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.44;
  padding-left: 0.95rem;
  border-left: 2px solid var(--line-accent);
}
.cmt-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.cmt-fact { display: grid; gap: 0.15rem; }
.cmt-fact dt { font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-faint); font-weight: var(--fw-semi); }
.cmt-fact dd { margin: 0; font-size: var(--fs-xs); color: var(--text); font-weight: var(--fw-semi); }

.difficulty { display: inline-flex; gap: 3px; align-items: center; }
.difficulty i {
  width: 16px; height: 3px;
  border-radius: 2px;
  background: var(--a-maroon-16);
  display: block;
}
.difficulty i.is-on { background: var(--accent); }

/* ==========================================================================
   COUNTRY MATRIX
   ========================================================================== */
.matrix-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--r-md);
  background: var(--a-ivory-45);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--a-ivory-62);
  box-shadow: var(--sh-sm);
  position: sticky;
  top: calc(var(--nav-h) + 0.6rem);
  z-index: var(--z-sticky);
}
@media (max-width: 860px) {
  .matrix-toolbar { grid-template-columns: minmax(0, 1fr); position: static; }
}
.matrix-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; }
@media (max-width: 860px) { .matrix-filters { justify-content: flex-start; } }

.matrix-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.matrix-summary strong { color: var(--accent); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* The delegation column stays put while the committees scroll past it. */
.table--matrix { min-width: 960px; }
.table--matrix th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-weight: var(--fw-book);
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.table--matrix tbody tr:hover th[scope="row"] { background: var(--parchment-100); }
.table--matrix thead th:first-child {
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--a-ink-12);
}
.table--matrix td { text-align: left; white-space: nowrap; }

/* Card view for narrow screens */
.matrix-cards { display: grid; gap: 0.75rem; }
.mx-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.mx-card:hover { border-color: var(--line-accent); transform: translateX(3px); }
.mx-card__name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.mx-card__meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   SCHEDULE
   ========================================================================== */
.day-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0.75rem; }
.day-btn {
  display: grid;
  gap: 0.3rem;
  padding: 1.15rem 1.3rem;
  text-align: left;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--a-ivory-45);
  cursor: pointer;
  transition: all var(--d-base) var(--e-out);
}
.day-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.day-btn[aria-selected="true"] {
  background: var(--maroon-600);
  border-color: var(--maroon-600);
  box-shadow: var(--sh-md);
}
.day-btn__k {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--fw-semi);
}
.day-btn__d { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); line-height: 1.1; }
.day-btn__n { font-size: var(--fs-xs); color: var(--text-muted); }
.day-btn[aria-selected="true"] .day-btn__k { color: rgba(239,221,198,.62); }
.day-btn[aria-selected="true"] .day-btn__d { color: var(--parchment-100); }
.day-btn[aria-selected="true"] .day-btn__n { color: rgba(239,221,198,.75); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.gal-item { position: relative; grid-column: span 4; cursor: pointer; }
.gal-item--wide { grid-column: span 6; }
.gal-item--full { grid-column: span 8; }
.gal-item--tall { grid-column: span 4; grid-row: span 2; }
@media (max-width: 900px) {
  .gal-item, .gal-item--wide, .gal-item--full, .gal-item--tall { grid-column: span 6; grid-row: auto; }
}
@media (max-width: 560px) {
  .gal-item, .gal-item--wide, .gal-item--full, .gal-item--tall { grid-column: span 12; }
}
/* Both dimensions are pinned so the plate fills its cell. Height alone would
   let aspect-ratio derive a width from a tall row and burst the grid. */
.gal-item { min-width: 0; }
.gal-item .plate { height: 100%; width: 100%; }
.gal-item__zoom {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--a-ivory-25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--a-ivory-25);
  color: var(--parchment-100);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--d-base) var(--e-spring);
}
.gal-item:hover .gal-item__zoom { opacity: 1; transform: none; }

.lightbox__frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  background: var(--maroon-900);
}
.lightbox__frame img, .lightbox__frame svg { width: 100%; height: 100%; object-fit: cover; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--a-ivory-25);
  background: var(--a-ivory-25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--parchment-100);
  cursor: pointer;
  z-index: 4;
  transition: all var(--d-fast) var(--e-out);
}
.lightbox__nav:hover { background: var(--parchment-200); color: var(--maroon-800); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

/* ==========================================================================
   REGISTRATION
   ========================================================================== */
.reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1000px) { .reg-layout { grid-template-columns: minmax(0, 1fr); } }
.reg-aside { position: sticky; top: calc(var(--nav-h) + 1.6rem); display: grid; gap: 1rem; }
@media (max-width: 1000px) { .reg-aside { position: static; } }

.fee-card {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: all var(--d-slow) var(--e-out-expo);
}
.fee-card--featured {
  background: linear-gradient(155deg, var(--maroon-700), var(--maroon-900));
  border-color: var(--maroon-800);
  color: var(--parchment-200);
  box-shadow: var(--sh-lg);
}
.fee-card--featured .fee-card__name,
.fee-card--featured .fee-card__price { color: var(--parchment-100); }
.fee-card--featured .fee-card__list li { color: rgba(239, 221, 198,.82); }
.fee-card--featured .fee-card__list li::before { border-color: var(--parchment-300); }
.fee-card__name { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text); line-height: 1.15; }
.fee-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fee-card--featured .fee-card__price { color: var(--parchment-100); }
.fee-card__price small { font-size: 0.4em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-sans); margin-left: 0.4em; }
.fee-card--featured .fee-card__price small { color: rgba(239,221,198,.65); }
.fee-card__list { display: grid; gap: 0.6rem; font-size: var(--fs-sm); }
.fee-card__list li { position: relative; padding-left: 1.5rem; color: var(--text-body); }
.fee-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.fee-ribbon {
  position: absolute;
  top: 1.2rem; right: -2.6rem;
  transform: rotate(38deg);
  background: var(--parchment-300);
  color: var(--maroon-800);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 3rem;
}

.reg-step[hidden] { display: none; }
.reg-summary { display: grid; gap: 0.7rem; }
.reg-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.reg-summary__row dt { color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.reg-summary__row dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); text-align: right; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-card {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: all var(--d-base) var(--e-out);
}
.contact-card:hover { border-color: var(--line-accent); box-shadow: var(--sh-md); transform: translateY(-3px); }
.contact-card__k {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-semi);
}
.contact-card__v { font-size: var(--fs-body); color: var(--text); font-weight: var(--fw-medium); word-break: break-word; }

.venue-map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--parchment-200), var(--parchment-400));
}
.venue-map svg { width: 100%; height: 100%; }
.venue-pin { animation: pin-drop 1.1s var(--e-spring) both; transform-box: fill-box; transform-origin: bottom center; }
@keyframes pin-drop {
  0%   { transform: translateY(-42px) scale(0.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ==========================================================================
   DESIGN SYSTEM / WIREFRAMES
   ========================================================================== */
.swatch {
  display: grid;
  gap: 0.65rem;
}
.swatch__chip {
  height: 128px;
  border-radius: var(--r-md);
  border: 1px solid var(--a-ink-12);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}
.swatch__chip span {
  position: absolute;
  left: 0.75rem; bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-xs);
  background: var(--a-ivory-80);
  color: var(--ink-800);
}
.swatch__meta { display: grid; gap: 0.15rem; }
.swatch__name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.swatch__use { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }

.ds-block {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border: 1px dashed var(--line-accent);
  border-radius: var(--r-md);
  background: var(--a-ivory-45);
}
.ds-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: block;
}
.ds-scale-row {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ds-scale-row__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  min-width: 152px;
  flex: none;
}
.ds-space-bar { height: 22px; background: var(--a-maroon-16); border-radius: 3px; }

/* Wireframe blueprint */
.wire {
  border: 1px solid var(--a-maroon-28);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--a-maroon-06) 23px, var(--a-maroon-06) 24px),
    var(--parchment-100);
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
}
.wb {
  border: 1px solid var(--a-maroon-28);
  border-radius: var(--r-xs);
  background: var(--a-ivory-45);
  display: grid;
  place-items: center;
  padding: 0.5rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maroon-600);
  text-align: center;
  min-height: 34px;
}
.wb--solid { background: var(--a-maroon-16); }
.wb--ghost { background: transparent; border-style: dashed; color: var(--maroon-400); }
.wb--tall { min-height: 100px; }
.wb--xtall { min-height: 168px; }
.wire__row { display: grid; gap: 0.6rem; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* User journey flow */
.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
  counter-reset: jstep;
}
.jstep {
  position: relative;
  padding: 1.4rem 1.2rem 1.4rem 1.4rem;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--surface);
  display: grid;
  gap: 0.45rem;
  align-content: start;
}
.jstep:last-child { border-right: 1px solid var(--line); }
.jstep::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  z-index: 2;
}
.jstep:last-child::after { display: none; }
.jstep__n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.jstep__t { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.jstep__d { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
@media (max-width: 760px) {
  .jstep { border-right: 1px solid var(--line); border-bottom: 0; }
  .jstep:last-child { border-bottom: 1px solid var(--line); }
  .jstep::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%) rotate(135deg); }
}

/* Code sample */
.code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.75;
  background: var(--maroon-950);
  color: var(--parchment-300);
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-sm);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code b { color: var(--maroon-200); font-weight: var(--fw-book); }
.code i { color: rgba(239,221,198,.45); font-style: normal; }

/* Do / Don't */
.dodont { display: grid; gap: 0.7rem; padding: 1.15rem 1.3rem; border-radius: var(--r-sm); border: 1px solid var(--line); }
.dodont--do { border-color: var(--line-accent); background: var(--a-maroon-06); }
.dodont--dont { border-style: dashed; }
.dodont__k { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--fw-bold); }
.dodont--do .dodont__k { color: var(--accent); }
.dodont--dont .dodont__k { color: var(--text-faint); }
.dodont ul { display: grid; gap: 0.45rem; font-size: var(--fs-xs); color: var(--text-body); }
.dodont li { padding-left: 1.1rem; position: relative; }
.dodont li::before { content: "—"; position: absolute; left: 0; color: var(--text-faint); }

/* ==========================================================================
   404 / utility page
   ========================================================================== */
.oops {
  min-height: 84svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--nav-h);
}

/* ==========================================================================
   MODEL G20 2026 — CONFERENCE COMPONENTS
   Added in the 2026 revision. Interior pages run a solid ground and a
   quieter surface treatment than the cover page, which keeps its own
   animated field.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. SOLID GROUND — interior pages drop the gradient wash and the grain
   -------------------------------------------------------------------------- */
body::before {
  background: var(--parchment-300);
}
body::after { display: none; }

.shell--narrow { max-width: var(--container-text); }

.section-head__lead { max-width: 62ch; }
.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}

/* --------------------------------------------------------------------------
   B. NAV — Registration reads as the call to action
   -------------------------------------------------------------------------- */
.nav-link--cta {
  color: var(--maroon-600);
  font-weight: var(--fw-medium);
}
.nav-link--cta::after { background: var(--maroon-600); }

/* --------------------------------------------------------------------------
   C. DIFFICULTY BADGES + LEGEND
   -------------------------------------------------------------------------- */
.badge--beginner     { color: var(--maroon-600); border-color: var(--a-maroon-28); }
.badge--intermediate { color: var(--maroon-700); border-color: var(--a-maroon-28); background: var(--a-maroon-06); }
.badge--advanced     { background: var(--maroon-600); border-color: var(--maroon-600); color: var(--parchment-100); }
/* --------------------------------------------------------------------------
   D. SCHEDULE — facts and the notice
   -------------------------------------------------------------------------- */
.fact-row {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.fact {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.fact__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--maroon-600);
}
.fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.notice {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(2.4rem, 6vw, 4.2rem) clamp(1.5rem, 5vw, 3.5rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.notice__seal {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid var(--a-maroon-28);
  color: var(--maroon-600);
}
.notice__seal svg { width: 26px; height: 26px; }
.notice__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--maroon-600);
}
.notice__body {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-book);
  line-height: var(--lh-snug);
  max-width: 24ch;
}
.notice__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 52ch;
  line-height: var(--lh-relaxed);
}

.countdown-block {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.countdown-block__label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   E. ABOUT — why cards, reasons, comparison
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.why-card {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.why-card:hover { transform: translateY(-5px); border-color: var(--line-accent); }
.why-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--a-maroon-06);
  color: var(--maroon-600);
}
.why-card__icon svg { width: 25px; height: 25px; }
.why-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.reason-list { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.reason:last-child { border-bottom: 0; padding-bottom: 0; }
.reason__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--maroon-600);
  padding-top: 0.25em;
}
.reason__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}

.compare {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.compare__head, .compare__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.8rem);
  align-items: center;
}
.compare__head {
  background: var(--a-maroon-06);
  border-bottom: 1px solid var(--line-strong);
}
.compare__row + .compare__row,
.compare__head + .compare__row { border-top: 1px solid var(--line); }
.compare__row:nth-child(even) { background: var(--a-ink-04); }
.compare__aspect {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.compare__col { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.compare__head .compare__col {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: none;
}
.compare__col--muted { color: var(--text-muted); }
.compare__col--ours  { color: var(--maroon-700); font-weight: var(--fw-medium); }
.compare__head .compare__col--ours { color: var(--maroon-600); }

@media (max-width: 760px) {
  .compare__head { display: none; }
  .compare__row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
    padding-block: var(--sp-4);
  }
  .compare__col--muted::before { content: "Traditional MUN — "; color: var(--text-faint); }
  .compare__col--ours::before  { content: "Model G20 — "; color: var(--maroon-500); }
}

/* --------------------------------------------------------------------------
   F. PEOPLE — Secretariat and Organising Committee
   -------------------------------------------------------------------------- */
.team-block + .team-block { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.team-block__head {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.people-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.person__portrait {
  width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--parchment-200);
  border: 1px solid var(--a-maroon-16);
}
.person__photo { width: 100%; height: 100%; object-fit: cover; }
.person__plate {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  color: var(--maroon-600);
  opacity: 0.55;
}
.person__body { display: grid; gap: var(--sp-1); }
.person__abbr {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--maroon-600);
}
.person__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.person__office { font-size: var(--fs-sm); color: var(--text-body); }
.person__remit {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-1);
}

/* --------------------------------------------------------------------------
   G. REGISTRATION
   -------------------------------------------------------------------------- */
.reg-hero {
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem);
  background: var(--a-maroon-06);
  border-bottom: 1px solid var(--line);
}
.reg-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  /* The card runs the full height of the headline column so the two panels
     read as a matched pair rather than one floating low against the other. */
  align-items: stretch;
}
.reg-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);   /* matches every other page title */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
/* Each headline line sits in its own .reveal-mask, and every mask carries
   0.06em of padding top and bottom so descenders survive overflow:hidden.
   Between two masks that doubles up, which opened a gap the naturally
   wrapped lines inside a single mask never had. Pull it back so every line
   in the headline is spaced identically. */
.reg-hero__title .reveal-mask + .reveal-mask { margin-top: -0.12em; }
.reg-hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.reg-hero__facts div { display: grid; gap: 2px; }
/* [hidden] alone loses to the rule above on specificity. */
.reg-hero__facts div[hidden] { display: none; }
/* Pinned to the foot of the card, which is why the card is stretched. */
/* Set apart from the four plain facts above it: its own tinted panel with the
   maroon marker edge used elsewhere for money and key rows, so the price is
   read as a separate statement rather than a fifth fact. */
.reg-hero__fee {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--a-maroon-28);
  border-left: 3px solid var(--maroon-600);
  border-radius: var(--r-sm);
  background: var(--a-maroon-06);
}
/* .reg-hero__facts b sits further down this file at equal specificity and was
   winning on order, so the price rendered at fact size. Scoped one level up. */
.reg-hero__facts .reg-hero__fee b {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--maroon-600);
}
.reg-hero__facts .reg-hero__fee small {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}
.reg-hero__fee span { color: var(--maroon-800); }
.reg-hero__facts span {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--maroon-600);
}
.reg-hero__facts b {
  font-weight: var(--fw-book);
  font-size: var(--fs-sm);
}
@media (max-width: 860px) {
  .reg-hero__grid { grid-template-columns: 1fr; }
  .reg-hero__fee { margin-top: var(--sp-2); }
}
/* section--flush-top removes all padding, which butted the form card
   straight up against the hero band. Give it back a little air. */
.page-register .section--flush-top { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

.steps-row {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.step-card {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.step-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--maroon-600);
}
.step-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.reg-card {
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.reg-form__head {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.field-grid {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.field--wide { grid-column: 1 / -1; }
.req { color: var(--maroon-600); }
.opt {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: 0.4em;
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-1);
}
.reg-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.reg-form__foot .t-xs { max-width: 44ch; }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.form-error-note {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--a-maroon-28);
  border-left: 3px solid var(--maroon-600);
  border-radius: var(--r-sm);
  background: var(--a-maroon-06);
  font-size: var(--fs-sm);
  color: var(--maroon-800);
}
.form-error-note a { text-decoration: underline; }

.reg-done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(1rem, 3vw, 2rem) 0;
}
.reg-done__seal {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--a-maroon-28);
  background: var(--a-maroon-06);
  color: var(--maroon-600);
}
.reg-done__seal svg { width: 30px; height: 30px; }
.reg-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   H. CONTACT — cards, socials on light, the map
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.contact-card {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--line-accent); }
.contact-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--a-maroon-06);
  color: var(--maroon-600);
  margin-bottom: var(--sp-2);
}
.contact-card__icon svg { width: 23px; height: 23px; }
.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--maroon-700);
  overflow-wrap: anywhere;
}
a.contact-card__value:hover { color: var(--maroon-600); text-decoration: underline; }
.contact-card__value--plain { color: var(--text-body); font-size: var(--fs-sm); font-weight: var(--fw-book); line-height: var(--lh-normal); }

/* Social links on a light ground (the footer keeps the dark treatment). */
.contact-socials { display: grid; gap: var(--sp-2); }
.contact-socials .social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  width: auto; height: auto;
  border-radius: var(--r-pill);
  border-color: var(--line);
  color: var(--text-body);
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  font-size: var(--fs-xs);
}
.contact-socials .social:hover {
  background: var(--maroon-600);
  border-color: var(--maroon-600);
  color: var(--parchment-100);
  transform: translateX(3px);
}
.footer-socials { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer-socials .social span { display: none; }

.map-frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-muted);
}
.map-frame iframe {
  width: 100%;
  aspect-ratio: 21 / 8;
  min-height: 300px;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--d-slow) var(--e-out);
}
.map-frame:hover iframe { filter: grayscale(0); }
.map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
@media (max-width: 700px) { .map-frame iframe { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------------------
   I. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.cta-band__inner > .stack-4 { flex: 1 1 32ch; max-width: 56ch; }
.cta-band__inner > .btn,
.cta-band__actions { margin-left: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.eyebrow--invert { color: var(--parchment-300); }

.footer-brand__blurb { color: rgba(239, 221, 198,.72); margin-top: 1.4rem; max-width: 38ch; }
.footer-brand__partners { color: rgba(239, 221, 198,.5); margin-top: 0.7rem; max-width: 38ch; }
.footer-socials { margin-top: 1.6rem; }
/* Two plain lines now that the repeated "Conference" label is gone, so they
   sit as a block under the column heading rather than as spaced-out rows. */
.footer-contact { display: grid; gap: var(--sp-1); }
.footer-contact p { margin: 0; font-size: var(--fs-sm); color: rgba(239, 221, 198,.78); line-height: var(--lh-normal); }
.footer-contact__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(239,221,198,.5);
  margin-bottom: 2px;
}
.footer-contact a {
  color: var(--parchment-300);
  border-bottom: 1px solid rgba(239,221,198,.3);
}
.footer-contact a:hover { border-bottom-color: var(--parchment-300); }

/* Email and location stand where the lockup used to, side by side. */
.footer-reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
}
.footer-reach__col {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(239, 221, 198, .78);
  line-height: var(--lh-normal);
}
.footer-reach__col a { color: var(--parchment-300); border-bottom: 1px solid rgba(239,221,198,.3); }
.footer-reach__col a:hover { border-bottom-color: var(--parchment-300); }
.footer-contact a:hover { border-bottom-color: var(--parchment-200); }
.footer-map {
  border: 1px solid rgba(239,221,198,.2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.footer-map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 170px;
  border: 0;
  display: block;
  filter: grayscale(1) invert(0.9) contrast(0.85);
  opacity: 0.85;
}
.footer-map__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(239, 221, 198,.72);
}
.footer-map__link:hover { color: var(--parchment-100); }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-bottom__links a { color: rgba(239, 221, 198,.58); }
.footer-bottom__links a:hover { color: var(--parchment-100); }

@media (prefers-reduced-motion: reduce) {
  .cmte, .why-card, .contact-card, .fact, .person, .step-card { transition: none; }
  .map-frame iframe, .footer-map iframe { transition: none; }
}

/* --------------------------------------------------------------------------
   J. PROSE BOXES — one box per section on the About page
   -------------------------------------------------------------------------- */
.prose-box {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  padding: clamp(2rem, 5vw, 3.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.prose-box--accent {
  background: var(--a-maroon-06);
  border-color: var(--a-maroon-16);
}
.prose-box__index {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.2rem);
  right: clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--maroon-600);
  opacity: 0.5;
}
.prose-box__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  /* Was --fw-medium: the only Medium section heading on the site, against
     Light on Committees and Registration. */
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.prose-box__head { align-self: start; }
.prose-box__body > p + p { margin-top: var(--sp-4); }
@media (min-width: 900px) {
  .prose-box { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .prose-box__body > p:first-child { margin-top: 0; }
}
.prose-box__standfirst {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--maroon-600);
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--a-maroon-28);
  max-width: 42ch;
}
.prose-box p:not(.prose-box__standfirst) {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  max-width: 68ch;
}

/* Four across, so the Secretariat reads as one rank */
.people-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); max-width: 900px; }
@media (min-width: 1000px) { .people-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Team ranks -----------------------------------------------------------
   A grid column would strand a single card on the left, so each rank is a
   centred flex row instead. Cap the width to choose how many sit per line:
   the six non-head members read as two ranks of three, not four-and-two. */
.people-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  margin-inline: auto;
}
.people-row > .person { flex: 0 1 232px; }
.people-row + .people-row { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
.people-row--lead { max-width: 264px; }
.people-row--2    { max-width: 520px; }
.people-row--3    { max-width: 760px; }
.people-row--4    { max-width: 1024px; }
@media (max-width: 560px) { .people-row > .person { flex: 1 1 100%; } }

/* Team cards are a circle, a name and a position — nothing else */
.person {
  justify-items: center;
  text-align: center;
  gap: var(--sp-2);
}
.person__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}
.person__office {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--maroon-600);
}
.cta-band__lead { color: rgba(255, 255, 255, 0.82); max-width: 52ch; }

/* The CTA band is a solid maroon field: buttons on it are white, or white-outlined. */
.cta-band .btn--ghost {
  --btn-fg: var(--ivory);
  --btn-brd: var(--a-ivory-45);
}
.cta-band .btn--ghost::before { background: var(--ivory); }
.cta-band .btn--ghost:hover,
.cta-band .btn--ghost:focus-visible { color: var(--maroon-600); border-color: var(--ivory); }
.cta-band .eyebrow--invert::before { background: var(--a-ivory-45); }

/* --------------------------------------------------------------------------
   K. THE OFFICIAL LOCKUP
   The logo already reads "The School of Raya · Model G20", so it stands on
   its own in the bar — no wordmark text beside it. The artwork is drawn on
   the parchment ground with a transparent surround, so it needs no plate.
   -------------------------------------------------------------------------- */
.crest__logo {
  display: block;
  height: 62px;
  width: auto;
}
.crest { gap: 0; }
.crest:hover .crest__logo { transform: scale(1.04); }
.crest__logo { transition: transform var(--d-base) var(--e-out); }
@media (max-width: 900px) { .crest__logo { height: 52px; } }
@media (max-width: 520px) { .crest__logo { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .crest__logo { transition: none; } }

/* --------------------------------------------------------------------------
   L. ITINERARY
   -------------------------------------------------------------------------- */
.day + .day { margin-top: clamp(2.4rem, 6vw, 4rem); }
.day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
.day__index {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--maroon-600);
}
.day__date {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.slots { display: grid; gap: 2px; }
.slot {
  display: grid;
  grid-template-columns: minmax(118px, 150px) 1fr;
  gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2vw, 1.4rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.slot:hover { border-color: var(--line-accent); transform: translateX(3px); }
.slot--break { background: var(--a-ink-04); border-style: dashed; }
.slot--key { border-left: 3px solid var(--maroon-600); }
/* Declared AFTER .slot--key so nothing downstream can repaint it: the hover
   shorthand above touches all four borders, and the maroon marker has to
   survive that identically on every row of both days. */
.slot--key:hover,
.slot--key:focus-within { border-left: 3px solid var(--maroon-600); }
.slot__time {
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--maroon-600);
  line-height: 1.5;
}
.slot__time i {
  font-style: normal;
  color: var(--text-faint);
}
.slot__time i::before { content: "until "; }
.slot__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.slot--break .slot__title { font-weight: var(--fw-book); color: var(--text-muted); }
.slot__note {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: calc(var(--sp-2) * -1);
}
@media (max-width: 560px) {
  .slot { grid-template-columns: 1fr; gap: var(--sp-1); }
  .slot__time { display: flex; gap: 0.4em; }
  .slot__note { grid-column: 1; margin-top: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) { .slot { transition: none; } }

/* --------------------------------------------------------------------------
   M. COMMITTEE BANDS
   Full-bleed alternating bands, torn-paper edge between each. The edge is one
   seamless SVG tile — its left and right ends sit at the same height, so it
   repeats across any width without a visible seam. Regenerate it by changing
   the seed in the note in README; there is no image file to manage.
   -------------------------------------------------------------------------- */
.cmte-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 82vh;
  gap: clamp(1.6rem, 4vh, 2.6rem);
  padding: 14vh 7vw 18vh;
}
.cmte-intro__pill {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--maroon-600);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-indent: var(--ls-eyebrow);
  text-transform: uppercase;
}
.cmte-intro__title {
  font-family: var(--font-display);
  /* Was clamp(2.3rem, 7.4vw, 6.2rem). Same floor problem as the cover
     headline: below ~500px the 2.3rem minimum took over and the page opened on
     37px type. This curve runs continuously from ~47px on a phone to the same
     6.2rem ceiling on a desktop, with no step at any width. */
  font-size: clamp(2.6rem, 1.73rem + 4.95vw, 6.2rem);
  /* Was --fw-bold. Every other page title on the site is Light, and Helvetica
     Bold beside Helvetica Light reads as a different face, not a heavier one. */
  font-weight: var(--fw-light);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.cmte-intro__title em {
  font-style: italic;
  color: var(--maroon-600);
}
@media (max-width: 620px) {
  /* Tighter leading and a narrower measure so the larger phone type still
     breaks into balanced lines. */
  .cmte-intro__title { line-height: 1.04; max-width: 13ch; }
}

.bands { display: block; }

.band {
  position: relative;
  padding-block: clamp(4.5rem, 13vh, 9rem) clamp(3.5rem, 10vh, 7rem);
  /* pull the band out to the full viewport width, whatever container it is in */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* The band's own top edge, overhanging into whatever sits above it. Drawn
   wider than the band so the roughening filter cannot expose a corner. */
.band__tear {
  position: absolute;
  top: -88px;
  left: -3%;
  width: 106%;
  /* the global img/svg reset caps media at 100%, which would pull the crest
     3% short of the right edge and leave a straight sliver showing */
  max-width: none;
  height: 120px;
  display: block;
  pointer-events: none;
}
@media (max-width: 640px) { .band__tear { top: -58px; height: 80px; } }
.band--dark { background: var(--maroon-600); }
.band--light { background: var(--parchment-300); }

.band__inner {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.band__head {
  /* Flex, not grid: a grid track of `minmax(0, 22ch)` could be squeezed below
     the longest word and broke titles mid-word (Infrastruct/ure). A flex item
     will not shrink past its min-content, so the title keeps its word breaks
     and the pill wraps to the next line instead. The 22ch basis is what makes
     a short name (AI Working Group) hold the same width as a long one, so
     every title and every pill sits on the same two verticals. */
  /* .band__inner is a grid with justify-items:center, so this box was sized to
     its own content — narrower for a short title, which pushed the pill onto a
     second line for AI Working Group alone. Full width, contents centred. */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vw, 1.4rem);
}
.band__name {
  flex: 0 1 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.6vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.band__level {
  flex: none;
  /* One width for BEGINNER, INTERMEDIATE and ADVANCED alike, or the pair
     re-centres and the titles drift again band to band. */
  min-width: 14em;   /* wide enough for INTERMEDIATE, so all three match */
  text-align: center;
  padding: 0.5rem 1.05rem;
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-indent: var(--ls-eyebrow);
  text-transform: uppercase;
}
.band__agenda {
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  font-style: italic;
  line-height: 1.5;
  max-width: 58ch;
}

.band--light .band__name  { color: var(--text); }
.band--light .band__level { color: var(--maroon-600); }
.band--light .band__agenda{ color: var(--text-body); }
.band--dark  .band__name  { color: var(--parchment-300); }
.band--dark  .band__level { color: var(--parchment-300); }
.band--dark  .band__agenda{ color: rgba(239, 221, 198, 0.86); }

@media (max-width: 620px) {
  .band__head { flex-direction: column; align-items: center; gap: var(--sp-3); }
  .band__name { flex: 0 1 auto; }
}

/* ══════════════════════════════════════════ REGISTRATION PAYMENT
   Added with the Razorpay flow. Nothing above was changed. Uses only the
   four project colours through the existing tokens — no new palette. */

.reg-fee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--a-maroon-28);
  border-left: 3px solid var(--maroon-600);
  border-radius: var(--r-sm);
  background: var(--a-maroon-06);
  font-size: var(--fs-sm);
  color: var(--maroon-800);
}
.reg-fee b {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1;
}
.reg-fee__note {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* The receipt. Two columns on anything wider than a phone, stacked below,
   because a payment ID must never be truncated — it is the one string a
   delegate may have to read out to a bank. */
.receipt {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 30rem;
  margin: var(--sp-2) auto 0;
  text-align: left;
  border-top: 1px solid var(--line);
}
.receipt__row {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.receipt__row dt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.receipt__row dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: right;
  overflow-wrap: anywhere;
}
.receipt__key {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
@media (max-width: 30rem) {
  .receipt__row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .receipt__row dd { text-align: left; }
}

/* Pending and unverified reuse .reg-done wholesale and change only the seal,
   so an interrupted payment still looks like part of the same page. */
.reg-done--pending .reg-done__seal,
.reg-done--problem .reg-done__seal {
  border-style: dashed;
}
.reg-done--pending [data-slot="message"],
.reg-done--problem [data-slot="message"] {
  max-width: 52ch;
}

/* ══════════════════════════════════════════ SECRETARIAT DELEGATE LIST
   A dense table is the one place this site needs something other than the
   editorial rhythm of the public pages, but it stays inside the same four
   colours and the same tokens. */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.admin-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.admin-stat { display: grid; gap: 2px; }
.admin-stat span {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.admin-stat b {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1;
}
.admin-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.admin-tools .input { min-width: 14rem; }

/* Horizontal scroll rather than a squeezed table: ten columns will not fit
   a phone, and a truncated payment ID is worse than a swipe. */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.admin-table th,
.admin-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
.admin-table th button {
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.admin-table th button:hover { color: var(--maroon-600); }
.admin-table th button[data-active]::after {
  content: " ▲";
  font-size: 0.7em;
}
.admin-table th button[data-active="desc"]::after { content: " ▼"; }
.admin-table tbody tr:hover { background: var(--a-maroon-06); }
.admin-table .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.admin-table .t-faint { font-size: var(--fs-xs); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill--paid         { color: var(--maroon-600); background: var(--a-maroon-06); }
.pill--created      { color: var(--text-faint); }
.pill--failed,
.pill--needs-review { color: var(--maroon-800); background: var(--a-maroon-06); }