/* === ONE DAY SILENCE === */
/* "Silence made visible" — dark, cinematic, cymatic.
   Near-black void + sound rendered as light. Sound becomes ripple, ripple
   becomes pattern. Fraunces display, Newsreader prose, Spline Sans Mono labels.
   REDESIGN 2026-06-25: dark cinematic + WebGL cymatics + video. */

:root {
  color-scheme: dark;
  /* near-black void + luminous warm off-white + sage/amber resonance glow */
  --bg:           #0A0B0D;   /* near-black void */
  --bg-2:         #101216;   /* lifted section ground */
  --bg-3:         #16191F;   /* recessed surfaces (calendar / inputs) */
  --fg:           #EDEAE3;   /* warm luminous off-white */
  --fg-soft:      #ABA89D;   /* secondary */
  --fg-faint:     #6E6A60;   /* faint labels / meta */
  --rule:         rgba(237,234,227,0.12);   /* hairline */
  --rule-strong:  rgba(237,234,227,0.22);   /* firmer hairline */
  --accent:       #eeb31f;   /* golden — the brand highlight */
  --accent-deep:  #f4ca55;   /* hover / active (lighter on dark) */
  --accent-soft:  rgba(238,179,31,0.16);
  --amber:        #E2B583;   /* warm resonance highlight */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.46 9.37'%3E%3Cpath d='M10.46 9.37H0l5.23-9.37 5.23 9.37zM5.23 8.56V1.58L1.36 8.56h3.87z'/%3E%3C/svg%3E");   /* the brand mark, cut from the wordmark */
  --amber-soft:   rgba(226,181,131,0.16);
  /* media-overlay helpers — fixed regardless of theme */
  --ink:          #06070A;   /* scrim ink, always dark */
  --paper:        #F1EEE7;   /* text on media, always light */
  /* legacy aliases — kept so any old reference still resolves */
  --black:        var(--bg);
  --black-2:      var(--bg-2);
  --black-3:      var(--bg-3);
  --cream:        var(--fg);
  --gray:         var(--fg-soft);
  --gray-2:       var(--rule);
  --yellow:       var(--fg);
  --yellow-2:     var(--fg-soft);
  --error:        #C2645A;
  --success:      #8AA396;

  /* type stacks */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--bg); }

html {
  background: var(--bg);
  /* native scroll — must NOT combine with Lenis JS smooth-scroll (compounds into a multi-second scroll delay) */
  scroll-behavior: auto;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 380;
  font-size: 1.06rem;
  line-height: 1.72;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  overflow-x: hidden;
  min-height: 100vh;
}

/* — TYPE PRIMITIVES — */
.it {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-faint);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent);
}

/* — LINKS — */
a, .link {
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s;
}
a:hover, .link:hover { opacity: 0.6; }

.body-text a {
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
  transition: border-color 0.25s, opacity 0.25s, color 0.25s;
}
.body-text a:hover { border-color: var(--accent-deep); color: var(--accent-deep); opacity: 1; }

/* — HEADER — */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.6rem;
  pointer-events: none;
}
header.site-header > * { pointer-events: auto; }

header.site-header .logo {
  display: block;
  border: none;
}
header.site-header .logo .logo-img {
  height: 24px;
  width: auto;
  display: block;
  filter: none;
  opacity: 0.92;
}

/* hide the legacy <nav> in the header (we use fullscreen menu) */
header.site-header nav { display: none; }

/* — MENU TOGGLE — */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.7rem 1.15rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s, border-color 0.35s, color 0.35s;
}
.menu-toggle:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-deep);
}
.menu-toggle .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}
.menu-toggle .bars span {
  height: 1px;
  background: currentColor;
  width: 100%;
  transition: transform 0.35s, opacity 0.35s;
}
.menu-toggle .bars span:nth-child(2) { width: 11px; align-self: flex-end; }
.menu-toggle .toggle-label { letter-spacing: 0.18em; }

/* — LANGUAGE SWITCH — a quiet EN/NL pill beside the menu toggle — */
.header-tools { display: inline-flex; align-items: center; gap: 0.55rem; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule); border-radius: 999px;
  color: var(--fg-soft); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  transition: color 0.35s, border-color 0.35s;
}
.lang-switch:hover { color: var(--accent-deep); border-color: var(--accent); }
/* the same toggle, spelled out inside the fullscreen menu's reach-out block */
.fs-lang-switch {
  display: inline-block; margin-top: 0.55rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.fs-lang-switch::before { content: '↔ '; opacity: 0.6; }
.fs-lang-switch:hover { color: var(--accent); border-color: var(--accent); }

/* — FULLSCREEN MENU OVERLAY — */
.fs-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.fs-menu .fs-menu-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* the menu carries its own galaxy — a different clip than the page (a slow
   drifting star field vs. the page's Milky Way band) so opening the menu feels
   like turning to face another patch of sky. Faint resonance rings ride on top. */
.fs-menu .fs-menu-bg video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: brightness(0.85) contrast(1.12) saturate(0.9);
}
.fs-menu .fs-menu-bg img {
  display: none;
}
.fs-menu .fs-menu-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 42%,
      transparent 0,
      transparent 58px,
      var(--accent-soft) 58px,
      var(--accent-soft) 59px,
      transparent 59px,
      transparent 118px);
  opacity: 0.22;
  pointer-events: none;
}

.fs-menu-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.6rem;
}
.fs-menu-head .logo-img {
  height: 24px;
  width: auto;
  display: block;
  filter: none;
  opacity: 0.92;
}
.fs-menu-close {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.7rem 1.15rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s, border-color 0.35s, color 0.35s;
}
.fs-menu-close:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* language toggle, paired with the close button in the menu head */
.fs-head-tools { display: inline-flex; align-items: center; gap: 0.6rem; }
.fs-menu-lang {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}
.fs-menu-lang::before { content: '\2194'; opacity: 0.5; margin-right: 0.4rem; }
.fs-menu-lang:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ── centred menu · Book a session as the breathing portal, over an aurora ── */
.fs-menu-body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 3.4vh, 2.8rem);
  text-align: center;
  width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 3vh clamp(1.4rem, 5vw, 3rem);
  overflow-y: auto;
}
.fs-menu-kicker {
  margin: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--accent);
}

/* destinations — a centred row */
.fs-menu-nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.4rem clamp(1.3rem, 3vw, 2.6rem);
}
.fs-menu-nav .fs-nav-link {
  position: relative; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.12; letter-spacing: -0.012em;
  color: var(--fg); text-decoration: none; border: none; padding: 0.15rem 0;
  transition: color 0.3s;
}
.fs-menu-nav .fs-nav-link .num { display: none; }
.fs-menu-nav .fs-nav-link .lbl { position: relative; }
.fs-menu-nav .fs-nav-link .lbl::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--accent); transition: right 0.4s cubic-bezier(0.22,1,0.36,1);
}
.fs-menu-nav .fs-nav-link:hover { color: var(--accent-deep); }
.fs-menu-nav .fs-nav-link:hover .lbl::after { right: 0; }
.fs-menu-nav .fs-nav-link.active { color: var(--accent); }
.fs-menu-nav .fs-nav-link.active .lbl::after { right: 0; opacity: 0.5; }

/* the primary call IS the presence — the real WebGL orb rendered into a canvas */
.fs-book {
  position: relative; display: grid; place-items: center;
  width: clamp(238px, 31vw, 332px); aspect-ratio: 1 / 1;
  text-decoration: none; color: #fbfaf6;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.fs-book-orb-canvas {
  position: absolute; inset: -9%; width: 118%; height: 118%; z-index: 0; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 46%, transparent 75%);
          mask: radial-gradient(circle at 50% 50%, #000 46%, transparent 75%);
}
/* a quiet dark well at the orb's heart, so the words sit inside the light, not on top of it */
.fs-book-seat {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72%; height: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(9,8,6,0.66) 0%, rgba(9,8,6,0.40) 42%, transparent 72%);
}
.fs-book-core {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.fs-book-label {
  font-family: var(--font-display); font-weight: 320; font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  line-height: 1.06; letter-spacing: 0.01em; color: #f6efe1;
  text-shadow: 0 1px 16px rgba(0,0,0,0.82), 0 0 30px rgba(0,0,0,0.55), 0 0 46px rgba(232,192,137,0.28);
}
.fs-book-arrow {
  font-family: var(--font-mono); font-size: 1rem; color: color-mix(in srgb, var(--amber) 92%, #fff);
  text-shadow: 0 0 20px rgba(232,192,137,0.5); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.fs-menu.open .fs-book:hover { transform: scale(1.04); }
.fs-book:hover .fs-book-arrow { transform: translateX(4px); }

/* a quieter alternative to the whole journey: one held minute, right now */
.fs-sit {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: -0.4rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-soft); text-decoration: none; transition: color 0.35s;
}
.fs-sit-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0.8; }
.fs-sit:hover { color: var(--accent-deep); }

/* secondary — movements + reach out */
.fs-menu-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 3.4rem; margin-top: 0.4rem; }
.fs-sub-block { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.fs-sub-block .eyebrow { display: block; color: var(--accent); }
.fs-rail-movements { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.2rem; }
.fs-rail-movements a {
  font-family: var(--font-display); font-style: italic; font-weight: 330; font-size: 1.12rem;
  color: var(--fg-soft); text-decoration: none; border: none; transition: color 0.3s;
}
.fs-rail-movements a:hover { color: var(--accent-deep); }
.fs-rail-mail {
  font-family: var(--font-body); font-size: 1rem; color: var(--fg);
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.fs-rail-mail:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.fs-social {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--fg-soft); text-decoration: none; border: none; transition: color 0.3s;
}
.fs-social svg { width: 18px; height: 18px; }
.fs-social:hover { color: var(--accent); }

/* the animated aurora backdrop (replaces the galaxy video) */
.fs-menu-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the galaxy — same cosmic backdrop as the pages, the menu's base layer */
.fs-menu-galaxy {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: saturate(1.02) brightness(0.92) contrast(1.05);
  transform: scale(1.06);
  transition: opacity 1.5s ease;
}
.fs-menu.open .fs-menu-galaxy { opacity: 0.82; }
/* the mist — drifts over the galaxy; screen-blend keeps the stars, adds smoke */
.fs-menu-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(0.1) brightness(1.02) contrast(1.14);
  mix-blend-mode: screen;
  transition: opacity 1.3s ease;
}
.fs-menu.open .fs-menu-video { opacity: 0.55; }
.fs-menu-aurora .aur { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; will-change: transform, opacity; }
.fs-menu-aurora .a1 { width: 58vw; height: 58vw; left: -14vw; top: -18vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 88%, #fff), transparent 70%); }
.fs-menu-aurora .a2 { width: 52vw; height: 52vw; right: -16vw; top: 8vh; background: radial-gradient(circle, #46618f, transparent 70%); }
.fs-menu-aurora .a3 { width: 46vw; height: 46vw; left: 8vw; bottom: -22vh; background: radial-gradient(circle, #8a6a86, transparent 70%); }
.fs-menu-aurora .a4 { width: 34vw; height: 34vw; right: 6vw; bottom: -10vh; background: radial-gradient(circle, color-mix(in srgb, var(--accent-deep) 88%, #fff), transparent 70%); }
.fs-menu-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(88% 72% at 50% 46%, color-mix(in srgb, var(--ink) 64%, transparent) 0%, transparent 60%),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent), color-mix(in srgb, var(--ink) 34%, transparent));
}
.fs-menu.open .fs-menu-aurora .a1 { opacity: 0.28; animation: aurFade 1.4s ease both, aurDrift1 26s ease-in-out 1.4s infinite; }
.fs-menu.open .fs-menu-aurora .a2 { opacity: 0.24; animation: aurFade 1.4s ease 0.15s both, aurDrift2 32s ease-in-out 1.55s infinite; }
.fs-menu.open .fs-menu-aurora .a3 { opacity: 0.22; animation: aurFade 1.4s ease 0.30s both, aurDrift3 30s ease-in-out 1.70s infinite; }
.fs-menu.open .fs-menu-aurora .a4 { opacity: 0.26; animation: aurFade 1.4s ease 0.45s both, aurDrift2 28s ease-in-out 1.85s infinite reverse; }
@keyframes aurFade { from { opacity: 0; } }
@keyframes aurDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes aurDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-7vw, 4vh) scale(1.10); } }
@keyframes aurDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw, -6vh) scale(1.14); } }

.fs-menu-foot {
  position: relative; z-index: 2;
  padding: 1.5rem clamp(1.6rem, 5vw, 3rem);
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 2rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* open · staggered reveal of the centred stack */
.fs-menu-kicker, .fs-menu-nav, .fs-book, .fs-sit, .fs-menu-sub {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.fs-menu.open .fs-menu-kicker { opacity: 1; transform: none; transition-delay: 0.15s; }
.fs-menu.open .fs-menu-nav    { opacity: 1; transform: none; transition-delay: 0.28s; }
.fs-menu.open .fs-book        { opacity: 1; transform: none; transition-delay: 0.42s; }
.fs-menu.open .fs-sit         { opacity: 1; transform: none; transition-delay: 0.52s; }
.fs-menu.open .fs-menu-sub    { opacity: 1; transform: none; transition-delay: 0.62s; }

@media (max-width: 640px) {
  /* the whole menu scrolls as one column; the body takes its natural height
     (not flex:1 + inner scroll) so the sub-links and foot are never trapped
     below the fold behind the mobile browser toolbar */
  .fs-menu { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .fs-menu-body { flex: 0 0 auto; overflow: visible; justify-content: flex-start; gap: 1.6rem; padding-top: 1.5rem; padding-bottom: 2.4rem; }
  .fs-menu-nav .fs-nav-link { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .fs-book { width: clamp(180px, 52vw, 220px); }
  .fs-book-core { gap: 0.3rem; }
  .fs-book-label { font-size: clamp(0.9rem, 3.6vw, 1.12rem); letter-spacing: 0.02em; }
  .fs-book-arrow { font-size: 0.78rem; }
  .fs-menu-sub { gap: 1.4rem; }
  .fs-menu-foot {
    flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-menu-kicker, .fs-menu-nav, .fs-book, .fs-sit, .fs-menu-sub { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fs-menu-aurora .aur { animation: none !important; }
  .fs-menu.open .fs-menu-aurora .a1 { opacity: 0.26; }
  .fs-menu.open .fs-menu-aurora .a2 { opacity: 0.22; }
  .fs-menu.open .fs-menu-aurora .a3 { opacity: 0.20; }
  .fs-menu.open .fs-menu-aurora .a4 { opacity: 0.24; }
}

body.menu-open { overflow: hidden; }

/* — CONTAINER — */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.6rem;
}
.container.narrow { max-width: 760px; }
.container.text   { max-width: 640px; }
.container.wide   { max-width: 1320px; }

section { padding: 13rem 2.6rem; }

/* — TYPE SCALE (Fraunces display) — */
.display-xl, h1.display-xl,
.display-l, h1.display-l, h2.display-l,
.display-m, h2.display-m,
.display-s, h3.display-s {
  font-family: var(--font-display);
  font-weight: 330;
  letter-spacing: -0.005em;
  line-height: 1.05;
  text-transform: none;
  color: var(--fg);
}
.display-xl { font-size: clamp(3rem, 9.5vw, 7.6rem); line-height: 1.02; letter-spacing: -0.012em; }
.display-l  { font-size: clamp(2.4rem, 5.8vw, 4.8rem); letter-spacing: -0.008em; line-height: 1.06; }
.display-m  { font-size: clamp(1.9rem, 4vw, 3.2rem); letter-spacing: -0.004em; line-height: 1.12; }
.display-s  { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 400; letter-spacing: 0; line-height: 1.3; }

.display-xl .it,
.display-l .it,
.display-m .it,
.display-s .it { font-style: italic; font-weight: 340; color: var(--accent); }

/* — PAGE HEADER — */
.page-header {
  padding: 15rem 2.6rem 9rem;
  border-bottom: 1px solid var(--rule);
}
.page-header .container { max-width: 1180px; }
.page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 5.5rem;
  font-weight: 400;
}
.page-header .breadcrumb a { color: var(--fg-faint); border: none; }
.page-header .breadcrumb a:hover { color: var(--accent); opacity: 1; }
.page-header .breadcrumb .sep { color: var(--rule-strong); }
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  letter-spacing: -0.008em;
  line-height: 1.08;
  max-width: 20ch;
  color: var(--fg);
}
.page-header h1 .it {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  letter-spacing: 0;
  color: var(--accent);
}
.page-header .lead {
  margin-top: 4rem;
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 1.24rem;
  font-weight: 360;
  line-height: 1.65;
  max-width: 52ch;
  margin-left: auto;
}
.page-header .lead strong { color: var(--fg); font-weight: 500; }

/* — SECTION TAG — */
.section-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5rem;
  font-weight: 400;
  display: inline-block;
}
.section-tag::before {
  content: '';
  width: 30px; height: 1px;
  background: var(--accent);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.9rem;
  opacity: 0.7;
}

/* — BODY TEXT — */
.body-text {
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.78;
  font-weight: 380;
  max-width: 62ch;
}
.body-text p + p { margin-top: 1.4rem; }
.body-text strong { color: var(--fg); font-weight: 540; }
.body-text .lead {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 330;
  line-height: 1.4;
  letter-spacing: -0.004em;
  margin-bottom: 1.8rem;
}

/* — SPLIT (asymmetric editorial) — */
.split-2 {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 9rem;
  align-items: start;
}
.split-2.equal { grid-template-columns: 1fr 1fr; gap: 7rem; }
.split-2.flip  { grid-template-columns: 6fr 5fr; }
.split-2 > .body-text { max-width: 50ch; }

/* — DEEP BAND — (now a quiet paper-shift, hairline framed) */
.band-yellow {
  background: var(--bg-2);
  color: var(--fg);
  padding: 14rem 2.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* — INFO BLOCK — */
.info-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.info-block .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}
.info-block .value {
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
}
.info-block .value a { color: var(--fg); border-bottom: 1px solid var(--accent); }
.info-block .value a:hover { color: var(--accent-deep); border-color: var(--accent-deep); opacity: 1; }

/* — TIMELINE — */
.timeline {
  border-top: 1px solid var(--rule);
}
.timeline-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3.5rem;
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.timeline-item .time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.timeline-item h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 360;
  letter-spacing: -0.004em;
  margin-bottom: 0.6rem;
  color: var(--fg);
}
.timeline-item p {
  color: var(--fg-soft);
  font-family: var(--font-body);
  line-height: 1.7;
  max-width: 58ch;
}

/* — CARD GRID — editorial restraint, hairline borders only */
.cards-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: transparent;
  padding: 4.5rem 2.5rem 4.5rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.cards-grid.cols-3 > .card,
.cards-grid.cols-4 > .card {
  border-right: 1px solid var(--rule);
  padding: 4.5rem 3rem;
}
.cards-grid.cols-3 > .card:nth-child(3n),
.cards-grid.cols-4 > .card:nth-child(4n) { border-right: none; }
.cards-grid.cols-3 > .card:nth-last-child(-n+3),
.cards-grid.cols-4 > .card:nth-last-child(-n+4) { border-bottom: none; }
.card.hover-yellow { transition: opacity 0.3s; }
.card.hover-yellow:hover { opacity: 0.62; }
.card .num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 3.5rem;
  font-weight: 400;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 330;
  letter-spacing: -0.006em;
  margin-bottom: 1.1rem;
  color: var(--fg);
}
.card p {
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 32ch;
}

