/* ==========================================================================
   Impressive Life
   Navy #0b1b3a · cream #f4efe4 · gold #c4a35a, once, and thin.
   Fraunces for the poster. Outfit for the whisper.
   Full-bleed photographs, cream editorial spreads, almost no chrome.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit.woff2") format("woff2");
  font-weight: 280 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0b1b3a;
  --navy-deep: #071222;
  --cream: #f4efe4;
  --gold: #c4a35a;
  --serif: "Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  --sans: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --nav-h: 5.75rem;
  --pad: clamp(1.35rem, 4.6vw, 5.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ink: rgba(11, 27, 58, 0.72);
  --line: rgba(11, 27, 58, 0.16);
  --photo: rgba(7, 16, 32, 0.55);
}

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

html {
  background: var(--navy);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

/* Anchor targets clear the fixed header */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 0.75rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 520; }

::selection { background: var(--gold); color: var(--navy); }

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 0.8rem;
  background: var(--cream);
  color: var(--navy);
}
.skip:focus { top: 0.8rem; }

/* Progress — one gold hair, not a dashboard */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 220;
  height: 1px;
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Header. Transparent on photographs. Cream when the paper arrives.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--pad);
  color: var(--cream);
  background: transparent;
  transition: background 0.55s var(--ease), color 0.45s var(--ease);
}

.site-header[data-theme="dark"] {
  color: var(--navy);
  background: rgba(244, 239, 228, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* light scrolled: see denser rule near end */

body.nav-open .site-header {
  color: var(--navy);
  background: transparent;
}

.wordmark {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.55vw, 1.65rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variation-settings: "opsz" 72, "SOFT" 60, "wght" 500;
}
.wordmark .dot { color: var(--gold); font-style: italic; }

.menu-btn {
  display: none;
  position: relative;
  z-index: 2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 400;
  padding: 0.9rem 0;
}
.menu-btn .close { display: none; }
body.nav-open .menu-btn .open { display: none; }
body.nav-open .menu-btn .close { display: inline; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.85rem, 1.5vw, 1.55rem);
}

.site-nav a {
  position: relative;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.4s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { opacity: 1; }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 1px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 1.55rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.sub {
  max-width: 28rem;
  margin-top: 1.35rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(244, 239, 228, 0.82);
}

.prose {
  max-width: 36rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
}
.prose p + p { margin-top: 1.15rem; }
.prose a { border-bottom: 1px solid rgba(11, 27, 58, 0.35); }

.on-dark .prose,
.half-ink .prose { color: rgba(244, 239, 228, 0.74); }
.on-dark .prose a,
.half-ink .prose a { border-bottom-color: rgba(244, 239, 228, 0.35); }

.display {
  font-family: var(--serif);
  font-weight: 520;
  letter-spacing: -0.042em;
  line-height: 0.88;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1, "wght" 520;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.8rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.link span {
  display: inline-block;
  transition: transform 0.7s var(--ease);
}
.link:hover span { transform: translateX(7px); }

/* --------------------------------------------------------------------------
   Hero — the photograph is the page. The title takes about half of it.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--cream);
  background: var(--navy);
  overflow: hidden;
}

.hero-ui {
  position: absolute;
  top: calc(var(--nav-h) + 0.35rem);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  overflow: hidden;
  opacity: calc(1 - var(--scroll, 0) * 0.72);
  transform: translate3d(0, calc(var(--scroll, 0) * 28px), 0);
}

.hero-copy {
  width: min(80vw, 1280px);
  padding: 0 var(--pad) clamp(4.6rem, 9vh, 6.8rem);
}

.hero h1 {
  width: max-content;
  max-width: 100%;
  margin-top: 0.85rem;
  font-size: clamp(4.35rem, 12.4vw, 13.2rem);
}

.hero h1.xl {
  font-size: clamp(4.2rem, 12.2vw, 11rem);
}

.hero h1.mid {
  font-size: clamp(3.5rem, 7.6vw, 8rem);
}

.hero h1 .dot { color: var(--gold); }

.corner {
  position: absolute;
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 2;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.82);
}
.corner-bl { left: var(--pad); }
.corner-br { right: var(--pad); }
.hero-plain .corner,
.spread .corner,
.ink .corner { color: rgba(11, 27, 58, 0.55); }

/* Photographs */
.frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0);
}
.drift {
  position: absolute;
  inset: -14%;
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}
.ken { width: 100%; height: 100%; }
.frame img,
.ken img,
.poster > img,
.card img,
.half-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Crops land on the photograph, not the flat navy / baked type in the posters. */
.pos-sphere { object-position: 86% 42%; transform: scale(2.08); transform-origin: 88% 40%; }
.pos-hand { object-position: 88% 38%; transform: scale(2.85); transform-origin: 90% 36%; }
.pos-ship { object-position: 20% 40%; transform: scale(3.45); transform-origin: 22% 38%; }
.pos-arch { object-position: 100% 52%; transform: scale(3.65); transform-origin: 100% 50%; }
.pos-sky { object-position: 70% 38%; transform: scale(1.85); transform-origin: 78% 36%; }
.pos-night { object-position: 14% 52%; transform: scale(2.1); transform-origin: 10% 50%; }
.pos-poster { object-position: center center; }

.veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.4) 0%, rgba(7, 16, 32, 0) 18%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.58) 0%, rgba(7, 16, 32, 0.22) 34%, rgba(7, 16, 32, 0) 58%);
}
.veil-bottom {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.34), rgba(7, 16, 32, 0) 16%),
    linear-gradient(to top, rgba(7, 16, 32, 0.78) 0%, rgba(7, 16, 32, 0.28) 32%, rgba(7, 16, 32, 0) 56%);
}
.veil-heavy {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.4), rgba(7, 16, 32, 0) 18%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.7) 0%, rgba(7, 16, 32, 0.32) 40%, rgba(7, 16, 32, 0.16) 100%);
}

/* Cream editorial spreads */
.spread {
  position: relative;
  background: var(--cream);
  color: var(--navy);
  padding: clamp(6.5rem, 13vh, 10.5rem) var(--pad);
}
.spread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.spread h2,
.ink h2,
.half-ink h2,
.close h2 {
  font-size: clamp(3rem, 5.5vw, 6.3rem);
}
.spread .lede {
  margin-top: 1.5rem;
  max-width: 34rem;
}

/* Numbered steps with hairlines */
.steps,
.path,
.rows,
.editions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li,
.rows li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem 1.4rem;
  padding: 1.55rem 0 1.7rem;
  border-top: 1px solid var(--line);
}
.steps li:last-child,
.rows li:last-child { border-bottom: 1px solid var(--line); }
.steps .n,
.rows .n,
.path .n,
.map-list .n,
.editions dt {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(11, 27, 58, 0.5);
  padding-top: 0.55rem;
}
.steps h3,
.rows h3,
.path h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 520;
}
.steps p,
.rows p,
.path p {
  margin-top: 0.65rem;
  max-width: 36rem;
  color: var(--ink);
  font-weight: 300;
}

/* Full-bleed photo chapter */
.chapter {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  background: var(--navy);
  overflow: hidden;
  padding-top: var(--nav-h);
  box-sizing: border-box;
}
.chapter-copy {
  position: relative;
  z-index: 2;
  width: min(68vw, 1100px);
  padding: 1.25rem var(--pad) clamp(4.2rem, 9vh, 6.5rem);
}
.chapter h2 {
  margin-top: 0.8rem;
  font-size: clamp(3.1rem, 6.6vw, 7.4rem);
  max-width: 14ch;
}
.chapter h2 em {
  font-style: italic;
  font-weight: 460;
}
.chapter .link { color: var(--cream); }

/* Paired image plates */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.65rem;
  background: var(--navy-deep);
}
.card {
  position: relative;
  display: block;
  min-height: 88vh;
  min-height: 88dvh;
  overflow: hidden;
  color: var(--cream);
  background: var(--navy);
}
.card-band {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 26%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 3.5rem 1.5rem 1.35rem;
  background: linear-gradient(to top, rgba(7, 16, 32, 0.9) 0%, rgba(7, 16, 32, 0.72) 46%, rgba(7, 16, 32, 0) 100%);
}
.card-kicker {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.card-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.15rem);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.card-arrow {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.7s var(--ease);
}
.card:hover .card-arrow { transform: translateX(7px); }

/* 50 / 50 */
.halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy);
}
.half-ink {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(4.5rem, 8vh, 6.5rem) var(--pad);
  background: var(--navy);
  color: var(--cream);
}
.half-ink.cream {
  background: var(--cream);
  color: var(--navy);
  justify-content: flex-start;
}
.half-ink.cream .sub,
.half-ink.cream .prose { color: var(--ink); }
.half-photo {
  position: relative;
  min-height: 64vh;
  overflow: hidden;
  background: var(--navy-deep);
}
.flip .half-photo { order: -1; }

/* The map — a contents spread, not a stack of cards */
.map-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.map-list a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.05fr) minmax(0, 1.2fr) auto;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 1.45rem 0;
  border-top: 1px solid var(--line);
  color: var(--navy);
}
.map-list a:last-child { border-bottom: 1px solid var(--line); }
.map-list .t {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 3.05rem);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.map-list .d {
  color: rgba(11, 27, 58, 0.58);
  font-weight: 300;
}
.map-list .a {
  transition: transform 0.7s var(--ease);
}
.map-list a:hover .a { transform: translateX(7px); }

/* Closing statement */
.hero.paper {
  background: var(--cream);
  color: var(--navy);
}
.hero.paper .sub { color: rgba(11, 27, 58, 0.66); }
.hero.paper .corner { color: rgba(11, 27, 58, 0.52); }

.half-photo::after,
.card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 16, 32, 0.42), rgba(7, 16, 32, 0));
}

.close {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(3.5rem, 7vh, 5rem);
  background: var(--cream);
  color: var(--navy);
}
.close h2 { max-width: 10ch; }
.close-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2.2rem;
  margin-top: 2rem;
}
.close-links a {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(11, 27, 58, 0.28);
  padding-bottom: 0.15rem;
}

.ink {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(3.5rem, 8vh, 5.5rem);
  background: var(--navy);
  color: var(--cream);
}
.ink .sub { color: rgba(244, 239, 228, 0.78); }

/* Manifest rows — one giant word, one quiet sentence */
.manifest {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  counter-reset: mf;
}
.manifest li {
  counter-increment: mf;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3.5vw, 3.5rem);
  align-items: center;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0;
  border-top: 1px solid var(--line);
}
.manifest li::before {
  content: counter(mf, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  align-self: start;
  padding-top: 0.9rem;
}
.manifest li:last-child { border-bottom: 1px solid var(--line); }
.manifest h3 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-weight: 500;
}
.manifest p {
  max-width: 32rem;
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink);
}
@media (max-width: 900px) {
  .manifest li { grid-template-columns: 1fr; gap: 0.7rem; }
  .manifest li::before { padding-top: 0; }
}

.path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  margin-top: clamp(2.8rem, 7vh, 5rem);
}
.path li {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.path h3 {
  margin-top: 0.85rem;
  font-size: clamp(2.3rem, 3.6vw, 3.8rem);
}

.rows { margin-top: 0.5rem; }

/* Bilingual */
.bi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
}
.bi-line {
  font-family: var(--serif);
  font-weight: 480;
  font-size: clamp(1.7rem, 2.5vw, 2.65rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

/* Quote — the markets line, set as type, not a widget */
.pull {
  max-width: 18em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.85rem, 3.35vw, 3.45rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 460;
}
.rule {
  width: 1.7rem;
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--gold);
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 62rem;
}
.duo p { color: var(--ink); max-width: 28rem; }

/* Editions */
.editions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.editions div {
  padding: 1.4rem 1.5rem 1.5rem 0;
}
.editions div + div {
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
.editions dd {
  margin: 0.35rem 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}
.editions a {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Posters and the mark */
.poster {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy);
  color: var(--cream);
}
.poster > img {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
}
.mark-room {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: var(--pad);
  background: var(--navy);
  text-align: center;
}
.mark-room img {
  width: min(42vh, 380px);
  height: auto;
}
.mark-room p {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.film-block {
  background: var(--navy-deep);
  padding: clamp(4rem, 8vh, 6rem) var(--pad) clamp(4rem, 9vh, 7rem);
  color: var(--cream);
}
.film {
  position: relative;
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
}
.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 1.25rem;
}
.film-links a {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(244, 239, 228, 0.35);
  padding-bottom: 0.15rem;
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(4rem, 9vh, 7rem) var(--pad) 2rem;
}
.foot-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.site-footer .note {
  max-width: 26rem;
  margin-top: 1rem;
  color: rgba(244, 239, 228, 0.7);
}
.foot-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(244, 239, 228, 0.16);
}
.foot-contact a { border-bottom: 1px solid rgba(244, 239, 228, 0.28); padding-bottom: 0.1rem; }
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin-top: 1.6rem;
}
.foot-nav a {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.foot-nav a:hover { opacity: 1; }
.fine {
  margin-top: 2.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.45);
}

/* --------------------------------------------------------------------------
   Mood photographs — real places, no baked type, so no rescue crop.
   -------------------------------------------------------------------------- */
.pos-photo { object-position: 50% 50%; }
.pos-photo-high { object-position: 50% 28%; }
.pos-photo-low { object-position: 50% 72%; }
.pos-photo-left { object-position: 28% 50%; }
.pos-photo-right { object-position: 72% 50%; }

/* Bright daylight photographs need more floor under the type. */
.veil-sun {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.58) 0%, rgba(7, 16, 32, 0) 20%),
    linear-gradient(to top, rgba(7, 16, 32, 0.94) 0%, rgba(7, 16, 32, 0.78) 26%, rgba(7, 16, 32, 0.42) 48%, rgba(7, 16, 32, 0) 70%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.72) 0%, rgba(7, 16, 32, 0.34) 40%, rgba(7, 16, 32, 0.1) 68%),
    rgba(7, 16, 32, 0.22);
}

/* --------------------------------------------------------------------------
   Book hero — the cover floats over its own night.
   -------------------------------------------------------------------------- */
.hero--book,
.chapter--book { background: var(--navy-deep); }

.pos-book-night {
  object-position: 50% 24%;
  filter: blur(2px) saturate(0.85) brightness(0.8);
  transform: scale(1.06);
}

.hero--book .veil,
.chapter--book .veil {
  background:
    radial-gradient(ellipse 70% 80% at 74% 46%, rgba(7, 16, 32, 0) 0%, rgba(7, 16, 32, 0.38) 70%),
    linear-gradient(to bottom, rgba(7, 16, 32, 0.46) 0%, rgba(7, 16, 32, 0) 22%),
    linear-gradient(to top, rgba(7, 16, 32, 0.72) 0%, rgba(7, 16, 32, 0) 42%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.7) 0%, rgba(7, 16, 32, 0.28) 42%, rgba(7, 16, 32, 0.06) 100%);
}

