/* ==========================================================================
   EVOQUE EVENTS
   --------------------------------------------------------------------------
   The page is organised as a series of "chapters". Each chapter re-points the
   same six colour tokens, so a component written once reads correctly whether
   it lands on ink, paper or bone. Nothing below hard-codes a colour except the
   palette itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — five values and two derived accents. */
  --ink: #14110e;
  --ink-raised: #1e1a16;
  --ink-line: #2f2922;
  --paper: #f6f2ec;
  --paper-2: #ede7dd;
  --bone: #e2d9cb;
  --champagne: #dcc38c; /* accent on ink        — 11.0:1 */
  --bronze: #6b4e1e;    /* accent on paper 6.9:1, on bone 5.5:1, on bone surface 4.9:1 */
  --muted-on-ink: #a79e92;
  --muted-on-paper: #6b6259;
  --muted-on-bone: #554e46;

  /* Chapter defaults (paper). Overridden per chapter below. */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--muted-on-paper);
  --accent: var(--bronze);
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  --surface: color-mix(in srgb, var(--ink) 4%, transparent);
  --scrim: rgba(20, 17, 14, 0.55);
  --accent-solid: var(--ink);
  --accent-solid-fg: var(--paper);

  /* Type */
  --display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --t--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.74rem);
  --t--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --t-0: clamp(1rem, 0.97rem + 0.14vw, 1.08rem);
  --t-1: clamp(1.14rem, 1.08rem + 0.28vw, 1.32rem);
  --t-2: clamp(1.38rem, 1.25rem + 0.6vw, 1.85rem);
  --t-3: clamp(1.75rem, 1.48rem + 1.25vw, 2.7rem);
  --t-4: clamp(2.2rem, 1.72rem + 2.2vw, 3.9rem);
  --t-5: clamp(2.7rem, 1.85rem + 3.9vw, 5.6rem);
  --t-6: clamp(3.1rem, 1.6rem + 6.8vw, 8.2rem);

  /* Rhythm */
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --measure: 62ch;
  --chapter-y: clamp(3.75rem, 8vw, 8.5rem);
  --stack: clamp(1.5rem, 3vw, 2.75rem);
  --maxw: 82.5rem;
  --header-h: 4.5rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  scrollbar-color: var(--muted-on-paper) var(--paper-2);
}

.chapter--ink {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--muted-on-ink);
  --accent: var(--champagne);
  --rule: color-mix(in srgb, var(--paper) 18%, transparent);
  --rule-soft: color-mix(in srgb, var(--paper) 10%, transparent);
  --surface: color-mix(in srgb, var(--paper) 5%, transparent);
  --accent-solid: var(--champagne);
  --accent-solid-fg: var(--ink);
}

.chapter--paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--muted-on-paper);
  --accent: var(--bronze);
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  --surface: color-mix(in srgb, var(--ink) 4%, transparent);
}

.chapter--bone {
  --bg: var(--bone);
  --fg: var(--ink);
  --muted: var(--muted-on-bone);
  --accent: var(--bronze);
  --rule: color-mix(in srgb, var(--ink) 20%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink) 12%, transparent);
  --surface: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--champagne); color: var(--ink); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

.skip {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font: 500 var(--t--1) / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: inset-block-start 0.2s var(--ease);
}
.skip:focus { inset-block-start: 1rem; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.prose {
  max-width: var(--measure);
  margin-block-end: 1.15em;
  color: color-mix(in srgb, var(--fg) 86%, var(--bg));
}
.prose--lead {
  font-size: var(--t-1);
  line-height: 1.52;
  color: var(--fg);
}
.prose--invert { color: color-mix(in srgb, var(--fg) 84%, var(--bg)); }

.subhead {
  font-family: var(--mono);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block: 2.25rem 0.9rem;
}

.note {
  font-size: var(--t--1);
  color: var(--muted);
  max-width: 52ch;
}
.note--centred { margin-inline: auto; text-align: center; margin-block-start: 2.5rem; }

.tag {
  font-family: var(--mono);
  font-size: var(--t--2);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.chapter {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--chapter-y);
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.narrow { --maxw: 54rem; }

.rowend {
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--t--1);
  color: var(--muted);
}

.cardgrid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 44em) { .cardgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .cardgrid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   5. Images
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--frame-ratio, 3 / 2);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ink) 8%, var(--bone)) 0 48%,
      color-mix(in srgb, var(--ink) 14%, var(--bone)) 0 100%);
}
.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--failed > img { opacity: 0; }
.frame--failed::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--ink) 8%, transparent) 9px 10px);
}
.frame__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 2.5rem 1rem 0.75rem;
  font: 400 var(--t--2) / 1.4 var(--mono);
  letter-spacing: 0.04em;
  color: #f6f2ec;
  background: linear-gradient(transparent, rgba(20, 17, 14, 0.8));
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

.icon { width: 1.1em; height: 1.1em; flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  font: 500 var(--t--1) / 1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease-out);
}
.btn__arrow { transition: translate 0.35s var(--ease-out); }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { translate: 0.28rem 0; }

.btn--solid {
  background: var(--accent-solid);
  color: var(--accent-solid-fg);
  border-color: var(--accent-solid);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--accent-solid);
}

.btn--outline { border-color: var(--rule); color: var(--fg); }
.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--fg); background: var(--fg); color: var(--bg); }

.btn--ghost {
  padding-inline: 0;
  color: var(--accent);
  border-block-end: 1px solid currentColor;
  padding-block: 0.85rem;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { color: var(--fg); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 500 var(--t--1) / 1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-block-end: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-block-end: 0.4rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tlink:hover, .tlink:focus-visible { color: var(--fg); border-color: currentColor; }
.tlink__arrow { transition: translate 0.3s var(--ease-out); }
.tlink:hover .tlink__arrow { translate: 0.25rem 0; }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------------------
   7. Section headings — the hairline rule with an optional true count
   -------------------------------------------------------------------------- */

.shead { margin-block-end: clamp(2.25rem, 4.5vw, 3.75rem); max-width: 58rem; }

.shead__rule {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block-end: 0.85rem;
  margin-block-end: clamp(1.1rem, 2.5vw, 1.75rem);
  border-block-end: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shead__label { color: var(--accent); }
.shead__count { margin-inline-start: auto; color: var(--muted); letter-spacing: 0.1em; }

.shead__title { font-size: var(--t-4); }
.shead__lead {
  margin-block-start: 1.15rem;
  max-width: 52ch;
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--muted);
}

.sidehead {
  font-family: var(--mono);
  font-size: var(--t--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block-end: 0.7rem;
  border-block-end: 1px solid var(--rule);
  margin-block-end: 1.15rem;
}
.sidehead + .sidehead,
.plainlist + .sidehead,
.hours + .sidehead { margin-block-start: 2.25rem; }

/* --------------------------------------------------------------------------
   8. Cue sheet — the signature
   -------------------------------------------------------------------------- */

.cuesheet { border-block-start: 1px solid var(--rule); }

.cuesheet__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: 0.35rem 1.25rem;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule-soft);
  align-items: start;
}
.cuesheet__time {
  font: 500 var(--t--1) / 1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-block-start: 0.15em;
  font-variant-numeric: tabular-nums;
}
.cuesheet__body { display: grid; gap: 0.3rem; }
.cuesheet__cue {
  font-family: var(--display);
  font-size: var(--t-1);
  line-height: 1.25;
}
.cuesheet__note { color: var(--muted); font-size: var(--t--1); line-height: 1.55; max-width: 60ch; }
.cuesheet__tag {
  grid-column: 2;
  font: 500 var(--t--2) / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 52em) {
  .cuesheet--wide .cuesheet__row { grid-template-columns: 9rem 1fr; gap: 0.35rem 2.5rem; }
  .cuesheet__tag { grid-column: 3; justify-self: end; }
  .cuesheet--wide .cuesheet__row:has(.cuesheet__tag) { grid-template-columns: 6.5rem 1fr auto; }
}

/* --------------------------------------------------------------------------
   9. Masthead, drawer, rails
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  border-block-end: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    padding 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
/* Over a hero the header is transparent — but only until it is stuck, or the
   paper-coloured nav would disappear against the first light chapter. The
   :not() keeps this rule from out-specifying the stuck state below. */
body:has(main > .hero, main > .ehero, main > .mhero, main > .notfound) .masthead:not(.is-solid) { background: transparent; }
.masthead.is-solid {
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end-color: rgba(246, 242, 236, 0.14);
}

.masthead__inner {
  width: min(100% - (var(--gutter) * 2), 100rem);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  padding-block: 0.5rem;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.wordmark__name {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.wordmark__sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
}

.mainnav { display: none; margin-inline-start: auto; }
.mainnav__list { display: flex; gap: clamp(0.9rem, 1.7vw, 1.8rem); }
.mainnav a {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  transition: color 0.3s var(--ease);
}
.mainnav a::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--champagne);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.35s var(--ease-out);
}
.mainnav a:hover, .mainnav a:focus-visible { color: var(--paper); }
.mainnav a:hover::after,
.mainnav a:focus-visible::after,
.mainnav a[aria-current='page']::after { scale: 1 1; }
.mainnav a[aria-current='page'] { color: var(--champagne); }

