/* ==========================================================================
   CPH Robotics — Design system
   Editorial / instrumentation-inspired: monospace voice, near-monochrome warm
   paper, hairline rules instead of shadows, sharp corners, one accent.
   Motion is choreographed, never decorative: masked type rises, plates wipe
   open like a camera cut, and the only "toy" on the page is a real robot.
   ========================================================================== */

:root {
  /* Palette (light) */
  --ink: #14171A;
  --ink-deep: #0B0D10;
  --paper: #FAF8F4;
  --paper-pure: #FFFFFF;
  --rule: #E3DFD6;
  --muted: #63676E;
  --whisper: #F1EEE7;
  --accent: #007A94;
  --accent-lift: #0A97B4;
  --accent-quiet: rgba(0, 122, 148, 0.08);

  /* On-ink (inverted sections) */
  --ink-paper: #F3F1EC;
  --ink-muted: #8E949C;
  --ink-rule: rgba(243, 241, 236, 0.16);

  /* Type */
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --text-4xl: clamp(2.35rem, 1.1rem + 4.6vw, 5.15rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 72px;
  --space-12: 120px;

  --max-width: 1280px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 57px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Reset ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Paper grain — a single fixed layer, cheap and never repainted. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }

button { font: inherit; }

::selection { background: var(--accent); color: var(--paper); }

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

/* ---- Layout shell ---------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main { display: block; }

/* Full-bleed escape hatch: breaks a child out of .wrap to the viewport edge. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Scroll progress rail ---------------------------------------------- */

.scroll-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}

.scroll-rail__bar {
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- Nav --------------------------------------------------------------- */

.site-nav {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}

/* Over a photographic hero the bar floats: no ground, light glyphs. */
body[data-hero="image"] .site-nav {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

body[data-hero="image"] .site-nav .brand,
body[data-hero="image"] .site-nav .nav-links a { color: var(--ink-paper); }
body[data-hero="image"] .site-nav .brand .slash { color: var(--accent-lift); }
body[data-hero="image"] .site-nav.is-solid .brand .slash { color: var(--accent); }
body[data-hero="image"] .site-nav .nav-links a .key { color: rgba(243, 241, 236, 0.55); }
body[data-hero="image"] .site-nav .nav-links a:hover,
body[data-hero="image"] .site-nav .nav-links a.active { color: #fff; }
body[data-hero="image"] .site-nav .nav-links a.active .key { color: var(--accent-lift); }

body[data-hero="image"] .site-nav.is-solid {
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule);
}
body[data-hero="image"] .site-nav.is-solid .brand { color: var(--ink); }
body[data-hero="image"] .site-nav.is-solid .nav-links a { color: var(--muted); }
body[data-hero="image"] .site-nav.is-solid .nav-links a .key { color: var(--muted); }
body[data-hero="image"] .site-nav.is-solid .nav-links a:hover,
body[data-hero="image"] .site-nav.is-solid .nav-links a.active { color: var(--accent); }

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.45s var(--ease-out);
}

.brand .slash {
  color: var(--accent);
  display: inline-block;
  transition: color 0.45s var(--ease-out);
}

.brand:hover .slash { animation: slash-spin 0.6s var(--ease-out); }

@keyframes slash-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color 0.45s var(--ease-out);
}

.nav-links a .key { color: var(--muted); transition: color 0.45s var(--ease-out); }

/* Hairline that draws in from the left on hover — the site's one link tell. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-links a.active .key { color: var(--accent); }

/* ---- Hero -------------------------------------------------------------- */

.hero {
  padding-top: clamp(var(--space-8), 10vw, var(--space-12));
  padding-bottom: clamp(var(--space-8), 8vw, var(--space-10));
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 18ch;
}

.hero p.lede {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: 1.5;
}

.accent { color: var(--accent); }

.actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}

.hero .actions { margin-top: var(--space-8); }

/* ---- Cinematic hero (photographic, full viewport) ----------------------- */

.hero-film {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-deep);
  border-bottom: 0;
  padding: 0;
}

.hero-film__media {
  position: absolute;
  inset: -11% 0 -11% 0;   /* overscan so parallax never exposes an edge */
  will-change: transform;
}

.hero-film__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Two-stop scrim: legible type at the bottom, clean sky behind the nav. */
.hero-film__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,13,16,0.58) 0%, rgba(11,13,16,0.10) 30%, rgba(11,13,16,0) 46%),
    linear-gradient(to top, rgba(11,13,16,0.90) 0%, rgba(11,13,16,0.62) 34%, rgba(11,13,16,0.28) 62%, rgba(11,13,16,0) 86%),
    linear-gradient(to right, rgba(11,13,16,0.42) 0%, rgba(11,13,16,0) 62%);
}

.hero-film__inner {
  position: relative;
  width: 100%;
  padding-bottom: calc(clamp(var(--space-6), 5vh, var(--space-10)) + 54px);
  padding-top: calc(var(--nav-h) + var(--space-6));
  color: var(--ink-paper);
}