/* — FAQ — */
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.7rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 360;
  letter-spacing: -0.004em;
  list-style: none;
  color: var(--fg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.35s, color 0.35s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent-deep); }
.faq-item summary:hover { color: var(--accent-deep); opacity: 1; }
.faq-item .faq-body {
  padding: 0 0 2rem;
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 66ch;
}

/* — BUTTONS — refined, calm, generous padding */
.btn-yellow,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.4s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-yellow {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-yellow:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--bg);
  opacity: 1;
}
.btn-outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: transparent;
  opacity: 1;
}
.btn-yellow .arrow,
.btn-outline .arrow {
  display: inline-block;
  transition: transform 0.35s;
}
.btn-yellow:hover .arrow,
.btn-outline:hover .arrow { transform: translateX(4px); }

/* — FORM — */
form.std { display: grid; gap: 1.8rem; }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.85rem 0;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.05rem;
  outline: none;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.3s;
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color: var(--accent); }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-faint); }
.field textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.field input::-webkit-calendar-picker-indicator {
  filter: invert(0.15);
  cursor: pointer;
}
.form-note {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.6rem;
  font-weight: 400;
}

button[type="submit"],
.btn-submit {
  margin-top: 1rem;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  padding: 1.1rem 2rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
button[type="submit"]:hover,
.btn-submit:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--bg);
}
button[type="submit"]:disabled,
.btn-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--fg-faint);
}

/* — FOOTER — */
footer.site-footer {
  border-top: 1px solid var(--rule);
  padding: 4rem 2.6rem 3rem;
  margin-top: 5rem;
}
.footer-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.footer-grid > div { display: contents; }
.footer-grid h4 { display: none; }
.footer-grid a {
  color: var(--fg-soft);
  border: none;
  padding: 0.3rem 0.8rem;
}
.footer-grid a:hover { color: var(--accent); opacity: 1; }
.footer-grid .sep { color: var(--rule-strong); padding: 0 0.2rem; }
.footer-mark { display: none; }
.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  max-width: 1180px;
  margin: 0 auto;
}
.footer-bottom em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-soft);
}
.footer-ig {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--fg-faint); text-decoration: none; border: none;
  letter-spacing: 0.12em; transition: color 0.3s;
}
.footer-ig svg { width: 16px; height: 16px; }
.footer-ig:hover { color: var(--accent); }

/* — REVEAL — (single soft opacity/translate reveal) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* — DUOTONE / IMG — quiet warm photo treatment (no animated filter) */
.duotone { filter: grayscale(0.32) sepia(0.16) contrast(0.97) brightness(1.02); }

/* === VIEW TRANSITIONS === */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(brand-mark),
::view-transition-new(brand-mark) {
  animation-duration: 0.7s;
}

/* === IDLE BREATH on key elements === */
/* ONE very slow, GPU-only opacity breathe — NO filter:blur (perf) */
@media (prefers-reduced-motion: no-preference) {
  .breath {
    animation: idleBreath 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity;
  }
  @keyframes idleBreath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.86; }
  }
}

/* === KINETIC TYPE — split words enter from below (soft) === */
.split-words .word {
  display: inline-block;
  overflow: hidden;
}
.split-words .word > .inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.split-words.in .word > .inner {
  animation: wordRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wordRise {
  to { transform: translateY(0); opacity: 1; }
}

/* === STICKY-STACK PASSAGES === */
.passages-stack {
  margin: 7rem auto 0;
  max-width: 1180px;
  padding: 0 2.6rem;
}
.passage {
  position: relative;
  min-height: 64vh;
  padding: 7rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 7rem;
  align-items: start;
}
.passage:last-child { border-bottom: 1px solid var(--rule); }
.passage .passage-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  position: sticky;
  top: 32vh;
}
.passage h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.008em;
  margin-bottom: 1.8rem;
  color: var(--fg);
}
.passage p {
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.72;
  color: var(--fg-soft);
  font-weight: 380;
  max-width: 42ch;
}

/* scroll-driven reveal — fades in as section enters viewport, native CSS */
@supports (animation-timeline: view()) {
  .passage h3,
  .passage p,
  .passage .passage-num {
    animation: passageFade linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
  }
  @keyframes passageFade {
    0%   { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: none; }
  }
  .passage h3 { animation-delay: 0.05s; }
  .passage p  { animation-delay: 0.12s; }
}

/* fallback — IntersectionObserver-driven reveal (existing .reveal class works) */

/* === IMAGE-AS-TEXT-MASK === */
.text-mask-section {
  padding: 11rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
.text-mask {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(4.5rem, 24vw, 24rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
  margin: 0;
  padding: 0;
  background-image: url('/assets/geert-jan.webp');
  background-size: cover;
  background-position: center 18%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: grayscale(0.35) sepia(0.14) contrast(0.96);
}
.text-mask-meta {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 3.5rem auto 0;
  padding: 0 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}
.text-mask-meta .line {
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin: 0.5rem 1.6rem;
}

/* === CUSTOM CURSOR === */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 200;
  transition: width 0.35s cubic-bezier(0.22,1,0.36,1), height 0.35s cubic-bezier(0.22,1,0.36,1), background 0.35s, opacity 0.35s;
  will-change: transform;
  opacity: 0;
}
.cursor.ready { opacity: 0.7; }
.cursor.large { width: 46px; height: 46px; opacity: 0.32; }
.cursor.text  { width: 2px; height: 26px; border-radius: 0; opacity: 0.6; }
@media (pointer: coarse) {
  .cursor { display: none !important; }
}

/* magnetic snap — JS sets these via inline styles, this just smooths recovery */
.btn-yellow.magnetic,
.btn-outline.magnetic {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s, color 0.35s, border-color 0.35s, opacity 0.3s;
}

/* WebGL noise canvas — JS is disabled; keep harmless, no blend/blur */
.noise-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  display: none;
}

/* === HERO — EDITORIAL SPLIT LAYOUT === */
.hero-cinema {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 9rem 2.6rem 9rem;
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 7rem;
  align-items: center;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hero-right {
  position: relative;
}

/* portrait frame — contained, never bleeds behind text */
.portrait-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: grayscale(0.3) sepia(0.14) contrast(0.97) brightness(1.02);
  animation: kenBurns 22s ease-in-out infinite alternate;
  transform-origin: center 25%;
  will-change: transform;
}
@keyframes kenBurns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.2%, -0.8%); }
}

.portrait-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--bg) 55%, transparent) 100%);
  pointer-events: none;
}

.portrait-meta {
  display: flex;
  justify-content: space-between;
  margin: 1.5rem 0 0 auto;
  max-width: 460px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}
.portrait-meta::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--rule-strong);
  align-self: center;
  display: block;
  position: absolute;
  top: 1.6rem;
  left: 0;
}

/* === THE MOTIF: static concentric "resonance" rings ===
   re-skin of the old blurred/mix-blend/animated blob.
   No blur. No mix-blend. No animation (reduced-motion-safe by default). */
.hero-aura {
  position: absolute;
  top: 8%;
  right: 6%;
  z-index: 1;
  width: 78%;
  height: 78%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 26px,
      var(--accent) 26px,
      var(--accent) 27px,
      transparent 27px,
      transparent 54px);
  opacity: 0.10;
  pointer-events: none;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 72%);
}
/* ONE extremely slow GPU-only opacity breathe (transform/opacity only) */
@media (prefers-reduced-motion: no-preference) {
  .hero-aura {
    animation: auraBreathe 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity;
  }
  @keyframes auraBreathe {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.14; }
  }
}

.hero-beam { display: none; }
.hero-portrait { display: none; }
.hero-overlay { display: none; }
.hero-particles { display: none; }

/* hero numbered marker (top-left) */
.hero-mark {
  position: absolute;
  top: 8rem;
  left: 2.6rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
}
.hero-mark .num {
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 340;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
}

@media (max-width: 880px) {
  /* MOBILE: full-bleed portrait, text in bottom safe area, face stays high & uncovered */
  .hero-cinema {
    padding: 0;
    min-height: 100vh;
    min-height: 100svh;
    height: 100svh;
    position: relative;
    overflow: hidden;
  }
  .hero-grid {
    display: block;
    height: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
  }
  /* photo becomes full-bleed background */
  .hero-right {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
  }
  .portrait-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }
  .portrait-frame img {
    object-position: center 14%;
    filter: grayscale(0.3) sepia(0.14) contrast(0.98) brightness(1.0);
  }
  .portrait-frame::after {
    /* stronger gradient — keeps face untouched, gives text base */
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 18%, transparent) 0%,
      transparent 18%,
      transparent 42%,
      color-mix(in srgb, var(--bg) 60%, transparent) 68%,
      color-mix(in srgb, var(--bg) 96%, transparent) 100%);
  }
  .portrait-meta { display: none; }
  .hero-aura {
    top: 4%;
    right: 12%;
    width: 80%;
    height: 56%;
    opacity: 0.09;
  }

  /* text content overlays the bottom safe zone */
  .hero-left {
    position: absolute;
    bottom: 5rem;
    bottom: max(5rem, calc(env(safe-area-inset-bottom, 0) + 5rem));
    left: 1.6rem;
    right: 1.6rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
  }
  .hero-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    margin: 0;
  }
  .hero-eyebrow::before {
    width: 22px;
  }
  .hero-title-logo img {
    max-width: clamp(220px, 64vw, 300px);
    filter: none;
  }
  .hero-sub {
    font-size: 1.05rem;
    max-width: 34ch;
    line-height: 1.6;
  }
  .hero-cta {
    gap: 0.6rem;
  }
  .hero-cta .btn-yellow,
  .hero-cta .btn-outline {
    padding: 0.9rem 1.4rem;
    font-size: 0.68rem;
  }

  /* mark moves top-right (away from face) and shrinks */
  .hero-mark {
    top: 1.4rem;
    left: auto;
    right: 1.6rem;
    align-items: flex-end;
    text-align: right;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
  }
  .hero-mark .num {
    font-size: 1.5rem;
  }

  /* HUD repositioned */
  .hero-hud {
    bottom: 1.4rem;
    left: 1.6rem;
    right: 1.6rem;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
  }
  .hero-hud .scroll-cue { display: none; }
}

@media (max-width: 480px) {
  .hero-title-logo img { max-width: 240px; }
  .hero-left { bottom: 4rem; }
}

/* drifting particles — disabled in calm system */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
.hero-particles span {
  position: absolute;
  bottom: -12px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent-soft);
  animation: particleFloat linear infinite;
}
.hero-particles span:nth-child(1)  { left:  8%; width: 2px; height: 2px; animation-duration: 22s; animation-delay: 0s; }
.hero-particles span:nth-child(2)  { left: 17%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 4s; }
.hero-particles span:nth-child(3)  { left: 28%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: 1s; }
.hero-particles span:nth-child(4)  { left: 37%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 6s; }
.hero-particles span:nth-child(5)  { left: 49%; width: 2px; height: 2px; animation-duration: 26s; animation-delay: 2s; }
.hero-particles span:nth-child(6)  { left: 58%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: 8s; }
.hero-particles span:nth-child(7)  { left: 68%; width: 2px; height: 2px; animation-duration: 23s; animation-delay: 3s; }
.hero-particles span:nth-child(8)  { left: 76%; width: 3px; height: 3px; animation-duration: 21s; animation-delay: 7s; }
.hero-particles span:nth-child(9)  { left: 85%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: 5s; }
.hero-particles span:nth-child(10) { left: 93%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 9s; }

@keyframes particleFloat {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.85; }
  85%  { opacity: 0.6; }
  100% { transform: translate(28px, -110vh); opacity: 0; }
}

/* legacy class no-ops (kept for backwards compat) */
.hero-video,
.hero-cinema .photo-layer { display: none; }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: none;
  pointer-events: none;
}
.hero-content { display: contents; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.hero-eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--accent);
  display: inline-block;
  opacity: 0.7;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 10vw, 8.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 14ch;
}
.hero-title .it {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  letter-spacing: 0;
  color: var(--accent);
}

.hero-title-logo {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
  view-transition-name: brand-mark;
}
.hero-title-logo img {
  width: 100%;
  max-width: clamp(300px, 50vw, 600px);
  height: auto;
  display: block;
  filter: none;
}
@media (max-width: 720px) {
  .hero-title-logo img { max-width: clamp(240px, 80vw, 420px); }
}
.hero-sub {
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 380;
  color: var(--fg-soft);
  max-width: 40ch;
  line-height: 1.65;
  margin: 0;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
}

.hero-hud {
  position: absolute;
  bottom: 2.4rem;
  left: 2.6rem;
  right: 2.6rem;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  pointer-events: none;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-hud > * { padding: 0; }
.hero-hud .scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-hud .scroll-cue .arrow {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  display: inline-block;
  animation: scrollCue 2.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 0.9; transform: translateY(7px); }
}

/* legacy hero-cinema sublabels we no longer want */
.hero-cinema .display-top,
.hero-cinema .display-bot,
.hero-cinema .vertical-mantra,
.hero-cinema .geo-bg,
.hero-cinema .geo-bg-inner,
.hero-cinema .vignette,
.hero-cinema .grain,
.hero-cinema .pulse-rings { display: none; }

