/* =========================================================================
   Canadian Forum Against Organized Crime — National Symposium
   Design language taken from the event artwork: near-black maroon ground,
   heavy condensed white display type, a single red hairline, red ridge motif.

   House rules for anyone editing this file:
   · one stylesheet, grouped by the thing it styles, in page order;
   · colours, spacing steps and the two typefaces come from the tokens below;
   · nothing may depend on the display face being narrow — Oswald arrives late
     (or never, behind a firewall) and the fallback is a wide grotesque, so
     layouts are built to survive the wide case without collision.
   ========================================================================= */

:root {
  --ink: #120406;
  --maroon-900: #1b070a;
  --maroon-800: #260a0e;
  --maroon-700: #340f14;
  --maroon-600: #45141a;

  --red: #c8191f;
  --red-bright: #e5262e;
  --red-deep: #8c1116;
  --red-wash: rgba(200, 25, 31, 0.12);
  /* Label red for small type on the dark ground: 5.9:1 on ink, 5.3:1 on 700.
     --red / --red-bright are fills only; they fail as text at label sizes. */
  --red-label: #ff4d54;
  --rose: #e8949a;

  --paper: #f2efed;
  --paper-2: #e6e1de;

  --text: #eae6e4;
  --text-2: #b6a9a7;
  --text-dark: #1a1214;
  --text-dark-2: #5a4c4f;

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-dark: rgba(26, 18, 20, 0.14);
  --line-dark-strong: rgba(26, 18, 20, 0.3);

  --display: 'Oswald', 'Oswald Fallback', 'Arial Narrow', 'Liberation Sans Narrow', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
  --bar: 72px; /* masthead height */

  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

/* Metric-matched stand-in for Oswald. Condensed faces are used where the
   system has one; otherwise the wide grotesque is pulled in a little so the
   swap when the webfont lands is a nudge rather than a reflow. */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('DejaVu Sans Condensed'),
       local('Helvetica Neue Condensed'), local('Arial');
  size-adjust: 92%;
  ascent-override: 105%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- webfonts */
/* Self-hosted rather than loaded from Google. A Google Fonts <link> hands the
   visitor's IP, user-agent and the page URL to a third party on every view —
   not appropriate for an audience reading this from agency networks. Latin
   subsets, 148 kB total, served from our own origin. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red-label);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On the one light section the bright label red is only 3.26:1 against white —
   just over the 3:1 floor for a focus ring, and not enough margin. The deep
   red is 9.5:1 there, so the ring swaps with the ground. */
.section--paper a:focus-visible,
.section--paper button:focus-visible,
.section--paper summary:focus-visible,
.section--paper input:focus-visible,
.section--paper textarea:focus-visible { outline-color: var(--red-deep); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Display type never leans on the face being narrow, but it should never be
   allowed to break a layout either. */
.lockup__title,
.h2,
.city__name,
.venue__name,
.rate__name,
.foot__name { overflow-wrap: break-word; hyphens: manual; }

/* --------------------------------------------------------------- masthead */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(18, 4, 6, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.masthead.is-stuck {
  background: rgba(18, 4, 6, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  min-height: var(--bar);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 42%, transparent 0 1.6px, var(--red-bright) 1.6px 2.8px, transparent 2.8px 4.4px,
      var(--red) 4.4px 5.6px, transparent 5.6px 7.4px, var(--red) 7.4px 8.6px, transparent 8.6px 10.4px,
      var(--red-deep) 10.4px 11.6px, transparent 11.6px 13.4px, var(--red-deep) 13.4px 14.4px, transparent 14.4px);
}
.brand:hover .brand__name { color: #fff; }
.brand__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.09em;
  line-height: 1;
  color: #fff;
}
.brand__sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 3px;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  display: block;
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-2);
  padding-block: 0.45rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav__list a:hover { color: #fff; border-bottom-color: var(--red); }
.nav__list a[aria-current] { color: #fff; border-bottom-color: var(--red); }

.navtoggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before,
.navtoggle__bars::after { content: ''; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after { top: 6px; }
.navtoggle[aria-expanded='true'] .navtoggle__bars { background: transparent; }
.navtoggle[aria-expanded='true'] .navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded='true'] .navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------- language toggle */

.langs {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.langs a,
.langs__on {
  display: block;
  padding: 0.42rem 0.6rem;
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  line-height: 1;
}
.langs a { color: var(--text-2); }
.langs a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.langs__on { background: var(--red); color: #fff; }

@media (max-width: 860px) {
  /* In the drawer it sits on its own row rather than crowding the CTA. */
  .langs { align-self: flex-start; margin-top: 1.2rem; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.btn:hover { background: var(--red-bright); border-color: var(--red-bright); transform: translateY(-1px); }
.btn__arrow { width: 1em; height: 1em; flex: none; transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-fg: #fff;
  border-color: #fff;
}

.btn--sm { padding: 0.65rem 1.05rem; font-size: 0.8rem; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.1rem; }
.btn--block { width: 100%; }

.btn--pending {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
  border-color: var(--line-strong);
  border-style: dashed;
  cursor: default;
}
.btn--pending:hover { transform: none; background: transparent; border-color: var(--line-strong); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(84svh, 780px);
  padding: calc(var(--bar) + clamp(1.75rem, 4vw, 3.25rem)) 0 clamp(3rem, 5.5vw, 4.5rem);
  background:
    radial-gradient(105% 80% at 74% 40%, var(--maroon-700) 0%, var(--maroon-900) 40%, var(--ink) 76%),
    var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero--mini { min-height: min(52svh, 480px); }

/* The ridge whorl: core sitting right of centre, bleeding off the right edge
   exactly as it does in the event artwork. */
.hero__media {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-21rem, -13vw, -5rem);
  width: min(1140px, 90vw);
  aspect-ratio: 1;
  transform: translateY(-52%);
  opacity: 0.85;
  pointer-events: none;
}
.whorl { width: 100%; height: 100%; }

/* --- supplied artwork -----------------------------------------------------
   static/assets/hero-artwork.png already contains the whole lockup: title,
   rule, tagline and its own whorl. So when it is present it IS the hero type —
   shown at full strength, never scrimmed, never stretched past its own pixels,
   and never accompanied by a second copy of the same words. The ground of the
   file is a near-black maroon (#1f0301 at the corners), which the hero
   background below is tuned to, and the edges are feathered so the rectangle
   dissolves instead of reading as a pasted-in box. */
.hero--art {
  /* Base tone sampled from the file's own corners (#1f0301). */
  background:
    radial-gradient(135% 125% at 44% 48%, #2d0907 0%, #250604 42%, #1e0403 70%, #170304 100%),
    #1e0302;
}
.hero--art .hero__media { display: none; }
.hero--art .hero__inner {
  grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.68fr);
  gap: clamp(2rem, 3.4vw, 3rem);
}
.hero--art .hero__nextcity { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.hero--art::before { background: none; }
.hero--art { min-height: min(72svh, 640px); }

.hero__lead { position: relative; min-width: 0; }
/* Continues the artwork's own bottom-right glow past its edge, so the
   feathered rectangle dissolves into a matching tone instead of into flat
   black. Sampled from the file: the ground peaks near #521e19 bottom-centre. */
.hero__lead::before {
  content: '';
  position: absolute;
  inset: -14% -9%;
  z-index: -1;
  background: var(--hero-art) center / cover no-repeat;
  filter: blur(70px) brightness(0.62) saturate(125%);
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(66% 62% at 50% 52%, #000 30%, transparent 100%);
  mask-image: radial-gradient(66% 62% at 50% 52%, #000 30%, transparent 100%);
  pointer-events: none;
}
.hero__art {
  /* Nudged left by the artwork's own internal margin (measured: the type
     starts at 4.13% of the file) so the baked lockup sits on the same left
     edge as every heading further down the page. */
  width: 104.31%;
  max-width: none;
  margin-left: -4.13%;
  height: auto;
  --feather:
    linear-gradient(90deg, transparent 0, #000 3.6%, #000 98.6%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 84%, transparent 100%);
  -webkit-mask-image: var(--feather);
  mask-image: var(--feather);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The live lockup stays in the document for screen readers and crawlers, and
   comes back visually at the width where the baked-in type stops being
   readable. The image is decorative (alt=""), so the words are announced once. */
@media (min-width: 700px) {
  .hero--art .lockup {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 699.98px) {
  .hero--art .hero__art { display: none; }
  .hero--art .hero__media { display: block; }
}

/* Keeps the lockup legible where it crosses the ridges. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(18, 4, 6, 0.92) 0, rgba(18, 4, 6, 0.55) 70px, transparent 150px),
    linear-gradient(96deg, var(--ink) 2%, rgba(18, 4, 6, 0.82) 30%, rgba(18, 4, 6, 0.15) 62%, rgba(18, 4, 6, 0.45) 100%);
  pointer-events: none;
}
/* Grounds the hero into the facts band underneath it. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  z-index: -1;
  background: linear-gradient(transparent, rgba(18, 4, 6, 0.85));
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(1.75rem, 3.6vw, 3.25rem);
  align-items: center;
}
.hero__inner > * { min-width: 0; }

/* --- the lockup ---------------------------------------------------------
   Everything above the tagline sits in a shrink-to-fit block, so the red rule
   is always exactly as wide as the display type above it — in Oswald and in
   whatever wide grotesque stands in for it. */
.lockup { container-type: inline-size; }
.lockup__head {
  display: block;
  width: fit-content;
  max-width: 100%;
}
.lockup__eyebrow {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.95rem, 4.4cqw, 1.55rem);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.12em;
  white-space: nowrap;
}
.lockup__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.55rem, 14.2cqw, 6.2rem);
  line-height: 0.86;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
}
.lockup__title span { display: block; }
.lockup__series {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 4.5cqw, 1.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin: 0.12em 0 0;
  white-space: nowrap;
}
.lockup__rule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, var(--red-bright) 0%, var(--red) 58%, rgba(200, 25, 31, 0.12) 100%);
  margin: 0.8rem 0 0;
  width: 100%;
}
.lockup__tagline {
  font-size: clamp(1rem, 3.2cqw, 1.24rem);
  color: var(--rose);
  letter-spacing: 0.01em;
  max-width: 48ch;
  margin: 0.7rem 0 0;
}
.lockup__meta {
  margin: 1.1rem 0 0;
  max-width: 44ch;
  font-size: 0.78rem;
  text-wrap: balance;
  letter-spacing: 0.15em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --- the next-event dossier --------------------------------------------- */

.hero__next {
  position: relative;
  background: linear-gradient(180deg, rgba(31, 8, 11, 0.78), rgba(10, 3, 4, 0.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.5rem);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.hero__next::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--red-bright), var(--red) 55%, rgba(200, 25, 31, 0.25));
  border-radius: var(--radius) var(--radius) 0 0;
}
.hero__nextlabel {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red-label);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.hero__nextcity {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.65rem;
}
.hero__nextdate,
.hero__nextvenue {
  position: relative;
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.95rem;
}
.hero__nextdate::before,
.hero__nextvenue::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--red);
  transform: rotate(45deg);
}
.hero__nextdate { font-weight: 600; color: var(--text); margin-bottom: 0.1rem; }
/* Sits under the date as a continuation of it, so it takes the same indent but
   no marker of its own — the diamond belongs to the date/venue rows. */
.hero__nexttime {
  margin: 0 0 0.4rem;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
}
.hero__nextextra { color: var(--text-2); font-weight: 500; }
.hero__nextvenue { color: var(--text-2); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.hero__actions .btn { flex: 1 1 auto; }

.countdown[hidden] { display: none; }
.countdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.countdown__unit {
  text-align: center;
  padding: 0.75rem 0.35rem 0.1rem;
  border-right: 1px solid var(--line);
}
.countdown__unit:last-child { border-right: 0; }
.countdown__unit span {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.countdown__unit small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 0.25rem;
}

/* --- scroll cue: aligned to the type, not floating in the middle --------- */

.hero__foot {
  position: absolute;
  inset: auto 0 clamp(1.1rem, 2.5vw, 2rem) 0;
  pointer-events: none;
}
.hero__scroll {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero__scroll::before {
  content: '';
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--red), var(--line-strong));
  position: relative;
  overflow: hidden;
}
.hero__scroll i {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: scrolldot 2.6s ease-in-out infinite;
}
@keyframes scrolldot {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(5px); opacity: 1; }
}

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

.band {
  position: relative;
  background: var(--maroon-800);
  border-block: 1px solid var(--line);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts li {
  padding: 0.95rem 1.5rem;
  border-right: 1px solid var(--line);
}
.facts li:first-child { padding-left: 0; }
.facts li:last-child { border-right: 0; padding-right: 0; }
.facts__k {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-label);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.facts__v {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-wrap: balance;
  color: #fff;
}

/* -------------------------------------------------------------- sections */

/* Vertical rhythm — two steps, not one.
   Primary chapters (about, cities, venue) get the larger step; the run of
   secondary ones (topics, delegates, programme, hotel, questions) gets the
   smaller. The old single step was clamp(3.75rem, 8vw, 6.75rem), i.e. up to
   216px of empty ground per section, ten times down the page. */
.section {
  position: relative;
  padding: var(--sec-pad) 0;
  --sec-pad: clamp(2.5rem, 4.4vw, 4rem);
}
.section--tight { --sec-pad: clamp(2rem, 3.2vw, 2.85rem); }
.section--alt {
  background: var(--maroon-900);
  background-image: radial-gradient(80% 60% at 92% 0%, rgba(140, 17, 22, 0.28), transparent 70%);
}
.section + .section { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* Two-column chapter layout: a short sticky title block, a long main column,
   and a hairline spine between them that gives the long pages a rhythm. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.7fr);
  gap: clamp(1.6rem, 3.4vw, 3.25rem);
}
/* List chapters (12 topics, 14 delegate types) run on a narrower spine so the
   list itself gets a third column instead of a third of the row being empty. */
.cols--wide { grid-template-columns: minmax(0, 0.52fr) minmax(0, 2.3fr); }
/* Side headings size against their own narrow column, not the viewport. A long
   single word ("PROGRAMME") is wider than the column in the fallback font, and
   the viewport-based clamp let it break mid-word. */
.cols__side { container-type: inline-size; }
.cols__side .h2 {
  font-size: clamp(1.6rem, 11.8cqw, 2.85rem);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.cols__side {
  position: sticky;
  top: calc(var(--bar) + 2rem);
  align-self: start;
  padding-top: 1rem;
  border-top: 2px solid var(--red);
}
.cols__main { padding-top: 1rem; border-top: 1px solid var(--line); min-width: 0; }
/* A narrow spine cannot carry a 2.85rem heading — size it down with the column. */
.cols--wide .cols__side .h2 { font-size: clamp(1.45rem, 13cqw, 2.15rem); }
.cols--wide .cols__side .muted { font-size: 0.9rem; }
.section--paper .cols__main { border-top-color: var(--line-dark); }

.kicker {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red-label);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.kicker--dark { color: var(--red-deep); }

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.03;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: #fff;
  text-wrap: balance;
}
.section--paper .h2 { color: var(--text-dark); }
.cols__side .h2 { margin-bottom: 0.9rem; }
.cols__side .muted { max-width: 34ch; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.9em;
  max-width: 56ch;
}
.cols__main p { max-width: 68ch; }
.muted { color: var(--text-2); font-size: 0.96rem; }
.muted--dark { color: var(--text-dark-2); }

.section__head { max-width: 680px; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }

/* A named block inside a chapter, one rung below the chapter heading. Used
   where two things that were separate sections now share one — speakers under
   programme — so the join still reads as a join and not as a run-on. */
.subsec {
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.subsec__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.55rem;
}
.subsec__body p { margin-bottom: 0.7em; color: var(--text-2); font-size: 0.96rem; }
.subsec__body p:last-child { margin-bottom: 0; }
.subsec__body a { color: var(--red-label); }

.panel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: rgba(255, 255, 255, 0.025);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border-radius: var(--radius);
}
.panel a { color: var(--red-label); }

/* ---------------------------------------------------------------- themes */

/* Twelve topics. On the wide spine this lands three-up at 1024 and above, so
   the block is four rows instead of six, and the number rides on the title
   line instead of costing a row of its own. */
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.theme {
  position: relative;
  background: var(--maroon-900);
  padding: 1rem 1.1rem 1.05rem;
  transition: background 0.25s ease;
}
.section--alt .theme { background: var(--ink); }
.theme:hover { background: var(--maroon-700); }
.theme__num {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--red-label);
  margin-right: 0.55rem;
  vertical-align: 0.06em;
}
.theme__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: #fff;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.theme__body { margin: 0; font-size: 0.875rem; color: var(--text-2); line-height: 1.5; }

/* ----------------------------------------------------------------- ticks */

.ticks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 0 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Fourteen delegate types: three columns from 1024 up, five rows not seven. */
.ticks--3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0 1.75rem; }
.ticks li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.4rem;
  /* The rule goes on TOP of each item: every column starts on row one, so a
     top border never leaves a line dangling under a short column. */
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  line-height: 1.45;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);
}
.ticks--tight { margin: 0; }

/* ---------------------------------------------------------------- agenda */

.agenda { list-style: none; margin: 0; padding: 0; }
.agenda__row {
  display: grid;
  /* Wide enough for a full range ("10:15 – 11:00 a.m.") on one line. */
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}
.agenda__row:hover { background: rgba(255, 255, 255, 0.03); }
.agenda__time {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--red-label);
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agenda__title {
  display: block;
  font-weight: 600;
  color: #fff;
  font-size: 1.02rem;
}
/* A slot the series holds open: the hour is fixed, who fills it is not. Muted
   so the catered and plenary anchors read as the spine of the day. */
.agenda__title--open { color: var(--text-2); font-weight: 500; }
.agenda__detail {
  display: block;
  color: var(--text-2);
  font-size: 0.92rem;
  margin-top: 0.15rem;
  max-width: 60ch;
}

/* The presenter's own outline of a session. Set under the byline behind a rule,
   so a row that has one still scans as one row. */
.agenda__abstract {
  display: block;
  margin-top: 0.65rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line-strong);
  max-width: 62ch;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------- tbd */
/* Used where a section has nothing confirmed yet. Deliberately looks finished
   rather than empty — an unstyled gap reads as a broken page. */
.tbd {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  overflow: hidden;
}
.tbd__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.2rem 1rem;
  background: linear-gradient(160deg, var(--red-deep), #5d0b0f);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #fff;
}
.tbd__body { padding: clamp(1rem, 2vw, 1.4rem); background: rgba(255, 255, 255, 0.025); }
.tbd__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.5rem;
}
.tbd__body p { font-size: 0.95rem; margin-bottom: 0.75em; }
.tbd__cta { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .tbd { grid-template-columns: 1fr; }
  .tbd__mark { padding: 1rem; font-size: 1.6rem; }
}