.hero-film .eyebrow { color: rgba(243, 241, 236, 0.72); }

.hero-film h1 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-4xl);
  letter-spacing: -0.035em;
  line-height: 0.96;
  max-width: 17ch;
  color: #fff;
  text-wrap: balance;
}

.hero-film h1 .accent { color: var(--accent-lift); }

.hero-film p.lede {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: clamp(var(--text-md), 0.9rem + 0.4vw, var(--text-lg));
  color: rgba(243, 241, 236, 0.78);
  line-height: 1.55;
}

.hero-film .actions { margin-top: var(--space-6); }

.hero-film .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.hero-film .btn:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }

/* The reserve card is paper laid over the photograph, so its submit button
   keeps the normal ink-on-paper treatment instead of the hero's inverted one. */
.hero-film .hero-book .btn {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.hero-film .hero-book .btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--accent);
}

.hero-film .text-link { color: var(--ink-paper); }

/* Live telemetry strip pinned to the hero's bottom edge. */
.hero-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(243, 241, 236, 0.18);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.62);
}

.hero-meta .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  flex-wrap: wrap;
}

.hero-meta span { white-space: nowrap; }

.hero-meta .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-lift);
  margin-right: var(--space-2);
  vertical-align: middle;
  animation: pulse 2.4s var(--ease-io) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(10,151,180,0.5); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(10,151,180,0); }
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--space-10) + var(--space-5));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.6);
  writing-mode: vertical-rl;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(243,241,236,0.6), rgba(243,241,236,0));
  animation: cue 2.6s var(--ease-io) infinite;
  transform-origin: 0 0;
}

@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(56px); opacity: 0; }
}


/* ---- Hero booking card ------------------------------------------------- */

/* The first useful thing a visitor can do is come and look at the room, so
   the scheduler rides on the hero itself rather than a page-deep section. */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: end;
}

.hero-book {
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Lift it off the photograph without breaking the no-shadow rule. */
  outline: 1px solid rgba(11, 13, 16, 0.28);
  outline-offset: 0;
}

.hero-book__head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.hero-book__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.hero-book__title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.hero-book__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.hero-book__body {
  padding: var(--space-5);
}

/* The hero card is short on vertical room, so the form it holds runs tighter
   than the full-page one on membership.html. */
.form-compact .field { margin-bottom: var(--space-4); }
.form-compact .field label { margin-bottom: 2px; }
.form-compact .field input { padding: var(--space-2) var(--space-1); }
.form-compact .form-status { margin-top: var(--space-3); }

.choices--compact { margin-bottom: var(--space-5); }
.choices--compact legend { margin-bottom: var(--space-2); }
.choices--compact .choice { padding: var(--space-3) var(--space-4); }
.choices--compact .choice__name { font-size: var(--text-sm); }

.hero-book .form-note { margin-top: var(--space-4); }

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---- Buttons & links ---------------------------------------------------- */

.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  will-change: transform;
}

/* Ground wipes downward out of the button; the label crossfades to ink. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(-101%);
  transition: transform 0.45s var(--ease-out);
}

.btn:hover { color: #fff; border-color: var(--accent); }
.btn:hover::before { transform: translateY(0); }

.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover::before { transform: translateY(-101%); }

.text-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 3px;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.4s var(--ease-out);
}

.text-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---- Sections ------------------------------------------------------------ */

section.block {
  padding-top: clamp(var(--space-8), 8vw, var(--space-10));
  padding-bottom: clamp(var(--space-8), 8vw, var(--space-10));
}

section.block + section.block { border-top: 1px solid var(--rule); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

.section-head .slash { color: var(--muted); }

.section-sub {
  color: var(--muted);
  max-width: 60ch;
  margin-top: calc(var(--space-6) * -1 + var(--space-2));
  margin-bottom: var(--space-6);
}

/* Inverted section — a dark beat in the light/dark scroll rhythm. */
.section-ink {
  background: var(--ink-deep);
  color: var(--ink-paper);
  border-top: 0 !important;
}

.section-ink .section-head { color: var(--ink-paper); }
.section-ink .section-head .slash { color: var(--ink-muted); }
.section-ink .section-sub { color: var(--ink-muted); }
.section-ink .statement .dim { color: var(--ink-muted); }
.section-ink .statement-aside { color: var(--ink-muted); border-left-color: var(--ink-rule); }
.section-ink .text-link { color: var(--accent-lift); }

/* ---- Statement / manifesto ------------------------------------------------ */

.statement {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.35rem, 0.85rem + 2.1vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
}

.statement .dim { color: var(--muted); }

.statement-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 40%);
  gap: clamp(var(--space-6), 6vw, var(--space-10));
  align-items: start;
}

.statement-aside {
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.7;
  border-left: 1px solid var(--rule);
  padding-left: var(--space-5);
}

.statement-aside p + p { margin-top: var(--space-4); }

/* ---- Plates (the very large photographs) ---------------------------------- */