/* ====================================================================
   === PHOTOGRAPHY LAYER — cohesive warm paper/ink grade ===============
   Static filter only. NEVER animated. Every photo on the site wears
   this so the imagery feels part of the bone-paper world, not stock.
   ==================================================================== */
.photo-grade {
  filter: grayscale(0.34) brightness(0.70) contrast(1.08) saturate(0.62);
}
/* darker source frames (candle / incense) read beautifully on the void —
   keep them a touch brighter so the flame still glows */
.photo-grade--dark {
  filter: grayscale(0.28) brightness(0.84) contrast(1.06) saturate(0.66);
}

/* === MEDIA FIGURE — framed editorial image with caption =============== */
.media-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: 2px;
}
.media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the figure scales its image ever so slightly as it enters the viewport
   — pure transform via scroll timeline, GPU-only, no layout read */
.media-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* the faintest warm vignette so photos sit INTO the paper, not on it */
  background: radial-gradient(120% 100% at 50% 40%,
    transparent 55%,
    color-mix(in srgb, var(--bg) 22%, transparent) 100%);
}
.media-figure .figure-tag {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  font-weight: 500;
  padding: 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--fg) 62%, transparent);
}

/* slow ambient drift inside a framed photo — scale ONLY, very subtle.
   Reduced-motion safe (gated below). Used for sticky/feature images. */
@media (prefers-reduced-motion: no-preference) {
  .media-figure.is-drift img {
    animation: figureDrift 26s ease-in-out infinite alternate;
    transform-origin: center 40%;
    will-change: transform;
  }
  @keyframes figureDrift {
    from { transform: scale(1.015); }
    to   { transform: scale(1.075); }
  }
}

/* === EDITORIAL IMAGE + TEXT PAIR ===================================== */
.editorial-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
}
.editorial-pair.flip > .ep-media { order: 2; }
.editorial-pair .ep-media { aspect-ratio: 4 / 5; }
.editorial-pair .ep-media.wide { aspect-ratio: 5 / 4; }
.editorial-pair .ep-text { max-width: 52ch; }
.editorial-pair .ep-text .section-tag { margin-bottom: 2.4rem; }

/* === STICKY IMAGE COLUMN ============================================= */
.sticky-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: start;
}
.sticky-pair .sticky-media {
  position: sticky;
  top: 12vh;
  aspect-ratio: 4 / 5;
}
.sticky-pair .sticky-body { padding: 2rem 0 6rem; }
.sticky-pair .sticky-body > * + * { margin-top: 4.5rem; }
.sticky-pair .sticky-body .passage-line {
  border-top: 1px solid var(--rule);
  padding-top: 2.4rem;
}
.sticky-pair .sticky-body .passage-line h3 {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.006em;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--fg);
}
.sticky-pair .sticky-body .passage-line h3 .num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-right: 1rem;
  vertical-align: 0.28em;
  font-weight: 400;
}
.sticky-pair .sticky-body .passage-line p {
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.74;
  max-width: 44ch;
}

/* === FULL-BLEED ATMOSPHERIC BREAK ===================================
   A treated photograph spanning the viewport with a centred line of
   Fraunces over a static ink scrim. Cheap parallax via scroll timeline
   (transform/opacity ONLY). Resonance-ring motif layered low-opacity. */
.atmos-break {
  position: relative;
  width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 8rem 2.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}
.atmos-break .atmos-img {
  position: absolute;
  inset: -8% 0;          /* over-scan so parallax translate never reveals an edge */
  width: 100%;
  height: 116%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}
.atmos-break .atmos-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* layered, STATIC warm scrim — keeps Fraunces crisp on any frame */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--fg) 30%, transparent) 0%,
      color-mix(in srgb, var(--fg) 10%, transparent) 32%,
      color-mix(in srgb, var(--fg) 24%, transparent) 64%,
      color-mix(in srgb, var(--fg) 56%, transparent) 100%),
    radial-gradient(110% 90% at 50% 46%,
      transparent 40%,
      color-mix(in srgb, var(--fg) 30%, transparent) 100%);
}
/* resonance-ring motif, low opacity, static (motif reuse) */
.atmos-break .atmos-rings {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  width: min(120vh, 1100px);
  height: min(120vh, 1100px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.10;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 38px,
      var(--bg) 38px,
      var(--bg) 39px,
      transparent 39px,
      transparent 78px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 70%);
}
.atmos-break .atmos-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1180px;
  color: var(--bg);
}
.atmos-break .atmos-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 78%, transparent);
  font-weight: 500;
  display: inline-block;
  margin-bottom: 2.4rem;
}
.atmos-break .atmos-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--bg);
  max-width: 18ch;
  margin: 0 auto;
}
.atmos-break .atmos-line .it {
  font-style: italic;
  font-weight: 340;
  color: color-mix(in srgb, var(--bg) 86%, var(--accent));
}
.atmos-break .atmos-meta {
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 68%, transparent);
  font-weight: 500;
}

/* Cheap scroll parallax on full-bleed photos — CSS scroll timeline,
   TRANSFORM ONLY. No JS, no layout reads. Falls back to static. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .atmos-break .atmos-img {
      animation: atmosParallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes atmosParallax {
      from { transform: translateY(-4.5%) scale(1.06); }
      to   { transform: translateY(4.5%)  scale(1.06); }
    }
  }
}

/* === SCROLL-DRIVEN MEDIA REVEAL ===================================
   Framed photos rise + settle as they cross the viewport. Native CSS
   scroll timeline, transform/opacity only. .reveal IO fallback stays. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-rise {
      animation: scrollRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes scrollRise {
      from { opacity: 0; transform: translateY(40px) scale(0.985); }
      to   { opacity: 1; transform: none; }
    }
    /* gentle counter-drift for image inside a frame as it passes
       (transform only, contained by overflow:hidden parent) */
    .media-figure.is-pan img,
    .editorial-pair .ep-media img,
    .sticky-pair .sticky-media img {
      animation: mediaPan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    @keyframes mediaPan {
      from { transform: scale(1.085) translateY(-2.2%); }
      to   { transform: scale(1.085) translateY(2.2%); }
    }
  }
}

/* === REDESIGNED CINEMATIC HERO (home) ===============================
   Full-bleed treated atmospheric photograph. Slow Ken-Burns (scale
   only). Layered static warm scrim. Resonance rings. Scroll parallax
   via CSS scroll timeline. All motion = transform/opacity only. */
.hero-film {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--fg);
}
.hero-film .hf-photo {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  will-change: transform;
  /* hero grade baked via class on the element (.photo-grade) */
}
/* SLOW Ken-Burns — scale ONLY, ~22s, alternates. GPU-only. */
@media (prefers-reduced-motion: no-preference) {
  .hero-film .hf-photo {
    animation: hfKenBurns 24s ease-in-out infinite alternate;
    transform-origin: center 45%;
  }
  @keyframes hfKenBurns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.085); }
  }
}
/* Cheap parallax: as the hero scrolls away, the photo eases up + holds
   scale. CSS scroll timeline → transform only. Combines with Ken-Burns
   safely because parallax targets the WRAPPER, Ken-Burns the IMG. */
.hero-film .hf-photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-film .hf-photo-wrap {
      animation: hfParallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
    @keyframes hfParallax {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(-7%) scale(1.04); }
    }
  }
}
/* Layered STATIC warm scrim — ink toward bottom for crisp Fraunces */
.hero-film .hf-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--fg) 34%, transparent) 0%,
      color-mix(in srgb, var(--fg) 12%, transparent) 22%,
      color-mix(in srgb, var(--fg) 16%, transparent) 50%,
      color-mix(in srgb, var(--fg) 52%, transparent) 78%,
      color-mix(in srgb, var(--fg) 82%, transparent) 100%),
    radial-gradient(120% 80% at 50% 30%,
      transparent 42%,
      color-mix(in srgb, var(--fg) 26%, transparent) 100%);
}
/* Resonance rings — the existing concentric motif, layered subtly */
.hero-film .hf-rings {
  position: absolute;
  z-index: 2;
  top: 38%; left: 50%;
  width: min(135vh, 1300px);
  height: min(135vh, 1300px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.09;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 44px,
      var(--bg) 44px,
      var(--bg) 45px,
      transparent 45px,
      transparent 90px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 68%);
}
/* ONE extremely slow opacity pulse on the rings (opacity only) */
@media (prefers-reduced-motion: no-preference) {
  .hero-film .hf-rings {
    animation: hfRingPulse 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity;
  }
  @keyframes hfRingPulse {
    0%, 100% { opacity: 0.07; }
    50%      { opacity: 0.13; }
  }
}
.hero-film .hf-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.6rem 8rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.hero-film .hf-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 82%, transparent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.hero-film .hf-eyebrow::before {
  content: '';
  width: 36px; height: 1px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  display: inline-block;
}
.hero-film .hf-title {
  font-family: var(--font-display);
  font-weight: 290;
  font-size: clamp(2.8rem, 8.4vw, 7.4rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--bg);
  max-width: 15ch;
  margin: 0;
  text-wrap: balance;
}
.hero-film .hf-title .it {
  font-style: italic;
  font-weight: 330;
  color: color-mix(in srgb, var(--bg) 88%, var(--accent));
}
.hero-film .hf-title .split-words .word > .inner { color: inherit; }
.hero-film .hf-logo {
  display: block;
  width: 100%;
  max-width: clamp(280px, 44vw, 540px);
  margin: 0 0 0.4rem;
  view-transition-name: brand-mark;
}
.hero-film .hf-logo img {
  width: 100%;
  height: auto;
  display: block;
  /* logo art is white already; keep crisp, no filter */
}
.hero-film .hf-sub {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 380;
  color: color-mix(in srgb, var(--bg) 84%, transparent);
  max-width: 42ch;
  line-height: 1.66;
  margin: 0;
}
.hero-film .hf-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
/* hero CTAs sit on photography — invert the calm buttons for legibility */
.hero-film .hf-cta .btn-yellow {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--bg);
}
.hero-film .hf-cta .btn-yellow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.hero-film .hf-cta .btn-outline {
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 42%, transparent);
}
.hero-film .hf-cta .btn-outline:hover {
  color: var(--bg);
  border-color: var(--bg);
}
/* HUD line — pinned bottom, mono, faint on photo */
.hero-film .hf-hud {
  position: absolute;
  z-index: 5;
  bottom: 2.4rem;
  left: 2.6rem;
  right: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 64%, transparent);
  font-weight: 500;
  pointer-events: none;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-film .hf-hud .scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-film .hf-hud .scroll-cue .bar {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 80%, transparent));
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-film .hf-hud .scroll-cue .bar {
    animation: scrollCue 2.8s ease-in-out infinite;
  }
}
.hero-film .hf-mark {
  position: absolute;
  z-index: 5;
  top: 8rem;
  left: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 60%, transparent);
  font-weight: 500;
}
.hero-film .hf-mark .num {
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 320;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
}

@media (max-width: 880px) {
  .hero-film { min-height: 100svh; height: 100svh; }
  .hero-film .hf-inner { padding: 0 1.6rem 5.5rem; gap: 1.6rem; }
  .hero-film .hf-photo { object-position: center 40%; }
  .hero-film .hf-sub { font-size: 1.04rem; max-width: 32ch; }
  .hero-film .hf-cta .btn-yellow,
  .hero-film .hf-cta .btn-outline { padding: 0.9rem 1.4rem; font-size: 0.68rem; }
  .hero-film .hf-mark { top: 1.5rem; left: auto; right: 1.6rem; align-items: flex-end; font-size: 0.56rem; }
  .hero-film .hf-mark .num { font-size: 1.5rem; }
  .hero-film .hf-hud { left: 1.6rem; right: 1.6rem; bottom: 1.4rem; font-size: 0.56rem; }
  .hero-film .hf-hud .scroll-cue { display: none; }
}

/* === BOOKING WIZARD (light paper) === */
.wizard { max-width: 920px; margin: 0 auto; }
.wizard-progress {
  display: flex;
  gap: 0;
  margin-bottom: 3.5rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.wizard-step-pill {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 400;
  position: relative;
}
.wizard-step-pill .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-size: 0.66rem;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.wizard-step-pill.active { color: var(--accent); }
.wizard-step-pill.active .num { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.wizard-step-pill.done { color: var(--fg-soft); }
.wizard-step-pill.done .num { border-color: var(--fg-soft); }

.wizard-step { display: none; }
.wizard-step.active { display: block; animation: stepIn 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.calendar {
  border: 1px solid var(--rule);
  padding: 1.8rem;
  background: var(--bg-2);
  border-radius: 3px;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}
.cal-head h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 360;
  letter-spacing: -0.004em;
  text-transform: capitalize;
}
.cal-nav-btn {
  background: var(--bg-3);
  border: 1px solid var(--rule);
  color: var(--fg);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.cal-nav-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--bg-2); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal-dow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem 0;
  font-weight: 400;
}
.cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: var(--bg-3);
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cal-day:hover:not(:disabled):not(.empty) {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.cal-day.has-slots {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  position: relative;
}
.cal-day.has-slots::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.cal-day.selected {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.cal-day:disabled,
.cal-day.empty {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
}

.times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.time-slot {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--fg);
  padding: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.time-slot:hover { border-color: var(--accent); color: var(--accent-deep); }
.time-slot.selected { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.summary-box {
  border: 1px solid var(--rule);
  padding: 1.8rem;
  background: var(--bg-2);
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2.2rem;
  border-radius: 3px;
}
.summary-box .row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  font-size: 0.98rem;
}
.summary-box .row .label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  text-transform: uppercase;
  align-self: center;
  font-weight: 400;
}
.summary-box .row .value { color: var(--fg); font-family: var(--font-body); font-weight: 400; }

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}

.confirm-card {
  border: 1px solid var(--rule);
  padding: 5rem 2.5rem;
  text-align: center;
  background: var(--bg-2);
  border-radius: 3px;
}
.confirm-card .check { font-size: 2.4rem; color: var(--accent); margin-bottom: 1.6rem; }
.confirm-card h3 {
  font-family: var(--font-display);
  font-weight: 330;
  font-size: 2.2rem;
  letter-spacing: -0.006em;
  text-transform: none;
  margin-bottom: 1.1rem;
  color: var(--fg);
}
.confirm-card p { color: var(--fg-soft); font-family: var(--font-body); max-width: 52ch; margin: 0 auto 0.7rem; }
.confirm-card .ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-top: 1.6rem;
  display: inline-block;
  border: 1px solid var(--rule);
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
}

.alert {
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--error);
  background: rgba(154,75,63,0.08);
  color: var(--error);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 1.6rem;
  border-radius: 3px;
}