/* ------------------------------------------------------------------ bios */
/* Name and role always visible; the bio opens on demand. Photo optional, so a
   roster can go up before headshots arrive. */
.bios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bios > li { border-bottom: 1px solid var(--line); }

.bio__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
}
.bio__head::-webkit-details-marker { display: none; }
/* A presenter whose bio has not arrived yet: same row, nothing to open. */
.bio--plain .bio__head { cursor: default; }

.bio__photo {
  width: 54px;
  height: 54px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.bio__id { min-width: 0; display: block; }
.bio__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
}
.bio__role { display: block; font-size: 0.93rem; color: var(--text); margin-top: 0.12rem; }
.bio__org {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red-label);
  margin-top: 0.28rem;
}

.bio__cue {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.bio__cue::after {
  content: '+';
  font-size: 1.05rem;
  line-height: 0;
  color: var(--red-label);
}
.bio__head:hover .bio__cue { color: #fff; border-color: #fff; }
.bio[open] .bio__cue::after { content: '–'; }

.bio__text { padding: 0 0 1.35rem; max-width: 62ch; }
.bio__p { margin: 0 0 0.75rem; font-size: 0.97rem; color: var(--text-2); line-height: 1.62; }
.bio__p:last-child { margin-bottom: 0; }
.bios__more { margin-top: 1.4rem; }

/* The series view of the day ends by pointing at the city page that names the
   presenters. Styled as a cue, not a button — the Register call sits above. */
.agenda__more { margin: 1.4rem 0 0; }
.tlink {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-label);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  transition: color 0.2s ease;
}
.tlink::after { content: ' \2192'; }
.tlink:hover { color: #fff; }

@media (max-width: 620px) {
  .bio__head { flex-wrap: wrap; gap: 0.75rem; }
  .bio__cue { margin-left: 0; width: 100%; justify-content: center; }
  .bio__photo { width: 46px; height: 46px; }
}

/* ----------------------------------------------------------------- venue */

.venue__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 0.55rem;
  max-width: 22ch;
}
.venue__addr {
  font-style: normal;
  color: var(--red-label);
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.venue__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.venue__hotel {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.95rem;
}
.venue__hotel strong { color: #fff; }
.venue__hotel a { color: var(--red-label); }

/* ------------------------------------------------------------ hotel rate */

.rate {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.rate__price {
  position: relative;
  background: linear-gradient(155deg, var(--red-deep), #5a0a0e 85%);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
/* A whisper of the ridge motif behind the price. */
.rate__price::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 22% 108%, rgba(255, 255, 255, 0.09) 0 1.5px, transparent 1.5px 12px);
  opacity: 0.55;
  pointer-events: none;
}
.rate__amount {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3rem);
  line-height: 0.95;
  color: #fff;
}
.rate__unit {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f6cdcf;
  margin-top: 0.55rem;
}
.rate__body { padding: clamp(1rem, 2vw, 1.4rem); background: rgba(255, 255, 255, 0.03); }
.rate__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.5rem;
}
.rate__note { font-size: 0.86rem; color: var(--text-2); margin-bottom: 0; }

/* The feature list is framed so the section reads as finished even before any
   photographs of the property arrive. */
.hotelfeat {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem clamp(1rem, 2vw, 1.4rem) 0.6rem;
  background: rgba(255, 255, 255, 0.02);
}
.hotelfeat .ticks li:nth-child(-n + 2) { border-top: 0; }
@media (max-width: 700px) {
  .hotelfeat .ticks li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 1.25rem 0 0;
}
.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--maroon-800);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  font-size: 0.78rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.gallery__credit {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-2);
  margin: 0.3rem 0 0;
}