.masthead__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.75rem; }
.masthead__cta {
  display: none;
  --accent-solid: var(--champagne);
  --accent-solid-fg: var(--ink);
  padding: 0.7rem 1.15rem;
}

.burger {
  display: grid;
  place-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(246, 242, 236, 0.28);
  background: none;
  color: var(--paper);
}
.burger__lines { display: grid; gap: 6px; width: 1.15rem; }
.burger__lines i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
}

@media (min-width: 62em) {
  .mainnav { display: block; }
  .masthead__actions { margin-inline-start: 0; }
  .masthead__cta { display: inline-flex; }
  .burger { display: none; }
}

/* Drawer */
.drawer {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  translate: 0 -1.5rem;
  transition: opacity 0.35s var(--ease), translate 0.35s var(--ease-out), display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}
.drawer[open] { opacity: 1; translate: 0 0; }
@starting-style { .drawer[open] { opacity: 0; translate: 0 -1.5rem; } }
.drawer::backdrop { background: rgba(20, 17, 14, 0.7); }

.drawer__inner {
  height: 100%;
  padding: 1.25rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.drawer__close {
  display: grid; place-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(246, 242, 236, 0.28);
  background: none; color: var(--paper);
}
.drawer__close .icon { width: 1.15rem; height: 1.15rem; }

.drawer__list { display: grid; }
.drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid rgba(246, 242, 236, 0.12);
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  text-decoration: none;
  color: var(--paper);
}
.drawer__list a[aria-current='page'] { color: var(--champagne); }
.drawer__index {
  font: 500 0.68rem / 1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--champagne);
}
.drawer__foot { margin-block-start: auto; display: grid; gap: 1.25rem; justify-items: start; }
.drawer__foot .btn--solid { --accent-solid: var(--champagne); --accent-solid-fg: var(--ink); }
.drawer__contact { display: grid; gap: 0.35rem; font-size: var(--t--1); color: var(--muted-on-ink); }
.drawer__contact a { text-decoration: none; }

html.js .drawer[open] .drawer__list li {
  animation: drawer-in 0.45s var(--ease-out) backwards;
  animation-delay: calc(60ms + var(--i) * 35ms);
}
@keyframes drawer-in { from { opacity: 0; translate: 0 1rem; } }

/* Scroll progress */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--champagne);
  transform-origin: 0 50%;
  scale: 0 1;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress__bar {
      animation: progress-grow linear;
      animation-timeline: scroll(root block);
    }
    @keyframes progress-grow { from { scale: 0 1; } to { scale: 1 1; } }
  }
}

/* The show rail — a channel strip naming the chapter you are in */
.showrail {
  display: none;
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: clamp(0.75rem, 1.6vw, 1.5rem);
  translate: 0 -50%;
  z-index: 80;
  pointer-events: none;
  align-items: center;
  gap: 0.9rem;
}
.showrail__line { width: 1px; height: 4.5rem; background: currentColor; opacity: 0.35; }
.showrail__label {
  writing-mode: vertical-rl;
  font: 500 0.62rem / 1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.showrail[data-ground='dark'] { color: var(--paper); }
.showrail[data-ground='light'] { color: var(--ink); }
@media (min-width: 90em) {
  html.js .showrail { display: flex; }
}

/* Back to top — a solid champagne disc reads at full contrast over ink,
   paper or bone alike, unlike the old dark-on-dark chip. */
.totop {
  position: fixed;
  inset-block-end: clamp(1.25rem, 3vw, 2.25rem);
  inset-inline-end: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 85;
  display: grid;
  place-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--champagne);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(20, 17, 14, 0.28);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease), scale 0.2s var(--ease-out);
}
.totop .icon { width: 1.4rem; height: 1.4rem; }
.totop:hover {
  background: var(--ink);
  color: var(--champagne);
  translate: 0 -4px;
  box-shadow: 0 12px 26px rgba(20, 17, 14, 0.36);
}
.totop:active { scale: 0.94; }
@media (max-width: 47.99em) { .totop { inset-block-end: 5.75rem; } }

/* Sticky mobile action bar */
.mobilebar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 88;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1px;
  background: rgba(246, 242, 236, 0.14);
  border-block-start: 1px solid rgba(246, 242, 236, 0.14);
}
.mobilebar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  min-height: 3.25rem;
  background: var(--ink);
  color: var(--paper);
  font: 500 var(--t--2) / 1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobilebar__item--cta { background: var(--champagne); color: var(--ink); }
@media (min-width: 48em) { .mobilebar { display: none; } }
@media (max-width: 47.99em) { body { padding-block-end: 3.4rem; } }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background-color: var(--ink);
  min-height: min(100svh, 56rem);
  display: grid;
  align-items: end;
  padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 8vh, 6rem);
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 17, 14, 0.94) 0%, rgba(20, 17, 14, 0.62) 45%, rgba(20, 17, 14, 0.34) 100%),
    linear-gradient(to bottom, rgba(20, 17, 14, 0.6) 0, rgba(20, 17, 14, 0) 18%),
    linear-gradient(to right, rgba(20, 17, 14, 0.55), transparent 62%);
}
.hero__inner {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.hero__eyebrow {
  font: 500 var(--t--2) / 1.5 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-block-end: clamp(1rem, 3vw, 1.75rem);
}
.hero__title {
  font-size: var(--t-6);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.028em;
  display: grid;
}
.hero__line { display: block; }
.hero__line--accent { font-style: italic; color: var(--champagne); }
.hero__lead {
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
  max-width: 46ch;
  font-size: var(--t-1);
  line-height: 1.5;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.hero__actions {
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.hero__actions .btn--solid,
.mhero__actions .btn--solid { --accent-solid: var(--champagne); --accent-solid-fg: var(--ink); }
.hero__actions .btn--outline { --fg: var(--paper); --rule: rgba(246, 242, 236, 0.4); --bg: var(--ink); }

.hero__scroll {
  position: absolute;
  inset-block-end: clamp(1rem, 3vh, 2rem);
  inset-inline-end: var(--gutter);
  display: none;
  align-items: center;
  gap: 0.75rem;
  font: 500 0.62rem / 1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  text-decoration: none;
}
.hero__scrollline {
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: right;
}
@media (min-width: 62em) { .hero__scroll { display: flex; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__scrollline { animation: rail-pulse 2.6s var(--ease) infinite; }
  @keyframes rail-pulse { 0%, 100% { scale: 1 1; opacity: 1; } 50% { scale: 0.45 1; opacity: 0.5; } }
}

/* Page heroes */
.phero { padding-block-start: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.phero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56em) {
  .phero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .phero__inner--wide { grid-template-columns: 1fr; max-width: 56rem; }
}
.phero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 var(--t--2) / 1.4 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 1.1rem;
}
.phero__title { font-size: var(--t-5); }
.phero__title--sm { font-size: var(--t-4); }
.phero__lead {
  margin-block-start: 1.35rem;
  max-width: 50ch;
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--muted);
}
.phero__note { margin-block-start: 1.5rem; display: flex; align-items: center; gap: 0.6rem; font-size: var(--t--1); color: var(--muted); }
.phero__price { margin-block-start: 1.5rem; font-size: var(--t--1); color: var(--muted); }
.phero__price strong { font-family: var(--mono); font-size: var(--t-1); color: var(--accent); font-weight: 500; }
.phero__price span { display: block; }
.phero__actions { margin-block-start: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.85rem; }

.crumbs { margin-block-end: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-inline-end: 0.5rem; opacity: 0.5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* Detail hero with a full-bleed image */
.dhero, .ehero { background-color: var(--ink); position: relative; padding-block-start: calc(var(--header-h) + clamp(9rem, 26vw, 17rem)); isolation: isolate; overflow: hidden; }
.dhero__media, .ehero__media { position: absolute; inset: 0; z-index: -2; }
.dhero__media .frame, .ehero__img { width: 100%; height: 100%; }
.ehero__img { object-fit: cover; }
.dhero::after, .ehero__scrim {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 17, 14, 0.97) 8%, rgba(20, 17, 14, 0.72) 48%, rgba(20, 17, 14, 0.42) 100%),
    /* protects the transparent header against a bright photograph */
    linear-gradient(to bottom, rgba(20, 17, 14, 0.7) 0, rgba(20, 17, 14, 0) 20%);
}
.dhero__eyebrow, .ehero__eyebrow {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font: 500 var(--t--2) / 1.4 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-on-ink);
  margin-block-end: 1rem;
}
.dhero__title, .ehero__title { font-size: var(--t-5); }
.dhero__lead, .ehero__lead { margin-block-start: 1.35rem; max-width: 50ch; font-size: var(--t-1); line-height: 1.5; color: color-mix(in srgb, var(--paper) 82%, transparent); }

