/* ==========================================================================
   CIDS design system - dark editorial, "The Chamber"
   One shared stylesheet for every page. Tokens first, then primitives,
   then page specific blocks. No build step: this file is served as is.

   Palette per docs/superpowers/specs/2026-08-29-cids-dark-editorial-redesign-design.md
   section 3.1. Nothing outside the :root block below may contain a raw
   colour value.
   ========================================================================== */

/* Metric-matched fallbacks so the swap from the local serif to the web font
   does not reflow text. Ratios measured against Times New Roman. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif'), local('Nimbus Roman');
  size-adjust: 92.7%;
}
@font-face {
  font-family: 'Spectral Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif'), local('Nimbus Roman');
  size-adjust: 106.1%;
}

:root {
  /* Ground and surfaces */
  --ink:            #0B0A0B;   /* page ground */
  --ink-wash:       #14090C;   /* hero and section washes, warm cast */
  --surface:        #1A0F12;   /* cards, panels */
  --surface-raised: #241419;   /* hover and elevated cards */
  --oxblood:        #4A1017;   /* retained from current brand */
  --oxblood-deep:   #2A0A0E;   /* retained from current brand */

  /* Accents */
  --brass:          #B4873C;   /* retained. The only accent. */
  --brass-light:    #DCBA80;   /* retained. Figures, hover. */
  --crimson:        #7A1220;   /* graphic and background only, never text */

  /* Text */
  --ivory:          #F4EFE7;   /* primary */
  --stone:          rgba(244, 239, 231, 0.66);  /* body copy */
  --stone-dim:      rgba(244, 239, 231, 0.45);  /* captions, meta */
  --stone-faint:    rgba(244, 239, 231, 0.28);  /* disabled, rules */

  /* State */
  --open:           #56C08F;   /* registration open. Passes AA on --ink. */
  --open-bg:        rgba(86, 192, 143, 0.12);
  --closed:         var(--stone-dim);
  --soon:           var(--brass-light);

  /* Rules and edges */
  --border:         rgba(180, 135, 60, 0.22);
  --border-strong:  rgba(180, 135, 60, 0.42);
  --border-quiet:   rgba(244, 239, 231, 0.10);

  /* Elevation and light */
  --shadow-card:    0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-panel:   0 32px 90px rgba(0, 0, 0, 0.7);
  --glow-brass:     0 0 0 1px var(--border-strong), 0 12px 40px rgba(180, 135, 60, 0.16);
  --wash-chamber:   radial-gradient(120% 90% at 78% 0%, rgba(122, 18, 32, 0.30), transparent 62%);
  --overlay-scrim:  linear-gradient(180deg, transparent, rgba(11, 10, 11, 0.92));
  --scrim:          rgba(11, 10, 11, 0.86);   /* modal backdrop */
  --quote-ghost:    rgba(220, 186, 128, 0.07); /* oversized hero quote mark */

  /* --- Hairline aliases -------------------------------------------------
     The rule-* names are what the component layer was written against
     when the site was a light paper theme. They are kept so those rules
     stay readable, and remapped onto the border tokens above. Prefer the
     border tokens for anything new. */
  --rule:           var(--border-quiet);
  --rule-soft:      var(--border-quiet);
  --rule-strong:    var(--border);
  --rule-dark:      var(--border);

  /* Type - spec section 3.2. Loaded weights are the only weights used:
     Cinzel 600, Cormorant 300/300i/400, Spectral 200/300/400, Mono 400/500.
     Asking for a weight that is not loaded would get a synthesised bold, so
     nothing in this file may exceed them. */
  --ceremonial: 'Cinzel', Georgia, 'Times New Roman', serif;
  --display:    'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --text:       'Spectral', 'Spectral Fallback', Georgia, 'Times New Roman', serif;
  --mono:       'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --page: 1280px;
  --gutter: 40px;
}


* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;

  /* A page shorter than the viewport - the calendar between terms, an
     empty state - must still seat the footer on the bottom edge. The
     footer takes the slack with margin-top, so the leftover space sits
     above it on the page ground rather than as a band beneath it.
     dvh second so mobile browser chrome does not overshoot. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Fixed-position overlays are out of flow, so they never become flex
   items of the body above. */
.site-footer { margin-top: auto; }

/* Must beat the layout rules below, which would otherwise revive a
   [hidden] element by giving it a display value. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brass); color: var(--ink); }
button { font: inherit; color: inherit; }

/* Spectral stops at 400, so the browser default bold on these would be a
   synthesised weight. Emphasis reads through colour instead. */
strong, b { font-weight: 400; color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.shell { max-width: var(--page); margin: 0 auto; }

.pad { padding-left: var(--gutter); padding-right: var(--gutter); }

.label {
  font-family: var(--ceremonial);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
}

.display { font-family: var(--display); font-weight: 300; letter-spacing: 0; }

/* The one expressive move in the type system: emphasis inside a display
   heading is Cormorant italic, coloured brass. Used once per page at most. */
h1 em, h2 em, .display em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}

.motion {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  text-wrap: pretty;
}

.prose { line-height: 1.8; color: var(--stone); text-wrap: pretty; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--ceremonial);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn--brass { background: var(--brass); color: var(--ink); }
.btn--brass:hover { background: var(--brass-light); }

.btn--ink { background: var(--surface-raised); color: var(--ivory); border-color: var(--border-strong); }
.btn--ink:hover { background: var(--oxblood); border-color: var(--oxblood); }

.btn--outline { border-color: var(--border-strong); color: var(--ivory); }
.btn--outline:hover { background: var(--surface-raised); border-color: var(--brass); }

.btn--outline-light { border-color: var(--stone-faint); color: var(--ivory); }
.btn--outline-light:hover { background: var(--ivory); color: var(--oxblood); }

.btn--sm { font-size: 11px; padding: 12px 22px; }

/* Quiet link with a brass underline */
.link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ivory);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.link:hover { color: var(--brass-light); }

.link--light {
  color: var(--brass-light);
  border-bottom-color: var(--border-strong);
}
.link--light:hover { color: var(--ivory); }

/* Level chips ------------------------------------------------------------ */

.chip {
  font-family: var(--ceremonial);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
}
.chip--brass { background: var(--brass); color: var(--ink); }
.chip--oxblood { background: var(--crimson); color: var(--ivory); }
.chip--outline { border: 1px solid var(--border-strong); color: var(--ivory); }
.chip--outline-light { border: 1px solid var(--border-strong); color: var(--brass-light); }
.chip--outline-dim { border: 1px solid var(--stone-faint); color: var(--stone); }

/* Logo on dark ----------------------------------------------------------- */

/* The crest artwork is solid black on transparency, so it disappears against
   the ink header, footer, drawer and the oxblood 404. brightness(0) flattens
   it to black whatever the source pixels are, invert(1) then takes it to pure
   white; the alpha channel is untouched, so the cut-out stays clean. */
.site-header__logo img,
.site-footer__brand img,
.site-footer--slim > .site-footer__inner > img,
.drawer__top img,
.notfound img {
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--gutter);
}

.site-header__logo img { height: 34px; width: auto; }

.site-nav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.site-nav a { color: var(--stone); padding-bottom: 2px; }
.site-nav a:hover { color: var(--brass-light); }
.site-nav a[aria-current='page'] {
  color: var(--brass-light);
  border-bottom: 1px solid var(--brass);
}

.site-header__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Live pill -------------------------------------------------------------- */

.live {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-strong);
  padding: 7px 13px;
}

.live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
  animation: cidsPulse 2s ease-in-out infinite;
}

.live__text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brass-light);
  white-space: nowrap;
}

.live--on .live__dot { background: var(--open); }