/* Deliberate shapes for every plausible number of supplied photos. */
.gallery--n1 { grid-template-columns: minmax(0, 1fr); }
.gallery--n1 .gallery__item { aspect-ratio: 16 / 9; }
.gallery--n2,
.gallery--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--n6 .gallery__item--lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(8, 2, 3, 0.95);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: 1100px; }
.lightbox__fig img {
  max-height: 74svh;
  width: auto;
  margin-inline: auto;
  border: 1px solid var(--line-strong);
}
.lightbox__fig figcaption {
  color: var(--text-2);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.9rem;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}
.lightbox__close {
  top: 1rem;
  right: 1.2rem;
  font-size: 1.9rem;
  padding: 0.1rem 0.7rem 0.32rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.5rem;
  padding: 0.5rem 0.85rem;
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.6rem); }
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.16); }

/* ------------------------------------------------------------------ form */
/* The host-request form. It is a secondary action and must not compete with
   Register, so it lives closed inside the Cities section. Open, it is a
   four-up grid with a three-line textarea rather than a five-field stack. */

.hostask {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
}
.hostask[open] { background: #fff; }
.hostask__sum {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.hostask__sum::-webkit-details-marker { display: none; }
.hostask__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dark);
}
/* #6b2d31 on #fff = 7.6:1; on the 0.55-white-over-paper ground it is 7.0:1. */
.hostask__cue {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b2d31;
}
.hostask__sum::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--red-deep), var(--red-deep)) center/13px 2px no-repeat,
    linear-gradient(var(--red-deep), var(--red-deep)) center/2px 13px no-repeat;
  transition: transform 0.2s ease;
}
.hostask[open] .hostask__sum::after { transform: rotate(45deg); }
.hostask__sum:hover .hostask__h { color: #000; }
.hostask__body {
  padding: 0 1.1rem 1.15rem;
  border-top: 1px solid var(--line-dark);
  padding-top: 1rem;
}
.hostask__intro {
  font-size: 0.9rem;
  color: var(--text-dark-2);
  max-width: 68ch;
  margin: 0 0 1rem;
}
/* The disclosure panel is already the constraint; a second max-width inside it
   just leaves a dead strip down the right. */
.hostask .form { max-width: none; }

.form { max-width: 54rem; }
/* Explicit column counts, not auto-fit: the four short fields must break
   2+2 or 4-across, never 3+1 with a hole where the fourth should be. */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem 1rem;
}
@media (min-width: 560px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .form__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red-label);
  margin-bottom: 0.3rem;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field textarea { resize: vertical; min-height: 4.4rem; line-height: 1.5; }