.book-float {
  position: absolute;
  z-index: 2;
  --bw: clamp(13rem, min(24vw, 40vh), 26rem);
  top: calc(50% - var(--bw) * 0.74);
  right: calc(var(--pad) + 3vw);
  width: var(--bw);
  margin: 0;
  perspective: 1800px;
}
.book-float img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2560;
  border-radius: 2px 5px 5px 2px;
  transform: rotateY(-11deg) rotateZ(0.6deg);
  transform-origin: 0% 50%;
  box-shadow:
    0 2px 0 rgba(244, 239, 228, 0.06),
    0 26px 44px -18px rgba(0, 0, 0, 0.8),
    0 60px 110px -30px rgba(0, 0, 0, 0.85);
}
/* A hairline spine catching the light */
.book-float::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7%;
  pointer-events: none;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0));
  transform: rotateY(-11deg) rotateZ(0.6deg);
  transform-origin: 0% 50%;
}
.book-float figcaption {
  margin-top: 1.6rem;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.8);
}
.book-float figcaption::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.2rem;
  height: 1px;
  margin-right: 0.7rem;
  background: var(--gold);
}

.book-float--chapter {
  --bw: clamp(11rem, min(18vw, 34vh), 19rem);
  right: calc(var(--pad) + 5vw);
}

@media (prefers-reduced-motion: no-preference) {
  .book-float img,
  .book-float::before { animation: bookfloat 9s ease-in-out infinite alternate; }
}
.js .hero--book .book-float { animation: bookin 1.6s var(--ease) 0.2s both; }
@keyframes bookin {
  from { opacity: 0; translate: 0 34px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes bookfloat {
  from { transform: rotateY(-11deg) rotateZ(0.6deg) translate3d(0, 0, 0); }
  to { transform: rotateY(-8deg) rotateZ(0.2deg) translate3d(0, -12px, 0); }
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .ken { animation: ken 42s ease-in-out infinite alternate; }
}

@keyframes ken {
  from { transform: scale(1); }
  to { transform: scale(1.07) translate3d(-1.4%, -1%, 0); }
}

.js .rise > * {
  animation: rise 1.35s var(--ease) both;
}
.js .rise > *:nth-child(1) { animation-delay: 0.05s; }
.js .rise > *:nth-child(2) { animation-delay: 0.18s; }
.js .rise > *:nth-child(3) { animation-delay: 0.32s; }
.js .rise > *:nth-child(4) { animation-delay: 0.44s; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s var(--ease), transform 1.35s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ken { animation: none; }
  .hero-ui { opacity: 1; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .rise > * { animation: none; }
  .js .hero--book .book-float { animation: none; }
}

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

@media (max-width: 980px) {
  :root { --nav-h: 4.6rem; }

  .menu-btn { display: inline-flex; align-items: center; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.15rem;
    padding: 0 var(--pad) clamp(2.5rem, 8vh, 4.5rem);
    background: var(--cream);
    color: var(--navy);
    transform: translate3d(0, -102%, 0);
    transition: transform 0.75s var(--ease);
    pointer-events: none;
  }
  body.nav-open .site-nav {
    transform: none;
    pointer-events: auto;
  }
  .site-nav a {
    font-family: var(--serif);
    font-size: clamp(2.15rem, 9vw, 3.4rem);
    font-weight: 520;
    letter-spacing: -0.035em;
    text-transform: none;
    line-height: 1.02;
    opacity: 1;
    color: var(--navy);
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { font-style: italic; }

  .hero-copy,
  .chapter-copy { width: 100%; }

  .hero h1 { font-size: clamp(3.45rem, 15.4vw, 5.3rem); }
  .hero h1.xl { font-size: clamp(4.3rem, 21vw, 6.8rem); }
  .hero h1.mid { font-size: clamp(2.85rem, 11vw, 4.4rem); }

  .spread-grid,
  .map-head,
  .bi,
  .duo,
  .halves,
  .pair,
  .manifest li,
  .path,
  .editions {
    grid-template-columns: 1fr;
  }

  .flip .half-photo { order: 0; }
  .half-photo { min-height: 68vh; }
  .card { min-height: 74vh; }

  .map-list a {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  }
  .map-list .d { grid-column: 2 / 3; }

  .editions div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .corner-br { display: none; }
  .chapter h2 { max-width: 12ch; }
}

@media (max-width: 640px) {
  .steps li,
  .rows li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .close-links { flex-direction: column; align-items: flex-start; }
  .foot-contact { flex-direction: column; align-items: flex-start; }
}

/* Book hero on small screens — cover above, type below */
@media (max-width: 980px) {
  .book-float,
  .book-float--chapter {
    top: calc(var(--nav-h) + 1.4rem);
    right: auto;
    left: var(--pad);
    --bw: min(42vw, 30vh, 15rem);
  }
  .book-float figcaption { display: none; }
  .hero--book .veil,
  .chapter--book .veil {
    background:
      linear-gradient(to bottom, rgba(7, 16, 32, 0.5) 0%, rgba(7, 16, 32, 0.1) 30%, rgba(7, 16, 32, 0.25) 50%, rgba(7, 16, 32, 0.86) 100%);
  }
}


.spread .sub {
  color: var(--ink);
}
.film-block .sub {
  color: rgba(244, 239, 228, 0.72);
}

/* Secret page — bilingual secondary lines + FAQ */
.lang-en {
  margin-top: 0.55rem;
  color: rgba(11, 27, 58, 0.55);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  max-width: 36rem;
}
.half-ink .lang-en {
  color: rgba(244, 239, 228, 0.62);
}
.half-ink.cream .lang-en {
  color: rgba(11, 27, 58, 0.55);
}
.chapter .close-links a {
  color: var(--cream);
  border-bottom-color: rgba(244, 239, 228, 0.35);
}
.chapter .checklist {
  color: rgba(244, 239, 228, 0.82);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.45;
}
.hero-sub-es {
  margin-top: 0.7rem;
  max-width: 30rem;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  color: rgba(244, 239, 228, 0.62);
}
.who-list .n {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 0.35rem;
}
.faq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.faq-head .display { flex: 1 1 12rem; }
.faq-mark {
  width: 4.5rem;
  height: auto;
  opacity: 0.92;
  margin-left: auto;
}
.faq {
  margin: 0;
  padding: 0;
  max-width: 52rem;
}
.faq-item {
  padding: 1.45rem 0 1.55rem;
  border-top: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item dt {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-weight: 520;
  color: var(--navy);
}
.faq-item dd {
  margin: 0.55rem 0 0;
  max-width: 40rem;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
}
.faq-item dt.lang-en {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(11, 27, 58, 0.62);
}
.faq-item dd.lang-en {
  margin-top: 0.4rem;
  color: rgba(11, 27, 58, 0.55);
  font-size: 0.95rem;
}
.faq-item a {
  border-bottom: 1px solid rgba(11, 27, 58, 0.3);
}
.kick-note {
  margin-top: 2.4rem;
  max-width: 40rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.kick-note a {
  border-bottom: 1px solid rgba(11, 27, 58, 0.3);
}
.kick-note.lang-en {
  margin-top: 0.7rem;
  color: rgba(11, 27, 58, 0.55);
  font-size: 0.95rem;
}
.half-ink.cream .rows .n {
  color: rgba(11, 27, 58, 0.5);
}
.half-ink.cream .rows p {
  color: var(--ink);
}
.half-ink.cream .rows {
  margin-top: 1.6rem;
}

/* Navy half-ink rows (solar / secret how-it-works): keep type readable on navy */
.half-ink:not(.cream) .rows .n {
  color: rgba(244, 239, 228, 0.45);
}
.half-ink:not(.cream) .rows h3 {
  color: var(--cream);
}
.half-ink:not(.cream) .rows p {
  color: rgba(244, 239, 228, 0.78);
}
.half-ink:not(.cream) .rows .lang-en {
  color: rgba(244, 239, 228, 0.55);
}
.half-ink:not(.cream) .sub {
  color: rgba(244, 239, 228, 0.72);
}

/* --------------------------------------------------------------------------
   Safehouse — ember accent (app look) on a thin bar + one band only.
   Site stays navy / cream / gold everywhere else.
   -------------------------------------------------------------------------- */
.ember-bar {
  height: 3px;
  background: #1a120e;
  overflow: hidden;
}
.ember-bar span {
  display: block;
  height: 100%;
  width: 42%;
  max-width: 14rem;
  background: linear-gradient(90deg, #5c2a14 0%, #c45c2a 45%, #e8a05a 100%);
}

.ember-band {
  position: relative;
  padding: clamp(4.5rem, 10vh, 7.5rem) var(--pad);
  background: #1a120e;
  color: var(--cream);
}
.ember-band .eyebrow {
  color: rgba(232, 160, 90, 0.85);
}
.ember-band .display {
  color: var(--cream);
}
.ember-band .prose {
  color: rgba(244, 239, 228, 0.78);
}
.ember-band .prose strong {
  color: #e8a05a;
  font-weight: 450;
}
.ember-band::before {
  content: "";
  position: absolute;
  left: var(--pad);
  top: 0;
  width: min(8rem, 28vw);
  height: 2px;
  background: linear-gradient(90deg, #c45c2a, transparent);
}

.hero-safehouse {
  background:
    radial-gradient(ellipse 70% 50% at 72% 42%, rgba(196, 92, 42, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 18% 72%, rgba(196, 92, 42, 0.12) 0%, transparent 55%),
    var(--navy);
}
.hero-safehouse .veil {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.35) 0%, rgba(7, 16, 32, 0) 28%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.72) 0%, rgba(7, 16, 32, 0.38) 38%, rgba(7, 16, 32, 0.12) 72%),
    linear-gradient(to top, rgba(7, 16, 32, 0.55) 0%, transparent 42%);
}
.hero-safehouse .frame--safehouse {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: clamp(1rem, 6vw, 5rem);
  pointer-events: none;
}
.hero-safehouse .frame--safehouse .drift {
  position: relative;
  inset: auto;
  width: min(22rem, 38vw);
  height: min(78vh, 42rem);
  max-height: calc(100% - var(--nav-h) - 3rem);
  margin-top: calc(var(--nav-h) * 0.35);
}
.hero-safehouse .frame--safehouse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 1.35rem;
  border: 1px solid rgba(232, 160, 90, 0.22);
  box-shadow:
    0 28px 60px -20px rgba(0, 0, 0, 0.75),
    0 0 80px -30px rgba(196, 92, 42, 0.35);
  opacity: 0.78;
  filter: saturate(0.92) brightness(0.88);
}
@media (max-width: 980px) {
  .hero-safehouse .frame--safehouse {
    justify-content: center;
    padding-right: 0;
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 0.5rem);
  }
  .hero-safehouse .frame--safehouse .drift {
    width: min(14rem, 52vw);
    height: min(48vh, 28rem);
    opacity: 0.55;
  }
  .hero-safehouse .frame--safehouse img { opacity: 0.55; }
}

/* Safehouse screenshot band — dark brown / ember only here */
.ember-shots {
  padding: clamp(3.2rem, 8vh, 5.5rem) var(--pad) clamp(3.8rem, 9vh, 6.5rem);
  background: #1a120e;
  color: var(--cream);
  overflow: hidden;
}
.ember-shots .eyebrow {
  color: rgba(232, 160, 90, 0.85);
}
.shots-note {
  margin-top: 0.55rem;
  max-width: 36rem;
  color: rgba(244, 239, 228, 0.55);
  font-size: 0.95rem;
}
.shots-row {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.6rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.shots-row .phone {
  flex: 0 0 auto;
  width: min(11.5rem, 42vw);
  margin: 0;
  scroll-snap-align: start;
}
.shots-row .phone img {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  border: 1px solid rgba(232, 160, 90, 0.22);
  background: #0f0a08;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.shots-row figcaption {
  margin-top: 0.65rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 160, 90, 0.7);
  text-align: center;
}
@media (min-width: 1100px) {
  .shots-row {
    justify-content: space-between;
    overflow: visible;
  }
  .shots-row .phone {
    width: calc((100% - 4 * 1.4rem) / 5);
  }
}

/* --------------------------------------------------------------------------
   Secret — collection presentation
   -------------------------------------------------------------------------- */

/* Sticky in-page rail: quiet, cream on paper, cream on photos via mix */
.page-nav {
  position: fixed;
  z-index: 40;
  top: calc(var(--nav-h) + 1.1rem);
  right: var(--pad);
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  pointer-events: none;
}
.page-nav a {
  pointer-events: auto;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.72);
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease);
  opacity: 0.72;
  text-shadow: 0 1px 12px rgba(7, 16, 32, 0.55);
}
.page-nav a:hover {
  opacity: 1;
  color: var(--cream);
  border-bottom-color: var(--gold);
}
.site-header[data-theme="dark"] ~ .page-nav a,
body:has(.site-header[data-theme="dark"]) .page-nav a {
  color: rgba(11, 27, 58, 0.55);
  text-shadow: none;
}
.site-header[data-theme="dark"] ~ .page-nav a:hover,
body:has(.site-header[data-theme="dark"]) .page-nav a:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
@media (min-width: 1100px) {
  .page-nav { display: flex; }
}
@media (max-width: 1099px) {
  .page-nav { display: none; }
}

.spread--roomy {
  padding: clamp(7.5rem, 15vh, 12rem) var(--pad);
}
.spread--roomy .bi {
  gap: clamp(2.5rem, 6vw, 6.5rem);
}
.spread--roomy .bi-line {
  font-size: clamp(1.85rem, 2.7vw, 2.85rem);
  line-height: 1.24;
}
.spread--roomy .spread-grid {
  gap: clamp(3rem, 7vw, 8rem);
}
.spread--roomy .rows {
  margin-top: 0.85rem;
}
.spread--roomy .rows li {
  padding: 1.75rem 0 1.9rem;
}

.hero-meta {
  margin-top: 1.55rem;
  max-width: 36rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.55);
}
.js .rise > *:nth-child(5) { animation-delay: 0.54s; }

/* Stronger film block — title scale, breathing room, framed stage */
.film-block,
.film-block--strong {
  scroll-margin-top: calc(var(--nav-h) + 0.75rem);
}
.film-block--strong {
  padding: calc(var(--nav-h) + clamp(3.2rem, 7vh, 5rem)) var(--pad) clamp(5rem, 11vh, 8rem);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(196, 163, 90, 0.08), transparent 58%),
    var(--navy-deep);
}
.film-block--strong .film-intro {
  max-width: min(80vw, 1100px);
}
.film-block--strong .display {
  margin-top: 0.9rem;
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  max-width: 12ch;
}
.film-block--strong .display .dot { color: var(--gold); }
.film-block--strong .sub {
  margin-top: 0.85rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}