.plate {
  position: relative;
  margin-top: clamp(var(--space-8), 9vw, var(--space-12));
  margin-bottom: clamp(var(--space-8), 9vw, var(--space-12));
}

.plate__frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  height: clamp(420px, 78vh, 860px);
  transition: clip-path 1.15s var(--ease-out);
}

/* The wipe is a cut, not a fade — but only once we know the script can undo it. */
.js .plate__frame { clip-path: inset(0 0 100% 0); }

.js .plate.is-in .plate__frame { clip-path: inset(0 0 0 0); }

.plate--tall .plate__frame { height: clamp(520px, 92vh, 980px); }

.plate__media {
  position: absolute;
  inset: -11% 0 -11% 0;
  will-change: transform;
}

.plate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.js .plate__media img { transform: scale(1.12); }
.js .plate.is-in .plate__media img { transform: scale(1); }

/* Caption block sitting on the plate, on its own ink slab so it always reads. */
.plate__label {
  position: absolute;
  left: 0; bottom: 0;
  max-width: min(560px, 84vw);
  background: rgba(11, 13, 16, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-paper);
  padding: clamp(var(--space-5), 3.5vw, var(--space-8));
  padding-inline-start: max(var(--gutter), clamp(var(--space-5), 3.5vw, var(--space-8)));
  border-top: 1px solid rgba(243, 241, 236, 0.14);
  border-right: 1px solid rgba(243, 241, 236, 0.14);
}

.plate--right .plate__label {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid rgba(243, 241, 236, 0.14);
  padding-inline-start: clamp(var(--space-5), 3.5vw, var(--space-8));
  padding-inline-end: max(var(--gutter), clamp(var(--space-5), 3.5vw, var(--space-8)));
}

.plate__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: var(--space-3);
}

.plate__label h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: var(--space-4);
}

.plate__label p {
  color: rgba(243, 241, 236, 0.74);
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 44ch;
}

/* Cursor-tracked crosshair — the plate behaves like a viewfinder. */
.plate__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.plate.is-scanning .plate__scan,
.plate.is-scanning .plate__readout { opacity: 1; }

.plate__scan::before,
.plate__scan::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.42);
}

.plate__scan::before { left: 0; right: 0; top: var(--my, 50%); height: 1px; }
.plate__scan::after  { top: 0; bottom: 0; left: var(--mx, 50%); width: 1px; }

.plate__readout {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  left: var(--mx, 50%);
  top: var(--my, 50%);
  transform: translate(36px, 22px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(11, 13, 16, 0.84);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 3px 7px;
  white-space: nowrap;
}

/* Fine print under a plate: photo credit, spec line. */
.plate__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.plate__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.plate__meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Split plate: tall portrait beside a column of content. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-10));
  align-items: center;
}

.split__body h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: var(--space-5);
}

.split__body p {
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* ---- Reveal primitives ---------------------------------------------------- */

/* Scoped to .js so that without JavaScript nothing is hidden in the first
   place: crawlers, reader modes and failed script loads all see the finished
   page rather than an empty one. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--ease-out) var(--d, 0ms),
    transform 0.9s var(--ease-out) var(--d, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Masked word-rise for display type. Each word is a clipping window. */
.kin { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }

.kin > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out) var(--d, 0ms);
}

.is-in .kin > i { transform: translateY(0); }

/* ---- Feature grid ----------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.feature-card {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-pure);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}

.feature-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-out);
}

.feature-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.feature-card:hover::before { transform: scaleY(1); }

.feature-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.feature-card h3 {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.feature-card p {
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* ---- Founders (editorial "about the author" treatment) --------------------- */

/* Named faces immediately under the hero. Small, quiet, and above the
   argument: the page has to establish that real people are behind it before
   it asks anyone to read three sections about a room. */
.founders-strip {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-5) 0;
}

.founders-strip .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Overlapped, so the row reads as one group rather than three portraits. */
.founders-strip__faces {
  display: flex;
  flex-shrink: 0;
}

.founders-strip__faces .founder-avatar {
  width: 44px;
  height: 44px;
  background: var(--paper);
}

.founders-strip__faces .founder-avatar + .founder-avatar { margin-left: -10px; }