.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.32); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red-label);
  background: rgba(255, 255, 255, 0.07);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--red-label); outline-offset: 2px; }
/* Only flag a field once the visitor has actually interacted with it.
   :user-invalid is the right selector here — :invalid alone marks every
   required field as wrong before anyone has typed a character. */
.field input:user-invalid,
.field textarea:user-invalid { border-color: #e5626a; }

/* Send button and the privacy note share a row instead of stacking. */
.form__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin-top: 0.95rem;
}
.form__note {
  flex: 1 1 22rem;
  font-size: 0.82rem;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0;
}
.form__hp { position: absolute; left: -9999px; }

/* --- the form on the one light section ---------------------------------
   Field chrome tuned for paper. Contrast computed against #fff, not eyeballed:
   label #8c1116 = 9.5:1, value text #1a1214 = 16.7:1, note #5a4c4f = 8.1:1.
   The 1px field border is a non-text boundary owing 3:1 under 1.4.11 —
   #8d8482 gives 3.65:1, and hover/focus go darker still. */
.section--paper .field label { color: var(--red-deep); }
.section--paper .field input,
.section--paper .field textarea {
  color: var(--text-dark);
  background: #fff;
  border-color: #8d8482;
}
.section--paper .field input:hover,
.section--paper .field textarea:hover { border-color: var(--text-dark-2); }
.section--paper .field input:focus,
.section--paper .field textarea:focus {
  border-color: var(--red-deep);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--red-deep);
}
.section--paper .field input:focus-visible,
.section--paper .field textarea:focus-visible { outline-color: var(--red-deep); }
.section--paper .field input:user-invalid,
.section--paper .field textarea:user-invalid { border-color: #a3121a; }
.section--paper .form__note { color: var(--text-dark-2); }

/* ---------------------------------------------------------------- cities */

/* The one light section on the site. It is introduced and closed by a fade to
   the maroon ground so it reads as a deliberate change of register. */
.section--paper {
  background: var(--paper);
  background-image: repeating-radial-gradient(circle at 92% 8%, rgba(140, 17, 22, 0.05) 0 2px, transparent 2px 13px);
  color: var(--text-dark);
  border-top: 2px solid var(--red);
  padding-block: clamp(2.5rem, 4.4vw, 4rem);
}
.section--paper::before,
.section--paper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
}
.section--paper::before { top: 0; background: linear-gradient(rgba(27, 7, 10, 0.55), transparent); }
.section--paper::after { bottom: 0; background: linear-gradient(transparent, rgba(27, 7, 10, 0.28)); }
.section--paper > .wrap { position: relative; z-index: 1; }
.section--paper .muted { color: var(--text-dark-2); }