.film-block--strong .film {
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  border: 1px solid rgba(244, 239, 228, 0.1);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}
.film-block--strong .film-links {
  margin-top: 1.6rem;
  gap: 1rem 2.4rem;
}

/* Smoother bilingual secondary blocks */
.lang-en {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(11, 27, 58, 0.08);
}
.half-ink:not(.cream) .lang-en {
  border-top-color: rgba(244, 239, 228, 0.1);
}
.faq-item dt.lang-en {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(11, 27, 58, 0.08);
}
.faq-item dd.lang-en {
  border-top: 0;
  padding-top: 0;
}
.kick-note.lang-en {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(11, 27, 58, 0.08);
}

/* Chapter type on Secret photos */
.chapter h2 .dot { color: var(--gold); }
.chapter .sub {
  max-width: 28rem;
}

/* Header sticky feel — denser scrolled cream / photo gradient */
.site-header[data-theme="dark"].is-scrolled {
  background: rgba(244, 239, 228, 0.97);
  box-shadow: 0 1px 0 rgba(11, 27, 58, 0.06);
}
.site-header[data-theme="light"].is-scrolled {
  background: linear-gradient(to bottom, rgba(7, 18, 34, 0.82) 0%, rgba(7, 18, 34, 0.5) 60%, rgba(7, 18, 34, 0));
}

/* Index Secret door — slightly fuller band reading */
.card[href="secret.html"] .card-band {
  min-height: 30%;
  padding-top: 4rem;
}
.card[href="secret.html"] .card-title {
  font-size: clamp(2.1rem, 3.2vw, 3.35rem);
}


/* --------------------------------------------------------------------------
   Bright-photo body copy — cream panel for Wind / Solar heroes
   -------------------------------------------------------------------------- */
.hero-panel {
  margin-top: 1.15rem;
  padding: 1.1rem 1.25rem 1.2rem;
  max-width: min(36rem, 100%);
  background: var(--cream);
  color: var(--navy);
  border-left: 2px solid var(--gold);
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.65);
}
.hero-panel .sub,
.hero-panel .hero-sub-es {
  color: rgba(11, 27, 58, 0.8);
}
.hero-panel .sub { margin-top: 0; }
.hero-panel .hero-sub-es { margin-top: 0.55rem; }
.hero-panel .hero-sub-es + .hero-sub-es { margin-top: 0.4rem; }
.hero-panel .close-links { margin-top: 1.05rem; }

.hero .close-links a,
.chapter .close-links a {
  color: rgba(244, 239, 228, 0.9);
  border-bottom-color: rgba(244, 239, 228, 0.35);
}
.hero .hero-panel .close-links a,
.hero-panel .close-links a {
  color: var(--navy);
  border-bottom-color: rgba(11, 27, 58, 0.35);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Books page — CTAs, status lines, cosmic cover aspect
   -------------------------------------------------------------------------- */
.book-status {
  margin-top: 1.1rem;
  max-width: 28rem;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.55;
}
.book-hook {
  margin: 0 0 1.35rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--navy);
}
.book-middle {
  margin-top: 1rem;
  max-width: 22ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgba(244, 239, 228, 0.92);
}
.book-subline {
  margin-top: 0.65rem;
  max-width: 28rem;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
  color: rgba(244, 239, 228, 0.72);
}
.book-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  margin-top: 2.2rem;
  align-items: center;
}
.book-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.92);
  border-bottom: 1px solid rgba(196, 163, 90, 0.55);
  padding-bottom: 0.2rem;
}
.book-cta span {
  display: inline-block;
  transition: transform 0.7s var(--ease);
}
.book-cta:hover span { transform: translateX(7px); }
.book-cta--primary {
  color: var(--cream);
  border-bottom-color: var(--gold);
}
.book-cta--disabled,
.book-cta[aria-disabled="true"] {
  color: rgba(11, 27, 58, 0.42);
  border-bottom-color: rgba(11, 27, 58, 0.22);
  pointer-events: none;
  cursor: default;
}
.book-ctas--cream .book-cta--disabled {
  color: rgba(11, 27, 58, 0.42);
  border-bottom-color: rgba(11, 27, 58, 0.22);
}
.half-ink:not(.cream) .book-cta--disabled {
  color: rgba(244, 239, 228, 0.38);
  border-bottom-color: rgba(244, 239, 228, 0.22);
}
.book-note {
  margin-top: 1rem;
  font-size: 0.92rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(244, 239, 228, 0.62);
}
.spread .book-note,
.book-ctas--cream + .book-note,
.half-ink.cream .book-note {
  color: rgba(11, 27, 58, 0.55);
}
.half-ink:not(.cream) .book-note {
  color: rgba(244, 239, 228, 0.62);
}
.book-float--cosmic img {
  aspect-ratio: 1024 / 1536;
}
.cover-note {
  margin: 0.55rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(196, 163, 90, 0.95);
}
.chapter--book .chapter-copy {
  position: relative;
  z-index: 2;
  padding-right: clamp(2rem, 28vw, 22rem);
}
.chapter--book .book-float {
  z-index: 3;
}
@media (max-width: 820px) {
  .chapter--book .chapter-copy { padding-right: var(--pad); }
  .chapter--book .book-float {
    position: relative;
    top: auto;
    right: auto;
    width: min(14rem, 52vw);
    margin: 0 auto 1.5rem;
    padding-top: clamp(5.5rem, 12vh, 7rem);
  }
  .chapter--book {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.book-gets p { margin-top: 0.15rem; max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.half-ink:not(.cream) .book-gets p { color: rgba(244, 239, 228, 0.78); }
.half-ink.cream .book-gets p { color: var(--ink); }

/* ==========================================================================
   Oct 6b — reasoning pass: footer page tree, lanes grid, framed figure hero,
   quieter Wind/Solar heroes, Safehouse hero spacing.
   ========================================================================== */
.foot-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, auto));
  justify-content: start;
  gap: 1rem clamp(1.4rem, 3vw, 3rem);
}
.foot-group { display: flex; flex-direction: column; gap: 0.45rem; }
.foot-group a { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; }
.foot-group .foot-sub { font-size: 0.64rem; letter-spacing: 0.14em; opacity: 0.55; padding-left: 0.7rem; border-left: 1px solid rgba(196, 163, 90, 0.5); }
.foot-group a[aria-current="page"] { opacity: 1; color: var(--gold); }
@media (max-width: 980px) {
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Breadcrumb inside an eyebrow (sub-pages) */
.eyebrow a { border-bottom: 1px solid rgba(196, 163, 90, 0.6); padding-bottom: 0.05rem; }

/* Hero calls to action */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  margin-top: 1.9rem;
}
.hero-ctas a {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid rgba(196, 163, 90, 0.7);
  padding-bottom: 0.25rem;
}
.hero-ctas a.quiet { border-bottom-color: rgba(244, 239, 228, 0.35); }
.hero.paper .hero-ctas a { color: var(--navy); }

/* Lanes — the umbrella's doors */
.lanes-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
}
.lanes-head .display { font-size: clamp(3rem, 5.5vw, 6.3rem); }
.lanes-head .prose { padding-bottom: 0.4rem; }
.lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
.lane {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
  min-height: 34rem;
}
.lane-photo {
  position: relative;
  height: 17rem;
  overflow: hidden;
  background: var(--navy-deep);
}
.lane-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.lane:hover .lane-photo img { transform: scale(1.04); }
.lane-photo.contain { display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.lane-photo.contain img { width: auto; height: 100%; object-fit: contain; box-shadow: 0 20px 40px -18px rgba(0,0,0,0.8); }
.lane-photo.phone img { border-radius: 0.9rem; border: 1px solid rgba(232, 160, 90, 0.25); }
.lane-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.4rem;
}
.lane-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.lane-title {
  margin-top: 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.lane-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lane-text {
  margin-top: 0.75rem;
  color: rgba(244, 239, 228, 0.74);
  font-size: 0.98rem;
  line-height: 1.55;
}
.lane-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: auto;
  padding-top: 1.2rem;
}
.lane-links a {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(196, 163, 90, 0.6);
  padding-bottom: 0.15rem;
}
.lane--closed .lane-photo img { filter: saturate(0.5) brightness(0.7); }
@media (max-width: 1100px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .lanes, .lanes-head { grid-template-columns: 1fr; }
  .lane { min-height: 0; }
  .lane-photo { height: 13rem; }
}

/* Plain navy hero with a framed photograph or object on the right */
.hero-framed {
  background:
    radial-gradient(ellipse 60% 60% at 76% 46%, rgba(196, 163, 90, 0.10), transparent 62%),
    var(--navy);
}
.hero-figure {
  position: absolute;
  z-index: 2;
  right: calc(var(--pad) + 2vw);
  top: calc(var(--nav-h) + 4vh);
  width: clamp(15rem, 25vw, 23rem);
  margin: 0;
}
.hero-figure img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(196, 163, 90, 0.35);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}
.hero-figure figcaption {
  margin-top: 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.62);
}
.hero-framed .hero-copy { width: min(60vw, 900px); }
@media (max-width: 980px) {
  .hero-figure {
    position: relative;
    right: auto;
    top: auto;
    width: min(13rem, 46vw);
    margin: calc(var(--nav-h) + 1rem) 0 0 var(--pad);
  }
  .hero-figure figcaption { display: none; }
  .hero-framed .hero-copy { width: 100%; }
  .hero-framed .hero-ui { position: relative; top: auto; min-height: 0; padding-top: 1.5rem; }
  .hero-framed { display: flex; flex-direction: column; justify-content: flex-start; }
}

/* Book hero without a backdrop photograph */
.hero--plainbook .hero-copy { width: min(58vw, 880px); }
.hero h1.title { font-size: clamp(3.2rem, 6.4vw, 6.8rem); line-height: 0.92; width: auto; max-width: 13ch; }
@media (max-width: 980px) {
  .hero h1.title { font-size: clamp(2.6rem, 11vw, 4rem); }
  .hero--plainbook .hero-copy { width: 100%; }
}

/* Wind + Solar heroes: copy on a dark veil, no pasted cream box */
.hero h1.compact { font-size: clamp(3rem, 5.4vw, 5.9rem); line-height: 0.95; width: auto; max-width: 15ch; }
.hero .hero-lede { max-width: 34rem; margin-top: 1.2rem; color: rgba(244, 239, 228, 0.88); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; }
.hero .hero-lede + .hero-lede { margin-top: 0.5rem; color: rgba(244, 239, 228, 0.66); font-size: clamp(0.92rem, 1.05vw, 1.02rem); }
.veil-left {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.55) 0%, rgba(7, 16, 32, 0) 22%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.9) 0%, rgba(7, 16, 32, 0.66) 38%, rgba(7, 16, 32, 0.15) 70%, rgba(7, 16, 32, 0) 100%),
    linear-gradient(to top, rgba(7, 16, 32, 0.6) 0%, rgba(7, 16, 32, 0) 40%);
}
@media (max-width: 980px) {
  .hero h1.compact { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .veil-left { background: linear-gradient(to top, rgba(7, 16, 32, 0.95) 0%, rgba(7, 16, 32, 0.75) 55%, rgba(7, 16, 32, 0.35) 100%); }
}

/* Safehouse hero — keep the headline clear of the phone */
.hero-safehouse .hero-copy { width: min(58vw, 860px); }
.hero-safehouse h1.mid { font-size: clamp(3.2rem, 6.2vw, 6.6rem); }
.hero-safehouse .frame--safehouse .drift { width: min(19rem, 26vw); }
.hero-safehouse .frame--safehouse img { object-position: 50% 0%; opacity: 0.92; filter: none; }
@media (max-width: 980px) {
  .hero-safehouse .hero-copy { width: 100%; }
  .hero-safehouse h1.mid { font-size: clamp(2.6rem, 11vw, 4rem); }
  .hero-safehouse .frame--safehouse .drift { width: min(11rem, 40vw); height: min(40vh, 22rem); }
  .hero-safehouse .frame--safehouse img { opacity: 0.5; }
}

/* A contained mark on navy inside a half */
.half-mark { display: flex; align-items: center; justify-content: center; background: var(--navy-deep); }
.half-mark img { width: min(22rem, 70%); height: auto; }
.half-phone { display: flex; align-items: center; justify-content: center; background: #1a120e; padding: 3rem 1rem; }
.half-phone img { width: min(17rem, 60%); height: auto; border-radius: 1.3rem; border: 1px solid rgba(232, 160, 90, 0.25); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8); }
.half-phone::after, .half-mark::after { display: none; }
.close { min-height: 72vh; min-height: 72dvh; }
.hero h1.secret-h1 { font-size: clamp(3.6rem, 8.6vw, 9rem); width: auto; }
.hero-framed .hero-figure { right: calc(var(--pad) + 6.5rem); }
.hero.paper .eyebrow a { border-bottom-color: rgba(11, 27, 58, 0.35); }
@media (max-width: 980px) { .hero h1.secret-h1 { font-size: clamp(3rem, 13vw, 4.6rem); } }
.hero h1.h1-wide { font-size: clamp(3.4rem, 7.6vw, 8rem); width: auto; }
.hero-copy:has(.h1-wide) { width: min(80vw, 1280px); }
@media (max-width: 980px) { .hero h1.h1-wide { font-size: clamp(3rem, 13vw, 4.6rem); } }
.hero--plainbook .book-float { right: calc(var(--pad) + 8rem); }
@media (max-width: 980px) { .hero--plainbook .book-float { right: auto; } }
.half-ink .display + .prose,
.half-ink .display + .sub { margin-top: 1.6rem; }
@media (max-width: 980px) {
  .hero-framed .hero-figure { right: auto; }
  /* Books hero on phones: cover small and above the title, never over it */
  .hero--plainbook .hero-ui {
    position: relative;
    top: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--nav-h) + 1rem);
  }
  .hero--plainbook .book-float {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    --bw: min(34vw, 9.5rem);
    margin: 0 0 1.4rem var(--pad);
  }
}
@media (max-width: 680px) {
  .eyebrow:has(> a) { flex-wrap: wrap; row-gap: 0.45rem; }
}
/* Safehouse hero: show the whole phone screen, no side cropping */
.hero-safehouse .frame--safehouse .drift {
  width: auto;
  height: min(70vh, 40rem);
  aspect-ratio: 1068 / 1899;
}
.hero-safehouse .frame--safehouse img { object-fit: contain; object-position: 50% 50%; }
@media (max-width: 980px) {
  .hero-safehouse .frame--safehouse .drift { width: auto; height: min(40vh, 22rem); }
}
@media (max-width: 980px) {
  .hero-safehouse .frame--safehouse .drift { height: min(33vh, 17rem); }
}