.founders-strip__text {
  flex: 1 1 22ch;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.founders-strip__text strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.founder {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.founder-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 0; /* square, never circular — this is editorial, not chat UI */
}

.founder h3 {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.founder-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.founder p:last-child {
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.65;
  max-width: 40ch;
}

/* ---- Panel (prose block) --------------------------------------------------- */

.panel {
  border: 1px solid var(--rule);
  background: var(--paper-pure);
  border-radius: 0;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.panel p {
  color: var(--muted);
  max-width: 68ch;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.panel p:last-child { margin-bottom: 0; }

.list-plain {
  list-style: none;
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.list-plain li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--muted);
  line-height: 1.6;
}

.list-plain li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.list-plain strong { color: var(--ink); font-weight: 600; }

/* ---- Plans (membership pricing) ------------------------------------------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.plan-card {
  border: 1px solid var(--rule);
  background: var(--paper-pure);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}

.plan-card:hover { border-color: var(--ink); transform: translateY(-3px); }

.plan-card.featured { border-left: 2px solid var(--accent); }

.plan-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-price {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
}

.plan-price .unit {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  margin-left: var(--space-2);
}

.plan-card .list-plain { margin-top: 0; }

/* One plan: the case for it on the left, the card on the right. */
.plan-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: clamp(var(--space-6), 5vw, var(--space-10));
  align-items: start;
}

.plan-single__why p:not(.statement) {
  margin-top: var(--space-5);
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .plan-single { grid-template-columns: 1fr; }
}

/* ---- Calendly embed --------------------------------------------------------- */

.calendly-embed {
  border: 1px solid var(--rule);
  background: var(--paper-pure);
  overflow: hidden;
}

.calendly-inline-widget { width: 100%; }

/* ---- Placeholder / notice block ------------------------------------------- */

.notice {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--paper-pure);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.notice h3 {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.notice p { color: var(--muted); max-width: 52ch; }

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

.contact-grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--space-8);
}

.contact-info dl {
  display: grid;
  gap: var(--space-5);
}

.contact-info dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.contact-info dd a {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
  text-decoration: none;
}

.contact-info dd a:hover { color: var(--accent); }

/* ---- Form ------------------------------------------------------------------ */

.field { margin-bottom: var(--space-6); }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-3) var(--space-1);
  resize: vertical;
  transition: border-color 0.3s var(--ease-out);
}

.field textarea { min-height: 120px; }

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 0.6; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  min-height: 1.2em;
}

.form-status.success { color: var(--accent); }
.form-status.error { color: #C1502F; }

.form-note {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
}

.form-note a { color: var(--accent); text-decoration: none; }
.form-note a:hover { text-decoration: underline; }


/* ---- Choice list (membership reservation) ------------------------------- */

.choices {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.choices legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
  padding: 0;
}

.choice {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  border: 1px solid var(--rule);
  background: var(--paper-pure);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

/* Collapse the shared edges so the group reads as one stacked control. */
.choice + .choice { margin-top: -1px; }

.choice:hover { border-color: var(--ink); position: relative; z-index: 1; }

.choice input {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

.choice__name {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}

.choice__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: auto;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-quiet);
  position: relative;
  z-index: 2;
}

.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Numbered steps ------------------------------------------------------ */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-6);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.steps strong { color: var(--ink); font-weight: 600; display: block; }

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

footer.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.footer-grid .col { color: var(--muted); }

.footer-grid a {
  color: var(--muted);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
}

.footer-grid a:hover { color: var(--accent); }

.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Custom cursor (fine pointers only) ------------------------------------ */

.reticle {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  will-change: transform;
}

.reticle.is-live { opacity: 1; }

.reticle__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              margin 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              border-radius 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.reticle__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--ink);
  border-radius: 50%;
  transition: opacity 0.3s var(--ease-out), background 0.35s var(--ease-out);
}

/* Over ink-grounded regions the reticle inverts. */
.reticle.on-ink .reticle__ring { border-color: rgba(255,255,255,0.85); }
.reticle.on-ink .reticle__dot { background: rgba(255,255,255,0.85); }

/* Over an interactive target it opens into a square viewfinder. */
.reticle.on-target .reticle__ring {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 2px;
  border-color: var(--accent-lift);
}

.reticle.on-target .reticle__dot { opacity: 0; }

/* Over a link it collapses to a filled disc. */
.reticle.on-link .reticle__ring {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-color: var(--accent);
  background: var(--accent-quiet);
}

/* Only take over the pointer when we can actually draw one. */
@media (hover: hover) and (pointer: fine) {
  html.has-reticle,
  html.has-reticle a,
  html.has-reticle button,
  html.has-reticle .plate,
  html.has-reticle [data-cursor] { cursor: none; }
}

/* ---- Section chapter rail (right edge) ------------------------------------- */

.chapters {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.chapters.is-live { opacity: 1; }

.chapters a {
  position: relative;
  width: 22px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
}

.chapters a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--muted);
  opacity: 0.45;
  transition: width 0.4s var(--ease-out), background 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.chapters a:hover::before { width: 22px; opacity: 1; }

.chapters a[aria-current="true"]::before {
  width: 22px;
  background: var(--accent);
  opacity: 1;
}

/* Label slides out on hover */
.chapters a span {
  position: absolute;
  right: 30px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  pointer-events: none;
}

.chapters a:hover span { opacity: 1; transform: translateX(0); }

/* Rail inverts while a dark section is behind it. */
.chapters.on-ink a::before { background: var(--ink-paper); }
.chapters.on-ink a[aria-current="true"]::before { background: var(--accent-lift); }
.chapters.on-ink a span { color: var(--ink-paper); background: var(--ink-deep); border-color: var(--ink-rule); }

/* ---- Marquee ticker --------------------------------------------------------- */