@keyframes cidsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .live__dot { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Live bar: the pill moved to its own row on small screens */
.live-bar { display: none; }

/* Mobile menu ------------------------------------------------------------ */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ivory); }
.burger span:last-child { width: 14px; background: var(--brass); }

.drawer {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 60;
  display: none;
  flex-direction: column;
  padding: 20px 16px 40px;
}
.drawer[data-open='true'] { display: flex; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 26px; width: auto; }

.drawer__close {
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  color: var(--ivory);
  font-size: 22px;
  line-height: 1;
}

.drawer nav { display: flex; flex-direction: column; margin-top: 28px; }
.drawer nav a {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.1;
  color: var(--ivory);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-dark);
}
.drawer nav a[aria-current='page'] { color: var(--brass-light); }
.drawer .btn { margin-top: 28px; text-align: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink-wash); border-top: 1px solid var(--border); }

.site-footer__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 52px var(--gutter) 34px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.site-footer__cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.site-footer__brand img { height: 38px; width: auto; align-self: flex-start; }
.site-footer__brand p { font-size: 14px; color: var(--stone-dim); }

.site-footer__links { display: flex; gap: 56px; flex-wrap: wrap; }
.site-footer__group { display: flex; flex-direction: column; gap: 11px; }
.site-footer__group span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--stone);
}
.site-footer__group a { font-size: 13px; color: var(--stone); }
.site-footer__group a:hover { color: var(--brass-light); }
.site-footer__group a.is-brass { color: var(--brass-light); }