/* — RESPONSIVE — */
@media (max-width: 980px) {
  .split-2, .split-2.equal, .split-2.flip {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .cards-grid.cols-3, .cards-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .timeline-item { grid-template-columns: 1fr; gap: 0.6rem; }
  .info-block { grid-template-columns: 1fr; gap: 0.5rem; }

  /* photographic components stack on tablet/mobile */
  .editorial-pair,
  .editorial-pair.flip,
  .sticky-pair {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .editorial-pair.flip > .ep-media { order: 0; }
  .editorial-pair .ep-media,
  .editorial-pair .ep-media.wide { aspect-ratio: 16 / 11; }
  .sticky-pair .sticky-media {
    position: static;
    top: auto;
    aspect-ratio: 16 / 11;
  }
  .sticky-pair .sticky-body { padding: 0; }
  .sticky-pair .sticky-body > * + * { margin-top: 3rem; }
  .atmos-break { min-height: 62vh; padding: 6rem 1.6rem; }
  .atmos-break .atmos-line { font-size: clamp(2rem, 9vw, 3.4rem); }
}
@media (max-width: 720px) {
  header.site-header { padding: 1.3rem 1.4rem; }
  .menu-toggle { padding: 0.6rem 1rem; font-size: 0.64rem; }
  .menu-toggle .toggle-label { display: none; }
  .fs-menu-head { padding: 1.3rem 1.4rem; }
  .fs-menu-foot { padding: 1.3rem 1.4rem; }
  .fs-menu nav a { gap: 1rem; }
  .fs-menu nav a .num { padding-top: 0.9rem; font-size: 0.66rem; }
  section { padding: 6rem 1.4rem; }
  .hero-content { padding: 0 1.4rem 5rem; }
  .hero-hud { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; gap: 0.6rem; }
  .cards-grid.cols-2, .cards-grid.cols-3, .cards-grid.cols-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.9rem; text-align: center; }
  .summary-box .row { grid-template-columns: 1fr; gap: 0.25rem; }
  .wizard-actions { flex-direction: column-reverse; }
  .wizard-actions > * { width: 100%; justify-content: center; }
  .wizard-progress { flex-wrap: wrap; }
  .page-header { padding: 11rem 1.4rem 6rem; }
  .band-yellow { padding: 8rem 1.4rem; }
  .passages-stack { padding: 0 1.4rem; }
  .passage { grid-template-columns: 1fr; gap: 1.5rem; padding: 4.5rem 0; min-height: 0; }
  .passage .passage-num { position: static; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-aura { opacity: 0.1; }
  .portrait-frame img { animation: none; transform: scale(1.02); }

  /* photographic layer: kill Ken-Burns / parallax / drift / pan / large
     reveals — show every image static and fully visible, no motion */
  .hero-film .hf-photo { animation: none !important; transform: scale(1.02); }
  .hero-film .hf-photo-wrap { animation: none !important; transform: none; }
  .hero-film .hf-rings { animation: none !important; opacity: 0.09; }
  .hero-film .hf-hud .scroll-cue .bar { animation: none !important; }
  .atmos-break .atmos-img { animation: none !important; transform: scale(1.02); }
  .media-figure.is-drift img,
  .media-figure.is-pan img,
  .editorial-pair .ep-media img,
  .sticky-pair .sticky-media img { animation: none !important; transform: none; }
  .scroll-rise { animation: none !important; opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ═══ DARK CINEMATIC REDESIGN · 2026-06-25 ═══════════════════════════
   "Silence made visible." Near-black void, WebGL cymatics, video.
   Appended last so it wins the cascade. Motion = transform/opacity only.
   ════════════════════════════════════════════════════════════════════ */

/* — global void + content layering ————————————————————————— */
html, body { background: var(--bg); }
body { position: relative; }

/* the COSMIC backdrop — sitewide fixed video, the deepest layer (z -3) */
#cosmos {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: -3;
  object-fit: cover;
  pointer-events: none;
  /* bright enough to read clearly as a cosmos, still calm */
  filter: brightness(1.05) contrast(1.08) saturate(0.95);
  opacity: 1;
}
/* a soft vignette over the cosmos so the edges sink to black and the
   centre stays open — sits above the video, still behind the field */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  /* gentle edge vignette only — let the Milky Way read through the centre */
  background:
    radial-gradient(135% 115% at 50% 42%, transparent 56%, color-mix(in srgb,var(--bg) 50%,transparent) 100%);
}

/* the cymatics field: one fixed fullscreen canvas (z-index -2 → above the
   cosmos, below content). Renderer is TRANSPARENT so the cosmos shows
   through the dark gaps and the particles glow over deep space. */
#cymatics {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: -2;
  display: block;
  pointer-events: none;
  opacity: var(--cym-fade, 1);
  background: transparent;    /* must stay transparent to reveal the cosmos */
}
/* static film grain just above the field, still behind content (z -1) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
/* body must be transparent so the fixed field shows through the page flow */
html { background: var(--bg); }
body { background: transparent; }

/* content sections carry a semi-opaque void seat so the cymatics never
   fights legibility — yet stays faintly alive behind the text. Hero +
   atmos stay fully transparent for the full field. Inline-bg sections
   (higher specificity) keep their own solid ground. */
main > section:not(.hero-cym):not(.atmos-break) {
  background: color-mix(in srgb, var(--bg) 74%, transparent);
}
.band-yellow { background: color-mix(in srgb, var(--bg-2) 82%, transparent); }

/* — accent + selection glow ———————————————————————————————— */
*::selection { background: var(--accent); color: var(--ink); }
.eyebrow, .section-tag, .card .num, .timeline-item .time,
.passage-line h3 .num { text-shadow: 0 0 22px var(--accent-soft); }

/* — header / menu logo on the void (art is dark → lift to luminous) — */
.site-header .logo-img,
.fs-menu-head .logo-img { filter: invert(1) brightness(1.18); opacity: 0.9; }
.menu-toggle { backdrop-filter: blur(6px); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.fs-menu { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px) saturate(1.1); }
/* menu galaxy treatment lives with the .fs-menu .fs-menu-bg video rule above */

/* — buttons: luminous on the void ———————————————————————————— */
.btn-yellow {
  box-shadow: 0 0 0 0 transparent;
}
.btn-yellow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 34px -6px var(--accent), 0 0 0 1px var(--accent);
}
.btn-outline { border-color: var(--rule-strong); }
.btn-outline:hover { color: var(--accent-deep); box-shadow: 0 0 24px -10px var(--accent); }
.btn-submit:hover { box-shadow: 0 0 30px -8px var(--accent); }

/* — media figures sit INTO the void ————————————————————————— */
.media-figure { background: var(--bg-2); box-shadow: 0 30px 80px -40px #000, 0 0 0 1px var(--rule); }
.media-figure::after {
  background:
    radial-gradient(120% 100% at 50% 36%, transparent 48%, color-mix(in srgb, var(--ink) 70%, transparent) 100%);
}
.media-figure .figure-tag {
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  backdrop-filter: blur(4px);
}

/* — cards get a faint inner glow seam on hover ——————————————— */
.card.hover-yellow { transition: opacity 0.3s, background 0.4s; }
.card.hover-yellow:hover { opacity: 1; background: var(--accent-soft); }

/* — recessed scrollbar, dark ——————————————————————————————— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #20242b; border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2c323b; }

/* ════ NEW HERO · cymatics-forward ═══════════════════════════════════ */
.hero-cym {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: transparent;     /* let the global field show through */
  padding: 0;
}
/* optional dim video texture, beneath the cymatics, above void */
.hero-cym__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.30;
  filter: grayscale(0.5) brightness(0.42) contrast(1.15) saturate(0.7);
}
/* a local intensifier: brightens the global field inside the hero only */
.hero-cym__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 40%,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%);
  animation: cymBreath 11s ease-in-out infinite;
}
@keyframes cymBreath { 0%,100%{opacity:0.5} 50%{opacity:1} }
.hero-cym__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 28%,transparent) 0%, transparent 34%, color-mix(in srgb,var(--ink) 36%,transparent) 64%, color-mix(in srgb,var(--ink) 82%,transparent) 100%),
    radial-gradient(150% 80% at 24% 90%, color-mix(in srgb,var(--ink) 82%,transparent) 0%, transparent 58%);
}
.hero-cym__inner {
  position: relative; z-index: 5;
  width: 100%; max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.6rem 8.5rem;
  display: flex; flex-direction: column; gap: 2.2rem;
}
/* a soft pool of darkness behind the type so it stays crisp over the field */
.hero-cym__inner::before {
  content: '';
  position: absolute;
  left: -10%; right: 0; bottom: -6%; top: -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(75% 80% at 28% 64%,
    color-mix(in srgb, var(--ink) 80%, transparent) 0%,
    color-mix(in srgb, var(--ink) 50%, transparent) 42%,
    transparent 72%);
  filter: blur(8px);
}
.hero-cym__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--fg));
  display: inline-flex; align-items: center; gap: 0.9rem;
}
.hero-cym__eyebrow::before { content:''; width:42px; height:1px; background: currentColor; opacity: 0.6; display:inline-block; }
.hero-cym__logo {
  display: block; width: 100%;
  max-width: clamp(280px, 46vw, 560px);
  margin: 0 0 0.2rem;
  view-transition-name: brand-mark;
}
.hero-cym__logo img { width:100%; height:auto; display:block; filter: drop-shadow(0 0 40px color-mix(in srgb,var(--accent) 40%, transparent)); }
.hero-cym__title {
  font-family: var(--font-display);
  font-weight: 290;
  font-size: clamp(2.6rem, 7.6vw, 6.6rem);
  line-height: 1.04; letter-spacing: -0.016em;
  color: var(--fg); max-width: 16ch; margin: 0; text-wrap: balance;
}
.hero-cym__title .it { font-style: italic; font-weight: 330; color: var(--accent-deep); }
.hero-cym__sub {
  font-family: var(--font-body);
  font-size: 1.22rem; font-weight: 380;
  color: var(--fg-soft); max-width: 44ch; line-height: 1.66; margin: 0;
}
.hero-cym__cta { display:flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.hero-cym__hud {
  position: absolute; z-index: 5; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1180px; padding: 0 2.6rem;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--fg-faint); font-weight: 500; pointer-events: none;
}
.hero-cym__hud .scroll-cue { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-cym__hud .scroll-cue .bar {
  width: 1px; height: 30px; display: inline-block;
  background: linear-gradient(to bottom, transparent, var(--accent));
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cym__hud .scroll-cue .bar { animation: hudBar 2.6s ease-in-out infinite; transform-origin: bottom; }
  @keyframes hudBar { 0%,100%{transform:scaleY(0.4);opacity:0.4} 50%{transform:scaleY(1);opacity:1} }
}

/* ════ ATMOS BREAK · dark + optional video ═══════════════════════════ */
.atmos-break { background: var(--bg); }
/* support a <video> layer alongside the legacy <img> poster */
.atmos-break .atmos-video {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; z-index: 0; will-change: transform;
  filter: grayscale(0.4) brightness(0.5) contrast(1.12) saturate(0.7);
}
/* same cheap scroll-timeline parallax the legacy photo used — transform only */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .atmos-break .atmos-video {
      animation: atmosParallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
/* re-seat the scrim DARK (was built for light text over a darkened photo;
   on the void we darken further + keep text luminous) */
.atmos-break .atmos-scrim {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 55%, transparent) 0%,
      color-mix(in srgb, var(--ink) 34%, transparent) 34%,
      color-mix(in srgb, var(--ink) 48%, transparent) 66%,
      color-mix(in srgb, var(--ink) 78%, transparent) 100%),
    radial-gradient(110% 90% at 50% 46%, transparent 38%, color-mix(in srgb, var(--ink) 50%, transparent) 100%);
}
.atmos-break .atmos-rings {
  opacity: 0.14;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0, transparent 38px,
      var(--accent) 38px, var(--accent) 39px,
      transparent 39px, transparent 78px);
}
.atmos-break .atmos-inner { color: var(--paper); }
.atmos-break .atmos-eyebrow { color: color-mix(in srgb, var(--accent) 70%, var(--paper)); }
.atmos-break .atmos-line { color: var(--paper); }
.atmos-break .atmos-line .it { color: color-mix(in srgb, var(--accent) 70%, var(--paper)); }
.atmos-break .atmos-meta { color: color-mix(in srgb, var(--paper) 64%, transparent); }

/* ════ legacy hero-film (unused after home rebuild, but inner-safe) ═══ */
.hero-film .hf-rings {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0, transparent 44px,
      var(--accent) 44px, var(--accent) 45px,
      transparent 45px, transparent 90px);
}

/* — reduced-motion: still the cymatics, just no breath — handled in JS — */
@media (prefers-reduced-motion: reduce) {
  .hero-cym__glow { animation: none; opacity: 0.7; }
}

/* — phones: tighten hero — */
@media (max-width: 640px) {
  .hero-cym__inner { padding: 0 1.5rem 6rem; gap: 1.6rem; }
  .hero-cym__hud { padding: 0 1.5rem; font-size: 0.56rem; }
  #cymatics { opacity: calc(var(--cym-fade, 1) * 0.85); }
}

/* ════ INTRO LOADER — "entering silence" ════════════════════════════════ */
#enter {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 42%, #0d0f14 0%, #07080b 60%, #050608 100%);
  transition: opacity 1.3s cubic-bezier(0.4,0,0.2,1);
  cursor: wait;
}
#enter.gone { opacity: 0; pointer-events: none; }
.enter-core {
  display: flex; flex-direction: column; align-items: center; gap: 1.7rem;
  text-align: center;
}
.enter-ring {
  width: 70px; height: 70px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 40px -6px var(--accent), inset 0 0 24px -10px var(--accent);
  animation: enterPulse 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes enterPulse {
  0%,100% { transform: scale(0.78); opacity: 0.35; }
  50%     { transform: scale(1.06); opacity: 1; }
}
.enter-mark {
  font-family: var(--font-display);
  font-weight: 330;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  opacity: 0.92;
}
.enter-logo {
  width: clamp(180px, 24vw, 250px); height: auto; display: block;
  opacity: 0.95;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 32%, transparent));
}
.enter-word {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fg-faint);
  position: relative;
  overflow: hidden;
  padding-left: 0.42em;
}
/* a slow light sweeping across the word — the field waking up */
.enter-word::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, white), transparent);
  transform: translateX(-120%);
  animation: enterSweep 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes enterSweep { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .enter-ring, .enter-word::after { animation: none; }
  .enter-ring { opacity: 0.7; transform: scale(1); }
}

/* canvas stays transparent so the cosmos backdrop reads through the field */