.ticker {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  padding: var(--space-5) 0;
  background: var(--whisper);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__track span {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-md), 0.8rem + 1vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-right: var(--space-8);
  white-space: nowrap;
}

.ticker__track span em {
  font-style: normal;
  color: var(--accent);
  padding-left: var(--space-8);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Arrival: the walk to Sølvgade 30 ------------------------------------ */

/* Five scenes on one pinned stage: the district map, the route in from
   Nørreport, the garden across the street, the courtyard, the rooms. Without
   the script (or with reduced motion) the same markup is simply a stack of
   scenes, so every caption and photo is still there to read. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.arrive {
  position: relative;
  background: var(--ink-deep);
  color: var(--ink-paper);
  --mw: 2698;   /* map viewBox, metres */
  --mh: 2156;
  --s: 0.4;     /* map-units → px, kept current by the script */
  --inv: 1;     /* 1 / on-screen map scale, for things that must not zoom */
}

.arrive__stage { position: relative; }

.arrive__scene { position: relative; overflow: hidden; }

/* Caption slab: same voice as the plate labels further down the page. */
.arrive__cap {
  position: relative;
  max-width: min(540px, 100%);
  background: rgba(11, 13, 16, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  padding-inline-start: max(var(--gutter), clamp(var(--space-5), 3vw, var(--space-8)));
  border-top: 1px solid rgba(243, 241, 236, 0.14);
  border-right: 1px solid rgba(243, 241, 236, 0.14);
}

.arrive__cap h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.45rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.arrive__cap p {
  color: rgba(243, 241, 236, 0.74);
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 46ch;
}

.arrive__cap .text-link { color: var(--accent-lift); }

.arrive__cap .actions { margin-top: var(--space-5); }

.arrive__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: var(--space-3);
}

/* Walking times, set like a departures board. */
.arrive__times {
  list-style: none;
  margin-top: var(--space-5);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arrive__times li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 7px 0;
  border-bottom: 1px solid var(--ink-rule);
  color: rgba(243, 241, 236, 0.62);
}

.arrive__times b { color: #fff; font-weight: 500; }

/* ---- The map ---- */

.arrive__map {
  position: relative;
  aspect-ratio: 2698 / 2156;
  overflow: hidden;
  background: #0E1216;
}

.arrive__cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.arrive__base,
.arrive__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.arrive__lines { overflow: visible; }

.arrive__ring {
  fill: none;
  stroke: rgba(243, 241, 236, 0.22);
  stroke-width: calc(1px / var(--s));
  stroke-dasharray: calc(2px / var(--s)) calc(5px / var(--s));
}

.arrive__route {
  fill: none;
  stroke: var(--accent-lift);
  stroke-width: calc(3px / var(--s));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: var(--draw, 0);
  filter: drop-shadow(0 0 calc(6px / var(--s)) rgba(10, 151, 180, 0.7));
}

/* Anything pinned to a map coordinate: positioned in map units, then scaled
   back down so text stays the same size however far the camera zooms. */
.map-mark {
  position: absolute;
  left: calc(var(--x) / var(--mw) * 100%);
  top: calc(var(--y) / var(--mh) * 100%);
  width: 0;
  height: 0;
  transform: scale(var(--inv));
  pointer-events: none;
}

.map-label {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 241, 236, 0.58);
  text-shadow: 0 0 6px #0B0D10, 0 0 2px #0B0D10;
}

.map-mark--major .map-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #D4E6DC;
}

.map-mark--ring .map-label {
  font-size: 9px;
  color: rgba(243, 241, 236, 0.42);
  background: #0E1216;
  padding: 1px 6px;
}

/* Origin: a hollow square, the metro symbol's cousin. */
.map-mark--origin::before {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border: 1.5px solid var(--accent-lift);
  background: #0E1216;
}

.map-mark--origin .map-label {
  left: 12px;
  transform: translate(0, -50%);
  color: #fff;
}

/* The destination: pulsing dot, crosshair, and a paper tag. */
.map-pin__dot {
  position: absolute;
  left: -6px; top: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-lift);
  box-shadow: 0 0 0 3px rgba(11, 13, 16, 0.9);
}

.map-pin__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent-lift);
  animation: pin-ping 2.4s var(--ease-out) infinite;
}

@keyframes pin-ping {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(4.2); opacity: 0; }
}

.map-pin__cross {
  position: absolute;
  left: -44px; top: -44px;
  width: 88px; height: 88px;
  background:
    linear-gradient(rgba(243,241,236,0.5), rgba(243,241,236,0.5)) 50% 0 / 1px 26px no-repeat,
    linear-gradient(rgba(243,241,236,0.5), rgba(243,241,236,0.5)) 50% 100% / 1px 26px no-repeat,
    linear-gradient(rgba(243,241,236,0.5), rgba(243,241,236,0.5)) 0 50% / 26px 1px no-repeat,
    linear-gradient(rgba(243,241,236,0.5), rgba(243,241,236,0.5)) 100% 50% / 26px 1px no-repeat;
}