.cities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}
.city {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.15rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.city:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(26, 18, 20, 0.45); }
.city--tba {
  background: transparent;
  border-style: dashed;
  border-top: 3px solid var(--line-dark-strong);
}
.city--tba:hover { transform: none; box-shadow: none; }
.city--current { box-shadow: inset 0 0 0 1px var(--red); }
.city__region {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.city__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
}
.city--tba .city__name { color: var(--text-dark-2); font-size: 1.55rem; }
.city__prov {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--text-dark-2);
  font-weight: 600;
}
.city__date {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--display);
  margin: 0 0 0.65rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-dark);
}
.city__mon { font-size: 0.98rem; letter-spacing: 0.14em; color: var(--red-deep); font-weight: 700; }
.city__day { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.city__yr { font-size: 0.98rem; letter-spacing: 0.1em; color: var(--text-dark-2); }
.city__date--tba {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--text-dark-2);
  font-style: italic;
}
.city__blurb { font-size: 0.9rem; color: var(--text-dark-2); line-height: 1.5; margin-bottom: 0.7rem; }
.city__venue {
  font-size: 0.85rem;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.45;
}
.city__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: auto 0 0;
  padding-top: 1rem;
}
.city__actions .btn { flex: 1 1 auto; }
.city .btn--ghost { --btn-fg: var(--text-dark); border-color: var(--line-dark-strong); }
.city .btn--ghost:hover { --btn-bg: var(--text-dark); --btn-fg: #fff; border-color: var(--text-dark); }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--line-dark-strong);
  border-radius: var(--radius);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dark-2);
}

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.78rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  font-size: 1.01rem;
  transition: color 0.2s ease;
}
.faq__item summary:hover { color: #fff; }
.faq__item[open] summary { color: #fff; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--red-label), var(--red-label)) center/13px 2px no-repeat,
    linear-gradient(var(--red-label), var(--red-label)) center/2px 13px no-repeat;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 3rem 1rem 0; color: var(--text-2); max-width: 68ch; font-size: 0.95rem; }

/* ------------------------------------------------------------------- cta */

.cta {
  position: relative;
  background: linear-gradient(115deg, var(--red-deep) 0%, #741015 42%, var(--maroon-700) 100%);
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.cta::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 620px;
  height: 620px;
  background: repeating-radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 1.5px 14px);
  opacity: 0.6;
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.cta__title { margin-bottom: 0.5rem; }
.cta__body { color: #f7e2e3; max-width: 50ch; margin-bottom: 0; }
.cta__note { color: #f0cccd; font-size: 0.87rem; margin-top: 0.8rem; }
.cta__action { justify-self: end; text-align: right; }
.cta__action .btn--primary {
  --btn-bg: #fff;
  --btn-fg: #7a0f14;
  border-color: #fff;
}
.cta__action .btn--primary:hover { --btn-bg: #ffe9ea; border-color: #ffe9ea; }
.cta__action .btn--pending { --btn-fg: #f7e2e3; border-color: rgba(255, 255, 255, 0.45); }
.cta__meta {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3d3d4;
}

/* ---------------------------------------------------------------- footer */

.foot {
  background: var(--ink);
  padding: clamp(2rem, 3.6vw, 2.85rem) 0 0;
  border-top: 1px solid var(--line);
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
  gap: 1.5rem 2.5rem;
  padding-bottom: 1.75rem;
}
.foot__brand { max-width: 30ch; }
.foot__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.4rem;
  max-width: 20ch;
}
.foot__tag { color: var(--rose); font-size: 0.94rem; margin: 0; }
.foot__h {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-label);
  font-weight: 600;
  margin: 0 0 0.9rem;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot__col a { color: var(--text-2); text-decoration: none; font-size: 0.94rem; }
.foot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__legal {
  border-top: 1px solid var(--line);
  padding-block: 1rem;
}
.foot__legal p { margin: 0; font-size: 0.8rem; color: var(--text-2); }

/* ---------------------------------------------------------------- motion */

/* Visible by default. Only a page whose JS is running opts into the animation —
   otherwise a blocked script leaves the city cards (and the only Register button
   on the hub) at opacity 0 over full-height boxes. */
[data-reveal] { opacity: 1; transform: none; }
/* @media (scripting: enabled) rather than a JS-set class: no inline script, so
   the CSP stays script-src 'self' with no hash to maintain. A browser too old
   to know the query simply never hides anything, which is the safe direction. */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .city:hover, .btn:hover { transform: none; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(290px, 0.8fr); }
}

@media (max-width: 1040px) {
  .hero {
    min-height: 0;
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }
  .hero__inner,
  .hero--art .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__next { max-width: 34rem; }
  /* Both offsets below are percentages of the lead box, so the cap goes on the
     box — putting it on the image itself would break the alignment nudge. */
  .hero__lead { max-width: 46rem; }
  .hero__media { opacity: 0.6; right: -32%; width: min(1000px, 108vw); }
  .hero__foot { display: none; }
  .lockup__tagline, .lockup__meta { max-width: 46ch; }
}

/* The chapter grid survives well below the point the hero has to stack: at
   1024 the narrow spine is still 165px and the list columns still 240px, so
   collapsing everything to one column there threw away a screen of width for
   nothing. The hero keeps its own, earlier breakpoint above. */
@media (max-width: 900px) {
  .cols,
  .cols--wide { grid-template-columns: 1fr; gap: 1.15rem; }
  .cols__side { position: static; }
  .cols--wide .cols__side .h2 { font-size: clamp(1.6rem, 5.6vw, 2.25rem); }
  .cols__main { border-top: 0; padding-top: 0; }
  .cta__inner { grid-template-columns: 1fr; }
  .cta__action { justify-self: start; text-align: left; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

/* Three city cards in two columns leaves the third one alone beside half a
   row of nothing. Below the width where three wide cards fit, go to three
   narrow ones rather than two and a gap. */
@media (min-width: 680px) and (max-width: 900px) {
  .cities { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
  .city { padding: 1rem 0.9rem; }
  .city__name { font-size: 1.5rem; }
  .city--tba .city__name { font-size: 1.3rem; }
  .city__day { font-size: 1.8rem; }
}

/* Four facts in a row stop fitting before the mobile breakpoint arrives. */
@media (min-width: 761px) and (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .facts li:nth-child(2n + 1) { padding-left: 0; }
  .facts li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .navtoggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--bar) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(12, 3, 4, 0.985);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    max-height: calc(100svh - var(--bar));
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
    font-size: 0.88rem;
  }
  .nav__list a[aria-current] { border-bottom-color: var(--line); padding-left: 0.7rem; border-left-color: var(--red); }
  .nav__cta { margin-top: 1.2rem; width: 100%; }
  .masthead { background: rgba(18, 4, 6, 0.94); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .hero { padding-top: calc(var(--bar) + 1.5rem); }
  .hero__media { right: -34%; width: 124vw; opacity: 0.5; }
  .hero__next { max-width: none; }
  /* Two up, not four stacked: date and location are already in the dossier
     directly above, so this band must not cost a third of a phone screen. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .facts li { padding: 0.7rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .facts li:nth-last-child(-n + 2) { border-bottom: 0; }
  .facts__v { font-size: 0.92rem; }
  /* Too narrow for a range side by side: time sits above its session. */
  .agenda__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .agenda__time { font-size: 0.85rem; padding-top: 0; }
  .rate { grid-template-columns: 1fr; }
  .rate__price { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.7rem; padding: 1.1rem 1.3rem; text-align: left; }
  .rate__amount { font-size: 2.1rem; }
  .rate__unit { margin-top: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--n1, .gallery--n3 { grid-template-columns: minmax(0, 1fr); }
  .gallery--n6 .gallery__item--lead { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .foot__inner { grid-template-columns: 1fr; gap: 2rem; }
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}

@media (max-width: 420px) {
  .hostask__sum { padding: 0.75rem 0.85rem; }
  .hostask__body { padding-inline: 0.85rem; }
  .countdown__unit { padding-inline: 0.1rem; }
  .countdown__unit small { letter-spacing: 0.12em; }
  .hero__actions .btn { width: 100%; }
  .city__actions .btn { width: 100%; }
}

/* ----------------------------------------------------------------- print */
/* Delegates print the event page and bring it with them, so the print sheet
   keeps the facts, the programme and the venue, and spells out every link. */

@media print {
  .masthead,
  .navtoggle,
  .nav,
  .hero__media,
  .hero__foot,
  .hero__actions,
  .countdown,
  .cta,
  .lightbox,
  .gallery,
  .hero::before,
  .hero::after { display: none !important; }

  html { scroll-behavior: auto; }
  body {
    background: #fff !important;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .hero,
  .section,
  .section--alt,
  .section--paper,
  .band,
  .foot,
  .theme,
  .panel,
  .rate__body,
  .hotelfeat,
  .city { background: #fff !important; background-image: none !important; }

  .hero {
    min-height: 0;
    padding: 0 0 0.5cm;
    display: block;
  }
  .section { padding: 0.55cm 0; border-top: 1px solid #ccc; }
  .section + .section { border-top: 1px solid #ccc; }
  .wrap { max-width: none; padding-inline: 0; }
  .cols { grid-template-columns: 1fr; gap: 0.3cm; }
  .cols__side { position: static; border-top-color: #000; }
  .cols__main { border-top: 0; padding-top: 0; }

  .h2, .lockup__title, .lockup__eyebrow, .lockup__series, .theme__title,
  .agenda__title, .venue__name, .rate__name, .city__name, .hero__nextcity,
  .facts__v, .lead, .foot__name { color: #000 !important; }
  .kicker, .facts__k, .theme__num, .agenda__time, .venue__addr, .foot__h,
  .hero__nextlabel, .city__region { color: #8c1116 !important; }
  .muted, .theme__body, .agenda__detail, .faq__a, .hero__nextvenue,
  .rate__note, .city__blurb, .foot__legal p { color: #333 !important; }
  .lockup__tagline, .foot__tag { color: #8c1116 !important; }
  .lockup__title { font-size: 30pt; }
  .h2 { font-size: 15pt; }

  .themes, .theme, .panel, .rate, .hotelfeat, .city, .faq__item,
  .agenda__row, .ticks li { border-color: #bbb !important; }
  .rate__price { background: #f0eae9 !important; }
  .rate__amount, .rate__unit { color: #000 !important; }

  .agenda__row, .theme, .faq__item, .city, .rate { break-inside: avoid; }
  .section { break-inside: auto; }
  h2, h3 { break-after: avoid; }

  /* Spell out destinations — a printed link is useless otherwise. */
  main a[href^="http"]::after,
  .foot a[href^="http"]::after,
  .foot a[href^="mailto"]::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  .btn { border: 1px solid #8c1116 !important; background: none !important; color: #8c1116 !important; padding: 0.15cm 0.2cm; }
}

/* generated at build time from the detected hero artwork */
.hero__lead { --hero-art: url("/assets/hero-artwork.png"); }