.hero h1.hero-long{font-size:clamp(3rem,5.4vw,5.8rem);line-height:0.98;width:auto;max-width:none}
@media (max-width:700px){.hero h1.hero-long{font-size:clamp(2.4rem,10vw,3.4rem)}}

/* ==========================================================================
   Home hero — editorial cover. The set-up whispers, the punchline lands.
   ========================================================================== */
.hero--home { background: var(--navy-deep); }

/* Photo: lift the horizon, give the frame to the waves. */
.hero--home .hero-photo {
  --pos: 50% 52%;
  --pos-m: 38% 50%;
  object-position: var(--pos);
  filter: var(--grade, contrast(1.1) saturate(1.06) brightness(0.97));
}
@media (prefers-reduced-motion: no-preference) {
  .hero--home .ken { animation: kenhome 24s ease-in-out infinite alternate; }
}
@keyframes kenhome {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.veil-home {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.62) 0%, rgba(7, 16, 32, 0.12) 20%, rgba(7, 16, 32, 0) 34%),
    linear-gradient(90deg, rgba(7, 18, 36, 0.93) 0%, rgba(8, 20, 42, 0.8) 30%, rgba(11, 27, 58, 0.42) 56%, rgba(11, 27, 58, 0.08) 82%, rgba(11, 27, 58, 0) 100%),
    linear-gradient(to top, rgba(7, 16, 32, 0.78) 0%, rgba(7, 16, 32, 0.22) 26%, rgba(7, 16, 32, 0) 46%);
}

.hero--home .grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layout: copy centred in the space between header and foot row. */
.hero--home .hero-ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  overflow: visible;
}
.hero-copy--home {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  padding: 0 0 clamp(0.5rem, 2vh, 1.5rem) var(--pad);
}

/* The joke */
.hero h1.hero-joke {
  width: auto;
  max-width: none;
  margin: 0;
  font-size: inherit;
}
.joke-a {
  display: inline-block;
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.45rem, min(2.35vw, 4.1vh), 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: rgba(244, 239, 228, 0.7);
  font-variation-settings: "opsz" 48, "SOFT" 100, "wght" 380;
}
.strike {
  position: relative;
  display: inline-block;
}
.strike::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.08em;
  top: 56%;
  height: 1.5px;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: rotate(-1.2deg);
}
.joke-b {
  display: block;
  margin-top: clamp(0.5rem, 1.6vh, 1rem);
  font-size: clamp(3.3rem, min(7.3vw, 13vh), 8.6rem);
  font-weight: 480;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--cream);
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 0, "wght" 480;
}
.joke-b .mask {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.06em 0.14em 0;
  margin: -0.04em 0 -0.14em 0;
}
.joke-b .mask > span { display: block; }
.joke-b .dot { color: var(--gold); }

.hero-after { margin-top: clamp(1.4rem, 3.6vh, 2.4rem); }
.hero-sub {
  max-width: 27rem;
  font-size: clamp(0.98rem, 1.12vw, 1.12rem);
  line-height: 1.55;
  color: rgba(244, 239, 228, 0.84);
}
.hero-sign {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.95rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: rgba(244, 239, 228, 0.66);
  font-variation-settings: "opsz" 24, "wght" 400;
}
.hero-sign::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--gold);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.1rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.1rem);
}
.btn-gold,
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
}
.btn-gold {
  padding: 1.05rem 1.6rem 1.05rem 1.75rem;
  border: 1px solid rgba(196, 163, 90, 0.85);
  background: rgba(7, 16, 32, 0.18);
  transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn-gold:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-text {
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(244, 239, 228, 0.32);
  transition: border-color 0.5s var(--ease);
}
.btn-text:hover { border-bottom-color: var(--gold); }
.btn-gold span,
.btn-text span { display: inline-block; transition: transform 0.6s var(--ease); }
.btn-gold:hover span { transform: translateX(5px); }
.btn-text:hover span { transform: translateY(3px); }

/* The real thing behind the joke */
.hero-book {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: clamp(8.5rem, min(12.5vw, 22vh), 12.5rem);
  margin: 0 calc(var(--pad) + 2.5vw) clamp(1.5rem, 5vh, 3.5rem) 2rem;
  perspective: 1400px;
  color: rgba(244, 239, 228, 0.82);
}
.hero-book-cover {
  position: relative;
  display: block;
  width: 100%;
  transform: rotateY(-14deg) rotateZ(1.4deg);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease);
}
.hero-book-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 2560;
  border-radius: 1px 4px 4px 1px;
  box-shadow:
    0 1px 0 rgba(244, 239, 228, 0.08),
    0 18px 30px -14px rgba(0, 0, 0, 0.85),
    0 44px 80px -24px rgba(0, 0, 0, 0.8);
}
.hero-book-cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  border-radius: 1px 0 0 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.35) 72%, rgba(0, 0, 0, 0));
}
.hero-book:hover .hero-book-cover { transform: rotateY(-6deg) rotateZ(0deg) translateY(-6px); }
.hero-book-cap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-book-cap::before {
  content: "";
  width: 1rem;
  height: 1px;
  background: var(--gold);
}
.hero-book-cap em {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
}