.site-footer__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border-quiet);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--stone-dim);
}
.site-footer__made {
  color: var(--stone-dim);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.site-footer__made:hover { color: var(--brass-light); border-bottom-color: var(--brass); }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.hero {
  background-color: var(--ink-wash);
  background-image: var(--wash-chamber);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 76px var(--gutter) 68px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: end;
  position: relative;
}
.hero__quote-mark {
  position: absolute;
  top: -46px;
  right: 24px;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 336px;
  line-height: 1;
  color: var(--quote-ghost);
  pointer-events: none;
  user-select: none;
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--ivory);
}
.hero p { font-size: 16px; color: var(--stone); max-width: 460px; text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero__motion {
  border-left: 1px solid var(--border-strong);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__motion .label { color: var(--brass-light); }
.hero__motion p { font-size: 34px; color: var(--ivory); max-width: none; }

/* This week strip -------------------------------------------------------- */

.week { background: var(--ink-wash); }
.week__inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 34px; }

.week__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 0 18px;
  border-bottom: 1px solid var(--rule-dark);
}
.week__head h2 { font-family: var(--display); font-size: 38px; font-weight: 400; color: var(--ivory); }
.week__head-meta { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.week__tz { font-family: var(--mono); font-size: 11px; color: var(--stone); }

.week__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  border: 1px solid var(--rule-dark);
}
.week__card {
  padding: 24px;
  border-right: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.week__card:last-child { border-right: 0; }
.week__card.is-feature { background: var(--oxblood); box-shadow: var(--shadow-card); }
.week__card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.week__day { font-family: var(--display);
  font-weight: 400; font-size: 34px; color: var(--brass-light); line-height: 1; }
.week__name { font-size: 15px; font-weight: 400; letter-spacing: 0.2px; color: var(--ivory); }
.week__time { font-family: var(--mono); font-size: 12px; color: var(--stone); }
.week__card .link { margin-top: 4px; align-self: flex-start; }

/* About ------------------------------------------------------------------ */

.about {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px var(--gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.about__lead { display: flex; flex-direction: column; gap: 20px; }
.about__lead h2 {
  font-family: var(--display);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0;
}
.about__crest {
  width: 150px;
  height: auto;
  margin-top: 8px;
  opacity: 0.9;
  filter: brightness(0) invert(1);
}
.about__body { display: flex; flex-direction: column; gap: 26px; padding-top: 34px; }
.about__body > p { font-size: 17px; }

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.figures div { padding: 22px 0; display: flex; flex-direction: column; gap: 6px; }
.figures div:first-child { border-right: 1px solid var(--rule); }
.figures div:last-child { padding-left: 28px; }
.figures b {
  font-family: var(--display);
  font-size: 45px;
  font-weight: 400;
  line-height: 1;
  color: var(--brass-light);
}
.figures span { font-size: 13px; color: var(--stone-dim); }

/* Motions band ----------------------------------------------------------- */

.motions {
  background-color: var(--ink-wash);
  background-image: var(--wash-chamber);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.motions__inner { max-width: var(--page); margin: 0 auto; padding: 76px var(--gutter); }
.motions h2 { font-family: var(--display); font-size: 43px; font-weight: 300; margin-bottom: 32px; }
.motions__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 44px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 34px;
}
.motions__side { display: flex; flex-direction: column; gap: 26px; }
.motions__item { display: flex; flex-direction: column; gap: 10px; }
.motions__item + .motions__item { padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.motions__item span { font-size: 13px; color: var(--stone-dim); }
.motions__lead .motion { font-size: 45px; line-height: 1.16; }
.motions__side .motion { font-size: 26px; line-height: 1.24; }

/* Join band -------------------------------------------------------------- */

.join {
  background-color: var(--oxblood-deep);
  background-image: var(--wash-chamber);
  padding: 92px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.join h2 {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ivory);
  max-width: 840px;
}
.join p { font-size: 16px; color: var(--stone); max-width: 560px; text-wrap: pretty; }
.join .btn { margin-top: 6px; padding: 19px 40px; font-size: 13px; }
.join small { font-family: var(--mono); font-size: 11px; color: var(--stone-dim); }

/* --------------------------------------------------------------------------
   Practice sessions
   -------------------------------------------------------------------------- */

.sessions-hero {
  background-color: var(--ink-wash);
  background-image: var(--wash-chamber);
}
.sessions-hero__inner { max-width: var(--page); margin: 0 auto; padding: 56px var(--gutter) 0; }
.sessions-hero h1 {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.5px;
  color: var(--ivory);
  max-width: 640px;
}

.zoom {
  background: var(--surface);
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 3px solid var(--brass);
  box-shadow: var(--shadow-card);
}
.zoom__body { padding: 38px 40px; display: flex; flex-direction: column; gap: 22px; }
.zoom__body h2 {
  font-family: var(--display);
  font-size: 45px;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0;
}
.zoom__live { display: block; }
.zoom__live .live__text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stone);
}
.zoom__live.live--on .live__text { color: var(--open); font-weight: 500; }
.zoom__fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); }

.copy-field {
  all: unset;
  cursor: pointer;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  align-items: center;
  background: var(--surface);
  box-sizing: border-box;
}
.copy-field:first-child { border-right: 1px solid var(--border); }
.copy-field:hover { background: var(--surface-raised); }
.copy-field__label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--stone);
}
.copy-field__state {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brass);
}
.copy-field__value {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--ivory);
}
.zoom__hint { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--stone); }

.zoom__cta {
  background: var(--oxblood);
  color: var(--brass-light);
  width: 290px;
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.zoom__cta:hover { background: var(--crimson); }
.zoom__cta small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
}
.zoom__cta strong {
  font-family: var(--display);
  font-weight: 300;
  font-size: 47px;
  line-height: 0.98;
  color: var(--ivory);
}

.formats { max-width: var(--page); margin: 0 auto; padding: 84px var(--gutter) 40px; }
.formats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
  margin-bottom: 30px;
}
.formats__head h2 { font-family: var(--display); font-size: 38px; font-weight: 400; }
.formats__head span { font-family: var(--mono); font-size: 11px; color: var(--stone); }
.formats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 460px)); gap: 20px; align-items: stretch; }