/* ════ SCROLL-CHOREOGRAPHY · columns, rows & grids ══════════════════════
   Native CSS scroll-timeline (animation-timeline: view()) — GPU-only,
   transform/opacity, no JS, no layout reads. Browsers without support
   simply show content (the .reveal IO fallback still covers .reveal els).
   ════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
@media screen and (prefers-reduced-motion: no-preference) {

  /* — GRID CARDS: rise + fade, staggered left→right across the row — */
  .cards-grid > .card {
    animation: choreoRise both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
    will-change: transform, opacity;
  }
  .cards-grid.cols-3 > .card:nth-child(3n+2),
  .cards-grid.cols-4 > .card:nth-child(4n+2) { animation-range: entry 12% cover 34%; }
  .cards-grid.cols-3 > .card:nth-child(3n),
  .cards-grid.cols-4 > .card:nth-child(4n+3) { animation-range: entry 20% cover 42%; }
  .cards-grid.cols-4 > .card:nth-child(4n)   { animation-range: entry 28% cover 50%; }
  @keyframes choreoRise {
    from { opacity: 0; transform: translateY(64px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
  /* the card index number draws up a touch ahead of its card */
  .card .num {
    animation: choreoNum both;
    animation-timeline: view();
    animation-range: entry 2% cover 22%;
  }
  @keyframes choreoNum {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* — EDITORIAL PAIR: the two columns part — media & text glide in from
       opposite sides and meet — */
  .editorial-pair .ep-media {
    animation: choreoFromOuter both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  .editorial-pair .ep-text {
    animation: choreoFromInner both;
    animation-timeline: view();
    animation-range: entry 8% cover 46%;
  }
  @keyframes choreoFromOuter {
    from { opacity: 0; transform: translateX(-58px) translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes choreoFromInner {
    from { opacity: 0; transform: translateX(46px); }
    to   { opacity: 1; transform: none; }
  }
  /* flipped pairs mirror the direction so it always opens outward */
  .editorial-pair.flip .ep-media { animation-name: choreoFromOuterR; }
  .editorial-pair.flip .ep-text  { animation-name: choreoFromInnerR; }
  @keyframes choreoFromOuterR {
    from { opacity: 0; transform: translateX(58px) translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes choreoFromInnerR {
    from { opacity: 0; transform: translateX(-46px); }
    to   { opacity: 1; transform: none; }
  }

  /* — TIMELINE ROWS: each row rises while its time-label slides from the
       left and the hairline draws across — */
  .timeline-item {
    animation: choreoRow both;
    animation-timeline: view();
    animation-range: entry 2% cover 24%;
  }
  @keyframes choreoRow {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
  .timeline-item .time {
    animation: choreoLabelL both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
  @keyframes choreoLabelL {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: none; }
  }
  /* a light draws down the timeline's left rule as it enters */
  .timeline { position: relative; }
  .timeline::before {
    content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
    transform-origin: top; opacity: 0.5;
    animation: choreoDraw both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes choreoDraw {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 0.45; }
  }

  /* — INFO ROWS: content wipes in from the left, hairline first — */
  .info-block {
    animation: choreoRowWipe both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }
  @keyframes choreoRowWipe {
    from { opacity: 0; transform: translateX(-34px); }
    to   { opacity: 1; transform: none; }
  }

  /* — SECTION TAG: the eyebrow + its leading rule expand in — */
  .section-tag {
    animation: choreoTag both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
  @keyframes choreoTag {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* — SPLIT-2 columns part as well — */
  .split-2.equal > * {
    animation: choreoRise both;
    animation-timeline: view();
    animation-range: entry 6% cover 32%;
  }
  .split-2.equal > *:nth-child(2) { animation-range: entry 16% cover 42%; }
}
}

/* ════ RESONANCE ORB — tactile cursor affordances ══════════════════════ */
/* the soft cursor becomes a grab-ring over the orb, and contracts when held */
body.orb-hot .cursor {
  width: 54px; height: 54px;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  background: transparent;
  opacity: 0.9;
  box-shadow: 0 0 30px -6px var(--accent);
}
body.grabbing .cursor {
  width: 30px; height: 30px;
  background: var(--accent);
  opacity: 0.85;
}
body.orb-hot { cursor: grab; }
body.grabbing, body.grabbing * { cursor: grabbing !important; }
@media (pointer: coarse) { body.orb-hot, body.grabbing { cursor: auto; } }

/* ════════════════════════════════════════════════════════════════════
   ═══ THE PRESENCE · home as a consciousness you commune with ════════
   No header, no sections, no scroll. A breathing light asks; you answer;
   it forms a response from the dark. (2200.)
   ════════════════════════════════════════════════════════════════════ */
body[data-page="home"] { overflow: hidden; height: 100vh; height: 100svh; }
body[data-page="home"] .site-header,
body[data-page="home"] .site-footer { display: none; }

.presence {
  position: fixed; inset: 0; z-index: 3;
  display: grid; place-items: center;
  padding: 6vh 6vw;
  pointer-events: none;
  text-align: center;
}
.presence > * { pointer-events: auto; }

/* — the question — */
.seek {
  max-width: 40ch;
  display: flex; flex-direction: column; align-items: center; gap: 2.6rem;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1), filter 0.9s;
  animation: seekIn 2s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.seek.away { animation: none; opacity: 0; transform: scale(0.94) translateY(-10px); filter: blur(6px); pointer-events: none; }
@keyframes seekIn { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.seek-q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--fg); margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.seek-q .it { font-style: italic; color: var(--accent-deep); }

/* — the threads of intent — */
.intents { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2.2rem; }
.intent {
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0;
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: var(--fg-soft);
  position: relative; transition: color 0.4s, letter-spacing 0.4s;
  text-shadow: 0 1px 20px rgba(0,0,0,0.7);
}
.intent span { position: relative; }
.intent span::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 1px;
  background: var(--accent); transition: left 0.4s cubic-bezier(0.22,1,0.36,1), right 0.4s cubic-bezier(0.22,1,0.36,1);
}
.intent:hover, .intent:focus-visible { color: var(--fg); letter-spacing: 0.01em; }
.intent:hover span::after, .intent:focus-visible span::after { left: 0; right: 0; }
.seek-mark {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 0.6rem;
}

/* — the answer it forms — */
.answer {
  position: fixed; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: 12vh 7vw;
  opacity: 0; pointer-events: none;
  transition: opacity 0.8s ease;
}
.answer.open { opacity: 1; pointer-events: auto; }
.ask-again {
  position: absolute; top: clamp(1.6rem, 4vh, 3rem); left: 50%; transform: translateX(-50%);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-faint); display: inline-flex; gap: 0.6rem; align-items: center;
  transition: color 0.3s;
}
.ask-again span { font-size: 1rem; }
.ask-again:hover { color: var(--fg); }
.answer-panel { display: none; max-width: 30ch; }
.answer-panel.active { display: block; }
.answer-panel .ln {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.3; letter-spacing: -0.012em;
  color: var(--fg); margin: 0 0 1.4rem;
  text-shadow: 0 2px 36px rgba(0,0,0,0.7);
  opacity: 0;
}
.answer-panel.active .ln { animation: lnRise 1.1s cubic-bezier(0.22,1,0.36,1) both; }
.answer-panel.active .ln:nth-child(1) { animation-delay: 0.15s; }
.answer-panel.active .ln:nth-child(2) { animation-delay: 0.45s; }
.answer-panel.active .ln:nth-child(3) { animation-delay: 0.75s; }
.answer-panel.active .ln:nth-child(4) { animation-delay: 1.05s; }
@keyframes lnRise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.answer-panel .ln em { font-style: italic; color: var(--accent-deep); }
.answer-panel a {
  color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.answer-panel a:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.answer-cta {
  display: inline-block; margin-top: 0.6rem; border: 1px solid var(--fg) !important;
  border-radius: 2px; padding: 0.9rem 1.6rem; background: var(--fg); color: var(--bg) !important;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.answer-cta:hover { background: var(--accent); border-color: var(--accent) !important; color: var(--ink) !important; box-shadow: 0 0 34px -6px var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .seek, .answer-panel.active .ln { animation: none !important; opacity: 1; transform: none; filter: none; }
}

/* the presence sections must NOT inherit the content-page section dim —
   they float transparent over the living light */
main.presence > section { background: none !important; }

/* ════ PRESENCE · CLARITY PASS ══════════════════════════════════════════ */
/* a dark pool seats the type so it is always crisp over the living light */
.presence::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 50% at 50% 47%,
    color-mix(in srgb, var(--ink) 78%, transparent) 0%,
    color-mix(in srgb, var(--ink) 40%, transparent) 45%,
    transparent 72%);
}
.seek { gap: 2rem; }
.seek-q {
  font-size: clamp(2.9rem, 7.2vw, 5.6rem);
  color: #fbfaf6;
  text-shadow: 0 2px 60px #000, 0 0 18px rgba(0,0,0,0.85);
}
.seek-q .it { color: var(--accent); }
.intents { gap: 0.6rem 2rem; margin-top: 0.4rem; }
.intent {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  color: var(--fg);
  text-shadow: 0 2px 30px #000;
}
.intent span::after { bottom: -7px; height: 2px; background: var(--accent); }
.intent:hover, .intent:focus-visible { color: #fff; }
.seek-hint {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85; margin-top: 0.4rem;
  animation: orgHintPulse 3.6s ease-in-out infinite;
}
.seek-mark { margin-top: 0.2rem; opacity: 0.6; }
/* answers: crisper, larger, pure-white */
.answer-panel .ln { color: #fbfaf6; text-shadow: 0 2px 50px #000, 0 0 14px rgba(0,0,0,0.85); }
.answer { padding: 12vh 8vw; }

/* ════ INNER PAGES → the same void world ════════════════════════════════
   Strip the old editorial chrome (photos, video breaks, boxes) and let the
   content stand as clean minimal type over the void + the dim presence. */
body:not([data-page="home"]) .atmos-break,
body:not([data-page="home"]) .media-figure { display: none !important; }
body:not([data-page="home"]) .editorial-pair,
body:not([data-page="home"]) .sticky-pair,
body:not([data-page="home"]) .split-2 { display: block !important; }
body:not([data-page="home"]) .editorial-pair .ep-text,
body:not([data-page="home"]) .sticky-pair .sticky-body,
body:not([data-page="home"]) .split-2 > * { max-width: 64ch; margin-left: auto; margin-right: auto; }
body:not([data-page="home"]) .sticky-pair .sticky-media { display: none !important; }
body:not([data-page="home"]) .band-yellow { background: transparent !important; border: none; }
body:not([data-page="home"]) .cards-grid { border: none; gap: 1rem; }
body:not([data-page="home"]) .card { border: none !important; padding: 1.8rem 0 !important; }
/* lighten the section void-seat so the living dark breathes through */
body:not([data-page="home"]) main > section:not(.hero-cym) {
  background: color-mix(in srgb, var(--bg) 64%, transparent) !important;
}
/* page headers a touch more luminous to read over the void */
body:not([data-page="home"]) .page-header h1,
body:not([data-page="home"]) .display-l,
body:not([data-page="home"]) .display-m { text-shadow: 0 2px 40px #000; }

/* ════ PRESENCE · logo + clearer menu ═══════════════════════════════════ */
.seek { gap: 1.6rem; }
.seek-logo {
  width: clamp(180px, 22vw, 280px); height: auto; display: block; margin: 0 auto 0.4rem;
  opacity: 0.96;
  filter: drop-shadow(0 0 32px color-mix(in srgb, var(--accent) 42%, transparent));
}
.intents {
  flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0.8rem; margin-top: 0.8rem;
}
.intent {
  font-family: var(--font-body); font-style: normal;
  font-size: clamp(1.15rem, 2.1vw, 1.42rem);
  letter-spacing: 0.008em; color: var(--fg);
  padding: 0.2rem 0; display: inline-flex; align-items: center; gap: 0.55rem;
  text-shadow: 0 2px 24px #000;
}
.intent::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(0.4); transition: opacity 0.35s, transform 0.35s;
}
.intent:hover::before, .intent:focus-visible::before { opacity: 1; transform: scale(1); box-shadow: 0 0 14px var(--accent); }
.intent:hover, .intent:focus-visible { color: #fff; }
.seek-hint { margin-top: 0.8rem; }

/* ════════════════════════════════════════════════════════════════════
   ═══ THE REALMS · inner pages, fully in the 2200 world ══════════════
   No header/footer/editorial chrome. Each page is a realm you enter from
   the presence: void + the living light behind, luminous minimal type.
   ════════════════════════════════════════════════════════════════════ */
.site-header, .site-footer { display: none !important; }   /* nav routes through the presence */

.realm { position: relative; z-index: 3; min-height: 100vh; }
/* a soft dark spine behind the reading column so type stays crisp over the light */
.realm::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(64% 100% at 50% 50%, color-mix(in srgb,var(--ink) 66%,transparent), color-mix(in srgb,var(--ink) 30%,transparent) 70%, transparent);
}
.realm-home {
  position: fixed; top: clamp(1.4rem, 3vh, 2.4rem); left: clamp(1.4rem, 3vw, 2.6rem); z-index: 60;
  display: block; opacity: 0.85; transition: opacity 0.3s, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.realm-home img { width: clamp(120px, 14vw, 170px); height: auto; display: block;
  filter: drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 35%,transparent)); }
.realm-home:hover { opacity: 1; transform: translateY(-1px); }
.realm-home::after {
  content: '↜ the presence'; display: block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-faint); opacity: 0; transition: opacity 0.3s;
}
.realm-home:hover::after { opacity: 1; }

.realm-flow {
  max-width: 720px; margin: 0 auto;
  padding: clamp(8rem, 20vh, 16rem) clamp(1.5rem, 6vw, 3rem) 24vh;
  display: flex; flex-direction: column; gap: clamp(4rem, 9vh, 7rem);
}
.realm-intro { display: flex; flex-direction: column; gap: 1.6rem; }
.realm-kicker {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
.realm-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.02em;
  color: #fbfaf6; margin: 0; text-shadow: 0 2px 50px #000;
}
.realm-title .it { font-style: italic; color: var(--accent); }
.realm-lead {
  font-family: var(--font-body); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.6; color: var(--fg); margin: 0; max-width: 52ch;
  text-shadow: 0 2px 30px #000;
}

/* the guide's portrait, low-key B&W that melts into the void (no frame) */
.realm-portrait { margin: clamp(0.6rem, 3vh, 1.8rem) 0 0; }
.realm-portrait img {
  display: block; width: 100%; height: auto;
  -webkit-mask: radial-gradient(72% 100% at 51% 54%, #000 24%, transparent 82%);
          mask: radial-gradient(72% 100% at 51% 54%, #000 24%, transparent 82%);
}
/* on phones: a full-bleed 9:16 crop that fills the screen, him rising from the dark */
@media (max-width: 760px) {
  .realm-portrait {
    position: relative;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    margin-top: clamp(1.4rem, 5vh, 3rem); margin-bottom: clamp(1.4rem, 5vh, 3rem);
  }
  .realm-portrait picture { display: block; }
  .realm-portrait img {
    width: 100vw; height: 100vh; height: 100svh; object-fit: cover; object-position: 50% 42%;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%);
            mask: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%);
  }
}

/* content blocks emerge as you move down the realm */
.realm-block { display: flex; flex-direction: column; gap: 1.4rem; }
.realm-block > .label,
.realm-block .cr-sticky > .label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.4rem;
}
.realm-block h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -0.014em; color: #f3f1ea; margin: 0 0 0.4rem; text-shadow: 0 2px 40px #000;
}
.realm-block h2 .it { font-style: italic; color: var(--accent); }
.realm-block p { font-family: var(--font-body); font-size: 1.12rem; line-height: 1.7; color: var(--fg-soft); margin: 0; text-shadow: 0 1px 24px #000; }
.realm-block p strong, .realm-block strong { color: var(--fg); font-weight: 500; }
.realm-block .it { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); }
.realm-block a:not(.realm-cta) { color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: color .3s, border-color .3s; }
.realm-block a:not(.realm-cta):hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* a luminous row list (the day's rhythm, the practical facts, passages) */
.realm-rows { display: flex; flex-direction: column; }
.realm-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.6rem; align-items: baseline;
  padding: 1.5rem 0; border-top: 1px solid var(--rule);
}
.realm-row:last-child { border-bottom: 1px solid var(--rule); }
.realm-row .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.realm-row .v { font-family: var(--font-body); font-size: 1.08rem; color: var(--fg); line-height: 1.55; }
.realm-row .v strong { color: #fff; }
.realm-row .v small { display: block; color: var(--fg-faint); font-size: 0.9rem; margin-top: 0.2rem; }

/* the call to enter / act */
.realm-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: #fbfaf6; border: 1px solid #fbfaf6; border-radius: 2px;
  padding: 1rem 1.7rem; transition: background .35s, color .35s, box-shadow .35s, border-color .35s;
}
.realm-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 40px -6px var(--accent); }
.realm-cta.ghost { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
.realm-cta.ghost:hover { color: #fff; border-color: var(--accent); background: transparent; }
.realm-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }

@media (max-width: 560px) {
  .realm-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .realm-home img { width: 120px; }
}

/* realm readability: stronger dark spine + brighter body */
.realm::before {
  background:
    radial-gradient(70% 90% at 50% 45%, color-mix(in srgb,var(--ink) 80%,transparent), color-mix(in srgb,var(--ink) 46%,transparent) 60%, transparent 82%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 55%,transparent), transparent 22%, transparent 78%, color-mix(in srgb,var(--ink) 55%,transparent)) !important;
}
.realm-block p { color: #d7d4cb; }
.realm-row .v { color: #ede9e0; }

/* ════ restore the top-right Menu everywhere · fit the home on a laptop ══ */
/* keep the fullscreen-menu toggle (top-right) on every page; drop only the
   header logo (home has the centred mark, realms have .realm-home) */
.site-header { display: flex !important; justify-content: flex-end !important; }
.site-header .logo { display: none !important; }
.site-footer { display: none !important; }
body[data-page="home"] .site-header { display: flex !important; }
.menu-toggle { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); }

/* home stack: compact so all threads sit in view on a laptop */
.seek { gap: 1.1rem; }
.seek-logo { width: clamp(150px, 17vw, 220px); margin-bottom: 0.2rem; }
.intents { gap: 0.55rem; margin-top: 0.4rem; }
.intent { font-size: clamp(1.1rem, 1.9vw, 1.35rem); padding: 0.12rem 0; }
.seek-hint { margin-top: 0.5rem; }
@media (max-height: 760px) {
  .seek-logo { width: clamp(130px, 14vw, 180px); }
  .intent { font-size: 1.1rem; }
  .seek { gap: 0.8rem; }
}

/* ════ HOME · the four movements (heart) + the realms (thresholds) ══════ */
.movements {
  display: flex; flex-direction: column; gap: 0.35rem;
  align-items: flex-start; position: relative; padding-left: 1.8rem; margin: 0.3rem 0;
}
.movements::before {
  content: ''; position: absolute; left: 0.55rem; top: 0.7rem; bottom: 0.7rem; width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb,var(--accent) 75%,transparent), transparent);
  opacity: 0.55;
}
.movement { display: inline-flex; align-items: baseline; gap: 1.05rem; padding: 0.12rem 0; text-decoration: none; }
.movement .n {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--accent); width: 1.7rem; flex: none; opacity: 0.78; transition: opacity 0.35s;
}
.movement .w {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.7rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -0.01em;
  color: #cbc8bf; transition: color 0.45s, text-shadow 0.45s;     /* always readable */
  text-shadow: 0 2px 24px #000;
}
@media (prefers-reduced-motion: no-preference) {
  .movement .w { animation: passGlow 9s ease-in-out infinite; animation-delay: calc(var(--i) * 2.25s); }
}
@keyframes passGlow {
  0%, 28%, 100% { color: #b4b1a8; text-shadow: 0 2px 24px #000; }              /* resting, still clear */
  9% { color: #fff; text-shadow: 0 0 32px var(--accent), 0 2px 24px #000; }    /* the light passes through */
}
.movement:hover .w, .movement:focus-visible .w { color: #fff; text-shadow: 0 0 34px var(--accent), 0 2px 24px #000; animation-play-state: paused; }
.movement:hover .n { opacity: 1; }

.realms {
  position: fixed; left: 50%; bottom: clamp(1.6rem, 4.5vh, 3.2rem); transform: translateX(-50%);
  z-index: 5; display: flex; gap: clamp(1rem, 3vw, 2.6rem); flex-wrap: wrap; justify-content: center;
  max-width: 94vw;
}
.realm-link {
  display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-soft); padding-bottom: 5px; transition: color 0.35s;
}
.realm-link i { font-style: normal; color: var(--accent); font-size: 0.58rem; opacity: 0.7; transition: opacity 0.35s; }
.realm-link span { position: relative; }
.realm-link span::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -5px; height: 1px; background: var(--accent); transition: left 0.35s cubic-bezier(.22,1,.36,1), right 0.35s cubic-bezier(.22,1,.36,1); }
.realm-link:hover { color: #fff; }
.realm-link:hover i { opacity: 1; }
.realm-link:hover span::after { left: 0; right: 0; }
@media (max-height: 720px) { .movement .w { font-size: 1.6rem; } .seek-logo { width: 130px; } }

/* a dedicated dark pool directly behind the home content so all four
   movements read clearly over the glowing presence */
.seek { position: relative; }
.seek::before {
  content: ''; position: absolute; inset: -14% -28%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 50%, color-mix(in srgb,var(--ink) 84%,transparent) 0%, color-mix(in srgb,var(--ink) 50%,transparent) 55%, transparent 78%);
  filter: blur(6px);
}
.movement .w { color: #e3e0d7; }
@keyframes passGlow {
  0%, 28%, 100% { color: #c9c6bd; text-shadow: 0 2px 24px #000; }
  9% { color: #fff; text-shadow: 0 0 34px var(--accent), 0 2px 24px #000; }
}

/* ════ BOOK · a fixed call-to-book, bottom-right (sibling to the menu) ═══ */
.book-fab {
  position: fixed; bottom: clamp(1.4rem, 3vh, 2.2rem); right: clamp(1.4rem, 3vw, 2.6rem); z-index: 80;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 0.78rem 1.35rem; color: var(--fg); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s, transform .4s;
}
.book-fab .book-fab-ico { transition: transform .35s; display: inline-block; }
.book-fab:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 32px -8px var(--accent); }
.book-fab:hover .book-fab-ico { transform: translateX(4px); }
body[data-page="boeken"] .book-fab { display: none; }   /* not on the booking page itself */
@media (max-width: 520px) { .book-fab .book-fab-label { display: none; } .book-fab { padding: 0.8rem; } }

/* ════ HOME refinement · bigger logo · words inside the orb · no numbers ═ */
/* logo: larger, pinned at the top, out of the centred flow */
.seek-logo {
  position: absolute; top: clamp(2.2rem, 7vh, 4.5rem); left: 50%; transform: translateX(-50%);
  width: clamp(250px, 30vw, 430px) !important; margin: 0 !important; z-index: 6;
}
/* the four movements now sit at the orb's heart, centred, no numerals/spine */
.seek { gap: 0; }
.movements { align-items: center !important; padding-left: 0 !important; gap: 0.12rem; }
.movements::before { display: none !important; }
.movement { justify-content: center; gap: 0; padding: 0.1rem 0; }
.movement .w {
  text-align: center;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  /* the words read as light formed from the orb itself */
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 60px rgba(0,0,0,0.55);
}
@keyframes passGlow {
  0%, 28%, 100% { color: #d2cfc6; text-shadow: 0 0 22px color-mix(in srgb,var(--accent) 48%,transparent), 0 2px 16px rgba(0,0,0,0.55); }
  9% { color: #fff; text-shadow: 0 0 40px var(--accent), 0 0 74px color-mix(in srgb,var(--accent) 55%,transparent); }
}
/* let the orb glow blend with the words — a softer, smaller pool */
.seek::before {
  inset: -22% -30% !important;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb,var(--ink) 58%,transparent) 0%, color-mix(in srgb,var(--ink) 26%,transparent) 50%, transparent 76%) !important;
}

/* book button: a resonance-ring icon before the label; keep the full text on mobile */
.book-fab { gap: 0.7rem; }
.book-fab .book-fab-ico {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--accent); background: transparent; flex: none;
  transition: background .35s, box-shadow .35s, transform .35s;
}
.book-fab:hover .book-fab-ico { background: var(--accent); transform: none; box-shadow: 0 0 12px 1px var(--accent); }
@media (max-width: 520px) {
  .book-fab .book-fab-label { display: inline !important; }
  .book-fab { padding: 0.7rem 1.15rem; }
}

/* mobile: keep the realms bar clear of the bottom-right Book button */
@media (max-width: 600px) {
  .realms { bottom: 5.4rem; gap: 0.45rem 1.3rem; }
}

/* booking: lead straight with the datepicker — no tall intro, calendar high */
body[data-page="boeken"] .realm-flow {
  padding-top: clamp(4.5rem, 9vh, 6.5rem);
  padding-bottom: 14vh;
  gap: 2.5rem;
}

/* booking: tighten the wizard header so the calendar grid sits fully in view */
body[data-page="boeken"] .realm-flow { padding-top: clamp(3.6rem, 7vh, 5rem); }
body[data-page="boeken"] .wizard-progress { margin-bottom: 1.4rem; }
body[data-page="boeken"] .wizard-step h2 { margin-bottom: 1.1rem !important; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
body[data-page="boeken"] .wizard-step .section-tag { margin-bottom: 0.6rem; }

/* ════════════════════════════════════════════════════════════════════
   ═══ SCROLL CHOREOGRAPHY · 2026-07-04 ═══════════════════════════════
   The world answers scroll. One pinned horizontal passage (the Crossing
   on /silence-day/: the day passes across a still visitor), a shared
   drift vocabulary (intro dissolve, converge rows, rule-draw, path
   thread), and the breath engine (scroll velocity stirs the orb; it
   settles when you do — fed via JS uniforms, zero DOM cost).
   html.cr-on is set by JS only when motion is allowed; every CSS
   scroll-timeline effect is double-gated behind @supports + reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* sticky must survive the overflow guard: clip does not create a scroll
   container (hidden does, which would un-stick the Crossing) */
body { overflow-x: hidden; overflow-x: clip; }

/* ── THE CROSSING · /silence-day/ ─────────────────────────────────────
   Fallback (no JS / reduced motion): the exact vertical rows of today.
   The sun and the pinned track only exist under html.cr-on.            */
.cr-sun { display: none; }
.cr-sticky > .label { display: block; margin-bottom: 1.8rem; }

html.cr-on .crossing {
  width: 100vw; margin-left: calc(50% - 50vw);
  height: calc(100vh + 455vh);       /* fallback for browsers without svh */
  height: calc(100svh + 455vh);      /* the scroll budget of the whole day */
}
html.cr-on .crossing .cr-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
html.cr-on .crossing .cr-sticky > .label {
  position: absolute; top: clamp(5.5rem, 13vh, 8rem); left: clamp(1.5rem, 6vw, 4rem);
  margin: 0; z-index: 3;
}
html.cr-on .cr-track {
  display: flex; flex-direction: row;   /* .realm-rows is a column by default */
  align-items: center; gap: clamp(3.5rem, 7vw, 8rem);
  width: max-content; will-change: transform;
  padding-top: 7vh;                  /* the upper band belongs to the sun's arc */
}
html.cr-on .cr-track .realm-row {
  display: block; flex: none; width: min(480px, 76vw);
  border: 0; padding: 0;
  opacity: 0.4; transition: opacity 0.7s;
}
html.cr-on .cr-track .realm-row.is-now { opacity: 1; }
html.cr-on .cr-track .realm-row .k {
  display: block; position: relative; margin-bottom: 1.1rem; padding-bottom: 0.8rem;
  font-size: 0.7rem; letter-spacing: 0.22em;
  transition: color 0.7s;
}
html.cr-on .cr-track .realm-row .k::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 1px;
  background: var(--rule-strong); transition: background 0.7s, box-shadow 0.7s;
}
html.cr-on .cr-track .realm-row.is-now .k { color: var(--amber); }
html.cr-on .cr-track .realm-row.is-now .k::after {
  background: var(--amber); box-shadow: 0 0 14px 0 var(--amber-soft);
}
html.cr-on .cr-track .realm-row .v {
  font-size: 1.05rem; line-height: 1.62; color: #cfccc3; text-shadow: 0 1px 24px #000;
}
html.cr-on .cr-track .realm-row .v strong {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.015em;
  color: #f3f1ea; margin-bottom: 0.9rem; text-shadow: 0 2px 40px #000;
}
html.cr-on .cr-sun {
  display: block; position: absolute; left: 0; top: 0; z-index: 2;
  width: 7px; height: 7px; border-radius: 50%;
  color: var(--accent); background: currentColor;
  box-shadow: 0 0 18px 2px currentColor,
              0 0 60px 12px color-mix(in srgb, currentColor 30%, transparent);
  will-change: transform;
  pointer-events: none;
}

/* ── SCROLL-TIMELINE VOCABULARY · realm pages ───────────────────────── */
@supports (animation-timeline: view()) {
@media screen and (prefers-reduced-motion: no-preference) {

  /* — INTRO DISSOLVE: the title card returns to the void as you descend;
       the lead lets go first, the title lingers last. Fully reversible. — */
  .realm-intro > * {
    animation: introDissolve linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 60%;
  }
  .realm-intro .realm-lead  { animation-range: exit 0% exit 48%; }
  .realm-intro .realm-title { animation-range: exit 8% exit 85%; }

  /* — CONVERGE: key and value drift onto their shared hairline — */
  .converge .realm-row .k {
    animation: meetL linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
  .converge .realm-row .v {
    animation: meetR linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }

  /* — RULE-DRAW: each hairline inscribes itself left to right — */
  .realm-flow .realm-row { position: relative; border-top-color: transparent; }
  .realm-flow .realm-row::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: var(--rule);
    transform-origin: left; transform: scaleX(0);
    animation: ruleDraw linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
  /* crossing panels carry their own hour-rule instead */
  html.cr-on .crossing .realm-row { border: 0; }
  html.cr-on .crossing .realm-row::after { display: none; }

  /* — PATH THREAD (/over-mij/): the walked path draws itself down while
       each era's year arrives out of the past — */
  .path { position: relative; }
  .path::before {
    content: ''; position: absolute; left: -1.2rem; top: 0; width: 1px; height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
    transform-origin: top; transform: scaleY(0); opacity: 0.5;
    animation: threadDraw linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 90%;
  }
  .path .realm-row .k {
    animation: pathKey linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  @keyframes introDissolve { to { opacity: 0; transform: translateY(-42px); } }
  @keyframes meetL {
    from { opacity: 0; transform: translateX(-24px); }
    60%  { opacity: 0.75; transform: translateX(-4px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes meetR {
    from { opacity: 0; transform: translateX(24px); }
    60%  { opacity: 0.75; transform: translateX(4px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes ruleDraw   { to { transform: scaleX(1); } }
  @keyframes threadDraw { to { transform: scaleY(1); } }
  @keyframes pathKey {
    from { opacity: 0; transform: translateX(-32px); }
    60%  { opacity: 0.8; transform: translateX(-5px); }
    to   { opacity: 1; transform: none; }
  }
}
}

/* phones: the crossing panels breathe a little tighter */
@media (max-width: 560px) {
  html.cr-on .cr-track .realm-row .v strong { font-size: 1.55rem; }
  html.cr-on .crossing .cr-sticky > .label { top: 5rem; }
}

/* — PRINT: the day must be printable — undo the pinned crossing and let
   every hour stack vertically again (cr-on stays on <html> in print) */
@media print {
  html.cr-on .crossing { width: auto; margin-left: 0; height: auto; }
  html.cr-on .crossing .cr-sticky {
    position: static; height: auto; overflow: visible; display: block;
  }
  html.cr-on .crossing .cr-sticky > .label { position: static; }
  html.cr-on .cr-track {
    display: block; width: auto; padding: 0;
    transform: none !important;
  }
  html.cr-on .cr-track .realm-row {
    width: auto; opacity: 1;
    padding: 1.5rem 0; border-top: 1px solid #ccc;
  }
  html.cr-on .cr-sun { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ═══ BOOKING · fullscreen step-by-step request · 2026-07-04 ═════════
   Four questions in the dark: month → days → you → check. One step
   fills the viewport at a time; no page scroll. The orb chimes the four
   movements' tones as you advance. Posts to /api/requests.
   ════════════════════════════════════════════════════════════════════ */
body[data-page="boeken"] { overflow: hidden; height: 100svh; }
.bw { position: fixed; inset: 0; z-index: 3; }
.bw::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 90% at 50% 45%, color-mix(in srgb,var(--ink) 78%,transparent), color-mix(in srgb,var(--ink) 44%,transparent) 60%, transparent 84%),
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 50%,transparent), transparent 24%, transparent 76%, color-mix(in srgb,var(--ink) 50%,transparent));
}

/* the logo leads the request flow — larger here, top-left, clear of the steps */
.bw .realm-home img { width: clamp(160px, 15vw, 215px); }

/* — progress: quiet mono steps + a filling hairline — */
.bw-progress {
  position: fixed; top: clamp(1.5rem, 3.4vh, 2.6rem); left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; gap: 0.6rem; align-items: center;
  transition: opacity 0.6s;
}
.bw-progress.gone { opacity: 0; pointer-events: none; }
.bw-progress ol { list-style: none; display: flex; gap: clamp(1rem, 3.4vw, 2.6rem); margin: 0; padding: 0; }
.bw-progress li {
  display: inline-flex; gap: 0.45rem; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-faint); transition: color 0.4s;
}
.bw-progress li i { font-style: normal; font-size: 0.55rem; opacity: 0.75; }
.bw-progress li.on { color: var(--fg-soft); }
.bw-progress li.now { color: var(--amber); }
.bw-bar { width: min(340px, 64vw); height: 1px; background: var(--rule); display: block; overflow: hidden; }
#bw-bar-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--amber));
  transform: scaleX(0.25); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* — steps: each fills the viewport, rises in / breathes out — */
.bw-stage { position: absolute; inset: 0; }
.bw-step {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: clamp(4.8rem, 11vh, 7.5rem) clamp(1.2rem, 4vw, 3rem) clamp(1.6rem, 5vh, 3.5rem);
  opacity: 0; visibility: hidden; transform: translateY(46px); pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1), visibility 0s 0.6s;
  overflow-y: auto;                     /* safety net on very short screens */
}
.bw-step.active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition-delay: 0.14s, 0.14s, 0s;
}
.bw-step.left-up   { transform: translateY(-46px); }
.bw-step.left-down { transform: translateY(46px); }
.bw-inner {
  width: 100%; max-width: 860px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.bw-kicker { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.bw-q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em;
  color: #fbfaf6; margin: 0; text-shadow: 0 2px 50px #000; outline: none;
}
.bw-q .it { font-style: italic; color: var(--accent); }
.bw-q-s { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.bw-sub {
  font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.6;
  color: #d7d4cb; max-width: 54ch; margin: 0; text-shadow: 0 1px 24px #000;
}
.bw-sub strong { color: var(--fg); font-weight: 500; }
.bw-hi { color: var(--fg); }

/* — 01 · months — */
.bw-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; width: 100%; max-width: 720px; margin-top: 1rem; }
.bw-month {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 1.5rem 1rem 1.3rem;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.bw-month em { font-family: var(--font-display); font-style: italic; font-weight: 320; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--fg); transition: color 0.35s; }
.bw-month i { font-family: var(--font-mono); font-style: normal; font-size: 0.6rem; letter-spacing: 0.24em; color: var(--fg-faint); }
.bw-month:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 40px -18px var(--accent); }
.bw-month.sel { border-color: var(--amber); box-shadow: 0 0 40px -10px var(--amber); }
.bw-month.sel em { color: #fff; }

/* — 02 · days — */
.bw-legend { display: flex; gap: 1.6rem; }
.bw-legend .lg { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); }
.bw-legend .lg i { width: 8px; height: 8px; border-radius: 50%; }
.lg-first i { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.lg-alt i   { background: transparent; border: 1px solid var(--accent); }
.bw-cal { width: 100%; max-width: 540px; }
.bw-cal-head {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 0.7rem;
}
.bw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bw-cal-grid .wd { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); padding: 0.35rem 0; }
.bw-day {
  position: relative; height: clamp(38px, 6vh, 52px);
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  color: #d7d4cb; cursor: pointer;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s;
}
.bw-day span { font-family: var(--font-mono); font-size: 0.85rem; }
.bw-day:hover:not(.off):not(.first):not(.alt) { border-color: var(--rule-strong); background: color-mix(in srgb, var(--ink) 45%, transparent); }
.bw-day.off { opacity: 0.2; cursor: default; }
.bw-day.first {
  border-color: var(--amber); color: #fff;
  background: color-mix(in srgb, var(--amber) 24%, color-mix(in srgb, var(--ink) 55%, transparent));
  box-shadow: 0 0 26px -4px var(--amber);
}
.bw-day.alt { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 12%, color-mix(in srgb, var(--ink) 50%, transparent)); }
.bw-day i {
  position: absolute; top: 2px; right: 4px; font-style: normal;
  font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber);
}
.bw-day.alt i { color: var(--accent-deep); }

/* — 03 · fields — */
.bw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.4rem; width: 100%; max-width: 640px; margin-top: 0.8rem; text-align: left; }
.bw-field label { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.45rem; }
.bw-field input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  padding: 0.5rem 0.1rem; color: #fbfaf6; font-family: var(--font-body); font-size: 1.15rem;
  transition: border-color 0.3s;
}
.bw-field input:focus { outline: none; border-bottom-color: var(--amber); }
.bw-field input::placeholder { color: var(--fg-faint); }

/* — 04 · check — */
.bw-summary { width: 100%; max-width: 640px; text-align: left; margin-top: 0.3rem; }
.bw-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 1.2rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.bw-row:first-child { border-top: 1px solid var(--rule); }
.bw-row .k { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.bw-row .v { font-family: var(--font-body); font-size: 1.05rem; color: #ede9e0; line-height: 1.5; }
.bw-row .v .dim { color: var(--fg-faint); }
.bw-edit {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint); transition: color 0.3s;
}
.bw-edit:hover { color: var(--amber); }
.bw-note { font-family: var(--font-body); font-size: 0.95rem; color: var(--fg-soft); max-width: 52ch; margin: 0; }
.bw-err { min-height: 1.2em; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: #D9968C; margin: 0; }

/* — navigation — */
.bw-fields.one { grid-template-columns: 1fr; max-width: 420px; }
.bw-nav { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 0.9rem; flex-wrap: wrap; }
.bw-back {
  background: transparent; border: 0; cursor: pointer; padding: 1rem 1.2rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-faint); transition: color 0.3s;
}
.bw-back:hover { color: var(--fg); }
.bw-next, .bw-send {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: #fbfaf6; border: 1px solid #fbfaf6; border-radius: 2px;
  padding: 1rem 1.9rem;
  transition: background 0.35s, color 0.35s, box-shadow 0.35s, border-color 0.35s, opacity 0.3s;
}
.bw-next:hover:not(:disabled) { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 40px -6px var(--amber); }
.bw-next:disabled { opacity: 0.35; cursor: default; }
.bw-send { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 34px -10px var(--amber); }
.bw-send:hover:not(:disabled) { background: #fbfaf6; border-color: #fbfaf6; box-shadow: 0 0 40px -6px #fbfaf6; }
.bw-send:disabled { opacity: 0.55; cursor: wait; }

/* — 05 · sent — */
.bw-done-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 40px -6px var(--accent), inset 0 0 24px -10px var(--accent);
  margin-bottom: 0.3rem;
}
@media (prefers-reduced-motion: no-preference) {
  .bw-done-ring { animation: enterPulse 3.2s cubic-bezier(0.45,0,0.55,1) infinite; }
}

/* — small screens: everything must still fit one viewport — */
@media (max-width: 640px) {
  .bw-months { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .bw-month { padding: 1.1rem 0.8rem 1rem; }
  .bw-fields { grid-template-columns: 1fr; gap: 1.05rem; }
  .bw-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .bw-edit { justify-self: start; }
  .bw-day { height: clamp(34px, 5.4vh, 46px); }
}
@media (max-height: 700px) {
  .bw-inner { gap: 0.65rem; }
  .bw-q { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
  .bw-q-s { font-size: clamp(1.5rem, 4vw, 2.2rem); }
  .bw-step { padding-top: 4.4rem; }
  .bw-field input { font-size: 1.05rem; }
}

/* honeypot: never shown, never focusable — bots fill it, people cannot */
.bw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — reduced motion: steps swap without travel; the incoming step must be
     visible IMMEDIATELY so moving focus to its heading works — */
@media (prefers-reduced-motion: reduce) {
  .bw-step, .bw-step.left-up, .bw-step.left-down { transform: none; transition: opacity 0.2s, visibility 0s 0.2s; }
  .bw-step.active { transition: opacity 0.2s, visibility 0s; transition-delay: 0s; }
  #bw-bar-fill { transition: none; }
}

/* — mobile: no room for logo + centered steps side by side, so the logo
     leads (centered, prominent) and the steps sit centered beneath it. This
     block is last, so its padding-top also wins over the short-screen block. */
@media (max-width: 640px) {
  .bw .realm-home,
  .bw .realm-home:hover { top: 1.5rem; left: 50%; transform: translateX(-50%); }
  .bw .realm-home img { width: clamp(150px, 42vw, 195px); }
  .bw .realm-home::after { text-align: center; }
  .bw-progress { top: 5.7rem; }
  .bw-step { padding-top: clamp(8.2rem, 21vh, 9.2rem); }
}

/* — the days step is the tallest: a 6-row month (e.g. August) must fit one
     mobile screen with Back/Continue visible, no scrolling. Top-align it,
     drop the redundant kicker, tighten the stack, and size day cells to the
     viewport height so six rows + the nav always land above the fold. — */
@media (max-width: 640px) {
  .bw-step[data-step="3"] {
    place-items: start center;
    padding-top: clamp(7.6rem, 18vh, 8.4rem);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .bw-step[data-step="3"] .bw-inner { gap: 0.5rem; }
  .bw-step[data-step="3"] .bw-kicker { display: none; }
  .bw-step[data-step="3"] .bw-q-s { font-size: clamp(1.35rem, 5.4vw, 1.9rem); }
  .bw-step[data-step="3"] .bw-sub { font-size: 0.8rem; line-height: 1.35; max-width: 42ch; }
  .bw-step[data-step="3"] .bw-legend { gap: 1.1rem; }
  .bw-step[data-step="3"] .bw-legend .lg { font-size: 0.52rem; }
  .bw-step[data-step="3"] .bw-cal-head { margin-bottom: 0.3rem; font-size: 0.62rem; }
  .bw-step[data-step="3"] .bw-cal-grid { gap: 3px; }
  .bw-step[data-step="3"] .bw-cal-grid .wd { padding: 0.2rem 0; }
  .bw-step[data-step="3"] .bw-day { height: clamp(30px, 4.7vh, 42px); }
  .bw-step[data-step="3"] .bw-day span { font-size: 0.78rem; }
  .bw-step[data-step="3"] .bw-nav { margin-top: 0.55rem; }
}

/* — forced colors (Windows High Contrast): selection and progress must not
     rely on border-color/box-shadow alone — */
@media (forced-colors: active) {
  .bw-month.sel em { text-decoration: underline; }
  .bw-month.sel::after { content: '\2713'; font-size: 0.75rem; }
  .bw-day.first::after, .bw-day.alt::after { content: ''; position: absolute; inset: 2px; border: 2px solid SelectedItem; }
  #bw-bar-fill { background: SelectedItem; forced-color-adjust: none; }
  .bw-progress li.now { text-decoration: underline; }
}

/* ════════════════════════════════════════════════════════════════════
   HOME · THE ESSENCE — a scroll story over the living light
   The presence becomes the first screen and lifts away; the story then
   unfolds (vertical passages + a horizontal crossing of the four
   movements) over the fixed cosmos + the orb, which recedes as you read.
   ════════════════════════════════════════════════════════════════════ */
body[data-page="home"] { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100svh; }
body[data-page="home"] .presence {
  position: relative; inset: auto;
  min-height: 100svh; min-height: 100vh;
}

/* the invitation to descend, resting under the realms */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 2.6rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  text-decoration: none; opacity: 0.72;
  animation: cueIn 1.4s cubic-bezier(0.22,1,0.36,1) 1.8s both;
  transition: opacity 0.4s;
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue-label {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg-soft); text-shadow: 0 1px 12px #000;
}
.scroll-cue:hover .scroll-cue-label { color: var(--accent); }
.scroll-cue-line { width: 1px; height: clamp(28px, 5vh, 46px); background: linear-gradient(180deg, var(--accent), transparent); position: relative; overflow: hidden; }
.scroll-cue-line::after {
  content: ''; position: absolute; left: 0; top: -60%; width: 100%; height: 60%;
  background: linear-gradient(180deg, transparent, #fbfaf6); animation: cueDrop 2.2s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes cueIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 0.72; transform: translate(-50%, 0); } }
@keyframes cueDrop { 0% { top: -60%; } 70%,100% { top: 100%; } }

/* the story column floats over the fixed living light */
.home-story { position: relative; z-index: 3; }
.home-story .story {
  min-height: 86svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.5rem; max-width: 42ch; margin: 0 auto; text-align: center;
  padding: 12vh clamp(1.5rem, 6vw, 3rem);
}
.story-eyebrow {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.story-line {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.14; letter-spacing: -0.018em;
  color: #fbfaf6; margin: 0;
  text-shadow: 0 2px 54px #000, 0 0 18px rgba(0,0,0,0.85);
}
.story-line em, .story-line .it { font-style: italic; color: var(--accent); }
.story-sub {
  font-family: var(--font-body); font-size: clamp(1.05rem, 2.1vw, 1.28rem); line-height: 1.62;
  color: #d7d4cb; margin: 0; max-width: 46ch; text-shadow: 0 2px 26px #000;
}

/* — the horizontal crossing — a tall runway pins the frame while the
     four movements pan across it (JS translates .hstory-track) — */
.hstory { position: relative; height: 460svh; }
.hstory-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.hstory-track {
  display: flex; align-items: stretch; gap: clamp(1.4rem, 3vw, 3rem);
  padding-inline: max(7vw, calc(50vw - 15rem));
  will-change: transform;
}
.hpanel {
  flex: 0 0 min(80vw, 29rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  min-height: 60svh; padding: clamp(1.8rem, 3.4vw, 3rem);
  border: 1px solid var(--rule); border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  backdrop-filter: blur(7px) saturate(1.05); -webkit-backdrop-filter: blur(7px) saturate(1.05);
  text-decoration: none; color: inherit;
  transition: border-color .45s, background .45s, transform .45s;
}
a.hpanel:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--ink) 70%, transparent); transform: translateY(-4px); }
.hpanel .num { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.hpanel h2, .hpanel-intro h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.03; letter-spacing: -0.02em; color: #fbfaf6; margin: 0; }
.hpanel p { font-family: var(--font-body); font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.6; color: #d7d4cb; margin: 0; }
.hpanel-more { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); transition: color .35s, letter-spacing .35s; }
.hpanel-more span { display: inline-block; transition: transform .35s; }
a.hpanel:hover .hpanel-more { color: #fff; }
a.hpanel:hover .hpanel-more span { transform: translateX(5px); }
.hpanel-intro { border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; flex-basis: min(84vw, 27rem); }
.hpanel-intro h1 { display: flex; flex-direction: column; gap: 1.1rem; font-size: clamp(2.4rem, 5.4vw, 4rem); }
.hpanel-intro .num { color: var(--fg-faint); }
/* the movement crossing centre-stage lifts toward the light */
.hpanel.is-now { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--ink) 72%, transparent); }
.hpanel-intro.is-now { background: none; }

/* progress rail under the crossing */
.hstory-rail { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(1.6rem, 5vh, 3.2rem); width: min(44vw, 240px); height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.hstory-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform-origin: left center; transform: scaleX(0); }

/* the closing invitation */
.story-close { gap: 1.7rem; }
.story-cta {
  align-self: center; margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: #fbfaf6; border: 1px solid #fbfaf6; border-radius: 2px;
  padding: 1rem 1.8rem; text-decoration: none; transition: background .35s, color .35s, box-shadow .35s, border-color .35s;
}
.story-cta span { display: inline-block; transition: transform .35s; }
.story-cta:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 40px -6px var(--accent); }
.story-cta:hover span { transform: translateX(5px); }
.story-sign { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-faint); margin: 0.4rem 0 0; }
.story-note { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--fg-soft); margin: 0.2rem 0 0; text-shadow: 0 2px 20px #000; }

/* quiet mono links inside the passages */
.story-link {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color .35s, border-color .35s;
}
.story-link span { display: inline-block; transition: transform .35s; }
.story-link:hover { color: #fbfaf6; border-color: #fbfaf6; }
.story-link:hover span { transform: translateX(4px); }
.story-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.2rem; margin: 0.3rem 0 0; }

/* the path — a vertical thread from the form to the days after */
.story-steps { gap: 1.2rem; padding-bottom: 18vh; }
.story-steps .story-line { font-size: clamp(1.65rem, 3.4vw, 2.7rem); }
.story-flow {
  list-style: none; margin: 0.8rem 0 0; text-align: left;
  padding: 0.3rem 0 0.3rem 1.7rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.story-flow li {
  position: relative; max-width: 40ch;
  font-family: var(--font-body); font-size: clamp(1rem, 1.9vw, 1.18rem); line-height: 1.55;
  color: #d7d4cb; text-shadow: 0 2px 26px #000;
}
.story-flow li::before {
  content: ''; position: absolute; left: calc(-1.7rem - 2.5px); top: 0.55em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);
}
.story-flow li i {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.18rem;
}

/* small screens: give the panels room, keep the pin gentle */
@media (max-width: 640px) {
  .hstory { height: 420svh; }
  .hpanel { flex-basis: 82vw; min-height: 56svh; }
  .story-line { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .story-steps { padding-bottom: 32vh; }
  .story-steps .story-line { font-size: clamp(1.5rem, 6.4vw, 2rem); }
}

/* reduced motion: no pin, no pan — the crossing becomes a calm vertical stack */
@media (prefers-reduced-motion: reduce) {
  .hstory { height: auto; }
  .hstory-sticky { position: static; height: auto; display: block; overflow: visible; }
  .hstory-track { flex-direction: column; align-items: stretch; transform: none !important; padding: 4vh 6vw; gap: 1.6rem; }
  .hpanel { flex-basis: auto; min-height: 0; max-width: 46ch; margin: 0 auto; }
  .hstory-rail, .scroll-cue-line::after { display: none; }
  .home-story .story .reveal { opacity: 1; transform: none; }
}

/* — legibility: a soft dark pool seats the vertical passages over the orb — */
.home-story .story { position: relative; }
.home-story .story > * { position: relative; z-index: 1; }
.home-story .story::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, 900px); height: min(94%, 640px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    color-mix(in srgb, var(--ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--ink) 58%, transparent) 42%,
    color-mix(in srgb, var(--ink) 16%, transparent) 68%,
    transparent 82%);
  filter: blur(10px);
}
/* the intro panel carries no box; a whisper of a pool keeps it crisp too */
.hpanel-intro { position: relative; }
.hpanel-intro > * { position: relative; z-index: 1; }
.hpanel-intro::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 132%; height: 128%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    color-mix(in srgb, var(--ink) 72%, transparent), color-mix(in srgb, var(--ink) 22%, transparent) 56%, transparent 78%);
  filter: blur(12px);
}
/* progress rail rides the top of the stage, clear of the fixed realms nav */
.hstory-rail { top: clamp(1.5rem, 5vh, 3rem); bottom: auto; }

/* centred menu sits on a solid void so the animated aurora reads cleanly */
.fs-menu { background: #06070a; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── the brand mark, woven through the site ─────────────────────────── */
.mk {
  display: inline-block; width: 0.85em; height: 0.77em; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
/* every chapter opens under the mark */
.realm-kicker::before, .bw-kicker::before {
  content: ''; display: inline-block; width: 0.95em; height: 0.86em; margin-right: 0.7em;
  background: var(--accent); vertical-align: -0.07em;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
/* the menu kicker carries it centered above */
.fs-menu-kicker::before {
  content: ''; display: block; width: 1.05rem; height: 0.95rem; margin: 0 auto 0.85rem;
  background: var(--accent); opacity: 0.95;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.jr-kicker .mk { color: var(--accent); font-size: 1.05em; }
.fs-menu-foot .mk, footer .mk { color: var(--accent); font-size: 0.9em; margin-right: 0.45em; vertical-align: -0.05em; }

/* ════════════════════════════════════════════════════════════════════
   JOURNAL — plates in the dark: a masthead, one cover note, alternating
   photograph/word plates, and a receding archive ledger (void style)
   ════════════════════════════════════════════════════════════════════ */
.journal {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(8.5rem, 18vh, 12rem) clamp(1.5rem, 5vw, 2.5rem) clamp(7rem, 14vh, 10rem);
}
/* the same dark reading spine the realm pages ride, widened for the spread */
.journal::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(78% 100% at 50% 50%, color-mix(in srgb,var(--ink) 68%,transparent), color-mix(in srgb,var(--ink) 32%,transparent) 72%, transparent);
}

/* — masthead: the journal is the publication inside the shrine, so it
     reads as a spread, not a centered altar — */
.jr-mast {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: end;
  margin-bottom: clamp(2.4rem, 6vh, 3.8rem);
}
.jr-kicker {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--accent);
}
.jr-kicker::after {
  content: ''; width: clamp(2rem, 8vw, 4.5rem); height: 1px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.jr-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.98; letter-spacing: -0.025em;
  color: #fbfaf6; margin: 0.6rem 0 0; text-shadow: 0 2px 50px #000;
}
.jr-title .it { font-style: italic; color: var(--accent); font-weight: 300; }
/* the second line of the two-line lockup steps inward, like a verse */
.jr-title br + .it { display: inline-block; padding-left: clamp(1.6rem, 6vw, 4.6rem); }
.jr-standfirst { padding-bottom: 0.6rem; min-width: 0; }
.jr-lead {
  font-family: var(--font-body); font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.7;
  color: var(--fg-soft); margin: 0; max-width: 46ch; text-shadow: 0 1px 20px #000;
}
.jr-vol {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.7rem;
  margin: 1.3rem 0 0;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-faint);
}
.jr-vol .sep { color: var(--rule-strong); }
.jr-vol a {
  color: var(--fg-faint); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.jr-vol a:hover { color: var(--accent); border-color: var(--accent); }

/* — the thread bar: every category a crawlable door, with a live count — */
.jr-threads {
  display: flex; align-items: baseline; gap: clamp(1.1rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 0.15rem; margin-bottom: clamp(3rem, 7vh, 4.5rem);
  overflow-x: auto; scrollbar-width: none;
}
.jr-threads::-webkit-scrollbar { display: none; }
.jr-thread {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-soft); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.jr-thread .tc { color: var(--fg-faint); font-size: 0.92em; margin-left: 0.2em; }
.jr-thread:hover { color: var(--fg); border-color: var(--rule-strong); }
.jr-thread.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.jr-thread.active .tc { color: color-mix(in srgb, var(--accent) 70%, var(--fg-faint)); }

/* — shared editorial furniture — */
.jr-eyebrow {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--fg-faint);
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
}
.jr-eyebrow::before {
  content: ''; width: 1.7rem; height: 1px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.jr-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.65rem;
  margin: 0;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-faint);
}
.jr-meta .no { color: var(--accent); }
.jr-meta .sep { color: var(--rule-strong); }
.jr-more {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.jr-more .arr { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
a:hover .jr-more .arr { transform: translateX(5px); }

/* the journal's own sections ride the open void: kill the generic
   content-section seat + padding (those rules serve the older page shells;
   the 64% seat carries !important, hence the counterweight here) */
body main.journal > section.jr-cover, body main.journal > section.jr-plates,
body main.journal > section.jr-ledger, body main.journal > section.jr-cats {
  background: none !important; padding: 0;
}

/* — the plate: a photograph surfacing out of the void, edges dissolving,
     held by a thin hairline frame that settles into place on hover.
     The dissolve is two nested single-axis masks (wrapper fades the
     vertical edges, the image the horizontal) — no mask-composite,
     so it renders identically everywhere — */
.jr-fig { position: relative; margin: 0; min-width: 0; }
.jr-fig-m {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.jr-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.jr-fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translate(clamp(0.7rem, 1.6vw, 1.1rem), clamp(0.7rem, 1.6vw, 1.1rem));
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), border-color 0.4s;
}
a:hover .jr-fig::after {
  transform: translate(0, 0);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* — the cover: the newest note opens the volume — */
.jr-cover { margin-bottom: clamp(1rem, 3vh, 2rem); }
.jr-cover-link {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-bottom: clamp(2.8rem, 6vh, 4rem);
  text-decoration: none;
}
.jr-fig-cover img { aspect-ratio: 4 / 5; }
.jr-cover-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.04; letter-spacing: -0.02em;
  color: #f6f3ec; margin: 1.2rem 0 0; text-shadow: 0 2px 40px #000;
  transition: color 0.35s;
}
.jr-cover-link:hover .jr-cover-title { color: var(--accent-deep); }
.jr-cover-dek {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.75;
  color: var(--fg-soft); margin: 1.3rem 0 0; max-width: 52ch;
}

/* — the walk: recent notes as facing plates, direction flipping per entry — */
.jr-plates { display: flex; flex-direction: column; }
.jr-plate { border-top: 1px solid var(--rule); }
.jr-plate:last-child { border-bottom: 1px solid var(--rule); }
.jr-plate-link {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center;
  padding: clamp(2.6rem, 6vh, 3.8rem) 0;
  text-decoration: none;
}
.jr-plate.flip .jr-plate-link { grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.62fr); }
.jr-plate.flip .jr-fig { order: 2; }
.jr-plate.flip .jr-plate-body { order: 1; }
.jr-plate.noimg .jr-plate-link { grid-template-columns: 1fr; }
.jr-plate-body { min-width: 0; }
.jr-plate-title {
  font-family: var(--font-display); font-weight: 320;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.08; letter-spacing: -0.015em;
  color: #f4f1ea; margin: 1rem 0 0; text-shadow: 0 2px 34px #000;
  transition: color 0.35s;
}
.jr-plate-link:hover .jr-plate-title { color: var(--accent-deep); }
.jr-plate-excerpt {
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.72;
  color: var(--fg-soft); margin: 0.9rem 0 0; max-width: 58ch;
}
/* post meta rides the same mono middot line as the journal hub */
.post-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.6rem; }
.post-meta .post-date { margin-top: 0; color: var(--fg-faint); }
.post-meta .psep { color: var(--rule-strong); font-family: var(--font-mono); font-size: 0.6rem; }
.post-no {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.post-cat {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px;
  transition: border-color 0.3s;
}
.post-cat:hover { border-color: var(--accent); }
/* — the ledger: older notes recede into a dense archive register — */
.jr-ledger { margin-top: clamp(3.4rem, 8vh, 5rem); }
.jr-rows { display: flex; flex-direction: column; }
.jr-row {
  position: relative;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.2rem); align-items: baseline;
  padding: clamp(1.3rem, 3vh, 1.8rem) 0.2rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.jr-row:last-child { border-bottom: 1px solid var(--rule); }
/* a quiet pool of ink rises under the row you are considering */
.jr-row::before {
  content: ''; position: absolute; inset: 0.35rem -1.4rem; border-radius: 4px; z-index: -1;
  background: radial-gradient(80% 100% at 50% 50%, color-mix(in srgb, var(--ink) 78%, transparent), transparent);
  opacity: 0; transition: opacity 0.5s ease;
}
.jr-row:hover::before { opacity: 1; }
.jr-row .no {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  color: var(--fg-faint); transition: color 0.4s;
}
.jr-row:hover .no { color: var(--accent); }
.jr-row-title {
  font-family: var(--font-display); font-weight: 330;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.25;
  color: var(--fg); transition: color 0.35s;
}
.jr-row:hover .jr-row-title { color: var(--accent-deep); }
.jr-row-meta {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint); white-space: nowrap;
}
.jr-row-meta .cat { color: color-mix(in srgb, var(--accent) 70%, var(--fg-faint)); }

/* — the threads, laid out as doors: name and count facing description — */
.jr-cats { margin-top: clamp(4rem, 9vh, 6rem); }
.jr-cat-rows { display: flex; flex-direction: column; }
.jr-cat-row {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.2rem, 4vw, 3rem); align-items: baseline;
  padding: clamp(1.5rem, 3.5vh, 2.1rem) 0.2rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.jr-cat-row:last-child { border-bottom: 1px solid var(--rule); }
.jr-cat-name {
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1;
  color: #f1ede4; transition: color 0.35s;
}
.jr-cat-name .ct {
  font-family: var(--font-mono); font-style: normal; font-size: 0.6rem;
  letter-spacing: 0.2em; color: var(--fg-faint); vertical-align: 0.4em; margin-left: 0.3rem;
}
.jr-cat-row:hover .jr-cat-name { color: var(--accent-deep); }
.jr-cat-desc {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  color: var(--fg-soft);
}

/* — coda — */
.jr-coda { margin-top: clamp(4.5rem, 10vh, 6.5rem); text-align: center; }
.jr-coda > .mk { color: var(--accent); font-size: 1.05rem; margin-right: 0; }
.jr-coda-line {
  font-family: var(--font-body); font-size: 1.02rem; line-height: 1.7;
  color: var(--fg-soft); margin: 1.1rem 0 0;
}
.jr-coda-line a {
  color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong); transition: text-decoration-color 0.3s;
}
.jr-coda-line a:hover { text-decoration-color: var(--amber); }
.jr-coda-ctas {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 1rem 1.4rem; margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.jr-coda-ctas .realm-cta { align-self: auto; }

.jr-empty {
  text-align: center; color: var(--fg-faint); font-family: var(--font-body); font-style: italic;
  padding: clamp(3rem, 8vh, 5rem) 0; border-bottom: 1px solid var(--rule); margin: 0;
}

/* — motion: plates converge from facing sides, rows rise; all of it
     scroll-driven, transform/opacity only, and off for reduced motion — */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .jr-plate .jr-fig {
      animation: jr-in-l both ease; animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    .jr-plate .jr-plate-body {
      animation: jr-in-r both ease; animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    .jr-plate.flip .jr-fig { animation-name: jr-in-r; }
    .jr-plate.flip .jr-plate-body { animation-name: jr-in-l; }
    .jr-row, .jr-cat-row {
      animation: jr-rise both ease; animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes jr-in-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes jr-in-r { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes jr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* — a post permalink (rides the shared .realm legibility scrim) — */
.post-flow {
  max-width: calc(720px + 2 * clamp(1.5rem, 5vw, 2.4rem)); margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 5vw, 2.4rem) 0;
}
/* the note's image: a held square on wide screens, a full 9:16 breath on phones */
.post-hero { margin: clamp(2.2rem, 5vh, 3.2rem) 0 0; }
.post-hero img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--rule);
  filter: saturate(0.88) contrast(1.02);
}
@media (max-width: 760px) {
  .post-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .post-hero img {
    aspect-ratio: 9 / 16; border: none; border-radius: 0;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 6%, #000 90%, transparent 100%);
            mask: linear-gradient(to bottom, transparent 0%, #000 6%, #000 90%, transparent 100%);
  }
}
.post-back {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint); text-decoration: none; transition: color 0.3s;
}
.post-back:hover { color: var(--accent); }
.post-date {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.post-read {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-faint);
}
.post-title {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 5.8vw, 3.7rem);
  line-height: 1.05; letter-spacing: -0.02em; color: #fbfaf6; margin: 1rem 0 0; text-shadow: 0 2px 50px #000;
}
.post-lead {
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.55;
  color: color-mix(in srgb, var(--fg) 80%, var(--accent)); margin: 1.4rem 0 0;
}
/* a short golden rule closes the header, the way a chapter opens */
.post-lead::after {
  content: ''; display: block; width: 3rem; height: 1px; margin-top: clamp(1.8rem, 4vh, 2.6rem);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.prose { margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.prose > * + * { margin-top: 1.6rem; }
/* the first letter arrives like an illuminated initial */
.prose > p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 300; font-size: 3.4em;
  float: left; line-height: 0.82; padding: 0.05em 0.14em 0 0; color: var(--accent);
}
.prose h2 {
  font-family: var(--font-display); font-weight: 340; font-size: clamp(1.55rem, 3.4vw, 2.05rem);
  line-height: 1.18; letter-spacing: -0.01em; color: #f1ede4; margin-top: clamp(2.8rem, 6vh, 3.6rem);
}
.prose h2::before {
  content: ''; display: block; width: 2.1rem; height: 1px; margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: #ece8df; margin-top: 2.4rem;
}
.prose p, .prose li {
  font-family: var(--font-body); font-size: 1.17rem; line-height: 1.85; color: var(--fg-soft);
}
/* the note closes with a quiet mark, not an abrupt stop */
.prose::after {
  content: ''; display: block; width: 1.2rem; height: 1.08rem;
  margin: clamp(2.6rem, 6vh, 3.6rem) auto 0;
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.prose strong { color: var(--fg); font-weight: 500; }
.prose em { font-style: italic; color: var(--accent); }
.prose a { color: #d8c7a0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); transition: text-decoration-color 0.3s; }
.prose a:hover { text-decoration-color: var(--amber); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: 2.2rem 0; padding: 0.4rem 0 0.4rem 1.8rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.5; color: #e6e1d6;
}
.prose code {
  font-family: var(--font-mono); font-size: 0.86em; color: var(--amber);
  background: color-mix(in srgb, var(--ink) 60%, transparent); padding: 0.1em 0.4em; border-radius: 3px;
}
.prose hr {
  border: none; width: 1.05rem; height: 0.95rem; margin: 2.8rem auto;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}

/* onward: two quiet directions, not two boxes */
.post-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem 2.5rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: clamp(1.8rem, 4vh, 2.6rem); border-top: 1px solid var(--rule);
}
.post-turn {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.55rem;
  text-decoration: none; min-width: 0;
}
.post-turn.next { text-align: right; margin-left: auto; }
.post-turn .dir { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); transition: color 0.3s; }
.post-turn .pt {
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.3; color: var(--fg-soft); transition: color 0.3s;
}
.post-turn:hover .dir { color: var(--accent); }
.post-turn:hover .pt { color: var(--accent-deep); }
.post .realm-cta { margin-top: clamp(3rem, 7vh, 4.5rem); }

@media (max-width: 900px) {
  .jr-mast { grid-template-columns: 1fr; align-items: start; gap: 1.7rem; }
  .jr-standfirst { padding-bottom: 0; }
  .jr-cover-link { grid-template-columns: 1fr; gap: 1.9rem; }
  .jr-fig-cover { order: -1; }
  .jr-plate-link, .jr-plate.flip .jr-plate-link { grid-template-columns: 1fr; gap: 1.7rem; }
  .jr-plate.flip .jr-fig { order: 0; }
  .jr-plate.flip .jr-plate-body { order: 0; }
  .jr-plate .jr-fig { max-width: min(100%, 26rem); }
  .jr-row { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 0.55rem; }
  .jr-row-meta { grid-column: 2; white-space: normal; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
  .jr-cat-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 760px) {
  /* the cover photograph becomes a full-bleed tall breath, like the post hero */
  .jr-fig-cover { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .jr-fig-cover .jr-fig-m {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  }
  .jr-fig-cover img {
    aspect-ratio: 9 / 16; max-height: 78svh;
    -webkit-mask-image: none; mask-image: none;
  }
  .jr-fig-cover::after { display: none; }
}
@media (max-width: 640px) {
  .journal { padding-left: 1.5rem; padding-right: 1.5rem; }
  .jr-threads {
    -webkit-mask: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
            mask: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  .jr-title br + .it { padding-left: clamp(1.2rem, 8vw, 2.4rem); }
  .post-nav { flex-direction: column; gap: 1.6rem; }
  .post-turn.next { text-align: left; margin-left: 0; }
}