.ahero { text-align: left; }
.ahero__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-block-end: 1.15rem; }
.ahero__title { font-size: var(--t-4); }
.ahero__excerpt { margin-block-start: 1.25rem; font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.ahero__by { margin-block-start: 1.25rem; font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.ahero__media { margin-block-start: clamp(2rem, 5vw, 3.5rem); --maxw: 82.5rem; }

/* --------------------------------------------------------------------------
   11. Stats, chips, meta strips
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56em) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats__item { border-block-start: 1px solid var(--rule); padding-block-start: 1rem; }
.stats__value {
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.stats__label {
  margin-block-start: 0.6rem;
  font: 500 var(--t--1) / 1.4 var(--body);
  letter-spacing: 0.04em;
  color: var(--fg);
}
.stats__sub { display: block; font-weight: 400; color: var(--muted); font-size: var(--t--2); margin-block-start: 0.2rem; }

.metastrip {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-block-start: 1px solid var(--rule);
  padding-block-start: 1.5rem;
}
.metastrip--tight { margin-block-start: 1.75rem; }
.metastrip dt { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.metastrip dd { margin-block-start: 0.35rem; font-size: var(--t-0); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  font: 400 var(--t--2) / 1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chips--stack { flex-direction: column; align-items: flex-start; }

.ticklist { display: grid; gap: 0.7rem; }
.ticklist li { display: flex; gap: 0.7rem; align-items: baseline; font-size: var(--t--1); line-height: 1.5; }
.ticklist .icon { color: var(--accent); width: 0.95rem; height: 0.95rem; translate: 0 0.15rem; }
.ticklist a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.ticklist a:hover { color: var(--accent); }
@media (min-width: 44em) { .ticklist--2col { grid-template-columns: 1fr 1fr; gap: 0.7rem 2rem; } }

.crosslist { display: grid; gap: 0.55rem; }
.crosslist li { display: flex; gap: 0.7rem; font-size: var(--t--1); color: var(--muted); }

.pilllist { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pilllist a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  font-size: var(--t--1);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.pilllist a:hover { border-color: var(--accent); color: var(--accent); }
.pilllist .icon { width: 0.85rem; height: 0.85rem; }

.plainlist { display: grid; gap: 0.9rem; }
.plainlist li { display: grid; gap: 0.15rem; font-size: var(--t--1); }
.plainlist a { text-decoration: none; }
.plainlist a:hover { color: var(--accent); }
.plainlist span { color: var(--muted); font-size: var(--t--2); }

.hours { display: grid; gap: 0.75rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t--1); border-block-end: 1px dotted var(--rule); padding-block-end: 0.55rem; }
.hours dd { color: var(--muted); font-family: var(--mono); font-size: var(--t--2); }

.sidefacts { display: grid; gap: 1rem; margin-block: 1.5rem; }
.sidefacts dt { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sidefacts dd { margin-block-start: 0.25rem; font-size: var(--t--1); }
@media (min-width: 40em) { .sidefacts--wide { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } }

/* --------------------------------------------------------------------------
   12. Two-column layouts
   -------------------------------------------------------------------------- */

.twocol { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); }
@media (min-width: 62em) { .twocol { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); } }
.twocol__side { align-self: start; }
@media (min-width: 62em) { .twocol__side { position: sticky; top: calc(var(--header-h) + 2rem); } }
.side__cta { margin-block-start: 1.75rem; }

/* Home intro */
.intro { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 62em) { .intro { grid-template-columns: 1fr 1fr; } }
.intro__body { max-width: 46ch; margin-block-end: 1.15em; color: var(--muted); }
.intro__media { position: relative; padding-block-end: clamp(3rem, 9vw, 6rem); }
.intro__big { width: min(100%, 30rem); }
.intro__small {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(52%, 15rem);
  border: 6px solid var(--bg);
}
.intro__vertical {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -0.25rem;
  writing-mode: vertical-rl;
  font: 500 0.62rem / 1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 61.99em) { .intro__vertical { display: none; } }

/* --------------------------------------------------------------------------
   13. Cards
   -------------------------------------------------------------------------- */

.ecard__link, .scard__link, .acard__link { display: block; text-decoration: none; color: inherit; }

.ecard__frame, .scard__frame, .acard__frame { transition: none; }
.ecard__frame img, .scard__frame img, .acard__frame img, .catcard__frame img, .vcard__frame img, .minicard img, .feature__frame img {
  transition: scale 0.7s var(--ease-out);
}
.ecard__link:hover .ecard__frame img,
.scard__link:hover .scard__frame img,
.acard__link:hover .acard__frame img,
.minicard a:hover img,
.feature:hover .feature__frame img,
.vcard:hover .vcard__frame img { scale: 1.05; }

.ecard__body, .scard__body, .acard__body { padding-block-start: 1.15rem; }
.ecard__meta, .acard__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem;
  font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-block-end: 0.65rem;
}
.ecard__title, .acard__title { font-size: var(--t-2); }
.ecard__summary, .acard__excerpt { margin-block-start: 0.6rem; color: var(--muted); font-size: var(--t--1); line-height: 1.55; }
.ecard__facts { margin-block-start: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.ecard__cta, .acard__cta, .scard__cta, .feature__cta {
  margin-block-start: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 var(--t--2) / 1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.ecard__cta .icon, .acard__cta .icon, .scard__cta .icon, .feature__cta .icon { transition: translate 0.35s var(--ease-out); }
.ecard__link:hover .ecard__cta .icon,
.acard__link:hover .acard__cta .icon,
.scard__link:hover .scard__cta .icon,
.feature:hover .feature__cta .icon { translate: 0.3rem 0; }

.scard__index { display: flex; align-items: center; gap: 0.6rem; font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.16em; color: var(--accent); margin-block-end: 0.7rem; }
.scard__icon { width: 1.15rem; height: 1.15rem; }
.scard__title { font-size: var(--t-2); }
.scard__short { margin-block-start: 0.55rem; color: var(--muted); font-size: var(--t--1); }

/* Category cards */
.catgrid { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 34em) { .catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 76em) { .catgrid { grid-template-columns: repeat(4, 1fr); } }

.catcard { background-color: var(--ink); position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--paper); isolation: isolate; }
.catcard__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 14, 0.94) 6%, rgba(20, 17, 14, 0.42) 58%, rgba(20, 17, 14, 0.1) 100%);
  transition: opacity 0.4s var(--ease);
}
.catcard:hover .catcard__scrim, .catcard:focus-visible .catcard__scrim { opacity: 0.82; }
.catcard__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.25rem; padding-inline-end: 3.25rem; display: grid; gap: 0.4rem; }
.catcard__title { font-family: var(--display); font-size: var(--t-2); line-height: 1.1; }
.catcard__text {
  font-size: var(--t--2);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.catcard__go { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.1rem; color: var(--champagne); transition: translate 0.4s var(--ease-out); }
.catcard:hover .catcard__go, .catcard:focus-visible .catcard__go { translate: 0.35rem -0.35rem; }
.catcard:hover .catcard__frame img { scale: 1.06; }

/* Venue cards */
.venuegrid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 58em) { .venuegrid { grid-template-columns: repeat(2, 1fr); } }
.vcard { border-block-start: 1px solid var(--rule); padding-block-start: 1.25rem; }
.vcard__frame { margin-block-end: 1.25rem; }
.vcard__loc { display: flex; align-items: center; gap: 0.45rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vcard__loc .icon { width: 0.9rem; height: 0.9rem; color: var(--accent); }
.vcard__title { margin-block-start: 0.5rem; font-size: var(--t-2); }
.vcard__title a { display: inline-block; padding-block: 0.55rem; text-decoration: none; }
.vcard__title a:hover { color: var(--accent); }
.vcard__summary { margin-block-start: 0.6rem; color: var(--muted); font-size: var(--t--1); }
.vcard__specs { margin-block: 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; border-block: 1px solid var(--rule-soft); padding-block: 0.9rem; }
.vcard__specs dt { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vcard__specs dd { margin-block-start: 0.2rem; font-family: var(--mono); font-size: var(--t--1); font-weight: 500; color: var(--accent); }
.vcard__btn { margin-block-start: 1.25rem; }

/* Mini cards */
.minicards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 40em) { .minicards { grid-template-columns: repeat(3, 1fr); } .minicards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .minicards--4 { grid-template-columns: repeat(4, 1fr); } }
.minicard a { display: grid; gap: 0.7rem; text-decoration: none; color: inherit; }
.minicard .frame { overflow: hidden; }
.minicard__title { font-family: var(--display); font-size: var(--t-1); line-height: 1.2; }
.minicard__meta { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.minicard a:hover .minicard__title { color: var(--accent); }

/* Feature card (journal) */
.feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); text-decoration: none; color: inherit; align-items: center; }
@media (min-width: 62em) { .feature { grid-template-columns: 1.15fr 0.85fr; } }
.feature__frame { overflow: hidden; }
.feature__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.85rem; }
.feature__title { font-size: var(--t-3); }
.feature__excerpt { margin-block-start: 0.9rem; color: var(--muted); max-width: 46ch; }