.format { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.format__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.format__day { font-family: var(--display);
  font-weight: 300; font-size: 49px; line-height: 0.9; }
.format__rule { height: 1px; }
.format h3 { font-family: var(--display); font-size: 35px; font-weight: 400; line-height: 1.05; }
.format__time { font-family: var(--mono); font-size: 14px; letter-spacing: 0.5px; margin-top: -8px; }
.format p { font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.format .btn { margin-top: auto; align-self: flex-start; font-size: 11px; letter-spacing: 1.6px; padding: 12px 18px; }

.format--oxblood { background: var(--oxblood); box-shadow: var(--shadow-card); }
.format--oxblood .format__day { color: var(--brass-light); }
.format--oxblood .format__rule { background: var(--border-strong); }
.format--oxblood h3 { color: var(--ivory); }
.format--oxblood .format__time { color: var(--brass-light); }
.format--oxblood p { color: var(--stone); }
.format--oxblood .btn { background: var(--brass-light); color: var(--ink); }
.format--oxblood .btn:hover { background: var(--ivory); }

.format--paper { background: var(--surface-raised); border: 1px solid var(--border-strong); }
.format--paper .format__day { color: var(--brass-light); }
.format--paper .format__rule { background: var(--border-strong); }
.format--paper h3 { color: var(--ivory); }
.format--paper .format__time { color: var(--brass); }
.format--paper p { color: var(--stone); }

.format--ink { background: var(--surface); border: 1px solid var(--border); }
.format--ink .format__day { color: var(--brass-light); }
.format--ink .format__rule { background: var(--border-strong); }
.format--ink h3 { color: var(--ivory); }
.format--ink .format__time { color: var(--brass-light); }
.format--ink p { color: var(--stone); }
.format--ink .btn { background: var(--brass-light); color: var(--ink); }
.format--ink .btn:hover { background: var(--ivory); }

.formats__note { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 84px; }
.formats__note div { border-top: 1px solid var(--rule); padding: 26px 0; }
.formats__note p { font-size: 15px; color: var(--stone); max-width: 760px; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Tournament calendar
   -------------------------------------------------------------------------- */

.cal-head {
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.cal-head h1 {
  font-family: var(--display);
  font-size: 67px;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.5px;
}

.toggle { display: flex; border: 1px solid var(--border-strong); }
.toggle button {
  all: unset;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 11px 18px;
  color: var(--stone);
}
.toggle button + button { border-left: 1px solid var(--border-strong); }
.toggle button:hover { color: var(--ivory); }
.toggle button[aria-pressed='true'] { background: var(--brass); color: var(--ink); }

.cal-view { max-width: var(--page); margin: 0 auto; padding: 8px var(--gutter) 60px; }
.cal-view[hidden] { display: none; }

/* Agenda ----------------------------------------------------------------- */

.agenda { display: flex; flex-direction: column; }

.agenda__row {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.agenda__when { display: flex; flex-direction: column; gap: 2px; }
.agenda__month {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brass);
}
.agenda__num { font-family: var(--display);
  font-weight: 300; font-size: 58px; line-height: 1; }
.agenda__dow { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; color: var(--stone); }
.agenda__main { display: flex; flex-direction: column; gap: 12px; }
.agenda__main h3 { font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 1.1; }
.agenda__main p { font-size: 14px; line-height: 1.7; color: var(--stone-dim); max-width: 560px; text-wrap: pretty; }
.agenda__aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.agenda__venue { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--stone); }

.agenda__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: 22px;
  padding: 34px 28px;
}
.agenda__cta p { font-family: var(--display);
  font-weight: 400; font-size: 31px; line-height: 1.15; max-width: 620px; }
.agenda__cta .btn { flex-shrink: 0; }

.past { padding-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.past > span {
  font-family: var(--ceremonial);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--stone-dim);
}
.past__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.past__row time { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; color: var(--stone); }
.past__row span { font-size: 14px; color: var(--stone-dim); }

/* Empty state ------------------------------------------------------------ */

.empty {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  padding: 60px 0;
  border-bottom: 1px solid var(--rule);
}
.empty__lead {
  padding-right: 48px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.empty__lead h2 {
  font-family: var(--display);
  font-size: 49px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
}
.empty__lead p { font-size: 15px; max-width: 480px; }
.empty__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.empty__side { padding-left: 48px; display: flex; flex-direction: column; gap: 18px; }
.empty__side h3 { font-family: var(--display); font-size: 29px; font-weight: 400; }
.empty__sessions { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.empty__sessions a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.empty__sessions a:hover { background: var(--surface-raised); }
.empty__sessions strong { font-family: var(--display); font-weight: 400; font-size: 25px; }
.empty__sessions time { font-family: var(--mono); font-size: 11px; color: var(--stone); flex-shrink: 0; }

/* Month grid ------------------------------------------------------------- */

.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 28px 0 20px;
}
.grid-head h2 { font-family: var(--display); font-size: 36px; font-weight: 400; }
.grid-head__nav { display: flex; align-items: center; gap: 8px; }
.grid-head__nav button {
  all: unset;
  cursor: pointer;
  border: 1px solid var(--border);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ivory);
}
.grid-head__nav button:hover { background: var(--surface-raised); border-color: var(--brass); }

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--stone);
}
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; display: block; }
/* Each swatch mirrors the .month__chip-- variant it stands for. */
.legend--tournament { background: var(--crimson); }
.legend--broadcast { background: var(--brass); }
.legend--practice { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); }