.map-pin__tag {
  position: absolute;
  left: 18px; top: -30px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 7px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.map-pin__tag b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.map-pin__tag span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Photo scenes ---- */

.arrive__photo {
  position: relative;
  height: clamp(420px, 80vh, 860px);
  margin: 0;
  overflow: hidden;
  background: var(--ink-deep);
}

.arrive__photo > picture img,
.arrive__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Courtyard: the only picture of it is 960 px wide, so rather than stretch
   it across a 2560 px screen it hangs as a print over a blurred copy. */
.arrive__backdrop {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(26px) saturate(1.1) brightness(0.42);
}

.arrive__print {
  position: absolute;
  right: calc(var(--gutter) + 24px);
  top: calc(50% + var(--nav-h) / 2);
  width: min(58vw, 960px, calc((100svh - var(--nav-h) - 230px) * 1.5));
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  outline: 1px solid rgba(243, 241, 236, 0.22);
  outline-offset: 8px;
}

/* The garden print is 4:3, and uncropped so its arrow always shows. */
.arrive__print--garden {
  aspect-ratio: 1696 / 1270;
  width: min(58vw, 960px, calc((100svh - var(--nav-h) - 230px) * 1696 / 1270));
}

.arrive__print picture { display: block; width: 100%; height: 100%; overflow: hidden; }

.arrive__print img { width: 100%; height: 100%; object-fit: cover; }

.arrive__print-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.62);
}

.arrive__print-tag {
  position: absolute;
  left: 0; top: calc(100% + 18px);
}

/* How it works: the floor plan on a blueprint ground. The script feeds
   --k (0 → 1): walls draw in, then each room fills at its own --at. --ps is
   the plan's on-screen scale, so labels hold one size at any zoom. */