/* Testimonials */
.tcard {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.35rem, 3vw, 2.15rem);
  border: 1px solid var(--rule);
  background: var(--surface);
  height: 100%;
}
.tcard__rating { color: var(--accent); letter-spacing: 0.25em; font-size: var(--t--1); }
.tcard__quote { font-family: var(--display); font-size: var(--t-1); line-height: 1.45; font-style: italic; }
.tcard__by { display: flex; gap: 0.9rem; align-items: center; margin-block-start: auto; }
.tcard__avatar { width: 3rem; height: 3rem; object-fit: cover; border-radius: 50%; flex: none; }
.tcard__by > span { display: grid; gap: 0.1rem; }
.tcard__name { font-weight: 600; font-size: var(--t--1); }
.tcard__role, .tcard__event { font-size: var(--t--2); color: var(--muted); }
.tcard__event { font-family: var(--mono); letter-spacing: 0.06em; }

.tgrid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 44em) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .tgrid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   14. Sliders and rails
   -------------------------------------------------------------------------- */

.tslider__track,
.hrail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 26rem);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-block-end: 1rem;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  contain: paint;
}
.tslider__slide, .hrail__track > * { scroll-snap-align: start; }
.tslider--big .tslider__track { grid-auto-columns: min(92%, 40rem); }
@media (min-width: 68em) {
  .tslider__track { grid-auto-columns: calc((100% - 3.5rem) / 3); }
  .tslider--big .tslider__track { grid-auto-columns: calc((100% - 1.75rem) / 2); }
}
.tslider__controls, .hrail__controls {
  margin-block-start: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tslider__count { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.sbtn {
  display: grid; place-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--rule);
  background: none; color: var(--fg);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sbtn:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sbtn:disabled { opacity: 0.32; cursor: not-allowed; }
.sbtn__icon--back { rotate: 180deg; }

.hrail__track { grid-auto-columns: min(80%, 24rem); }
@media (min-width: 62em) { .hrail__track { grid-auto-columns: calc((100% - 3.5rem) / 3); } }
.xcard { display: grid; }
.xcard__frame { overflow: hidden; }
.xcard__body { padding-block-start: 1.1rem; }
.xcard__cue { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.14em; color: var(--accent); }
.xcard__title { margin-block-start: 0.55rem; font-size: var(--t-2); }
.xcard__short { margin-block-start: 0.5rem; color: var(--muted); font-size: var(--t--1); }

.xlist { display: grid; }
.xrow {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: 1px solid var(--rule-soft);
}
.xrow:first-child { border-block-start: 1px solid var(--rule); }
@media (min-width: 62em) { .xrow { grid-template-columns: 6rem minmax(0, 1.1fr) minmax(0, 1fr); } }
.xrow__cue { font: 500 var(--t--1) / 1.5 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.xrow__title { font-size: var(--t-2); }
.xrow__body { margin-block-start: 0.6rem; color: var(--muted); font-size: var(--t--1); }
.xrow__detail { display: grid; gap: 0.6rem; }
.xrow__detail li { display: flex; gap: 0.65rem; align-items: baseline; font-size: var(--t--1); }
.xrow__detail .icon { color: var(--accent); width: 0.9rem; height: 0.9rem; translate: 0 0.15rem; }

/* --------------------------------------------------------------------------
   15. Filters
   -------------------------------------------------------------------------- */

.filterbar {
  display: grid;
  gap: 1.25rem;
  margin-block-end: clamp(2rem, 4vw, 3rem);
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--rule);
}
.filterbar__search { position: relative; display: flex; align-items: center; }
.filterbar__icon { position: absolute; inset-inline-start: 0.9rem; color: var(--muted); pointer-events: none; }
.filterbar__input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.75rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--t--1);
}
.filterbar__input::placeholder { color: var(--muted); }
.filterbar__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 2.6rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  font: 500 var(--t--2) / 1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip[aria-pressed='true'] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filterbar__count { font: 400 var(--t--2) / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 62em) {
  .filterbar { grid-template-columns: minmax(14rem, 22rem) 1fr auto; align-items: center; gap: 1.5rem; }
  .filterbar--simple { grid-template-columns: 1fr auto; }
}

.emptystate { margin-block-start: 3rem; text-align: center; color: var(--muted); font-size: var(--t--1); }