/* Foot row */
.hero-foot {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem var(--pad) clamp(1.2rem, 3vh, 1.9rem);
  border-top: 1px solid rgba(244, 239, 228, 0.1);
  margin: 0 var(--pad);
  padding-left: 0;
  padding-right: 0;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.7);
}
.hero-place { justify-self: start; }
.hero-index { display: flex; gap: 0; justify-self: center; }
.hero-index a { opacity: 0.85; transition: color 0.4s var(--ease), opacity 0.4s var(--ease); }
.hero-index a + a::before {
  content: "·";
  display: inline-block;
  margin: 0 0.9em;
  color: var(--gold);
}
.hero-index a:hover { color: var(--cream); opacity: 1; }
.hero-scroll {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-scroll i {
  position: relative;
  display: block;
  width: 2.4rem;
  height: 1px;
  overflow: hidden;
  background: rgba(244, 239, 228, 0.22);
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll i::after { animation: cue 2.8s var(--ease) 4s infinite; }
}
@keyframes cue {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Choreography: set-up, a beat, punchline, then the quiet stuff. */
@media (prefers-reduced-motion: no-preference) {
  .js .joke-a { animation: jokein 1s var(--ease) 0.2s both; }
  .js .strike::after { animation: strike 0.75s cubic-bezier(0.65, 0, 0.35, 1) 1s both; }
  .js .joke-b .mask > span { animation: maskup 1.25s var(--ease) both; }
  .js .joke-b .mask:nth-child(1) > span { animation-delay: 1.75s; }
  .js .joke-b .mask:nth-child(2) > span { animation-delay: 1.9s; }
  .js .hero-after > * { animation: rise 1.2s var(--ease) both; }
  .js .hero-sub { animation-delay: 2.45s; }
  .js .hero-sign { animation-delay: 2.6s; }
  .js .hero-actions { animation-delay: 2.75s; }
  .js .hero-book { animation: bookrise 1.6s var(--ease) 2.6s both; }
  .js .hero-foot { animation: fadein 1.4s ease 3s both; }
}
@keyframes jokein {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes strike {
  from { transform: rotate(-1.2deg) scaleX(0); }
  to { transform: rotate(-1.2deg) scaleX(1); }
}
@keyframes maskup {
  from { transform: translate3d(0, 108%, 0); }
  to { transform: none; }
}
@keyframes bookrise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Laptop / short screens */
@media (max-width: 1180px) {
  .hero-index a + a::before { margin: 0 0.6em; }
}

/* Tablet and phone: cover sits in the sky, copy sits on the water. */
@media (max-width: 980px) {
  .hero--home .hero-photo {
    object-position: var(--pos-m, var(--pos, 50% 50%));
    transform: scale(1.2);
    transform-origin: 50% 100%;
  }
  .veil-home {
    background:
      linear-gradient(to bottom, rgba(7, 16, 32, 0.6) 0%, rgba(7, 16, 32, 0.1) 22%, rgba(7, 16, 32, 0) 34%),
      linear-gradient(to top, rgba(7, 16, 32, 0.96) 0%, rgba(8, 20, 42, 0.9) 40%, rgba(9, 22, 46, 0.7) 54%, rgba(11, 27, 58, 0.3) 66%, rgba(11, 27, 58, 0.08) 80%);
  }
  .hero--home .hero-ui {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .hero-copy--home {
    grid-row: 2;
    align-self: end;
    padding: 0 var(--pad) 1.4rem;
  }
  .hero-book {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: clamp(5.6rem, min(26vw, 19vh), 9rem);
    margin: clamp(0.6rem, 2.5vh, 1.6rem) calc(var(--pad) + 2vw) 0 0;
    align-items: flex-end;
  }
  .hero-book-cap { margin-top: 0.9rem; font-size: 0.56rem; letter-spacing: 0.2em; text-shadow: 0 1px 12px rgba(7, 16, 32, 0.9), 0 0 3px rgba(7, 16, 32, 0.8); }
  .hero-book-cap em { font-size: 0.85rem; }
  .joke-a { font-size: clamp(1.2rem, 5.2vw, 1.7rem); }
  .joke-b { font-size: clamp(2.45rem, 11.2vw, 4.6rem); }
  .hero-sub { font-size: 0.98rem; max-width: 24rem; }
  .hero-actions { gap: 1rem 1.6rem; }
  .btn-gold { padding: 0.95rem 1.3rem 0.95rem 1.4rem; }
  .hero-foot {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding-top: 0.9rem;
  }
  .hero-index { justify-self: start; }
  .hero-scroll { display: none; }
  .hero-place { display: none; }
}
@media (max-width: 380px) {
  .hero-index a + a::before { margin: 0 0.45em; }
  .hero-foot { letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--home .ken { animation: none; }
  .js .joke-a,
  .js .strike::after,
  .js .joke-b .mask > span,
  .js .hero-after > *,
  .js .hero-book,
  .js .hero-foot { animation: none; }
}

/* ==========================================================================
   Oct 8 — Editorial hero system for every page (reuses the Home hero parts:
   joke-a / strike / joke-b masks / hero-after / btn-gold / btn-text /
   hero-foot). Home keeps .hero--home; every other page uses .hero--ed.
   ========================================================================== */
.hero--ed { background: var(--navy-deep); }
.hero--ed .hero-photo {
  object-position: var(--pos, 50% 50%);
  filter: var(--grade, contrast(1.06) saturate(0.98) brightness(0.92));
}
@media (prefers-reduced-motion: no-preference) {
  .hero--ed .ken { animation: kenhome 26s ease-in-out infinite alternate; }
}
.hero--ed .grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ink heroes: no photograph, the object carries the page */
.hero--ink {
  background:
    radial-gradient(ellipse 55% 65% at 78% 48%, rgba(196, 163, 90, 0.13), transparent 62%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(11, 27, 58, 0.9), transparent 70%),
    var(--navy-deep);
}
.hero--ink .veil-home { opacity: 0.55; }

.hero--ed .hero-ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  overflow: visible;
}
.hero-copy--ed {
  grid-column: 1; grid-row: 1;
  width: auto;
  max-width: 62rem;
  padding: 0 0 clamp(0.5rem, 2vh, 1.5rem) var(--pad);
}
.hero--ed .ed-eyebrow { margin-bottom: clamp(1rem, 2.6vh, 1.6rem); color: rgba(244, 239, 228, 0.82); }
.hero--ed .ed-eyebrow a { color: var(--cream); }
.hero--ed h1.hero-joke { width: auto; max-width: none; margin: 0; font-size: inherit; }
.hero--ed .joke-b { font-size: clamp(3rem, min(6.6vw, 11.6vh), 7.8rem); }
.hero--ed.ed-long .joke-b { font-size: clamp(2.6rem, min(5.2vw, 9.6vh), 6.2rem); }
.hero--ed.ed-xl .joke-b { font-size: clamp(3.4rem, min(8.4vw, 15vh), 10rem); }
.hero--ed .joke-a { margin-bottom: 0.1rem; }
.hero--ed .hero-sub { max-width: 30rem; }
.hero-sub--es { margin-top: 0.6rem; font-size: clamp(0.9rem, 1vw, 1rem); color: rgba(244, 239, 228, 0.62); }
.hero--ed .hero-foot a:hover { color: var(--cream); }

/* Objects on the right: book, phone, framed photograph, paper card */
.hero-object {
  grid-column: 2; grid-row: 1;
  align-self: center; justify-self: end;
  margin: 0 calc(var(--pad) + 2vw) clamp(1rem, 3vh, 2.5rem) 2rem;
  color: rgba(244, 239, 228, 0.82);
}
.hero-object figcaption,
.hero-object .obj-cap {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.2rem;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
}
.hero-object figcaption::before,
.hero-object .obj-cap::before { content: ""; width: 1rem; height: 1px; background: var(--gold); }
.hero-object figcaption em,
.hero-object .obj-cap em { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--cream); }

.hero--ed .hero-book { align-self: center; width: clamp(9.5rem, min(15vw, 30vh), 15rem); }

.obj-phone { width: clamp(9.5rem, min(15vw, 34vh), 15rem); }
.obj-phone img {
  width: 100%; height: auto; aspect-ratio: 1080 / 1920; object-fit: cover; object-position: 50% 0;
  border-radius: 1.4rem;
  border: 1px solid rgba(232, 160, 90, 0.28);
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(196, 92, 42, 0.35);
}
.obj-phone--gold img { border-color: rgba(196, 163, 90, 0.4); box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.9); }

.obj-frame { width: clamp(9rem, min(13vw, 27vh), 12.5rem); }
.obj-frame .mat {
  display: block; padding: 0.7rem; background: var(--cream);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
  transform: rotate(1.2deg);
}
.obj-frame img { width: 100%; height: auto; border: 1px solid rgba(11, 27, 58, 0.12); }

.obj-card {
  width: clamp(15rem, 23vw, 20rem);
  padding: 1.5rem 1.5rem 1.3rem;
  background: var(--cream); color: var(--navy);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.9);
  transform: rotate(-1.4deg);
  font-size: 0.86rem; line-height: 1.45;
}
.obj-card .k { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(11, 27, 58, 0.55); }
.obj-card .t { margin-top: 0.4rem; font-family: var(--serif); font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1; }
.obj-card ol { list-style: none; margin: 1rem 0 0; padding: 0; }
.obj-card li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.obj-card li span:last-child { color: rgba(11, 27, 58, 0.55); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.obj-card .stamp { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--navy); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.obj-card .stamp b { color: #8a6d2c; font-weight: 450; }

/* Choreography for sub-pages: eyebrow, headline lines, the quiet stuff, then the object */
@media (prefers-reduced-motion: no-preference) {
  .js .hero--ed .ed-eyebrow { animation: fadein 1s ease 0.15s both; }
  .js .hero--ed .joke-b .mask:nth-child(3) > span { animation-delay: 2.05s; }
  .js .hero--ed.ed-direct .joke-b .mask:nth-child(1) > span { animation-delay: 0.45s; }
  .js .hero--ed.ed-direct .joke-b .mask:nth-child(2) > span { animation-delay: 0.6s; }
  .js .hero--ed.ed-direct .joke-b .mask:nth-child(3) > span { animation-delay: 0.75s; }
  .js .hero--ed.ed-direct .hero-after > *:nth-child(1) { animation-delay: 1.2s; }
  .js .hero--ed.ed-direct .hero-after > *:nth-child(2) { animation-delay: 1.32s; }
  .js .hero--ed.ed-direct .hero-after > *:nth-child(3) { animation-delay: 1.44s; }
  .js .hero--ed.ed-direct .hero-after > *:nth-child(4) { animation-delay: 1.56s; }
  .js .hero--ed .hero-after > .hero-sub--es { animation-delay: 2.55s; }
  .js .hero--ed .hero-object { animation: bookrise 1.6s var(--ease) 2.5s both; }
  .js .hero--ed.ed-direct .hero-object { animation-delay: 1.2s; }
  .js .hero--ed .hero-book { animation: none; }
  .js .hero--ed.ed-direct .hero-foot { animation-delay: 1.7s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--ed .ken { animation: none; }
  .js .hero--ed .ed-eyebrow, .js .hero--ed .hero-object { animation: none; }
}

@media (max-width: 1180px) {
  .hero--ed .obj-card { width: 15rem; }
}
@media (max-width: 980px) {
  .hero--ed .hero-photo { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .hero--ed .hero-ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .hero-copy--ed { grid-row: 2; align-self: end; padding: 0 var(--pad) 1.4rem; }
  .hero--ed .hero-object {
    grid-column: 1; grid-row: 1; align-self: start; justify-self: end;
    margin: clamp(0.6rem, 2vh, 1.4rem) calc(var(--pad) + 2vw) 0 0;
  }
  .hero--ed .hero-book { width: clamp(5.4rem, min(24vw, 17vh), 8.5rem); }
  .hero--ed .obj-phone { width: clamp(5.4rem, min(24vw, 19vh), 8.5rem); }
  .hero--ed .obj-frame { width: clamp(5.4rem, min(24vw, 17vh), 8rem); }
  .hero--ed .obj-frame .mat { padding: 0.4rem; }
  .hero--ed .obj-card { width: min(13.5rem, 56vw); padding: 1rem 1rem 0.9rem; font-size: 0.76rem; }
  .hero--ed .obj-card .t { font-size: 1.2rem; }
  .hero--ed .obj-card li { padding: 0.35rem 0; }
  .hero--ed .hero-object figcaption, .hero--ed .hero-object .obj-cap { margin-top: 0.8rem; font-size: 0.54rem; text-shadow: 0 1px 12px rgba(7,16,32,0.9); }
  .hero--ed .joke-b { font-size: clamp(2.35rem, 10.6vw, 4.4rem); }
  .hero--ed.ed-long .joke-b { font-size: clamp(2.05rem, 8.6vw, 3.6rem); }
  .hero--ed.ed-xl .joke-b { font-size: clamp(3rem, 15vw, 5.4rem); }
  .hero--ed.obj-tall .joke-b { font-size: clamp(2.2rem, 9.6vw, 3.9rem); }
  .hero--ed .hero-sub { font-size: 0.96rem; }
  .hero--ed .hero-sub--es { font-size: 0.86rem; }
}
@media (max-width: 980px) and (max-height: 760px) {
  .hero--ed .hero-sub--es { display: none; }
}

/* ==========================================================================
   Oct 8 — editorial mid-page parts shared by every page
   ========================================================================== */
/* Quip: one dry line, set like a caption between acts */
.quip {
  background: var(--cream); color: var(--navy);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad);
  text-align: center;
  border-top: 1px solid var(--line);
}
.quip p {
  max-width: 34ch; margin: 0 auto;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.025em;
  font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 400;
}
.quip p::before { content: ""; display: block; width: 1.6rem; height: 1px; margin: 0 auto 1.6rem; background: var(--gold); }
.quip .es { display: block; margin-top: 0.8rem; font-size: 0.62em; color: rgba(11, 27, 58, 0.55); }
.quip--ink { background: var(--navy-deep); color: var(--cream); border-top: 0; }
.quip--ink .es { color: rgba(244, 239, 228, 0.55); }

/* Story: the opening narrative, drop-cap, two columns of prose */
.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.story-grid .display { font-size: clamp(2.8rem, 5vw, 5.6rem); }
.story-grid .prose { max-width: 38rem; font-size: 1.08rem; }
.story-grid .prose > p:first-child::first-letter {
  float: left; margin: 0.06em 0.12em 0 0;
  font-family: var(--serif); font-size: 4.1em; line-height: 0.8; color: var(--navy);
}
.story-grid .prose .es { color: rgba(11, 27, 58, 0.55); font-size: 0.96rem; }
.story-grid .prose .es::first-letter { all: unset; }
.kicker-line { margin-top: 1.6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.35; color: var(--navy); max-width: 26ch; }

/* Plates: an editorial photo pair on cream */
.plates { background: var(--cream); color: var(--navy); padding: 0 var(--pad) clamp(5rem, 11vh, 8rem); }
.plates-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.plates-grid.even { grid-template-columns: 1fr 1fr; }
.plate { margin: 0; }
.plate .ph { position: relative; overflow: hidden; background: var(--navy); aspect-ratio: 4 / 3; }
.plate.tall .ph { aspect-ratio: 3 / 4; }
.plate.wide .ph { aspect-ratio: 16 / 10; }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.plate:hover img { transform: scale(1.03); }
.plate figcaption { display: flex; gap: 0.7rem; align-items: baseline; margin-top: 0.85rem; font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(11, 27, 58, 0.62); max-width: 30rem; }
.plate figcaption b { font-weight: 400; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }

/* Ledger: a clean table on cream (materials, formats) */
.ledger { width: 100%; border-collapse: collapse; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 1.15rem 1.2rem 1.15rem 0; border-top: 1px solid var(--line); }
.ledger tr:last-child td { border-bottom: 1px solid var(--line); }
.ledger th { font-size: 0.62rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(11, 27, 58, 0.5); }
.ledger td:first-child { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.65rem); letter-spacing: -0.025em; line-height: 1.1; width: 38%; }
.ledger td { color: var(--ink); }
.ledger .es { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: rgba(11, 27, 58, 0.5); font-family: var(--sans); letter-spacing: 0; }

/* Closing call: one per page, cream, gold-outline button in navy */
.finale {
  position: relative;
  padding: clamp(6rem, 15vh, 10rem) var(--pad) clamp(5rem, 12vh, 8rem);
  background: var(--cream); color: var(--navy);
  border-top: 1px solid var(--line);
}
.finale .display { font-size: clamp(3rem, 6vw, 6.6rem); max-width: 13ch; margin-top: 1rem; }
.finale .display .dot { color: var(--gold); }
.finale .sub { color: var(--ink); max-width: 34rem; }
.finale .sub + .sub { margin-top: 0.6rem; font-size: 0.95rem; color: rgba(11, 27, 58, 0.55); }
.finale .hero-actions { margin-top: 2.2rem; }
.finale .btn-gold { color: var(--navy); background: transparent; border-color: rgba(156, 124, 52, 0.9); }
.finale .btn-gold:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.finale .btn-text { color: var(--navy); border-bottom-color: rgba(11, 27, 58, 0.3); }
.finale .finale-meta { margin-top: 2.4rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(11, 27, 58, 0.5); }
.finale-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.finale-list { list-style: none; margin: 0; padding: 0; }
.finale-list li { padding: 0.75rem 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.98rem; }
.finale-list li:last-child { border-bottom: 1px solid var(--line); }
.finale-list li span { color: rgba(11, 27, 58, 0.5); font-size: 0.86rem; }

/* Honest limits — a navy plate with hairlines */
.limits { background: var(--navy); color: var(--cream); padding: clamp(5.5rem, 12vh, 8.5rem) var(--pad); }
.limits .display { font-size: clamp(2.8rem, 5vw, 5.4rem); max-width: 14ch; margin-top: 1rem; }
.limits-list { list-style: none; margin: clamp(2rem, 5vh, 3.2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.limits-list li { padding: 1.35rem 0 1.45rem; border-top: 1px solid rgba(244, 239, 228, 0.14); }
.limits-list h3 { font-family: var(--serif); font-size: clamp(1.35rem, 1.9vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.1; font-weight: 500; }
.limits-list p { margin-top: 0.45rem; color: rgba(244, 239, 228, 0.72); max-width: 32rem; }
.limits-list .es { margin-top: 0.35rem; color: rgba(244, 239, 228, 0.5); font-size: 0.92rem; }

/* Chapter with a short dry line under the headline */
.chapter .chapter-quip { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: rgba(244, 239, 228, 0.82); max-width: 30ch; }

/* Kickstarter: campaign plate */
.kick { position: relative; background: var(--navy-deep); color: var(--cream); padding: clamp(6rem, 14vh, 9.5rem) var(--pad); overflow: hidden; }
.kick::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(196, 163, 90, 0.12), transparent 60%); pointer-events: none; }
.kick-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.kick .display { font-size: clamp(2.6rem, 4.6vw, 5rem); margin-top: 1rem; max-width: 15ch; }
.kick .kick-sub { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.35; color: rgba(244, 239, 228, 0.86); max-width: 32rem; }
.kick .prose { color: rgba(244, 239, 228, 0.74); margin-top: 1.4rem; }
.kick-facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(244, 239, 228, 0.16); }
.kick-facts li { padding: 1.1rem 1rem 0 0; }
.kick-facts li + li { padding-left: 1rem; border-left: 1px solid rgba(244, 239, 228, 0.16); }
.kick-facts .k { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.kick-facts .v { margin-top: 0.35rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; }
.kick-facts .v small { display: block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0; color: rgba(244, 239, 228, 0.55); }
.kick-visual { margin: 0; }
.kick-visual .ph { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(196, 163, 90, 0.3); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85); }
.kick-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.kick-visual figcaption { margin-top: 0.9rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 228, 0.6); }
.kick .hero-actions { margin-top: 2.2rem; }

/* Creator: portrait in a mat, bio beside */
.creator-grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.creator-photo { margin: 0; }
.creator-photo .mat { display: block; padding: 0.8rem; background: #fff; box-shadow: 0 30px 60px -30px rgba(11, 27, 58, 0.45); transform: rotate(-1deg); max-width: 22rem; }
.creator-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.creator-photo figcaption { margin-top: 1rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(11, 27, 58, 0.55); }
.creator-bio { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.25; letter-spacing: -0.025em; max-width: 30ch; }
.creator-bio-es { margin-top: 1.2rem; color: rgba(11, 27, 58, 0.58); max-width: 40rem; }

/* Phone-framed vertical film */
.phone-film { margin: 0; justify-self: center; width: min(19rem, 72vw); }
.phone-film .shell { position: relative; padding: 0.55rem; border-radius: 2.1rem; background: #05070d; box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.35), 0 40px 90px -36px rgba(0, 0, 0, 0.9); }
.phone-film video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 1.6rem; background: #000; object-fit: cover; }
.phone-film figcaption { margin-top: 1rem; text-align: center; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 228, 0.6); }
.film-duo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(2.4rem, 5vh, 3.6rem); }
.film-duo .film { margin-top: 0; }

/* Series list (channel) and doors */
.series { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.series li { padding: 1.5rem 0 1.7rem; border-top: 1px solid var(--line); }
.series .n { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(11, 27, 58, 0.5); }
.series h3 { margin-top: 0.6rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -0.03em; line-height: 1.02; font-weight: 520; }
.series p { margin-top: 0.55rem; color: var(--ink); font-size: 0.98rem; }
.series a { border-bottom: 1px solid rgba(196, 163, 90, 0.7); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; display: inline-block; margin-top: 0.8rem; }

.pair--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pair--three .card { min-height: 78vh; }
.card-text { display: block; margin-top: 0.5rem; max-width: 22rem; font-size: 0.9rem; line-height: 1.45; color: rgba(244, 239, 228, 0.76); }

.spread .eyebrow + .display { margin-top: 1rem; }
.spread + .spread { border-top: 1px solid var(--line); }
.note-small { margin-top: 1.6rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(11, 27, 58, 0.5); }

@media (max-width: 980px) {
  .story-grid, .plates-grid, .plates-grid.even, .finale-grid, .kick-grid, .creator-grid, .film-duo { grid-template-columns: 1fr; }
  .limits-list, .series { grid-template-columns: 1fr; }
  .pair--three { grid-template-columns: 1fr; }
  .pair--three .card { min-height: 62vh; }
  .kick-facts { grid-template-columns: 1fr; }
  .kick-facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(244, 239, 228, 0.16); margin-top: 1rem; }
  .ledger td:first-child { width: 42%; }
  .creator-photo .mat { max-width: 16rem; }
}
@media (max-width: 640px) {
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger thead { display: none; }
  .ledger td { padding: 0.2rem 0 0.9rem; border-top: 0; }
  .ledger td:first-child { width: 100%; padding-top: 1rem; border-top: 1px solid var(--line); }
  .ledger tr:last-child td { border-bottom: 0; }
}
.foot-nav { grid-template-columns: repeat(8, minmax(0, auto)); }
@media (max-width: 980px) { .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Oct 8 — Books hero: a two-book shelf (book one front, book two behind)
   ========================================================================== */
.hero-shelf { align-self: center; }
.shelf-row { display: flex; align-items: flex-end; perspective: 1400px; }
.shelf-book { position: relative; display: block; }
.shelf-book--one { z-index: 2; width: clamp(9.5rem, min(15vw, 30vh), 15rem); }
.shelf-book--two {
  z-index: 1;
  width: clamp(7.2rem, min(11.4vw, 23vh), 11.4rem);
  margin-right: clamp(-3rem, -2.6vw, -1.4rem);
  margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
  filter: brightness(0.82) saturate(0.92);
  transition: filter 0.6s var(--ease);
}
.shelf-book--two .hero-book-cover { transform: rotateY(-20deg) rotateZ(-2deg); }
.shelf-book--two .hero-book-cover img { aspect-ratio: 1024 / 1536; }
.shelf-book--two:hover { filter: none; }
.shelf-book:hover .hero-book-cover { transform: rotateY(-6deg) rotateZ(0deg) translateY(-6px); }
.shelf-cap { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0 !important; }
.shelf-cap::before { display: none !important; }
.hero-object .shelf-cap .obj-cap { margin-top: 0.55rem; color: rgba(244, 239, 228, 0.82); }
.hero-object .shelf-cap .obj-cap:first-child { margin-top: 1.3rem; }
.hero-object .shelf-cap .obj-cap--two em { color: rgba(244, 239, 228, 0.78); }
.hero-object .shelf-cap .obj-cap--two:hover { color: var(--gold); }
.hero-twobooks em { font-family: var(--serif); color: var(--cream); font-size: 1.08em; margin-right: 0.35rem; }
.hero-twobooks a { color: var(--cream); border-bottom: 1px solid rgba(196, 163, 90, 0.8); padding-bottom: 0.05rem; white-space: nowrap; }
.hero-twobooks a:hover { color: var(--gold); }
.hero-twobooks .kindle { display: block; margin-top: 0.35rem; font-size: 0.9em; color: rgba(244, 239, 228, 0.5); }
/* Book two caption in the chapter: two balanced lines, never an orphan */
.book-float figcaption .fc-a, .book-float figcaption .fc-b { display: block; white-space: nowrap; }
.book-float figcaption .fc-b { margin-top: 0.45rem; padding-left: 1.9rem; color: rgba(244, 239, 228, 0.55); }
@media (max-width: 980px) {
  .hero--ed .shelf-book--one { width: clamp(5.4rem, min(23vw, 16vh), 8rem); }
  .hero--ed .shelf-book--two { width: clamp(4.2rem, min(17.5vw, 12.5vh), 6.2rem); margin-right: -1.1rem; margin-bottom: 0.6rem; }
  .hero-object .shelf-cap .obj-cap:first-child { margin-top: 0.8rem; }
  .hero-object .shelf-cap .obj-cap { margin-top: 0.35rem; }
  .hero-shelf .shelf-cap { align-items: flex-end; }
  .hero-twobooks .kindle { display: none; }
}
.hero-object .shelf-cap .obj-cap { margin-top: 0.3rem !important; line-height: 1.4; }
.hero-object .shelf-cap .obj-cap:first-child { margin-top: 1.2rem !important; }
@media (max-width: 980px) { .hero-object .shelf-cap .obj-cap:first-child { margin-top: 0.7rem !important; } .hero-object .shelf-cap .obj-cap { margin-top: 0.1rem !important; } }
.hero-object figcaption.shelf-cap { gap: 0; align-items: flex-start; }
@media (max-width: 980px) { .hero-object figcaption.shelf-cap { align-items: flex-end; } }

/* Long object cards (channel programme, welcome tour): the list folds away on phones */
@media (max-width: 980px) {
  .hero--ed .obj-card--long ol { display: none; }
  .hero--ed .obj-card--long .stamp { margin-top: 0.7rem; }
}

/* Stacked duo (markets stocks vs crypto) */
.duo--stack { grid-template-columns: 1fr; gap: 0; }
.duo--stack p { max-width: 36rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.duo--stack p:last-child { border-bottom: 1px solid var(--line); }
.duo--stack strong { font-family: var(--serif); font-weight: 500; font-size: 1.25em; letter-spacing: -0.02em; color: var(--navy); margin-right: 0.3rem; }
.pull + .note-small { margin-top: 1.2rem; }
.quip .quip-link { display: inline-block; margin-top: 0.4rem; font-family: var(--sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid rgba(196, 163, 90, 0.8); padding-bottom: 0.15rem; }
.quip .quip-link:hover { color: #8a6d2c; }

/* ==========================================================================
   Oct 8 — Welcome tour: one elegant stop per lane, photo and text alternating
   ========================================================================== */
.tour { background: var(--cream); color: var(--navy); padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(4rem, 9vh, 6rem); }
.tour-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.tour-head .display { font-size: clamp(2.8rem, 5vw, 5.4rem); margin-top: 1rem; max-width: 13ch; }
.tour-head .sub { margin-top: 1.2rem; color: var(--ink); max-width: 36rem; }
.stop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; padding: clamp(2.6rem, 6vh, 4rem) 0; border-top: 1px solid var(--line); }
.stop:last-child { border-bottom: 1px solid var(--line); }
.stop:nth-of-type(even) .stop-photo { order: 2; }
.stop-photo { margin: 0; }
.stop-photo .ph { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: var(--navy); }
.stop-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.stop:hover .stop-photo img { transform: scale(1.03); }
.stop-photo--book .ph { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(196, 163, 90, 0.16), transparent 70%), var(--navy-deep); }
.stop-photo--book img { width: auto; height: 82%; object-fit: contain; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.9); transform: rotate(-2deg); }
.stop:hover .stop-photo--book img { transform: rotate(0deg) translateY(-4px); }
.stop-n { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(11, 27, 58, 0.6); }
.stop-n span { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; color: var(--navy); }
.stop-status { font-style: normal; padding: 0.3rem 0.6rem 0.25rem; border: 1px solid rgba(156, 124, 52, 0.7); color: #8a6d2c; letter-spacing: 0.18em; font-size: 0.56rem; }
.stop h3 { margin-top: 0.9rem; font-family: var(--serif); font-weight: 520; font-size: clamp(1.9rem, 3vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.stop h3 a:hover { color: #8a6d2c; }
.stop-line { margin-top: 0.9rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.35; color: var(--navy); max-width: 32ch; }
.stop-copy > p:not(.stop-n):not(.stop-line):not(.stop-links) { margin-top: 0.8rem; color: var(--ink); max-width: 32rem; }
.stop-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.3rem; }
.stop-links a { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid rgba(196, 163, 90, 0.8); padding-bottom: 0.15rem; }
.stop-links a:hover { color: #8a6d2c; }
.finale-list li a { border-bottom: 1px solid rgba(196, 163, 90, 0.6); }
@media (max-width: 980px) {
  .stop { grid-template-columns: 1fr; gap: 1.4rem; }
  .stop:nth-of-type(even) .stop-photo { order: 0; }
}
.stop-photo--frame img { height: 78%; padding: 0.55rem; background: var(--cream); transform: rotate(1.6deg); }
.stop:hover .stop-photo--frame img { transform: rotate(0deg) translateY(-4px); }

/* ==========================================================================
   Oct 8 (batch 3) — hero object variety + caption legibility
   ========================================================================== */
/* Captions under hero objects: a quiet navy scrim so they read on light photos */
.hero--ed .hero-object figcaption,
.hero--ed .hero-object .obj-cap {
  width: max-content; max-width: 100%;
  padding: 0.42rem 0.75rem 0.42rem 0.6rem;
  background: rgba(7, 16, 32, 0.58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 10px rgba(7, 16, 32, 0.8);
  color: rgba(244, 239, 228, 0.86);
}
.hero--ed .hero-object figcaption.shelf-cap { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }

/* Watch: a camera viewfinder instead of a card */
.hero-vf { position: absolute; z-index: 2; inset: calc(var(--header-h, 5.2rem) + 1.2rem) var(--pad) 5.6rem; pointer-events: none; }
.hero-vf i { position: absolute; width: 2.2rem; height: 2.2rem; border-color: rgba(244, 239, 228, 0.62); border-style: solid; border-width: 0; }
.hero-vf i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero-vf i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero-vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero-vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.vf-rec { position: absolute; top: 1rem; right: 1.2rem; display: flex; align-items: center; gap: 0.55rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 228, 0.88); text-shadow: 0 1px 10px rgba(7,16,32,0.8); }
.vf-rec b { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #c8463a; box-shadow: 0 0 12px rgba(200, 70, 58, 0.7); }
.vf-rec em { font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--cream); }
.vf-take { position: absolute; bottom: 1rem; right: 1.2rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 228, 0.7); text-shadow: 0 1px 10px rgba(7,16,32,0.8); }
@media (prefers-reduced-motion: no-preference) {
  .vf-rec b { animation: recblink 1.6s steps(2, jump-none) infinite; }
  .js .hero-vf { animation: fadein 1.4s ease 2.4s both; }
}
@keyframes recblink { 0% { opacity: 1; } 100% { opacity: 0.15; } }
@media (max-width: 980px) {
  .hero-vf { inset: calc(var(--header-h, 4.4rem) + 0.6rem) var(--pad) auto; height: 34vh; }
  .vf-take { display: none; }
}

/* Build: a plan drawing on cream paper */
.obj-plan { width: clamp(15rem, 24vw, 21rem); padding: 1.2rem 1.2rem 1rem; background: var(--cream); color: var(--navy); box-shadow: 0 34px 70px -28px rgba(0,0,0,0.9); transform: rotate(1.2deg);
  background-image: linear-gradient(rgba(11,27,58,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,27,58,0.06) 1px, transparent 1px); background-size: 14px 14px; }
.obj-plan .k { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(11,27,58,0.6); display: flex; justify-content: space-between; }
.obj-plan svg { display: block; width: 100%; height: auto; margin-top: 0.7rem; }
.obj-plan svg text { font-family: var(--sans); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--navy); }
.obj-plan svg text.it { font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: 0; text-transform: none; fill: #8a6d2c; }
.obj-plan .foot { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--navy); display: flex; justify-content: space-between; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; }
.obj-plan .foot b { font-weight: 450; color: #8a6d2c; }

/* Homes: a key tag */
.obj-tag { position: relative; width: clamp(11rem, 15vw, 13.5rem); padding: 2.6rem 1.3rem 1.4rem; background: var(--cream); color: var(--navy); border-radius: 0 0 0.6rem 0.6rem;
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); box-shadow: 0 34px 70px -28px rgba(0,0,0,0.9); transform: rotate(-5deg); text-align: center; }
.obj-tag::before { content: ""; position: absolute; top: 0.95rem; left: 50%; width: 0.9rem; height: 0.9rem; margin-left: -0.45rem; border-radius: 50%; background: rgba(7,16,32,0.92); box-shadow: inset 0 0 0 2px var(--gold); }
.obj-tag-wrap { position: relative; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
.obj-tag-wrap::before { content: ""; position: absolute; left: 50%; top: -3.4rem; width: 1px; height: 4.2rem; background: linear-gradient(to bottom, transparent, rgba(196,163,90,0.9)); transform: rotate(-5deg); transform-origin: bottom; }
.obj-tag .k { font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(11,27,58,0.6); }
.obj-tag .n { margin-top: 0.4rem; font-family: var(--serif); font-size: 3.2rem; line-height: 0.9; letter-spacing: -0.04em; }
.obj-tag .t { margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.obj-tag .s { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--navy); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6d2c; }

/* Green: one big quote instead of an object */
.obj-quote { width: clamp(15rem, 25vw, 22rem); margin: 0; padding-left: 1.3rem; border-left: 1px solid var(--gold); }
.obj-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.1vw, 2.05rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--cream); text-shadow: 0 2px 22px rgba(7,16,32,0.7); }
.obj-quote p .es { display: block; margin-top: 0.8rem; font-size: 0.55em; line-height: 1.3; color: rgba(244,239,228,0.7); }
.hero--ed .hero-object.obj-quote figcaption { margin-top: 1rem; }

@media (max-width: 1180px) { .obj-plan { width: 16rem; } }
@media (max-width: 980px) {
  .hero--ed .obj-plan { width: min(12.5rem, 52vw); padding: 0.8rem 0.8rem 0.7rem; }
  .hero--ed .obj-plan .foot { display: none; }
  .hero--ed .obj-tag { width: 8.6rem; padding: 2rem 0.8rem 0.9rem; }
  .hero--ed .obj-tag .n { font-size: 2.2rem; }
  .hero--ed .obj-tag .t { font-size: 0.9rem; }
  .hero--ed .obj-tag .s { display: none; }
  .hero--ed .obj-tag-wrap::before { top: -2.4rem; height: 3rem; }
  .hero--ed .hero-object.obj-quote { width: min(13rem, 56vw); }
  .hero--ed .obj-quote p { font-size: 1.12rem; }
  .hero--ed .obj-quote p .es, .hero--ed .obj-quote figcaption { display: none; }
}
@media (max-width: 980px) { .hero-vf i { display: none; } .hero-vf { height: auto; } }
@media (max-width: 1320px) { .hero-vf i:nth-child(1), .hero-vf i:nth-child(3) { display: none; } }
@media (max-width: 980px) { .hero-vf { top: calc(var(--header-h, 4.4rem) + 1.4rem); } .vf-rec { top: 0; right: 0; } }
/* Safehouse: ink hero with an ember glow behind the phone */
.hero--ember { background:
    radial-gradient(ellipse 38% 55% at 80% 48%, rgba(196, 92, 42, 0.22), transparent 64%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(11, 27, 58, 0.9), transparent 70%),
    var(--navy-deep); }
.hero--ember .obj-phone { width: clamp(11rem, min(17vw, 40vh), 17rem); }
@media (max-width: 980px) { .hero--ember .obj-phone { width: clamp(6rem, min(28vw, 22vh), 9.5rem); } }
.can-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.can-list li { padding: 0.6rem 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.98rem; }
.lab-note { margin-top: 1.4rem; font-size: 0.78rem; color: rgba(244, 239, 228, 0.6); max-width: 34rem; }
/* Home: eight lanes, four across on wide screens */
.lanes--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lanes--eight .lane { min-height: 31rem; }
.lanes--eight .lane-photo { height: 14rem; }
.lanes--eight .lane-title { font-size: clamp(1.55rem, 1.75vw, 2.05rem); text-wrap: balance; }
.lanes--eight .lane-text { font-size: 0.93rem; }
.lanes--eight .lane-links { gap: 0.5rem 1rem; }
@media (max-width: 1240px) { .lanes--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lanes--eight .lane-title { font-size: clamp(1.7rem, 3vw, 2.2rem); } }
@media (max-width: 680px) { .lanes--eight { grid-template-columns: 1fr; } .lanes--eight .lane { min-height: 0; } .lanes--eight .lane-photo { height: 13rem; } }
@media (max-width: 980px) {
  .hero--ember .hero-object figcaption { display: none; }
  .hero--ember .obj-phone { width: clamp(5.5rem, min(24vw, 20vh), 8.5rem); }
  .hero--ed .obj-tag { width: 9.6rem; }
  .hero--ed .obj-tag .k { font-size: 0.5rem; letter-spacing: 0.18em; }
  .hero--ed .obj-tag .t { display: none; }
}
.card-title { text-wrap: balance; }
#meet .duo { margin-top: clamp(2rem, 5vh, 3.2rem); }
#meet .duo h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; font-weight: 520; margin-bottom: 0.5rem; }
/* Greenhouses: the status card becomes a stamped memo */
.obj-card--memo { position: relative; transform: rotate(1.6deg); background-image: linear-gradient(to bottom, transparent 2.3rem, rgba(196,163,90,0.35) 2.3rem, rgba(196,163,90,0.35) calc(2.3rem + 1px), transparent calc(2.3rem + 1px)); }
.rubber { position: absolute; z-index: 2; right: -1.4rem; bottom: 2.6rem; display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0.8rem 0.4rem; border: 2px solid rgba(162, 64, 47, 0.85); border-radius: 0.3rem; color: rgba(162, 64, 47, 0.9); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; transform: rotate(-14deg); background: rgba(244,239,228,0.35); mix-blend-mode: multiply; }
.rubber small { font-size: 0.5rem; letter-spacing: 0.24em; margin-top: 0.15rem; }
@media (max-width: 980px) { .rubber { right: -0.6rem; bottom: auto; top: 2.4rem; font-size: 0.7rem; padding: 0.3rem 0.55rem; } }

/* QA sweep (Oct 8): no orphaned words in headlines, captions and short lines */
h2, h3, .display:not(h1), .lane-title, .card-title, figcaption, .kicker-line, .chapter-quip, .sub, .quip p, .kick-sub, .stop h3 { text-wrap: balance; }
p, li, dd, .hero-sub, .lane-text { text-wrap: pretty; }
.hero, .chapter { overflow: hidden; overflow: clip; }
.rubber { top: -1rem; right: -1.3rem; bottom: auto; }
@media (max-width: 980px) { .rubber { top: -0.9rem; right: -0.8rem; } }
@media (max-width: 980px) { .finale-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .finale .btn-gold { max-width: 100%; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0.12em; } }
@media (max-width: 460px) { .finale .display, .kick .display, .limits .display { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .finale .display { font-size: min(var(--finale-size, 3rem), 10.2vw); } }
.obj-tag { width: clamp(12.8rem, 15vw, 14rem); }
.obj-tag .s { white-space: nowrap; letter-spacing: 0.16em; }
/* Markets: the reading list as four book spines on a shelf */
.obj-spines { display: flex; align-items: flex-end; gap: 0.3rem; height: clamp(15rem, 40vh, 21rem); padding: 0 0.6rem 0.55rem; border-bottom: 2px solid rgba(196, 163, 90, 0.75); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.spine { display: flex; justify-content: space-between; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); padding: 1rem 0.65rem; border-radius: 2px; }
.spine b { font-family: var(--serif); font-weight: 500; font-size: clamp(0.95rem, 1.2vw, 1.15rem); letter-spacing: -0.01em; }
.spine i { font-style: normal; font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; }
.spine--a { height: 86%; width: 3.1rem; background: var(--cream); color: var(--navy); }
.spine--b { height: 94%; width: 2.7rem; background: #13284f; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(196,163,90,0.5); }
.spine--c { height: 100%; width: 3.4rem; background: var(--gold); color: var(--navy-deep); }
.spine--d { height: 80%; width: 2.9rem; background: var(--cream); color: var(--navy); margin-left: 0.9rem; }
@media (max-width: 980px) {
  .hero--ed .obj-spines { height: clamp(8.5rem, 22vh, 11rem); gap: 0.2rem; padding: 0 0.3rem 0.35rem; }
  .hero--ed .spine { padding: 0.55rem 0.35rem; }
  .hero--ed .spine b { font-size: 0.66rem; }
  .hero--ed .spine i { display: none; }
  .hero--ed .spine--a { width: 1.8rem; } .hero--ed .spine--b { width: 1.6rem; } .hero--ed .spine--c { width: 2rem; } .hero--ed .spine--d { width: 1.7rem; }
  .hero--ed .obj-quote { background: rgba(7,16,32,0.5); padding: 0.8rem 1rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@media (max-width: 600px) {
  .hero--ed .obj-spines { height: 7.6rem; }
  .hero--ed .hero-object:has(.obj-spines) figcaption { display: none; }
}
@media (max-width: 600px) {
  .hero--ed .obj-spines { height: 9.2rem; }
  .hero--ed .spine b { white-space: nowrap; font-size: 0.6rem; }
}

/* Pass 19:17 (Oct 8): Green doors — readable bands over bright photos. */
.pair--three .card-band {
  min-height: 42%;
  padding: 5.5rem 1.5rem 1.5rem;
  background: linear-gradient(to top,
    rgba(7, 16, 32, 0.96) 0%,
    rgba(7, 16, 32, 0.9) 34%,
    rgba(7, 16, 32, 0.62) 64%,
    rgba(7, 16, 32, 0) 100%);
}
.pair--three .card-kicker {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  opacity: 1;
  color: var(--gold, #c4a35a);
  text-shadow: 0 1px 10px rgba(7, 16, 32, 0.7);
}
.pair--three .card-title {
  color: var(--cream, #f4efe4);
  text-shadow: 0 2px 18px rgba(7, 16, 32, 0.55);
}
/* Turbine photo: zoom from the top so the hillside and tower base sit behind the band, not pale grass. */
.card img.pos-turbine-hill {
  object-position: 50% 0%;
  transform: scale(1.3);
  transform-origin: 50% 0%;
}

/* Oct 9 fix — scrolled header is opaque on every page and width, so the
   previous section/card title never shows through behind the wordmark. */
.site-header.is-scrolled[data-theme="light"] {
  background: rgba(9, 21, 44, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(196, 163, 90, 0.14);
}
.site-header.is-scrolled[data-theme="dark"] {
  background: rgba(244, 239, 228, 0.98);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(11, 27, 58, 0.08);
}
body.nav-open .site-header.is-scrolled {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Oct 9 fix — Watch hero: parallax is vertical only, so drop the side bleed
   that pushed the photographer past the right edge on desktop. */
@media (min-width: 981px) {
  .hero--watch .drift { left: 0; right: 0; }
}

/* pass 13:37 — Safehouse phone panel back in the palette, phone at a readable size */
.half-phone {
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(196, 163, 90, 0.16), transparent 70%),
    linear-gradient(180deg, #08142c 0%, #0b1b3a 100%);
  padding: clamp(3rem, 6vw, 5.5rem) 1.5rem;
  position: relative;
}
.half-phone::before {
  content: ""; position: absolute; left: 50%; bottom: clamp(1.6rem, 3vw, 2.6rem);
  width: 3.2rem; height: 2px; background: #c4a35a; transform: translateX(-50%);
}
.half-phone img {
  width: min(21rem, 62%); max-height: 78vh; object-fit: contain;
  border-radius: 2rem; padding: 0.55rem; background: #050b18;
  border: 1px solid rgba(196, 163, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(244, 239, 228, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 980px) {
  .half-phone img { width: min(15rem, 66%); }
}
/* pass 13:37 — small print legible on phones */
@media (max-width: 600px) {
  .eyebrow { font-size: 0.74rem; letter-spacing: 0.22em; }
  .plate figcaption, .shots-row figcaption { font-size: 0.82rem; line-height: 1.5; }
  .plate figcaption b { font-size: 0.7rem; }
  .kick-visual figcaption, .creator-photo figcaption, .phone-film figcaption { font-size: 0.7rem; letter-spacing: 0.18em; }
  .finale-meta, .fine { font-size: 0.72rem; }
}

/* Books: book-two cover shown whole on navy, never cropped through the lettering (pass 1550) */
.half-photo.half-cover{background:#0b1b3a;display:flex;align-items:center;justify-content:center;padding:clamp(48px,7vw,110px) clamp(24px,5vw,80px)}
.half-cover .cover-whole{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.half-cover .cover-whole img{display:block;width:auto;height:auto;max-width:min(78%,380px);max-height:72vh;object-fit:contain;box-shadow:0 30px 60px rgba(0,0,0,.45);outline:1px solid rgba(196,163,90,.35);outline-offset:10px}
.half-cover figcaption{font-family:Outfit,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c4a35a;margin-top:14px}
@media (max-width:820px){.half-photo.half-cover{min-height:0;height:auto;padding:56px 24px}.half-cover .cover-whole img{max-width:62%;max-height:none}}

/* 1922 pass: one editorial grade across the Spain "Seven stops" photos so bright blue skies don't fight the navy/cream palette */
.stop-photo:not(.stop-photo--book) .ph::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,27,58,0.10), rgba(11,27,58,0.28)); mix-blend-mode: multiply; }
.stop-photo:not(.stop-photo--book) img { filter: saturate(0.72) sepia(0.12) contrast(1.04) brightness(0.96); }
.stop:hover .stop-photo:not(.stop-photo--book) img { filter: saturate(0.85) sepia(0.08) contrast(1.04); }


/* Oct 10 — paper-live scorecard (navy / cream / gold) */
.scorecard { padding-bottom: clamp(4rem, 10vh, 7rem); }
.scorecard > .display { margin-top: 1rem; max-width: 16ch; }
.score-lanes {
  list-style: none; margin: clamp(2.2rem, 5vh, 3.4rem) 0 0; padding: 0;
  max-width: 46rem; border-top: 1px solid var(--line);
}
.score-lane {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  column-gap: clamp(1rem, 2.4vw, 1.8rem);
  row-gap: 0.35rem;
  padding: clamp(1.25rem, 2.6vh, 1.7rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.score-status {
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.score-lane h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 480;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--navy);
}
.score-lane p {
  margin: 0;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.score-pull {
  margin: clamp(2.6rem, 6vh, 4rem) 0 0;
  max-width: 22em;
}
@media (max-width: 600px) {
  .score-lane {
    grid-template-columns: 1fr;
    row-gap: 0.45rem;
  }
  .score-status {
    grid-row: auto;
    margin-top: 0;
  }
  .score-lane h3 { font-size: 1.28rem; }
  .score-lane p { font-size: 0.98rem; }
}
/* pass 2026-10-10 11:17: Books hero, mobile - covers were thumbnail-size; make the books the hero object */
@media (max-width: 980px) {
  .hero--book .shelf-book--one { width: clamp(6.5rem, min(29vw, 14.5vh), 8.8rem); }
  .hero--book .shelf-book--two { width: clamp(5rem, min(21vw, 10.5vh), 6.4rem); margin-right: -1.4rem; }
  .hero--book .hero-object { justify-self: center; margin-right: 0; margin-top: clamp(0.4rem, 1vh, 0.8rem); }
  .hero--book .hero-object .shelf-cap .obj-cap:first-child { margin-top: 0.6rem !important; }
  .hero--book .hero-object .shelf-cap .obj-cap { margin-top: 0.15rem !important; }
}

/* Oct 10 15:20: Greenhouses mobile — stamp no longer covers the memo label or clips off-card; copy reads cleanly over the bright cracked earth */
@media (max-width: 600px) {
  .hero .obj-card--memo .rubber { display: none; } /* "Service: not yet" already says it on small screens */
  .obj-card--memo .k { padding-right: 0; }
  .hero--ed:has(.obj-card--memo) .veil { background: linear-gradient(180deg, rgba(7,16,32,0.35) 0%, rgba(7,16,32,0.55) 30%, rgba(7,16,32,0.88) 55%, rgba(7,16,32,0.95) 100%); }
}

/* 1724 pass: Green mobile quote — match desktop gold-rule system, not a grey box */
@media (max-width: 980px) {
  .hero--ed .obj-quote { background: linear-gradient(90deg, rgba(11,27,58,0.82), rgba(11,27,58,0.35) 85%, rgba(11,27,58,0)); -webkit-backdrop-filter: none; backdrop-filter: none; border-left: 2px solid #c4a35a; padding: 0.7rem 1rem 0.75rem 1.1rem; }
  .hero--ed .obj-quote p { font-size: 1.18rem; line-height: 1.16; }
  .hero--ed .hero-object.obj-quote figcaption { display: block; margin-top: 0.55rem; font-family: var(--sans, 'Outfit'), sans-serif; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #c4a35a; }
  .hero--ed .hero-object.obj-quote figcaption em { font-family: var(--serif), serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: #f4efe4; margin-right: 0.35rem; }
}
@media (max-width: 980px) {
  .hero--ed .hero-object.obj-quote figcaption { font-size: 0; background: none; padding: 0; border: 0; }
  .hero--ed .hero-object.obj-quote figcaption::before { display: none; }
  .hero--ed .hero-object.obj-quote figcaption em { font-size: 0.9rem; color: #c4a35a; }
}

/* pass 20261010-1925: books seven-rules card (replaces duplicate cover) */
.rules-card{background:#0b1b3a;display:flex;align-items:center;justify-content:center;padding:clamp(48px,7vw,110px) clamp(24px,6vw,96px)}
.rules-inner{width:100%;max-width:520px;color:#f4efe4}
.rules-inner .eyebrow{color:#c4a35a}
.rules-list{list-style:none;margin:28px 0 0;padding:0}
.rules-list li{display:flex;align-items:baseline;gap:22px;padding:14px 0;border-top:1px solid rgba(196,163,90,.28)}
.rules-list li:last-child{border-bottom:1px solid rgba(196,163,90,.28)}
.rules-list .rn{font-family:Outfit,sans-serif;font-size:12px;letter-spacing:.18em;color:#c4a35a;min-width:2.2em}
.rules-list .rt{font-family:Fraunces,serif;font-size:clamp(26px,2.6vw,38px);line-height:1.1;color:#f4efe4}
.rules-foot{font-family:Fraunces,serif;font-size:clamp(18px,1.5vw,22px);margin:28px 0 8px;color:#f4efe4;opacity:.9}
.rules-meta{font-family:Outfit,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c4a35a;margin:0}

/* 2026-10-11: make the crossed-out half of the joke readable over the marina */
.joke-a { color: rgba(244,239,228,0.9); text-shadow: 0 1px 14px rgba(11,27,58,0.85), 0 0 2px rgba(11,27,58,0.9); }
.strike::after { height: 2.5px; box-shadow: 0 0 6px rgba(11,27,58,0.6); }
@media (max-width: 700px) { .joke-a { font-size: clamp(1.45rem, 6.4vw, 1.9rem); } }

/* 2026-10-11 13:26 pass: long struck lines stay on one line on phones (no orphan full stop) */
@media (max-width: 700px) { .joke-a--long { white-space: nowrap; font-size: clamp(1.05rem, 5.3vw, 1.45rem); } }

/* 2026-10-11 17:18 — hero index wraps cleanly on narrow screens */
.hero-index a { white-space: nowrap; }
@media (max-width: 720px) {
  .hero-index { flex-wrap: wrap; row-gap: 0.5em; line-height: 1.4; }
}


/* Books hero (12 Oct): a writer's desk at night behind the two covers.
   The lamp-lit typewriter sits in the gap between headline and shelf. */
.hero--book-photo .hero-photo {
  --grade: contrast(1.08) saturate(0.7) brightness(0.95) sepia(0.12);
}
.hero--book.hero--book-photo .veil {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.6) 0%, rgba(7, 16, 32, 0.08) 20%, rgba(7, 16, 32, 0) 34%),
    linear-gradient(90deg, rgba(7, 18, 36, 0.94) 0%, rgba(8, 20, 42, 0.88) 30%, rgba(9, 22, 46, 0.66) 41%, rgba(11, 27, 58, 0.18) 55%, rgba(11, 27, 58, 0.24) 72%, rgba(11, 27, 58, 0.5) 100%),
    linear-gradient(to top, rgba(7, 16, 32, 0.85) 0%, rgba(7, 16, 32, 0.25) 24%, rgba(7, 16, 32, 0) 44%);
}
@media (max-width: 980px) {
  .hero--book-photo .hero-photo { object-position: var(--pos-m, 50% 40%); }
  .hero--book.hero--book-photo .veil {
    background:
      linear-gradient(to bottom, rgba(7, 16, 32, 0.62) 0%, rgba(7, 16, 32, 0.2) 24%, rgba(7, 16, 32, 0.35) 46%),
      linear-gradient(to top, rgba(7, 16, 32, 0.97) 0%, rgba(8, 20, 42, 0.9) 40%, rgba(9, 22, 46, 0.62) 60%, rgba(11, 27, 58, 0.3) 80%);
  }
}

/* Secret mobile (12 Oct): the shortest headline on the site was set at the
   tall-object size; give it the weight its two short lines can carry. */
@media (max-width: 980px) {
  .hero--ed.ed-xl.obj-tall .joke-b { font-size: clamp(2.6rem, 12.2vw, 4.6rem); }
}
@media (max-width: 980px) and (max-height: 760px) {
  .hero--ed.ed-xl.obj-tall .joke-b { font-size: clamp(2.2rem, 9.6vw, 3.9rem); }
  .hero--ed.ed-xl.obj-tall .obj-frame { width: clamp(4.4rem, min(19vw, 13vh), 6.4rem); }
}

/* Green · "Second life first" chapter (12 Oct): photo right-aligned on a navy lead-in so copy never sits on the panel */
.chapter .lift-photo { object-position: 55% 40%; }
@media (min-aspect-ratio: 3/2) { .chapter .lift-photo { object-position: 38% 40%; } }
@media (max-aspect-ratio: 4/5) { .chapter .lift-photo { object-position: 82% 40%; } }

/* 2026-10-13 13:30 pass: Safehouse lab screens — three phones sit together, centred, instead of drifting apart on a 5-slot grid */
@media (min-width: 1100px) {
  .shots-row { justify-content: center; gap: clamp(3rem, 6vw, 6rem); }
  .shots-row .phone { width: min(15.5rem, 20vw); }
}

/* Pass 15:38 (2026-10-13) — Solar "Un panel usado" chapter: cream type over bright cloud plate */
.chapter--solar-why .frame img { filter: brightness(0.84) contrast(1.06) saturate(0.92); }
.chapter--solar-why .veil-left {
  background:
    linear-gradient(to bottom, rgba(7, 16, 32, 0.55) 0%, rgba(7, 16, 32, 0) 22%),
    linear-gradient(90deg, rgba(7, 16, 32, 0.92) 0%, rgba(7, 16, 32, 0.8) 30%, rgba(7, 16, 32, 0.5) 52%, rgba(7, 16, 32, 0.12) 78%, rgba(7, 16, 32, 0) 100%),
    linear-gradient(to top, rgba(7, 16, 32, 0.7) 0%, rgba(7, 16, 32, 0) 45%);
}
@media (max-width: 980px) {
  .chapter--solar-why .veil-left { background: linear-gradient(to top, rgba(7, 16, 32, 0.95) 0%, rgba(7, 16, 32, 0.8) 50%, rgba(7, 16, 32, 0.45) 100%); }
}
/* Licence credit inside a plate (CC BY-SA photos) */
.plate .ph-credit { position: absolute; right: 0.5rem; bottom: 0.4rem; z-index: 2; font-size: 0.55rem; letter-spacing: 0.04em; color: rgba(244, 239, 228, 0.82); background: rgba(7, 16, 32, 0.55); padding: 0.15rem 0.4rem; line-height: 1.3; }
.plate .ph-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Home Books door: book one + book two (coming), so the card isn't a repeat of the book chapter below (14 Oct) */
.lane-photo.contain.pair { gap: 1rem; padding: 1.5rem 1.2rem; }
.lane-photo.contain.pair img { height: 100%; max-width: calc(50% - 0.5rem); }
.lane-photo.contain.pair .pair-next { height: 86%; align-self: flex-end; filter: brightness(0.82) saturate(0.85); }
.lane:hover .lane-photo.contain.pair img { transform: none; }

/* 14 Oct 15:17 — Build hero on short phones: plan card shrinks and drops its caption so it never sits on the headline */
@media (max-width: 980px) and (max-height: 760px) {
  .hero--ed .obj-plan { width: min(8.6rem, 40vw); padding: 0.55rem 0.55rem 0.45rem; }
  .hero--ed .obj-plan .k { font-size: 0.48rem; }
  .hero--ed .hero-object:has(.obj-plan) figcaption { display: none; }
  .hero--ed .hero-object:has(.obj-plan) { margin-top: 0.4rem; }
}

/* 15 Oct 9:17 — Safehouse hero on short phones (375×667): the phone sat on the eyebrow and the struck line; smaller phone, tighter sub, so copy clears it */
@media (max-width: 980px) and (max-height: 760px) {
  .hero--ember .obj-phone { width: clamp(3.6rem, min(16vw, 10vh), 4.4rem); }
  .hero--ember .hero-object { margin-top: 0.3rem; }
  .hero--ember .hero-sub { font-size: 0.9rem; line-height: 1.5; }
}
/* 15 Oct 9:17 — Build plan card on the very shortest phones (360×640) */
@media (max-width: 980px) and (max-height: 660px) {
  .hero--ed .obj-plan { width: min(7.2rem, 34vw); padding: 0.45rem 0.45rem 0.35rem; }
  .hero--ed .hero-object:has(.obj-plan) { margin-top: 0.2rem; }
}

/* Books pass 16 Oct 15:17: author polaroid + finale cover (replaces duplicate format list) */
#author .author-photo { margin-top: clamp(2rem, 4vw, 3rem); }
#author .author-photo .mat { max-width: 17rem; transform: rotate(-1.5deg); }
.finale-cover { display: block; justify-self: end; width: min(15rem, 100%); transform: rotate(2deg); box-shadow: 0 40px 70px -30px rgba(11, 27, 58, 0.55); transition: transform .5s ease; }
.finale-cover:hover { transform: rotate(0deg) translateY(-4px); }
.finale-cover img { display: block; width: 100%; height: auto; }
@media (max-width: 980px) { .finale-cover { justify-self: start; width: 11rem; margin-top: 1rem; } }
@media (max-width: 760px) { #author .author-photo .mat { max-width: 14rem; } }

/* 18 Oct: on long step lists the photo half no longer stretches to the full column
   (soft, mostly-sky crops). It holds one screen tall and stays in view while you read. */
@media (min-width: 981px) {
  .halves .half-photo.stick {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

/* 18 Oct 11:17 — Wind how-it-works sticky photo: whole frame, no parallax overscan, so the turbine tip and the truck both stay in view */
.halves .half-photo .drift.drift--still { inset: 0; transform: none; }
.pos-photo-steps { object-position: 86% 30%; }

/* 18 Oct 13:17 — Markets calm-sea chapter: on narrow screens keep the darker left of the sea behind the headline (sun path glints sit centre-right) */
@media (max-width: 760px) { .pos-sea-glint { object-position: 6% 50%; } }

/* 19 Oct 09:17 — Secret Kickstarter visual: the real Painting No. 1 (from the Kickstarter film) instead of a third ship-in-globe with blurred side bars */
.kick-visual--painting { justify-self: center; width: 100%; max-width: min(25rem, 100%); }
.kick-visual--painting .ph { aspect-ratio: 680 / 952; padding: 0.7rem; background: #f4efe4; border: 1px solid rgba(196, 163, 90, 0.55); }
.kick-visual--painting img { object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 980px) { .kick-visual--painting { max-width: min(22rem, 100%); justify-self: start; } }

/* Solar 'Y entonces se van' plate (19 Oct 11:17): keep the departing lorry in frame on phones */
.pos-photo-leave { object-position: 50% 50%; transform: translateX(-10%); }
@media (max-width: 760px) { .pos-photo-leave { object-position: 62% 50%; transform: none; } }

/* 19 Oct 13:17 — Watch "Point the camera at the real thing": the sunset-filming shot sat straight under "Nobody needs another sunset" and repeated the hero's tripod camera.
   Now a camera screen showing an ordinary sunlit street, photo right on a navy lead-in so the headline never sits on the screen. */
.chapter .drift.drift--still { inset: 0; transform: none; }
.chapter .pos-camera-real { object-position: 100% 46%; }
@media (max-aspect-ratio: 4/3) { .chapter .pos-camera-real { object-position: 96% 46%; } }
@media (max-aspect-ratio: 4/5) { .chapter .pos-camera-real { object-position: 84% 46%; } }

/* ===== 19 Oct: Beauty Salon page (salon.html) + Build hub salon teaser ===== */
.obj-shop { width: clamp(20rem, 34vw, 31rem); }
.obj-shop .mat { display: block; padding: 0.6rem; background: var(--cream); box-shadow: 0 34px 70px -26px rgba(0,0,0,0.9); transform: rotate(-1deg); }
.obj-shop img { display: block; width: 100%; height: auto; aspect-ratio: 1448 / 1086; }
@media (max-width: 980px) {
  .hero.hero--shop { min-height: 0; }
  .hero--shop .hero-ui { position: relative; top: auto; padding-top: calc(var(--nav-h) + 1.4rem); grid-template-rows: auto auto auto; }
  .hero--shop .hero-copy--ed { grid-row: 1; align-self: start; padding-bottom: 1.6rem; }
  .hero--ed.hero--shop .hero-object { grid-row: 2; grid-column: 1; justify-self: stretch; align-self: start; width: auto; margin: 0 var(--pad) 1.4rem; }
  .hero--shop .obj-shop .mat { transform: none; padding: 0.35rem; }
  .hero--shop .obj-shop img { max-width: 1448px; }
  .hero--shop .hero-foot { grid-row: 3; padding-bottom: 1.4rem; }
}
.services { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 2.4vw, 2.4rem); }
.services li { padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--line); }
.services .n { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(11, 27, 58, 0.5); overflow-wrap: anywhere; }
.services h3 { margin-top: 0.5rem; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.95rem); letter-spacing: -0.03em; line-height: 1.02; font-weight: 520; }
.services p:not(.n) { margin-top: 0.4rem; font-size: 0.92rem; color: var(--ink); }
.services li.note h3 { font-style: italic; color: #8a6d2c; }
@media (max-width: 980px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.space { background: var(--navy-deep); color: var(--cream); padding: clamp(5rem, 11vh, 8rem) var(--pad); }
.space-head { max-width: 52rem; }
.space-head .display { margin-top: 1rem; font-size: clamp(2.6rem, 4.8vw, 5.2rem); max-width: 15ch; }
.space-head .display .dot { color: var(--gold); }
.space-head .sub { margin-top: 1rem; color: rgba(244, 239, 228, 0.72); }
.space-grid { margin-top: clamp(2.4rem, 6vh, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.plan-frame { margin: 0; max-width: 1122px; }
.plan-frame a { display: block; padding: clamp(0.5rem, 1vw, 0.9rem); background: var(--cream); border: 1px solid rgba(196, 163, 90, 0.55); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); cursor: zoom-in; transition: transform 0.6s var(--ease); }
.plan-frame a:hover { transform: translateY(-4px); }
.plan-frame img { display: block; width: 100%; height: auto; }
.plan-frame figcaption { margin-top: 0.9rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 228, 0.6); }
.plan-frame .hint { color: var(--gold); }
.figures { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.figures div { padding: 1rem 0 1.1rem; border-top: 1px solid rgba(244, 239, 228, 0.16); }
.figures div:last-child { grid-column: 1 / -1; }
.figures dt { font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.3rem); letter-spacing: -0.03em; line-height: 1; color: var(--cream); }
.figures dd { margin: 0.45rem 0 0; font-size: 0.9rem; color: rgba(244, 239, 228, 0.78); }
.figures dd span { display: block; margin-top: 0.2rem; font-size: 0.78rem; font-style: italic; color: rgba(244, 239, 228, 0.5); }
.cabins { list-style: none; margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 0.7rem; }
.cabins li { padding: 1rem 1rem 1.05rem; border: 1px solid rgba(196, 163, 90, 0.35); background: rgba(244, 239, 228, 0.03); display: flex; flex-direction: column; gap: 0.3rem; }
.cabins .n { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.cabins b { font-family: var(--serif); font-weight: 520; font-size: 1.22rem; letter-spacing: -0.02em; line-height: 1.1; color: var(--cream); }
.cabins i { font-family: var(--serif); font-size: 0.86rem; color: rgba(244, 239, 228, 0.55); }
.space-note { margin-top: 1.6rem; font-size: 0.92rem; color: rgba(244, 239, 228, 0.66); font-style: italic; font-family: var(--serif); max-width: 34rem; }
@media (max-width: 980px) { .space-grid { grid-template-columns: minmax(0, 1fr); } .plan-frame { max-width: 40rem; } }
@media (max-width: 420px) { .figures { grid-template-columns: minmax(0, 1fr); } .figures div:last-child { grid-column: auto; } }

/* Build hub: salon teaser shows the shopfront whole, on navy */
.half-shop { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.half-shop::after { display: none; }
.half-shop .mat { display: block; width: 100%; max-width: 1448px; padding: 0.5rem; background: var(--cream); box-shadow: 0 34px 70px -26px rgba(0,0,0,0.9); }
.half-shop img { display: block; width: 100%; height: auto; aspect-ratio: 1448 / 1086; object-fit: contain; }
@media (max-width: 980px) { .half-photo.half-shop { min-height: 0; } }
.spread--services { border-top: 1px solid var(--line); }