.arrive__scene--plan {
  --k: 1;
  --ps: 0.52;
  --lf: 11px;
  background:
    linear-gradient(rgba(243,241,236,0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(243,241,236,0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--ink-deep);
  padding: var(--space-10) var(--gutter) 0;
}

.plan {
  margin: 0 auto var(--space-8);
  width: min(100%, 420px);
}

.plan__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.plan__walls path {
  fill: none;
  stroke: rgba(243, 241, 236, 0.88);
  stroke-width: calc(1.6px / var(--ps));
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - min(1, var(--k) * 2.4));
}

.plan__soft {
  fill: none;
  stroke: rgba(243, 241, 236, 0.5);
  stroke-width: calc(1.2px / var(--ps));
  stroke-dasharray: calc(5px / var(--ps)) calc(4px / var(--ps));
  opacity: clamp(0, calc((var(--k) - 0.36) * 8), 1);
}

/* Each room: the hatch and outline in its sketch colour. */
.plan__zone {
  --z: clamp(0, calc((var(--k) - var(--at)) * 7), 1);
  opacity: var(--z);
  transform: scale(calc(0.94 + var(--z) * 0.06));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.plan__zone rect {
  fill: var(--hatch);
  stroke: var(--zc);
  stroke-width: calc(1.6px / var(--ps));
}

.plan__zone text {
  font-family: var(--font-mono);
  font-size: calc(var(--lf) / var(--ps));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: #fff;
}

.plan__zone .plan__sub {
  font-size: calc((var(--lf) - 2px) / var(--ps));
  font-weight: 400;
  letter-spacing: 0.08em;
  fill: var(--zc);
}

.plan__zone--hw { --zc: #C08AF0; --hatch: url(#hatch-hw); }
.plan__zone--cw { --zc: #66D38E; --hatch: url(#hatch-cw); }
.plan__zone--st { --zc: #FF7B7B; --hatch: url(#hatch-st); }
.plan__zone--kt { --zc: #FFB84D; --hatch: url(#hatch-kt); }
.plan__zone--cm { --zc: #5AAEF7; --hatch: url(#hatch-cm); }

#hatch-hw line { stroke: rgba(192, 138, 240, 0.42); stroke-width: 2.6; }
#hatch-hw rect { fill: rgba(192, 138, 240, 0.07); }
#hatch-cw line { stroke: rgba(102, 211, 142, 0.42); stroke-width: 2.6; }
#hatch-cw rect { fill: rgba(102, 211, 142, 0.07); }
#hatch-st line { stroke: rgba(255, 123, 123, 0.42); stroke-width: 2.6; }
#hatch-st rect { fill: rgba(255, 123, 123, 0.07); }
#hatch-kt line { stroke: rgba(255, 184, 77, 0.42); stroke-width: 2.6; }
#hatch-kt rect { fill: rgba(255, 184, 77, 0.07); }
#hatch-cm line { stroke: rgba(90, 174, 247, 0.42); stroke-width: 2.6; }
#hatch-cm rect { fill: rgba(90, 174, 247, 0.07); }

/* Once the plan has drawn in, every room keeps pulsing in its own colour,
   one after another in the order they filled. Each pulse grows the same
   distance past the room's edge (--rx/--ry are set per room for that), and
   a wide faint copy rides along underneath as the glow. */
.plan__zone rect.plan__ripple {
  fill: none;
  opacity: 0;
  stroke-width: calc(2.4px / var(--ps));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.plan__zone rect.plan__ripple--soft {
  stroke-width: calc(12px / var(--ps));
  stroke-opacity: 0.35;
}

.plan.is-done .plan__ripple {
  animation: plan-hum 2.8s var(--ease-out) var(--pd, 0s) infinite;
}

@keyframes plan-hum {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(var(--rx, 1.2), var(--ry, 1.3)); opacity: 0; }
}

.plan__tag {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 241, 236, 0.5);
}

/* ---- Stacked (no script / reduced motion) ---- */

.arrive:not(.is-live) .arrive__scene--map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.arrive:not(.is-live) .arrive__map {
  grid-column: 1 / -1;
  width: min(100%, calc(88vh * 2698 / 2156));
  margin-inline: auto;
}

.arrive:not(.is-live) .arrive__scene--map .arrive__cap { max-width: none; border-right: 0; }

.arrive:not(.is-live) .arrive__scene--garden .arrive__cap,
.arrive:not(.is-live) .arrive__scene--court .arrive__cap {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* ---- HUD (live mode only) ---- */

.arrive__hud { display: none; }

.arrive__credit span + span::before { content: " · "; }

/* ---- Live mode: the stage pins and the scenes become layers ------------- */

.arrive.is-live { height: calc(var(--arrive-len, 5.6) * 100svh); }

.arrive.is-live .arrive__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.arrive.is-live .arrive__scene {
  position: absolute;
  inset: 0;
}

.arrive.is-live .arrive__map {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.arrive.is-live .arrive__cam {
  inset: auto;
  left: 0; top: 0;
  width: calc(var(--mw) * 1px);
  height: calc(var(--mh) * 1px);
}

.arrive.is-live .arrive__photo { position: absolute; inset: 0; height: auto; }

.arrive.is-live .arrive__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
}

.arrive.is-live .arrive__cap.is-on { visibility: visible; }

.arrive.is-live .arrive__scene--garden,
.arrive.is-live .arrive__scene--court,
.arrive.is-live .arrive__scene--plan { visibility: hidden; }

.arrive.is-live .arrive__scene.is-on { visibility: visible; }

.arrive.is-live .arrive__scene--plan { padding: 0; }

.arrive.is-live .plan {
  position: absolute;
  margin: 0;
}

/* Photos drift a little while their scene holds. */
.arrive.is-live .arrive__photo > picture img,
.arrive.is-live .arrive__print img { will-change: transform; }

.arrive.is-live .arrive__hud { display: block; }

/* Keeps the HUD legible over a bright sky. */
.arrive.is-live .arrive__stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--nav-h) + 120px);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 13, 16, 0.62), rgba(11, 13, 16, 0));
}

.arrive.is-live .arrive__credit {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-4);
  z-index: 4;
  padding: 0;
}

/* Live, the credit line names only the scene on screen. */
.arrive.is-live .arrive__credit span { display: none; }
.arrive.is-live .arrive__credit span.is-on { display: inline; }
.arrive.is-live .arrive__credit span + span::before { content: none; }

.arrive__hud {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--nav-h) + var(--space-5));
  z-index: 4;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.66);
}

.arrive__hud .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.hud-step { white-space: nowrap; }

.hud-step b {
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-right: 2px;
}

.hud-step i {
  font-style: normal;
  margin-left: var(--space-3);
  color: var(--accent-lift);
}

.hud-bars {
  display: flex;
  gap: 6px;
}

.hud-bars span {
  position: relative;
  width: clamp(28px, 4vw, 56px);
  height: 2px;
  background: rgba(243, 241, 236, 0.18);
  overflow: hidden;
}

.hud-bars span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-lift);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.hud-read {
  justify-self: end;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-variant-numeric: tabular-nums;
}

.hud-scale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity 0.4s var(--ease-out);
}

.hud-scale i {
  display: block;
  width: var(--len, 60px);
  height: 5px;
  border: 1px solid rgba(243, 241, 236, 0.66);
  border-top: 0;
}

.arrive__credit {
  padding: var(--space-4) var(--gutter);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(243, 241, 236, 0.5);
  text-align: right;
}

.arrive__credit a { color: inherit; }

/* Photo credit tucked into the hero's corner. */
.hero-credit {
  position: absolute;
  right: var(--gutter);
  bottom: 62px;          /* just above the telemetry strip */
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(243, 241, 236, 0.5);
  text-align: right;
}

.hero-credit a { color: inherit; }

/* ---- Phones: a still map and the plan, with one-shot transitions -------- */

/* Registered so the plan's draw-in can be a plain CSS transition on phones;
   the desktop sequence sets it from the script instead. */