.month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.month__dow {
  padding: 11px 12px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-raised);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--stone);
}
.month__cell {
  min-height: 98px;
  padding: 9px 10px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.month__cell.is-outside { background: var(--ink-wash); }
.month__cell.is-today { box-shadow: inset 0 0 0 2px var(--brass); }
.month__num { font-family: var(--mono); font-size: 11px; color: var(--ivory); }
.month__cell.is-outside .month__num { color: var(--stone-dim); }

.month__chip {
  all: unset;
  cursor: pointer;
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  padding: 5px 7px;
}
.month__chip--tournament { background: var(--crimson); color: var(--ivory); }
.month__chip--broadcast { background: var(--brass); color: var(--ink); }
.month__chip--practice { background: var(--surface-raised); color: var(--brass-light); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Detail panel ----------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 70;
}
.scrim[hidden] { display: none; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--surface);
  border-left: 4px solid var(--brass);
  box-shadow: var(--shadow-panel);
  z-index: 71;
  display: flex;
  flex-direction: column;
}
.panel[hidden] { display: none; }

.panel__top {
  padding: 26px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.panel__close {
  all: unset;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  padding: 10px 12px;
}
.panel__close:hover { color: var(--brass-light); }

.panel__body { padding: 36px; display: flex; flex-direction: column; gap: 26px; overflow: auto; }
.panel__body h2 {
  font-family: var(--display);
  font-size: 47px;
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: 0;
}
.panel__body .chip { align-self: flex-start; }

.facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.facts div { padding: 16px 20px; display: flex; flex-direction: column; gap: 5px; }
.facts div:nth-child(odd) { border-right: 1px solid var(--rule); }
.facts div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
.facts dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--stone);
}
.facts dd { font-size: 15px; font-weight: 400; color: var(--ivory); }