.venuefilter { display: grid; gap: 1rem; margin-block-end: clamp(2rem, 4vw, 3rem); padding-block-end: 1.5rem; border-block-end: 1px solid var(--rule); align-items: end; }
@media (min-width: 56em) { .venuefilter { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 1.25rem; } }
.venuefilter__field { display: grid; gap: 0.4rem; }
.venuefilter__field label { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.venuefilter select { padding: 0.75rem 0.9rem; border: 1px solid var(--rule); background: var(--surface); color: var(--fg); font-size: var(--t--1); }
.venuefilter__reset { justify-self: start; }

/* --------------------------------------------------------------------------
   16. Galleries and lightbox
   -------------------------------------------------------------------------- */

.lightgrid { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 40em) { .lightgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .lightgrid { grid-template-columns: repeat(3, 1fr); } }
.lightgrid--masonry { display: block; columns: 1; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.lightgrid--masonry .lightgrid__item { break-inside: avoid; margin-block-end: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 40em) { .lightgrid--masonry { columns: 2; } }
@media (min-width: 62em) { .lightgrid--masonry { columns: 3; } }

.lightgrid__btn, .masonry__btn, .essaygrid__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  position: relative; overflow: hidden; cursor: zoom-in;
}
.lightgrid__btn img, .masonry__btn img, .essaygrid__btn img { transition: scale 0.7s var(--ease-out); }
.lightgrid__btn:hover img, .masonry__btn:hover img, .essaygrid__btn:hover img { scale: 1.05; }

.masonry { columns: 1; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.masonry__item { break-inside: avoid; margin-block-end: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 34em) { .masonry { columns: 2; } }
@media (min-width: 56em) { .masonry { columns: 3; } }
@media (min-width: 82em) { .masonry { columns: 4; } }
/* Shown by default: on a touch device there is no hover, so a caption hidden
   behind one is a caption nobody ever reads. It fades in on hover only where a
   fine pointer exists. */
.masonry__meta {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: grid; gap: 0.2rem;
  padding: 2.5rem 0.9rem 0.8rem;
  text-align: left;
  background: linear-gradient(transparent, rgba(20, 17, 14, 0.86));
  color: #f6f2ec;
  transition: opacity 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .masonry__meta { opacity: 0; }
  .masonry__btn:hover .masonry__meta,
  .masonry__btn:focus-visible .masonry__meta { opacity: 1; }
}
.masonry__event { font-family: var(--display); font-size: var(--t-0); }
.masonry__cat { font: 400 var(--t--2) / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }

.essaygrid { display: grid; gap: clamp(0.9rem, 2vw, 1.75rem); }
@media (min-width: 56em) { .essaygrid { grid-template-columns: repeat(2, 1fr); } .essaygrid__item--wide { grid-column: 1 / -1; } }
.essaygrid__cap {
  display: block;
  margin-block-start: 0.6rem;
  text-align: left;
  font: 400 var(--t--2) / 1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.essaylist { border-block-start: 1px solid var(--rule); }
.essayrow a {
  display: grid;
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: padding-inline-start 0.35s var(--ease-out), color 0.3s var(--ease);
}
@media (min-width: 56em) { .essayrow a { grid-template-columns: minmax(0, 1fr) auto 6rem 2rem; } }
.essayrow a:hover { padding-inline-start: 0.75rem; color: var(--accent); }
.essayrow__title { font-family: var(--display); font-size: var(--t-1); }
.essayrow__meta, .essayrow__count { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.essayrow__go { color: var(--accent); }

/* Lightbox dialog */
.lightbox {
  border: 0; padding: 0; margin: auto;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  background: rgba(20, 17, 14, 0.97);
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.3s var(--ease), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.lightbox[open] { opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: rgba(20, 17, 14, 0.9); }
.lightbox__inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  padding: 0.9rem var(--gutter) 1.25rem;
}
.lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox__counter { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.14em; color: var(--champagne); }
.lightbox__close {
  display: grid; place-content: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(246, 242, 236, 0.28);
  background: none; color: var(--paper);
}
.lightbox__stage { display: grid; place-items: center; min-height: 0; position: relative; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__nav {
  position: absolute; inset-block: 0; display: grid; place-content: center;
  width: clamp(3rem, 8vw, 5rem);
  border: 0; background: none; color: var(--paper);
  transition: background-color 0.3s var(--ease);
}
.lightbox__nav:hover { background: rgba(246, 242, 236, 0.1); }
.lightbox__nav .icon { width: 1.8rem; height: 1.8rem; }
.lightbox__nav--prev { inset-inline-start: 0; }
.lightbox__nav--prev .icon { rotate: 180deg; }
.lightbox__nav--next { inset-inline-end: 0; }
.lightbox__cap { text-align: center; font-size: var(--t--1); color: color-mix(in srgb, var(--paper) 72%, transparent); min-height: 2.4em; }

/* --------------------------------------------------------------------------
   17. Process, timeline, principles, steps
   -------------------------------------------------------------------------- */

.processline__track { display: grid; gap: 0; border-block-start: 1px solid var(--rule); }
@media (min-width: 62em) { .processline__track { grid-template-columns: repeat(6, 1fr); border-block-end: 1px solid var(--rule); } }
.pstep {
  display: grid; gap: 0.3rem; text-align: left;
  width: 100%;
  padding: 1.15rem 1rem 1.15rem 0;
  border: 0;
  border-block-end: 1px solid var(--rule-soft);
  background: none;
  color: var(--muted);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
@media (min-width: 62em) {
  .pstep { padding: 1.5rem 1rem; border-block-end: 0; border-inline-start: 1px solid var(--rule-soft); }
  .processline__step:first-child .pstep { border-inline-start: 0; }
}
.pstep__n { font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.18em; color: var(--accent); }
.pstep__name { font-family: var(--display); font-size: var(--t-1); color: var(--fg); }
.pstep__when { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.08em; }
.pstep[aria-selected='true'] { background: var(--surface); color: var(--fg); }
.pstep[aria-selected='true'] .pstep__name { color: var(--accent); }

.ppanel { padding-block-start: clamp(1.75rem, 4vw, 2.75rem); max-width: 46rem; }
.ppanel__when { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.14em; color: var(--accent); }
.ppanel__title { margin-block-start: 0.75rem; font-size: var(--t-3); }
.ppanel__body { margin-block-start: 0.9rem; font-size: var(--t-1); line-height: 1.5; color: var(--muted); }

.timeline { border-block-start: 1px solid var(--rule); }
.tstage { border-block-end: 1px solid var(--rule-soft); }
.tstage__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  align-items: center;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
}
.tstage__summary::-webkit-details-marker { display: none; }
@media (min-width: 44em) { .tstage__summary { grid-template-columns: 11rem 1fr auto; } }
.tstage__when { font: 500 var(--t--1) / 1.4 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.tstage__title { font-family: var(--display); font-size: var(--t-2); }
.tstage__mark { display: grid; place-content: center; width: 2rem; height: 2rem; border: 1px solid var(--rule); color: var(--accent); transition: rotate 0.35s var(--ease-out); }
.tstage[open] .tstage__mark { rotate: 45deg; }
.tstage__panel { padding-block: 0 1.5rem; display: grid; gap: 1.15rem; max-width: 56ch; }
@media (min-width: 44em) { .tstage__panel { padding-inline-start: 12.5rem; } }
.tstage__panel p { color: var(--muted); }

.principles { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48em) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principle { border-block-start: 1px solid var(--rule); padding-block-start: 1.15rem; }
.principle__n { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.2em; color: var(--accent); }
.principle__title { margin-block-start: 0.75rem; font-size: var(--t-2); }
.principle__body { margin-block-start: 0.7rem; color: var(--muted); max-width: 44ch; }

.stepgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 44em) { .stepgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .stepgrid { grid-template-columns: repeat(3, 1fr); } }
.stepcard { border-block-start: 1px solid var(--rule); padding-block-start: 1.15rem; }
.stepcard__n { font-family: var(--display); font-size: var(--t-3); color: var(--accent); line-height: 1; }
.stepcard__title { margin-block-start: 0.6rem; font-size: var(--t-2); }
.stepcard__when { margin-block-start: 0.35rem; font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stepcard__body { margin-block-start: 0.75rem; color: var(--muted); font-size: var(--t--1); }

.featgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48em) { .featgrid { grid-template-columns: repeat(3, 1fr); } }
.feat { border-block-start: 1px solid var(--rule); padding-block-start: 1.15rem; }
.feat__n { font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.2em; color: var(--accent); }
.feat__title { margin-block-start: 0.7rem; font-size: var(--t-1); }
.feat__body { margin-block-start: 0.6rem; color: var(--muted); font-size: var(--t--1); }

/* Team, offices */
.teamgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .teamgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72em) { .teamgrid { grid-template-columns: repeat(3, 1fr); } }
.member__frame { margin-block-end: 0.9rem; overflow: hidden; }
.member__frame img, .speaker__frame img { object-position: 50% 22%; }
.tcard__avatar { object-position: 50% 25%; }
.member__name { font-size: var(--t-1); }
.member__role { margin-block-start: 0.2rem; font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.member__note { margin-block-start: 0.55rem; font-size: var(--t--2); color: var(--muted); line-height: 1.5; }

.officegrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48em) { .officegrid { grid-template-columns: repeat(3, 1fr); } }
.office { border-block-start: 1px solid var(--rule); padding-block-start: 1.15rem; }
.office__label { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.office__city { margin-block-start: 0.5rem; font-size: var(--t-2); }
.office__lines { margin-block-start: 0.7rem; font-style: normal; color: var(--muted); font-size: var(--t--1); line-height: 1.6; }
.office__phone { margin-block-start: 0.8rem; }
.office__phone a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--mono); font-size: var(--t--1); color: var(--accent); }

/* Service list rows */
.svclist { border-block-start: 1px solid var(--rule); }
.svcrow a {
  display: grid;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: padding-inline-start 0.35s var(--ease-out);
}
@media (min-width: 56em) { .svcrow a { grid-template-columns: 3rem minmax(0, 16rem) 1fr 2rem; } }
.svcrow a:hover { padding-inline-start: 0.75rem; }
.svcrow__n { font: 500 var(--t--2) / 1.6 var(--mono); letter-spacing: 0.16em; color: var(--accent); }
.svcrow__name { font-family: var(--display); font-size: var(--t-2); }
.svcrow__short { color: var(--muted); font-size: var(--t--1); }
.svcrow__go { color: var(--accent); transition: translate 0.35s var(--ease-out); }
.svcrow a:hover .svcrow__go { translate: 0.35rem 0; }
.svcrow a:hover .svcrow__name { color: var(--accent); }

/* Wordmark strip */
.marks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block-start: 1px solid var(--rule);
  border-inline-start: 1px solid var(--rule);
}
@media (min-width: 40em) { .marks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .marks { grid-template-columns: repeat(5, 1fr); } }
.marks__item {
  display: grid;
  place-content: center;
  gap: 0.65rem;
  min-height: 7.5rem;
  padding: 1.25rem 1rem;
  border-block-end: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.marks__mark {
  width: 1.9rem;
  height: 1.9rem;
  margin-inline: auto;
  color: var(--accent);
  transition: color 0.35s var(--ease), scale 0.35s var(--ease-out);
}
.marks__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  letter-spacing: 0.16em;
  text-align: center;
}
.marks__item:hover { color: var(--accent); }
.marks__item:hover .marks__mark { scale: 1.1; }
.marks__note { margin-block-start: 1.25rem; font-size: var(--t--2); color: var(--muted); }

/* --------------------------------------------------------------------------
   18. Interactive tools
   -------------------------------------------------------------------------- */

.builder, .estimator { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62em) { .builder, .estimator { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.builder__q { border: 0; padding: 0; margin-block-end: 1.75rem; }
.builder__legend, .field legend, .wpanel__legend {
  font: 400 var(--t--2) / 1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.7rem;
  padding: 0;
}
.builder__opts, .segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt, .seg { position: relative; }
.opt input, .seg input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.opt span, .seg span {
  display: block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  font-size: var(--t--1);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.opt input:checked + span, .seg input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.opt input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.builder__out, .estimator__out {
  align-self: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  background: var(--surface);
}
.builder__outlabel, .estimator__label { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.builder__outtitle { margin-block-start: 0.7rem; font-size: var(--t-2); }
.builder__list { margin-block: 1.5rem; display: grid; gap: 1rem; }
.builder__list div { display: grid; gap: 0.25rem; border-block-start: 1px solid var(--rule-soft); padding-block-start: 0.8rem; }
.builder__list dt { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.builder__list dd { font-size: var(--t--1); line-height: 1.55; }

.estimator__figure {
  margin-block-start: 0.6rem;
  font-family: var(--display);
  font-size: var(--t-4);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.estimator__per { margin-block-start: 0.6rem; font: 400 var(--t--1) / 1.4 var(--mono); color: var(--muted); }
.estimator__breakdown { margin-block: 1.5rem; display: grid; gap: 0.55rem; }
.estimator__breakdown div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t--1); border-block-end: 1px dotted var(--rule); padding-block-end: 0.5rem; }
.estimator__breakdown dd { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.estimator__disclaimer { font-size: var(--t--2); color: var(--muted); margin-block-end: 1.5rem; line-height: 1.55; }

input[type='range'] { width: 100%; accent-color: var(--accent); }

/* Layout picker (venues) */
.layoutpicker { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 56em) { .layoutpicker { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; } }
.layoutpicker__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 34em) { .layoutpicker__tabs { grid-template-columns: repeat(5, 1fr); } }
.ltab {
  display: grid; gap: 0.5rem; justify-items: center;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--rule);
  background: none; color: var(--muted);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.ltab__icon svg { width: 1.9rem; height: 1.9rem; }
.ltab__label { font: 500 var(--t--2) / 1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.ltab:hover { color: var(--fg); border-color: var(--fg); }
.ltab[aria-selected='true'] { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.layoutpicker__panel { border-inline-start: 2px solid var(--accent); padding-inline-start: clamp(1.25rem, 3vw, 2rem); }
.layoutpicker__figure { font-family: var(--display); font-size: var(--t-5); line-height: 1; font-variant-numeric: tabular-nums; }
.layoutpicker__unit { font-size: var(--t-1); color: var(--muted); }
.layoutpicker__name { margin-block-start: 0.5rem; font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.layoutpicker__note { margin-block-start: 0.7rem; color: var(--muted); font-size: var(--t--1); max-width: 34ch; }

.floorplan { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.subhead--light { color: var(--accent); }
.fplist { margin-block-start: 1.25rem; display: grid; gap: 0.7rem; }
@media (min-width: 44em) { .fplist { grid-template-columns: repeat(2, 1fr); } }
.fplist li { display: flex; align-items: baseline; gap: 0.7rem; font: 400 var(--t--1) / 1.5 var(--mono); color: var(--muted); }
.fplist__dot { width: 0.4rem; height: 0.4rem; background: var(--accent); flex: none; }

/* Location diagram */
.locblock { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62em) { .locblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.locblock__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.locblock__grid, .officemap__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}
.locblock__pin { position: relative; color: var(--accent); }
.locblock__pin .icon { width: 2.5rem; height: 2.5rem; }
.locblock__city {
  position: absolute;
  inset-block-end: 1.25rem;
  font: 500 var(--t--1) / 1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.officemap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62em) { .officemap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.officemap__plan { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--rule); background: var(--surface); overflow: hidden; }
.officemap__pin { position: absolute; display: grid; justify-items: center; gap: 0.3rem; color: var(--accent); translate: -50% -50%; }
.officemap__pin em { font: 500 var(--t--2) / 1 var(--mono); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); }
.officemap__pin--0 { inset-block-start: 74%; inset-inline-start: 30%; }
.officemap__pin--1 { inset-block-start: 46%; inset-inline-start: 44%; }
.officemap__pin--2 { inset-block-start: 26%; inset-inline-start: 16%; }
.officelist { display: grid; gap: 1.75rem; }
.officelist__item { border-block-start: 1px solid var(--rule); padding-block-start: 1rem; }
.officelist__label { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.officelist__city { margin-block-start: 0.4rem; font-size: var(--t-2); }
.officelist address { margin-block-start: 0.6rem; font-style: normal; color: var(--muted); font-size: var(--t--1); line-height: 1.6; }
.officelist p { margin-block-start: 0.8rem; }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.35rem; max-width: 44rem; }
.fieldrow { display: grid; gap: 1.35rem; }
@media (min-width: 40em) { .fieldrow { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; border: 0; padding: 0; }
.field > label,
.field > legend { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.req { color: var(--accent); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field input[type='date'],
.field input[type='number'],
.field input[type='search'],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--t-0);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid,
.field .is-invalid { border-color: #b3261e; background: color-mix(in srgb, #b3261e 7%, var(--surface)); }
.field input:user-valid,
.field textarea:user-valid { border-color: color-mix(in srgb, var(--accent) 70%, var(--rule)); }

.field__hint { font-size: var(--t--2); color: var(--muted); }
.field__err {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--t--2);
  color: #b3261e;
}
.field__err::before { content: '✕'; font-size: 0.8em; }
.chapter--ink .field__err { color: #f0a9a2; }
.chapter--ink .field input:user-invalid,
.chapter--ink .field textarea:user-invalid { border-color: #f0a9a2; }

.checkgrid { display: grid; gap: 0.75rem; }
@media (min-width: 40em) { .checkgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .checkgrid--wide { grid-template-columns: repeat(3, 1fr); } }
.check { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 2.6rem; font-size: var(--t--1); cursor: pointer; padding: 0.6rem 0; }
.check input { position: absolute; opacity: 0; width: 1.35rem; height: 1.35rem; margin: 0; cursor: pointer; }
.check__box {
  display: grid; place-content: center;
  width: 1.35rem; height: 1.35rem; flex: none;
  border: 1px solid var(--rule);
  color: transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.check__box .icon { width: 0.85rem; height: 0.85rem; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check--inline { align-items: flex-start; }
.check--inline .check__box { translate: 0 0.15rem; }

.form__submit { justify-self: start; margin-block-start: 0.5rem; }
.form__note { font-size: var(--t--2); color: var(--muted); }

.formdone { border: 1px solid var(--accent); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; }
.formdone__mark { display: grid; place-content: center; width: 3rem; height: 3rem; border: 1px solid var(--accent); color: var(--accent); }
.formdone__title { font-size: var(--t-3); }
.formdone__body { color: var(--muted); max-width: 48ch; }
.formdone__actions { margin-block-start: 1rem; display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Wizard */
.wizard__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-block-end: 1.25rem; }
@media (min-width: 52em) { .wizard__steps { grid-template-columns: repeat(4, 1fr); } }
.wstep { display: grid; gap: 0.25rem; padding-block-start: 0.75rem; border-block-start: 2px solid var(--rule); color: var(--muted); }
.wstep__n { font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.16em; }
.wstep__label { font-size: var(--t--2); }
.wstep.is-done { border-block-start-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.wstep[aria-current='step'] { border-block-start-color: var(--accent); color: var(--fg); }
.wstep[aria-current='step'] .wstep__n { color: var(--accent); }

.wizard__progress { height: 2px; background: var(--rule); margin-block-end: clamp(1.75rem, 4vw, 2.75rem); }
.wizard__bar { display: block; height: 100%; width: var(--p, 25%); background: var(--accent); transition: width 0.4s var(--ease-out); }
.wpanel { border: 0; padding: 0; display: grid; gap: 1.35rem; }
.wpanel__legend { margin-block-end: 0.25rem; }
.wpanel__hint { font-size: var(--t--1); color: var(--muted); }
.wizard__nav { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-start: 0.75rem; }
.wizard__done { display: grid; gap: 1.25rem; }
.brief { display: grid; gap: 0.7rem; margin-block: 0.5rem 1.5rem; }
.brief div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 0.75rem; border-block-end: 1px dotted var(--rule); padding-block-end: 0.6rem; font-size: var(--t--1); }
.brief dt { font: 400 var(--t--2) / 1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Newsletter */
.signup { display: grid; gap: 0.6rem; max-width: 26rem; }
.signup--big { max-width: 34rem; margin-inline: auto; }
.signup__label { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.signup__row { display: flex; gap: 0.5rem; }
.signup__input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--t--1);
}
.signup__input:user-invalid { border-color: #f0a9a2; }
.signup__btn {
  display: grid; place-content: center;
  width: 3rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--accent);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.signup__btn:hover { background: var(--accent); color: var(--bg); }
.signup__error { font-size: var(--t--2); color: #f0a9a2; }
.signup__ok { font-size: var(--t--2); color: var(--accent); }
.signupblock { text-align: center; }
.signupblock .shead { margin-inline: auto; }
.signupblock .shead__rule { justify-content: center; }
.signupblock .shead__lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   20. Article
   -------------------------------------------------------------------------- */

.article { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 62em) { .article { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.article__aside { align-self: start; }
@media (min-width: 62em) { .article__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.toc__head { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding-block-end: 0.7rem; border-block-end: 1px solid var(--rule); margin-block-end: 0.9rem; }
.toc__list { display: grid; gap: 0.55rem; counter-reset: toc; }
.toc__list a { display: block; font-size: var(--t--2); color: var(--muted); text-decoration: none; line-height: 1.45; border-inline-start: 2px solid transparent; padding-inline-start: 0.7rem; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.toc__list a:hover, .toc__list a.is-current { color: var(--accent); border-inline-start-color: var(--accent); }
.share { margin-block-start: 2.25rem; }
.share__list { display: grid; gap: 0.5rem; }
.share__list a, .share__list button { font-size: var(--t--2); color: var(--muted); text-decoration: none; text-align: left; }
.share__list a:hover, .share__list button:hover { color: var(--accent); }
.share__status { margin-block-start: 0.5rem; font-size: var(--t--2); color: var(--accent); }

.article__body { max-width: 40rem; }
.article__h { font-size: var(--t-2); margin-block: 2.25rem 0.9rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.article__body .prose { font-size: var(--t-0); }
.callout {
  margin-block: 2rem;
  padding: 1.35rem 1.5rem;
  border-inline-start: 2px solid var(--accent);
  background: var(--surface);
}
.callout p { font-family: var(--display); font-size: var(--t-1); line-height: 1.45; font-style: italic; }
.article__foot { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.article__author { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.legal__h { font-size: var(--t-2); margin-block: 2rem 0.9rem; }

/* --------------------------------------------------------------------------
   21. Accordion
   -------------------------------------------------------------------------- */

.accordion { border-block-start: 1px solid var(--rule); }
.accordion__item { border-block-end: 1px solid var(--rule-soft); }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__q { font-family: var(--display); font-size: var(--t-1); line-height: 1.3; }
.accordion__mark { display: grid; place-content: center; width: 2rem; height: 2rem; flex: none; border: 1px solid var(--rule); color: var(--accent); transition: rotate 0.35s var(--ease-out); }
.accordion__item[open] .accordion__mark { rotate: 45deg; }
.accordion__item[open] .accordion__q { color: var(--accent); }
.accordion__panel { padding-block: 0 1.5rem; }
.accordion__panel p { color: var(--muted); max-width: 62ch; }

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .accordion__item::details-content,
    .tstage::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.42s var(--ease-out), content-visibility 0.42s allow-discrete;
    }
    .accordion__item[open]::details-content,
    .tstage[open]::details-content { block-size: auto; }
  }
}

/* --------------------------------------------------------------------------
   22. Packages, tickets, summit
   -------------------------------------------------------------------------- */

.pkggrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 62em) { .pkggrid { grid-template-columns: repeat(3, 1fr); } }
.pkg { position: relative; border: 1px solid var(--rule); display: grid; }
.pkg--featured { border-color: var(--accent); }
.pkg__flag {
  position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 2;
  padding: 0.4rem 0.8rem;
  background: var(--accent); color: var(--bg);
  font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.pkg__body { padding: clamp(1.35rem, 3vw, 2rem); display: grid; gap: 0.5rem; align-content: start; }
.pkg__name { font-size: var(--t-3); }
.pkg__tagline { font: 500 var(--t--1) / 1.3 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.pkg__guide { font-size: var(--t--2); color: var(--muted); }
.pkg__text { margin-block-start: 0.75rem; color: var(--muted); font-size: var(--t--1); }
.pkg__subhead { margin-block-start: 1.5rem; font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pkg__cta { margin-block-start: 1.75rem; justify-self: start; }

.tickets { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 58em) { .tickets { grid-template-columns: repeat(3, 1fr); } }
.ticket { position: relative; border: 1px solid var(--rule); padding: clamp(1.35rem, 3vw, 2rem); display: grid; gap: 0.6rem; align-content: start; }
.ticket--featured { border-color: var(--accent); background: var(--surface); }
.ticket__flag { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 0.4rem 0.8rem; background: var(--accent); color: var(--bg); font: 500 var(--t--2) / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ticket__name { font-size: var(--t-2); }
.ticket__price { font-family: var(--mono); font-size: var(--t-2); color: var(--accent); }
.ticket__note { font-size: var(--t--2); color: var(--muted); margin-block-end: 0.75rem; }
.ticket__cta { margin-block-start: 1.5rem; justify-self: start; }

.mhero { background-color: var(--ink); position: relative; min-height: min(100svh, 54rem); display: grid; align-items: center; padding-block: calc(var(--header-h) + 4rem) 4rem; color: var(--paper); isolation: isolate; overflow: hidden; }
.mhero__media { position: absolute; inset: 0; z-index: -2; }
.mhero__img { width: 100%; height: 100%; object-fit: cover; }
.mhero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(20, 17, 14, 0.95) 8%, rgba(20, 17, 14, 0.72) 55%, rgba(20, 17, 14, 0.5) 100%),
    linear-gradient(to bottom, rgba(20, 17, 14, 0.6) 0, rgba(20, 17, 14, 0) 16%);
}
.mhero__eyebrow { font: 500 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); }
.mhero__title { margin-block-start: 1.25rem; font-size: var(--t-6); line-height: 0.9; font-weight: 500; letter-spacing: -0.03em; }
.mhero__title span { font-style: italic; color: var(--champagne); }
.mhero__sub { margin-block-start: 1.15rem; font-size: var(--t-2); font-family: var(--display); color: color-mix(in srgb, var(--paper) 88%, transparent); }
.mhero__where { margin-block-start: 0.7rem; font: 400 var(--t--1) / 1.5 var(--mono); letter-spacing: 0.08em; color: color-mix(in srgb, var(--paper) 74%, transparent); }
.mhero__actions { margin-block-start: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

.mhero__actions .btn--outline { --fg: var(--paper); --rule: rgba(246, 242, 236, 0.4); --bg: var(--ink); }

.countdown { margin-block-start: 2.25rem; display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem); }
.countdown__unit { display: grid; gap: 0.35rem; min-width: 4.5rem; }
.countdown__n { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; color: var(--champagne); font-variant-numeric: tabular-nums; }
.countdown__l { font: 400 var(--t--2) / 1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 66%, transparent); }

.agenda { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 68em) { .agenda { grid-template-columns: repeat(2, 1fr); } }
.agenda__dayhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; padding-block-end: 0.9rem; margin-block-end: 0.5rem; font-size: var(--t-2); }
.agenda__dayhead span:last-child { font-family: var(--mono); font-size: var(--t--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.speakergrid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 40em) { .speakergrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .speakergrid { grid-template-columns: repeat(4, 1fr); } }
.speaker__frame { margin-block-end: 1rem; overflow: hidden; }
.speaker__name { font-size: var(--t-1); }
.speaker__role { margin-block-start: 0.25rem; font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.speaker__topic { margin-block-start: 0.7rem; font-size: var(--t--1); font-weight: 600; }
.speaker__bio { margin-block-start: 0.5rem; font-size: var(--t--2); color: var(--muted); line-height: 1.55; }

.sponsors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 48em) { .sponsors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68em) { .sponsors { grid-template-columns: repeat(6, 1fr); } }
.sponsor { display: grid; gap: 0.45rem; place-content: center; text-align: center; min-height: 7rem; padding: 1rem; background: var(--bg); }
.sponsor__mark { font-family: var(--display); font-size: var(--t-1); letter-spacing: 0.14em; }
.sponsor__tier { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Registration modal and pass */
.modal {
  border: 1px solid var(--champagne);
  padding: 0;
  margin: auto;
  width: min(100% - 2rem, 42rem);
  max-height: min(92vh, 52rem);
  background: var(--ink);
  color: var(--paper);
  --bg: var(--ink); --fg: var(--paper); --muted: var(--muted-on-ink); --accent: var(--champagne);
  --accent-solid: var(--champagne); --accent-solid-fg: var(--ink);
  --rule: rgba(246, 242, 236, 0.2); --surface: rgba(246, 242, 236, 0.05);
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease-out), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
.modal[open] { opacity: 1; translate: 0 0; }
@starting-style { .modal[open] { opacity: 0; translate: 0 1rem; } }
.modal::backdrop { background: rgba(20, 17, 14, 0.85); backdrop-filter: blur(4px); }
.modal__inner { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); overflow-y: auto; max-height: inherit; }
.modal__close { position: absolute; inset-block-start: 0.85rem; inset-inline-end: 0.85rem; display: grid; place-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule); background: none; color: var(--paper); }
.modal__eyebrow { font: 400 var(--t--2) / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); }
.modal__title { margin-block: 0.6rem 1.5rem; font-size: var(--t-3); }
.modal__form { max-width: none; }

.pass { display: grid; gap: 1.25rem; }
.pass__mark { display: grid; place-content: center; width: 3rem; height: 3rem; border: 1px solid var(--champagne); color: var(--champagne); }
.pass__title { font-size: var(--t-3); }
.passcard { border: 1px solid var(--champagne); }
.passcard__head { padding: 1.15rem 1.35rem; border-block-end: 1px dashed var(--rule); display: grid; gap: 0.25rem; }
.passcard__event { font-family: var(--display); font-size: var(--t-2); letter-spacing: 0.04em; }
.passcard__event strong { color: var(--champagne); font-weight: 500; font-style: italic; }
.passcard__sub { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.passcard__body { padding: 1.15rem 1.35rem; display: grid; gap: 0.65rem; }
.passcard__body div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.75rem; font-size: var(--t--1); }
.passcard__body dt { font: 400 var(--t--2) / 1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.passcard__body dd { font-family: var(--mono); }
.passcard__code { padding: 1.15rem 1.35rem 1.5rem; border-block-start: 1px dashed var(--rule); display: grid; gap: 0.75rem; justify-items: center; }
.qr { width: 8.5rem; height: 8.5rem; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); background: var(--paper); padding: 4px; }
.qr i { display: block; background: var(--ink); }
.qr__note { font-size: var(--t--2); color: var(--muted); text-align: center; max-width: 30ch; }

/* --------------------------------------------------------------------------
   23. Film block, deliverables, thanks, 404
   -------------------------------------------------------------------------- */

.filmblock { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62em) { .filmblock { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.deliverables { display: grid; gap: 0.85rem; margin-block-end: 1.5rem; }
.deliverables li { display: grid; gap: 0.2rem; border-block-start: 1px solid var(--rule-soft); padding-block-start: 0.7rem; }
@media (min-width: 34em) { .deliverables li { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; } }
.deliverables__k { font: 400 var(--t--2) / 1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.deliverables__v { font-size: var(--t--1); color: var(--muted); }

.thanks { min-height: 70vh; display: grid; align-items: center; padding-block-start: calc(var(--header-h) + 4rem); }
.thanks__inner { display: grid; gap: 1.5rem; justify-items: start; }
.thanks__mark { display: grid; place-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--accent); color: var(--accent); }
.thanks__title { font-size: var(--t-5); }
.thanks__lead { max-width: 48ch; font-size: var(--t-1); color: var(--muted); }
.thanks__actions { margin-block-start: 1rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.thanks__alt { font-size: var(--t--1); color: var(--muted); }
.thanks__alt a { color: var(--accent); }

.notfound { background-color: var(--ink); position: relative; min-height: 90svh; display: grid; align-items: center; padding-block: calc(var(--header-h) + 5rem) 5rem; isolation: isolate; overflow: hidden; color: var(--paper); }
.notfound__media { position: absolute; inset: 0; z-index: -2; }
.notfound__img { width: 100%; height: 100%; object-fit: cover; }
.notfound__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(20, 17, 14, 0.7); }
.notfound__inner { display: grid; gap: 1.25rem; justify-items: start; }
.notfound__code { font: 500 var(--t--1) / 1 var(--mono); letter-spacing: 0.3em; color: var(--champagne); }
.notfound__title { font-size: var(--t-5); }
.notfound__lead { color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: var(--t-1); }
.notfound__actions { margin-block-start: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.notfound__links { margin-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; font: 400 var(--t--2) / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.notfound__links a { color: color-mix(in srgb, var(--paper) 66%, transparent); text-decoration: none; }
.notfound__links a:hover { color: var(--champagne); }

/* --------------------------------------------------------------------------
   24. Final CTA and footer
   -------------------------------------------------------------------------- */

.finalcta { background-color: var(--ink); position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 12vw, 9.5rem); text-align: center; }
.finalcta__media { position: absolute; inset: 0; z-index: -2; }
.finalcta__img { width: 100%; height: 100%; object-fit: cover; }
/* Dark enough behind the type to stay legible, open enough at the edges that
   the photograph is still a photograph. */
.finalcta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 90% 70% at 50% 42%,
    rgba(20, 17, 14, 0.88) 0%,
    rgba(20, 17, 14, 0.66) 55%,
    rgba(20, 17, 14, 0.78) 100%);
}
.finalcta__inner { width: min(100% - (var(--gutter) * 2), 54rem); margin-inline: auto; }
.finalcta__title { font-size: var(--t-5); }
.finalcta__body { margin-block-start: 1.25rem; font-size: var(--t-1); color: color-mix(in srgb, var(--paper) 80%, transparent); }
.finalcta__actions { margin-block-start: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

.footer { background: var(--ink); color: var(--paper); --fg: var(--paper); --muted: var(--muted-on-ink); --accent: var(--champagne); --accent-solid: var(--champagne); --accent-solid-fg: var(--ink); --rule: rgba(246, 242, 236, 0.16); --surface: rgba(246, 242, 236, 0.05); --bg: var(--ink); padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.footer__inner {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  display: grid;
  /* Two category columns per row from the narrowest screen up, with the brand
     block spanning above them. minmax(0,…) keeps a long link from widening a
     track, and the tighter column gap buys back room at 320px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 5vw, 3.25rem);
  row-gap: clamp(2rem, 4vw, 3.25rem);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 68em) {
  .footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; }
  .footer__brand { grid-column: auto; }
}
.wordmark--footer .wordmark__name, .wordmark--drawer .wordmark__name { font-size: 1.5rem; }
.footer__line { margin-block-start: 1rem; font-family: var(--display); font-style: italic; font-size: var(--t-1); color: var(--champagne); }
.footer__blurb { margin-block-start: 0.75rem; font-size: var(--t--1); color: var(--muted); max-width: 34ch; }
.footer__brand .signup { margin-block-start: 1.75rem; }
.footer__heading { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); padding-block-end: 0.7rem; border-block-end: 1px solid var(--rule); margin-block-end: 1rem; }
.footer__col ul { display: grid; gap: 0.6rem; }
/* Email addresses and the studio address have no break opportunities of their
   own; in a half-width mobile column they would otherwise push the page wide. */
.footer__col a { font-size: var(--t--1); color: color-mix(in srgb, var(--paper) 76%, transparent); text-decoration: none; overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--champagne); }
.footer__col li { font-size: var(--t--1); color: var(--muted); overflow-wrap: anywhere; }
.footer__social { margin-block-start: 1.5rem; display: flex !important; flex-wrap: wrap; gap: 1rem !important; }
.footer__base {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--rule);
  padding-block: 1.5rem;
}
.footer__base > * { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.footer__base p { font-size: var(--t--2); color: var(--muted); max-width: 70ch; }
.footer__legal { margin-block-start: 0.85rem; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a { font-size: var(--t--2); color: var(--muted); text-decoration: none; }
.footer__legal a:hover { color: var(--champagne); }

/* --------------------------------------------------------------------------
   25. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

html.js .reveal {
  opacity: 0;
  translate: 0 1.35rem;
}
html.js .reveal.in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js .hero__line {
  opacity: 0;
  translate: 0 0.6em;
  animation: hero-line 0.95s var(--ease-out) forwards;
  animation-delay: calc(180ms + var(--l, 0) * 110ms);
}
@keyframes hero-line { to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .hero__line {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .drawer, .mobilebar, .totop, .showrail, .progress, .finalcta, .lightbox { display: none !important; }
  .chapter { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}

/* Cross-link band to the event microsite */
.nextedition {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 52em) { .nextedition { grid-template-columns: 1fr auto; } }
.nextedition__label { font: 400 var(--t--2) / 1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.nextedition__title { margin-block-start: 0.6rem; font-size: var(--t-3); }
.nextedition__meta { margin-block-start: 0.5rem; font: 400 var(--t--1) / 1.5 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.nextedition__line { margin-block-start: 0.75rem; max-width: 46ch; color: var(--muted); }