@property --k {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.arrive.is-framed .arrive__scene--court { display: none; }

/* The garden photo, framed as on desktop but in the page's flow: print,
   tag, then caption. It opens as a circle the first time it is seen. */
.arrive.is-framed .arrive__scene--garden .arrive__photo {
  height: auto;
  padding: var(--space-8) var(--gutter) calc(var(--space-8) + 24px);
}

.arrive.is-framed .arrive__scene--garden .arrive__print {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  transform: none;
}

.arrive.is-framed .arrive__scene--garden .arrive__print picture {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.4s var(--ease-io);
}

.arrive.is-framed .arrive__scene--garden .arrive__print.is-in picture { clip-path: circle(75% at 50% 50%); }

.arrive.is-framed .arrive__scene--garden .arrive__cap { position: relative; }

.arrive.is-framed .arrive__map {
  width: 100%;
  aspect-ratio: auto;
  height: min(62svh, 520px);
}

.arrive.is-framed .arrive__cam {
  inset: auto;
  left: 0;
  top: 0;
  width: calc(var(--mw) * 1px);
  height: calc(var(--mh) * 1px);
}

.arrive.is-framed .arrive__cap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.arrive.is-framed .arrive__cap.is-in { opacity: 1; transform: none; }

.arrive.is-framed .arrive__scene--plan { --k: 0; transition: --k 2.4s var(--ease-io); }
.arrive.is-framed .arrive__scene--plan.is-in { --k: 1; }

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

@media (max-width: 900px) {
  /* Below this the card can't sit beside the copy, so it drops underneath and
     the hero simply grows past the fold. */
  .hero-layout { grid-template-columns: 1fr; align-items: start; }
  .hero-book { margin-top: var(--space-6); }
  .hero-film { min-height: 0; }
  .hero-film__inner { padding-top: calc(var(--nav-h) + var(--space-10)); }

  .statement-grid { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .chapters { display: none; }

  .arrive__hud .wrap { grid-template-columns: 1fr auto; }
  .hud-bars { display: none; }
  .arrive__print { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--nav-h) + 96px); transform: none; }
  .arrive.is-live .arrive__credit { top: calc(var(--nav-h) + 52px); bottom: auto; }
  .arrive.is-live .arrive__cap { right: 0; max-width: 100%; border-right: 0; }
}

/* Tablet widths: the plan is tall, so it stands beside a narrower caption
   rather than being squeezed into the strip above a full-width one. */
@media (min-width: 600px) and (max-width: 900px) {
  .arrive.is-live [data-cap="4"] {
    right: auto;
    max-width: 50%;
    border-right: 1px solid rgba(243, 241, 236, 0.14);
  }
}

@media (max-width: 720px) {
  /* Two tidy rows — brand, then links — instead of a ragged three-row wrap.
     The [H]/[A] hints are keyboard affordances, so they go on touch. */
  :root { --nav-h: 88px; }

  .site-nav .wrap {
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-2) var(--space-4);
  }

  .nav-links {
    width: 100%;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }

  .nav-links a .key { display: none; }

  .hero-meta span:last-child { display: none; }

  .contact-grid { grid-template-columns: 1fr; }
  .hero .actions { flex-direction: column; align-items: flex-start; }
  .hero-film .actions { flex-direction: row; }
  .footer-grid { justify-content: flex-start; }
  .scroll-cue { display: none; }
  .plate__frame { height: clamp(440px, 74vh, 640px); }
  .plate--tall .plate__frame { height: clamp(460px, 78vh, 680px); }
  .plate__label { max-width: 100%; right: 0; border-right: 0; }
}

@media (max-width: 520px) {
  .hero-meta .wrap { justify-content: flex-start; gap: var(--space-3); }
  .hero-film h1 { letter-spacing: -0.03em; }
  .hud-scale { display: none; }
  .arrive__cap { padding: var(--space-5) var(--gutter); }
  .arrive__cap h3 { font-size: 1.35rem; margin-bottom: var(--space-3); }
  .arrive__cap p { font-size: var(--text-sm); line-height: 1.6; }
  /* A phone has no room for the timetable over the map; the caption
     already names the one walk that matters. */
  .arrive.is-live .arrive__times { display: none; }
  /* The plan labels its own rooms; on a phone it needs the height more. */
  .arrive.is-live [data-cap="4"] p { display: none; }
  .arrive__scene--plan { --lf: 9.5px; }
  .plan__zone .plan__sub { display: none; }
}

/* ---- Reduced motion: keep every state, drop every transition ------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .kin > i { transform: none; }
  .js .plate__frame { clip-path: none; }
  .js .plate__media img { transform: none; }
  .hero-film__media, .plate__media { transform: none !important; }
  .reticle { display: none; }
  .ticker__track { animation: none; }
  .map-pin__dot::after { animation: none; opacity: 0; }
  .plan.is-done .plan__ripple { animation: none; }
  @media (hover: hover) and (pointer: fine) {
    html.has-reticle, html.has-reticle a, html.has-reticle button,
    html.has-reticle .plate, html.has-reticle [data-cursor] { cursor: auto; }
  }
}