.panel__aside { background: var(--surface-raised); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.panel__aside strong { font-size: 14px; }
.panel__aside p { font-size: 14px; line-height: 1.65; color: var(--stone); }
.panel__aside .link { margin-top: 6px; align-self: flex-start; }

.panel__foot {
  margin-top: auto;
  padding: 22px 36px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.panel__foot span { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--stone); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-head {
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px var(--gutter) 36px;
  border-bottom: 1px solid var(--rule);
}
.contact-head h1 {
  font-family: var(--display);
  font-size: 67px;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.5px;
}

.committee {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
.officer {
  padding: 34px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.officer:last-child { border-right: 0; }
.officer h3 { font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 1.08; }
.officer .chip { align-self: flex-start; }
.officer a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--brass);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  align-self: flex-start;
  margin-top: auto;
}
.officer a:hover { color: var(--brass-light); }
.officer--lead { background: var(--oxblood); }
.officer--lead h3 { color: var(--ivory); }
.officer--lead a { color: var(--brass-light); border-bottom-color: var(--border-strong); }
.officer--lead a:hover { color: var(--ivory); }

.directors-head {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px var(--gutter) 28px;
  border-bottom: 1px solid var(--rule);
}
.directors-head h2 {
  font-family: var(--display);
  font-size: 43px;
  font-weight: 300;
  line-height: 1.05;
}
.directors-head p { font-size: 15px; max-width: 460px; margin-top: 10px; text-wrap: pretty; }

.directors {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.director {
  padding: 26px var(--gutter);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.director:nth-child(3n) { border-right: 0; }
.director:nth-last-child(-n + 1) { border-bottom: 0; }
.director__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brass);
}
.director h3 { font-family: var(--display); font-size: 29px; font-weight: 400; line-height: 1.1; color: var(--ivory); }
.director__deputy { font-size: 13px; color: var(--stone); margin-top: auto; }

.reach { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.reach__cell { padding: 64px var(--gutter); display: flex; flex-direction: column; gap: 18px; }
.reach__cell h2 { font-family: var(--display); font-size: 43px; font-weight: 300; line-height: 1.05; }
.reach__cell p { font-size: 15px; max-width: 420px; text-wrap: pretty; }
.reach__mail {
  border-right: 1px solid var(--rule);
}
.reach__mail a {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  background: var(--surface-raised);
  color: var(--brass-light);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  padding: 16px 22px;
  align-self: flex-start;
  margin-top: 6px;
}
.reach__mail a:hover { background: var(--oxblood); color: var(--ivory); }
.reach__join {
  background-color: var(--oxblood-deep);
  background-image: var(--wash-chamber);
}
.reach__join h2 { color: var(--ivory); }
.reach__join p { color: var(--stone); }
.reach__join .btn { align-self: flex-start; margin-top: 6px; }

/* Slim footer used on calendar and contact -------------------------------- */

.site-footer--slim .site-footer__inner {
  padding: 44px var(--gutter) 30px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer--slim img { height: 32px; width: auto; align-self: center; }
.site-footer--slim nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.site-footer--slim nav a { color: var(--stone); }
.site-footer--slim nav a:hover { color: var(--brass-light); }
.site-footer--slim > .site-footer__inner > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--stone-dim);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --gutter: 28px; }

  .hero__inner { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .hero__motion { border-left: 0; border-top: 1px solid var(--border-strong); padding-left: 0; padding-top: 24px; }
  .about { grid-template-columns: 1fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
  .about__body { padding-top: 0; }
  .motions__grid { grid-template-columns: 1fr; gap: 32px; }
  .formats__grid { grid-template-columns: 1fr; }
  .zoom { grid-template-columns: 1fr; }
  .zoom__cta { width: auto; flex-direction: row; align-items: flex-end; }
  .committee { grid-template-columns: 1fr 1fr; }
  .officer:nth-child(2) { border-right: 0; }
  .officer:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .directors { grid-template-columns: 1fr 1fr; }
  .director:nth-child(3n) { border-right: 1px solid var(--rule); }
  .director:nth-child(2n) { border-right: 0; }
  .reach { grid-template-columns: 1fr; }
  .reach__mail { border-right: 0; border-bottom: 1px solid var(--rule); }
  .empty { grid-template-columns: 1fr; gap: 40px; }
  .empty__lead { padding-right: 0; border-right: 0; }
  .empty__side { padding-left: 0; }
  .agenda__row { grid-template-columns: 110px 1fr; }
  .agenda__aside { grid-column: 2; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }

  body { font-size: 16px; }

  .site-nav, .site-header__end .live, .site-header__end .btn--sm { display: none; }
  .site-header__inner { gap: 12px; justify-content: space-between; }
  .site-header__end { gap: 10px; }
  .site-header__end .btn--join-mobile { display: inline-block; font-size: 10px; padding: 11px 14px; }
  .burger { display: flex; }

  .live-bar {
    background: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
    padding: 10px var(--gutter);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .live-bar .live { border: 0; padding: 0; }

  .hero__inner { padding: 36px var(--gutter) 30px; }
  .hero p { font-size: 14px; }
  .hero__quote-mark { font-size: 180px; top: -20px; }
  .hero__actions .btn { flex: 1 1 auto; text-align: center; }
  .hero__motion p { font-size: 27px; }

  .week__grid { grid-template-columns: 1fr; }
  .week__card { border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .week__card:last-child { border-bottom: 0; }

  .about__lead h2, .motions h2, .join h2 { font-size: 36px; letter-spacing: 0; }
  .join { padding: 56px var(--gutter); }
  .motions__lead .motion { font-size: 29px; }
  .figures { grid-template-columns: 1fr; }
  .figures div:first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .figures div:last-child { padding-left: 0; }

  .sessions-hero h1, .cal-head h1, .contact-head h1 { font-size: 43px; letter-spacing: -0.5px; }
  .zoom__body { padding: 22px 16px; }
  .zoom__body h2 { font-size: 31px; }
  .zoom__fields { grid-template-columns: 1fr; }
  .copy-field:first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .copy-field { gap: 3px 10px; min-height: 44px; padding: 14px 16px; }
  .copy-field__value { font-size: 18px; }
  .copy-field__state {
    grid-row: 1 / span 2;
    align-self: center;
    border: 1px solid var(--rule-strong);
    padding: 8px 10px;
  }
  .zoom__cta { flex-direction: column; align-items: stretch; padding: 22px 16px; text-align: center; }
  .zoom__cta strong { font-size: 31px; }
  .formats { padding: 40px var(--gutter) 24px; }
  .format { padding: 22px 18px; }
  .format__day { font-size: 36px; }
  .format h3 { font-size: 28px; }

  .cal-head { align-items: flex-start; gap: 20px; }
  .agenda__row, .past__row { grid-template-columns: 1fr; gap: 14px; }
  .agenda__aside { grid-column: auto; }
  .agenda__when { flex-direction: row; align-items: baseline; gap: 10px; }
  .agenda__num { font-size: 38px; }
  .agenda__main h3 { font-size: 27px; }
  .agenda__cta { padding: 22px 18px; }
  .agenda__cta p { font-size: 25px; }

  .month { font-size: 12px; }
  .month__cell { min-height: 64px; padding: 6px; }
  .month__chip { font-size: 9px; padding: 3px 4px; }

  .panel { border-left: 0; border-top: 4px solid var(--brass); top: auto; height: 92vh; }
  .panel__body, .panel__top, .panel__foot { padding-left: 20px; padding-right: 20px; }
  .panel__body h2 { font-size: 34px; }
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(odd) { border-right: 0; }
  .facts div + div { border-top: 1px solid var(--rule); }

  .committee { grid-template-columns: 1fr; }
  .officer { border-right: 0; border-bottom: 1px solid var(--rule); }
  .officer:nth-child(n + 3) { border-top: 0; }
  .directors { grid-template-columns: 1fr; }
  .director, .director:nth-child(3n), .director:nth-child(2n) { border-right: 0; }
  .directors-head { padding-top: 36px; }
  .directors-head h2 { font-size: 34px; }
  .reach__cell { padding: 40px var(--gutter); }
  .reach__cell h2 { font-size: 34px; }

  .site-footer__inner { padding: 36px var(--gutter) 28px; }
  .site-footer__links { gap: 28px; }
  .site-footer--slim .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 360px) {
  .copy-field__value { font-size: 16px; }
}