:root {
  --ease-stage: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.6, 1);
  --t-fast: 220ms;
  --t-mid: 460ms;
  --t-slow: 820ms;

  --stage-wide: 1240px;
  --stage-read: 740px;
  --stage-gut: clamp(18px, 4vw, 32px);
  --tile-r: clamp(18px, 2.2vw, 28px);
  --tile-gap: clamp(12px, 1.4vw, 20px);
  --chapter-pad: clamp(72px, 11vh, 148px);

  --nav-h: 73px;
  --rise: 28px;
  --tap: 44px;
}

.chapter {
  position: relative;
  padding: var(--chapter-pad) var(--stage-gut);
  overflow: clip;
}
.stage-in { max-width: var(--stage-wide); margin: 0 auto; width: 100%; }
.chapter.read > .stage-in { max-width: var(--stage-read); }
.chapter.dark { background: var(--night); color: var(--night-ink); }
.chapter.dark .lede, .chapter.dark .kicker { color: color-mix(in srgb, var(--night-ink) 78%, transparent); }
.chapter.tint { background: var(--surface-2); }
.chapter.flush { padding-top: 0; }

.stage-head { text-align: center; margin: 0 auto clamp(26px, 4vh, 52px); max-width: 920px; }
.stage-head.wide { max-width: 1060px; }
.kicker {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: var(--sp-3);
}
.chapter.dark .kicker { color: var(--accent); }
.stage-h {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.022em;
  margin: 0 auto; max-width: 17ch; text-wrap: balance;
}
.stage-h.xl { font-size: var(--fs-4xl); letter-spacing: -0.028em; max-width: 15ch; }
.lede {
  font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-soft);
  margin: var(--sp-4) auto 0; max-width: 46ch;
}

html.anim [data-rise] {
  opacity: 0; transform: translate3d(0, var(--rise), 0);
  transition: opacity var(--t-slow) var(--ease-stage), transform var(--t-slow) var(--ease-stage);
  transition-delay: var(--rise-d, 0ms);
}
html.anim [data-rise].seen { opacity: 1; transform: none; }

.slabs { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .slabs.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .slabs.three { grid-template-columns: repeat(3, 1fr); } }
.slab {
  position: relative; border-radius: var(--tile-r); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; min-height: 320px;
  transition: transform var(--t-mid) var(--ease-stage), box-shadow var(--t-mid) var(--ease-stage);
}
.chapter.dark .slab { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.slab:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.slab-copy { padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 38px) 0; text-align: center; }
.slab-h {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.018em;
  font-size: var(--fs-xl); line-height: var(--lh-head); margin: 0 0 var(--sp-3);
}
.slab-sub { color: var(--ink-soft); font-size: var(--fs-md); margin: 0; }
.chapter.dark .slab-sub { color: color-mix(in srgb, var(--night-ink) 72%, transparent); }
.slab-art { margin-top: auto; padding-top: clamp(20px, 3vw, 34px); }
.slab-art img { display: block; width: 100%; height: auto; }
.slab.bleed .slab-art { padding-top: 0; }
.slab-links { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }

.go {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap, 44px);
  font-size: var(--fs-md); font-weight: 600; color: var(--accent-deep); text-decoration: none;
}
.chapter.dark .go { color: var(--accent); }
.go::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-stage);
}
.go:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

.pin { position: relative; }
.pin-stage {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); display: grid; place-items: center; overflow: clip;
}
.pin-art { position: relative; width: min(100%, 980px); aspect-ratio: 16 / 10; }
.pin-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--tile-r); opacity: 0;
  transition: opacity var(--t-slow) var(--ease-stage), transform var(--t-slow) var(--ease-stage);
  transform: scale(1.04);
}
.pin-art img.on { opacity: 1; transform: none; }
.pin-art .frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--tile-r); opacity: 0;
  transition: opacity var(--t-slow) var(--ease-stage), transform var(--t-slow) var(--ease-stage);
  transform: scale(1.04);
}
.pin-art .frame.on { opacity: 1; transform: none; }
.pin-beats { position: relative; }
.pin-beat { min-height: 92vh; display: grid; align-items: center; }
.pin-beat .beat-card {
  max-width: 420px; background: var(--surface); border-radius: var(--tile-r);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-3);
}
.chapter.dark .pin-beat .beat-card { background: color-mix(in srgb, var(--night) 72%, var(--night-ink) 10%); }

.scrub { position: relative; height: calc(var(--scrub-steps, 4) * var(--scrub-step, 80vh)); }
.scrub.tight { --scrub-step: 60vh; }
.scrub-stage {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: clip; padding-bottom: clamp(10px, 2vh, 24px);
}
.scrub-frame {
  width: min(92vw, 1060px); aspect-ratio: 16 / 9; border-radius: var(--tile-r);
  overflow: hidden; position: relative; box-shadow: var(--shadow-3);
}
.scrub-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.scrub-frame img.on { opacity: 1; }

.scrub-cap {
  position: relative; margin: clamp(18px, 3vh, 30px) auto 0;
  width: min(90vw, 44ch); min-height: 3.2em; text-align: center;
}
.scrub-cap p {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  font-size: var(--fs-lg); line-height: 1.4; color: var(--ink-soft);
  transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease-stage), transform var(--t-mid) var(--ease-stage);
}
.scrub-cap p.on { opacity: 1; transform: none; }

.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px);
  gap: var(--tile-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--stage-gut) clamp(18px, 3vh, 30px);
  margin-inline: calc(var(--stage-gut) * -1);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; }
.rail-card {
  border-radius: var(--tile-r); overflow: hidden; position: relative;
  min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2.6vw, 30px); color: var(--night-ink);
  background: var(--night); isolation: isolate;
}
.rail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--t-slow) var(--ease-stage);
}
.rail-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 88%, transparent) 12%, color-mix(in srgb, var(--night) 10%, transparent) 62%);
}
.rail-card:hover img { transform: scale(1.045); }
.rail-card-k { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.rail-card-h { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: var(--lh-head); margin: var(--sp-2) 0 var(--sp-2); letter-spacing: -0.018em; }
.rail-card-s { font-size: var(--fs-sm); color: var(--night-ink); opacity: 0.92; margin: 0; }
.rail-nav { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.rail-dot {
  width: var(--tap, 44px); height: var(--tap, 44px); border: none; padding: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.rail-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
  transition: background var(--t-fast) var(--ease-stage), transform var(--t-fast) var(--ease-stage);
}
.rail-dot[aria-current="true"]::before { background: var(--accent-deep); transform: scale(1.35); }
.rail-nav { margin-top: 0; }

.versus { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .versus { grid-template-columns: 1fr 1fr; } }
.vs-card { border-radius: var(--tile-r); padding: clamp(26px, 3vw, 42px); background: var(--surface); box-shadow: var(--shadow-2); }
.vs-card.lead { box-shadow: var(--glow), var(--shadow-3); }
.vs-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); letter-spacing: -0.02em; line-height: 1; }
.vs-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.vs-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); }
.vs-list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--accent-deep); }

.ask { border-top: 1px solid var(--line); }
.ask summary {
  list-style: none; cursor: pointer; padding: var(--sp-4) 0; display: flex;
  justify-content: space-between; gap: var(--sp-4); align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease-stage);
}
.ask[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.ask p { margin: 0 0 var(--sp-4); color: var(--ink-soft); max-width: 62ch; }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav, 60);
  padding: var(--sp-3) var(--stage-gut);
  padding-top: calc(var(--sp-3) + var(--safe-t, 0px));
  background: color-mix(in srgb, var(--sky-1) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-stage), border-color var(--t-mid) var(--ease-stage),
              box-shadow var(--t-mid) var(--ease-stage);
}
.nav.lifted { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--line); }

@media (prefers-reduced-motion: reduce) {
  html.anim [data-rise] { opacity: 1; transform: none; transition: none; }
  .pin-stage, .scrub-stage { position: static; height: auto; }
  .scrub { height: auto; }
  .pin-art img, .scrub-frame img { opacity: 1; transform: none; transition: none; position: relative; }
  .pin-art { aspect-ratio: auto; }
  .pin-art img + img, .scrub-frame img + img, .pin-art .frame + .frame { display: none; }
  .pin-art .frame { opacity: 1; transform: none; transition: none; position: relative; }
  .rail-card:hover img, .slab:hover { transform: none; }
}

.hero-stage { padding-top: clamp(96px, 14vh, 170px); text-align: center; }
.hero-art {
  margin: clamp(30px, 5vh, 62px) auto 0; max-width: 1100px;
  border-radius: var(--tile-r); overflow: hidden; box-shadow: var(--shadow-3);
}
.hero-art img { display: block; width: 100%; height: auto; }
.hero-foot { margin: var(--sp-5) auto 0; color: var(--ink-faint); font-size: var(--fs-sm); max-width: 48ch; }
.hero-stage .slab-links { margin-top: var(--sp-5); }

.chapter.pin { padding-bottom: 0; }
.chapter .scrub { margin-bottom: calc(var(--chapter-pad) * -0.5); }
.rail-wrap { margin-bottom: calc(var(--chapter-pad) * -0.35); }

.shots { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 680px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .shots.three { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; border-radius: var(--tile-r); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-2); scroll-snap-align: center; }
.chapter.dark .shot { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.shot figcaption { padding: var(--sp-4) clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 24px); }
.shot b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin-bottom: var(--sp-2); }
.shot span { display: block; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.chapter.dark .shot span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: clamp(22px, 3vh, 34px); }
.chip {
  min-height: var(--tap, 44px); padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease-stage), border-color var(--t-fast) var(--ease-stage);
}
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

.stats { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr 1fr; }
@media (min-width: 880px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: clamp(20px, 2.6vw, 30px) var(--sp-3); border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.chapter.dark .stat { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.chapter.dark .stat span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

.notes { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .notes.three { grid-template-columns: repeat(3, 1fr); } }
.note { padding: clamp(22px, 2.8vw, 32px); border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.chapter.dark .note { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.note .mark { display: block; width: 38px; height: 38px; color: var(--accent-deep); margin-bottom: var(--sp-3); }
.chapter.dark .note .mark { color: var(--accent); }
.note h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin: 0 0 var(--sp-2); }
.note p { color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.55; margin: 0; }
.chapter.dark .note p { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

.catalogue { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 680px) { .catalogue { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .catalogue { grid-template-columns: repeat(3, 1fr); } }
.entry { padding: 0 0 var(--sp-4); overflow: hidden; border-radius: calc(var(--tile-r) * 0.6); background: var(--surface); box-shadow: var(--shadow-1); }
.entry[hidden] { display: none; }
.entry .k { display: block; font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.entry b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; margin: var(--sp-1) 0 var(--sp-2); }
.entry span { display: block; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }

.nav.stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--sky-1) 92%, transparent); }
.nav-in { display: flex; align-items: center; gap: var(--sp-4); }
.brand { white-space: nowrap; min-height: var(--tap); display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: none; gap: var(--sp-4); align-items: center; }
.nav-links a { text-decoration: none; font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; padding: var(--sp-2) 0; position: relative; display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; transition: right var(--dur-2) var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-tools { display: flex; align-items: center; gap: var(--sp-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow), var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); transform: translateY(-2px); }

.chapter.dark .btn-ghost { color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 42%, transparent); }
.chapter.dark .btn-ghost:hover { background: color-mix(in srgb, var(--night-ink) 12%, transparent); }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--ink); display: inline-grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { border-color: var(--line-strong); }
.lang { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink); height: var(--tap); min-height: var(--tap); padding: 0 var(--sp-3); }
.hero { padding: var(--sp-7) 0 var(--sp-5); }
.hero h1 { margin-top: var(--sp-4); }
.hero .lede { margin-top: var(--sp-4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-faint); }
.sun { color: var(--accent-deep); position: relative; white-space: nowrap; isolation: isolate; }
.sun::after { content: ""; position: absolute; left: -1.5%; right: -1.5%; bottom: -0.1em; height: 0.17em; background: color-mix(in srgb, var(--accent) 58%, transparent); border-radius: var(--r-pill); z-index: -1; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.proof { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.proof-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); padding: var(--sp-5) 0; }
section { padding: var(--sp-7) 0; }
.card .mark { width: 42px; height: 42px; color: var(--accent-deep); margin-bottom: var(--sp-4); }
.band-img { position: relative; border-radius: var(--r-4); overflow: hidden; box-shadow: var(--shadow-3); }
.band-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.band-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) var(--sp-5) var(--sp-5); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--night) 86%, transparent)); color: var(--night-ink); }
.band-cap h3 { font-size: var(--fs-xl); }
.band-cap p { font-size: var(--fs-md); opacity: 0.92; margin-top: var(--sp-2); max-width: 46ch; }
.tile .k { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.plan.lead { border-color: var(--accent); box-shadow: var(--glow); }
.plan .tag { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.plan .amt { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .amt small { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0; }
.plan .btn { margin-top: auto; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: var(--sp-4) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(45deg); flex: none; transition: transform var(--dur-1) var(--ease); }
details[open] summary::after { transform: rotate(-135deg); }
details p { padding-bottom: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-sm); max-width: var(--measure-wide); }
.cta { text-align: center; padding: var(--sp-8) 0; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta p { margin: var(--sp-4) auto 0; max-width: var(--measure-wide); color: var(--ink-soft); font-size: var(--fs-lg); }
.cta .hero-cta { justify-content: center; }
.foot { border-top: 1px solid var(--line); padding: var(--sp-6) 0 calc(var(--sp-6) + var(--safe-b)); font-size: var(--fs-sm); color: var(--ink-faint); }
.foot-grid { display: grid; gap: var(--sp-5); }
.foot h4 { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.foot a { text-decoration: none; display: block; padding: var(--sp-1) 0; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 639px) {
  .nav-tools .btn, .nav-tools #ground { display: none; }
  .squad figure:nth-child(n) { margin-left: 0; }
}
@media (min-width: 680px) {
  .proof-in { grid-template-columns: repeat(5, 1fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .day { grid-template-columns: 7rem 1fr; }
}
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav .icon-btn.burger { display: none; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--sp-7); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .band-cap { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
  .safe { grid-template-columns: repeat(2, 1fr); }
}

.notes { list-style: none; padding: 0; }
.notes > li {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: clamp(22px, 2.8vw, 32px); border-radius: var(--tile-r);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.chapter.dark .notes > li { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }
.notes > li > svg { flex: 0 0 auto; width: 34px; height: 34px; color: var(--accent-deep); }
.chapter.dark .notes > li > svg { color: var(--accent); }
.notes > li b {
  display: block; font-family: var(--font-display); font-size: var(--fs-lg);
  letter-spacing: -0.014em; margin-bottom: var(--sp-2);
}
.notes > li span { display: block; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.55; }
.chapter.dark .notes > li span { color: color-mix(in srgb, var(--night-ink) 74%, transparent); }

.mega-top {
  border: none; background: none; cursor: pointer; font: inherit;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-soft); min-height: var(--tap); padding: var(--sp-2) 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.mega-top::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease-stage);
}
.mega-top[aria-expanded="true"] { color: var(--ink); }
.mega-top[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

.mega {
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: calc(var(--z-nav, 50) - 1);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-stage), transform var(--t-mid) var(--ease-stage);
}
.mega[hidden] { display: none; }
.mega.open { opacity: 1; transform: none; pointer-events: auto; }
.mega-in { display: grid; gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3vw, 40px) var(--stage-gut); }
@media (min-width: 900px) { .mega-in { grid-template-columns: repeat(3, 1fr); } }
.mega-col { display: none; }
.mega-col.show { display: block; }
@media (min-width: 900px) { .mega-col { display: block; } }
.mega-col h3 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: -0.014em; margin: 0 0 var(--sp-2);
}
.mega-col > p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); max-width: 34ch; }
.mega-links { display: grid; gap: 2px; }
.mega-links a {
  min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1); border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: var(--fs-md); font-weight: 600;
  transition: background var(--t-fast) var(--ease-stage);
}
.mega-links a:hover { background: var(--surface-2); }
.mega-feature { display: block; margin-top: var(--sp-4); border-radius: var(--tile-r); overflow: hidden; position: relative; text-decoration: none; }
.mega-feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mega-feature span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-4) var(--sp-3);
  color: var(--night-ink); font-family: var(--font-display); font-weight: 700;
  background: linear-gradient(to top, color-mix(in srgb, var(--night) 90%, transparent), transparent);
}

@media (max-width: 899px) {
  .mega { top: var(--nav-h); bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mega-in { grid-template-columns: 1fr; padding-bottom: calc(var(--sp-7) + var(--safe-b, 0px)); }
  .mega-feature { display: none; }
}

.foot-grid a, .foot a {
  display: inline-flex; align-items: center; min-height: var(--tap, 44px);
}
.btn.btn-sm { min-height: var(--tap, 44px); }

.entry-art { display: block; }
.entry-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.entry .k, .entry b, .entry span:not(.entry-art), .entry p { padding-inline: var(--sp-4); }
.entry .k { margin-top: var(--sp-3); }

.guides { display: grid; gap: var(--tile-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .guides { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .guides { grid-template-columns: repeat(7, 1fr); } }
.guide { text-align: center; padding: var(--sp-4) var(--sp-3) var(--sp-4);
  border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1); }
.guide img { display: block; width: 72px; height: 72px; margin: 0 auto var(--sp-3);
  border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.guide b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2;
  letter-spacing: -0.012em; }
.guide-branch { display: block; margin: 2px 0 var(--sp-2); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.guide p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }

:where(.chapter, .nav, footer) :where(svg:not([width])) { width: 1.15em; height: 1.15em; }

.vs-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.vs-card .tag {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.vs-card .amt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.vs-card .amt small {
  font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm);
  color: var(--ink-faint); letter-spacing: 0;
}
.vs-card ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.vs-card li {
  font-size: var(--fs-md); color: var(--ink-soft);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
}
.vs-card li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-deep); }
.vs-card .btn { margin-top: auto; align-self: flex-start; }

.stat .k, .entry .k {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep);
}
.stat b, .entry b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; margin: var(--sp-1) 0 var(--sp-2); }
.stat p, .entry p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 1.4rem; line-height: 1; }
.wordmark sup { font-size: 0.55em; font-weight: 700; position: relative; top: -0.15em; vertical-align: super; line-height: 0; }
.brand-sub { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); letter-spacing: -0.01em; }
@media (max-width: 1099px) { .brand-sub { display: none; } }

.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); padding: 0.12em 0.4em; border-radius: 6px; word-break: break-word; }

.nav-links .nav-books { gap: var(--sp-2); color: var(--books-deep); }
.nav-links .nav-books img { width: 24px; height: 24px; border-radius: 6px; }
.nav-links .nav-books::after { background: var(--books); }

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap);
  padding: 6px var(--sp-4) 6px 6px; margin-bottom: var(--sp-4); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--books-glow);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); text-align: left;
  transition: transform var(--t-fast) var(--ease-stage);
}
.pill:hover { transform: translateY(-2px); }
.pill img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.pill b { color: var(--books-deep); font-weight: 800; }

.spec {
  max-width: 640px; margin: clamp(30px, 5vh, 62px) auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--tile-r);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.spec-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.spec-row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-3); align-items: baseline;
  padding: 12px var(--sp-4); border-bottom: 1px solid var(--line);
}
.spec-row:last-child { border-bottom: 0; }
.spec-k { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.spec-v { font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink); word-break: break-all; line-height: 1.5; }
.spec-v.ok { color: var(--ok); display: flex; align-items: center; gap: 0.45rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.bars { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 0.4rem; }
.bars i { width: 16px; height: 7px; border-radius: 2px; background: var(--line-strong); display: block; }
.bars i.on { background: var(--ok); }
@media (max-width: 420px) { .spec-row { grid-template-columns: 1fr; gap: 2px; } }

.spot { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .spot { grid-template-columns: 0.9fr 1.1fr; } }
.spot-art {
  width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: var(--tile-r); background: var(--spot-soft, var(--surface-2)); box-shadow: var(--spot-glow, var(--shadow-2));
}
.spot-art img { width: 76%; height: auto; }
.spot-copy .kicker, .spot-copy .stage-h, .spot-copy .lede { text-align: left; margin-left: 0; }
.spot-copy .stage-h { max-width: 14ch; }
.spot-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-4); }
.spot-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.spot-list svg { width: 26px; height: 26px; margin-top: 2px; color: var(--spot-accent, var(--accent-deep)); }
.spot-list b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin-bottom: 2px; }
.spot-list span { display: block; color: var(--ink-soft); }
.spot .slab-links { justify-content: flex-start; }
.spot.books { --spot-soft: var(--books-soft); --spot-accent: var(--books-deep); --spot-glow: var(--books-glow); }
.spot.books .kicker { color: var(--books-deep); }
.btn-books { background: var(--books); color: var(--books-ink); box-shadow: var(--books-glow); }
.btn-books:hover { transform: translateY(-2px); }
.go.books { color: var(--books-deep); }

a.entry { display: block; text-decoration: none; color: inherit; padding-block: var(--sp-2) var(--sp-4);
  transition: transform var(--t-mid) var(--ease-stage), box-shadow var(--t-mid) var(--ease-stage); }
a.entry:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.entry .tag { display: inline-block; vertical-align: 0.2em; margin-left: var(--sp-2); padding: 2px 10px; border-radius: var(--r-pill); font-style: normal; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--books); color: var(--books-ink); }
.entry.books { box-shadow: var(--books-glow); }
.entry.books .k { color: var(--books-deep); }

.check { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin: var(--sp-5) auto 0; max-width: 660px; }
.check input {
  flex: 1 1 17rem; min-height: 56px; padding: 0 var(--sp-4); font: inherit; font-family: var(--font-mono); font-size: 1rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.check input::placeholder { color: var(--ink-faint); }
.check .btn { min-height: 56px; }
.status { min-height: 1.6em; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-faint); text-align: center; }
.result { margin: var(--sp-5) auto 0; max-width: 880px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--tile-r); box-shadow: var(--shadow-2); overflow: hidden; }
.result[hidden] { display: none; }
.result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.result-domain { font-family: var(--font-mono); font-size: 1.05rem; word-break: break-all; }
.badge { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.result-item { padding: var(--sp-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.result-value { margin-top: 6px; word-break: break-word; }
.result-value.ok { color: var(--ok); }
.result-value.fail { color: var(--bad); }
.result-value.none { color: var(--ink-faint); }
.result-extra { padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.result-extra:last-child { border-bottom: 0; }
.result-extra .result-value { font-family: var(--font-mono); font-size: 0.86rem; }

.split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1.1fr 0.9fr; } }
.prose p { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-soft); }
.prose p + p { margin-top: var(--sp-4); }
.notes.pair { grid-template-columns: 1fr 1fr; }
.note .k { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--sp-2); }
.note.lead { box-shadow: var(--glow), var(--shadow-2); }
.notes.pair .note { padding: clamp(18px, 2.2vw, 26px); }
.notes.pair .note h3 { font-size: var(--fs-md); }
.notes.pair .note p { font-size: var(--fs-sm); }

.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 880px; counter-reset: s; display: grid; gap: var(--tile-gap); }
.steps > li {
  counter-increment: s; position: relative; border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-1);
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 2.8vw, 32px) clamp(22px, 2.8vw, 32px) calc(clamp(22px, 2.8vw, 32px) + 3rem);
}
.steps > li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: clamp(22px, 2.8vw, 32px); top: clamp(24px, 3vw, 35px);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--accent-deep);
}
.steps h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.014em; margin: 0 0 var(--sp-2); }
.steps p { color: var(--ink-soft); margin: 0; }
.chapter.dark .steps > li { background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: none; }

.tbl-wrap { overflow-x: auto; border-radius: var(--tile-r); background: var(--surface); box-shadow: var(--shadow-2); }
.tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { text-align: left; padding: 14px var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface-2); }
.tbl td:first-child { font-weight: 600; }
.tbl .yes { color: var(--ok); font-weight: 600; }
.tbl .no { color: var(--ink-faint); }
.tbl-wrap + .stats { margin-top: var(--tile-gap); }

.chapter.doc { text-align: left; }
.doc .stage-head { text-align: left; margin-left: 0; }
.doc .stage-h { margin-left: 0; max-width: 20ch; font-size: var(--fs-2xl); }
.doc-meta { margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--fs-sm); }
.legal { font-size: var(--fs-md); }
.legal > p { margin: var(--sp-3) 0 0; color: var(--ink-soft); }
.legal .lead { font-size: var(--fs-lg); color: var(--ink); line-height: 1.55; }
.legal h2 { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -0.018em; margin: var(--sp-6) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.legal h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.012em; margin: var(--sp-5) 0 var(--sp-2); }
.legal ul { list-style: disc; padding-left: 1.3em; margin: var(--sp-3) 0 0; color: var(--ink-soft); }
.legal li { margin: 6px 0; }
.legal .cap { text-transform: uppercase; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--ink); }
.legal .box { margin: var(--sp-4) 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); color: var(--ink-soft); }
.legal .tw { overflow-x: auto; margin: var(--sp-4) 0; border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow-1); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal th, .legal td { text-align: left; padding: 12px var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.legal th { background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.legal tbody tr:last-child td { border-bottom: 0; }
.legal .doc-foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-sm); }

.legal a, .prose a, .doc-meta a, .lede a {
  color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-block: 14px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.doc-meta a { padding-inline: 4px; }
.legal a:hover, .prose a:hover, .doc-meta a:hover { text-decoration-thickness: 2px; }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot .wordmark { font-size: 1.3rem; }
.foot-blurb { margin-top: var(--sp-3); max-width: 26ch; color: var(--ink-faint); }
.foot-base {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
}
@media (min-width: 680px) { .foot-grid.six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .foot-grid.six { grid-template-columns: 1.4fr repeat(5, 1fr); } }

.mega-feature.books { box-shadow: var(--books-glow); }
.mega-feature.books img { object-fit: cover; background: var(--books-soft); }
.mega-feature.books span { position: static; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--books); color: var(--books-ink); }
.mega-feature.books span::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.mega-links .books-link { color: var(--books-deep); gap: var(--sp-2); }
.mega-links .books-link img { width: 22px; height: 22px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand { min-height: 48px; min-width: var(--tap); }
.mega { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

.hero-cinema { min-height: calc(100vh - var(--nav-h)); display: grid; align-content: center; padding-top: clamp(64px, 10vh, 120px); }
.hero-cinema .stage-head { margin-bottom: 0; }
.aura { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 34%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%); }
.hero-cinema .stage-in { position: relative; z-index: 1; }

.genesis { width: clamp(132px, 16vw, 188px); aspect-ratio: 1; margin: 0 auto clamp(26px, 4vh, 44px); position: relative; }
.genesis svg { width: 100%; height: 100%; overflow: visible; }
.genesis .g-outer, .genesis .g-inner { fill: none; stroke-linejoin: round; }
.genesis .g-outer { stroke: var(--mark-ink); stroke-width: 5; }
.genesis .g-inner { stroke: var(--mark-line); stroke-width: 5; }
.genesis .g-fill { fill: var(--mark-ink); }
.genesis .g-word { fill: var(--mark-line); font-family: var(--font-display); font-weight: 650; font-size: 50px; letter-spacing: -0.02em; }
.genesis .g-sq { fill: var(--mark-line); font-family: var(--font-display); font-weight: 650; font-size: 26px; }
.genesis .g-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-origin: 60px 60px; }
html.anim .genesis .g-outer { stroke-dasharray: 460; stroke-dashoffset: 460; animation: g-draw 0.9s var(--ease-stage) 0.15s forwards; }
html.anim .genesis .g-inner { stroke-dasharray: 420; stroke-dashoffset: 420; animation: g-draw 0.8s var(--ease-stage) 0.55s forwards; }
html.anim .genesis .g-fill { transform-origin: 60px 60px; transform: scale(0); animation: g-fill 0.7s var(--ease-stage) 1.05s forwards; }
html.anim .genesis .g-word { opacity: 0; filter: blur(6px); animation: g-word 0.6s var(--ease-stage) 1.45s forwards; }
html.anim .genesis .g-sq { opacity: 0; transform: translateY(-14px); animation: g-sq 0.5s var(--ease-stage) 1.85s forwards; }
html.anim .genesis .g-ring { animation: g-ring 1.4s var(--ease-stage) 2.0s forwards; }
html.anim .genesis .g-ring.two { animation-delay: 2.25s; }
@keyframes g-draw { to { stroke-dashoffset: 0; } }
@keyframes g-fill { to { transform: scale(1); } }
@keyframes g-word { to { opacity: 1; filter: none; } }
@keyframes g-sq { to { opacity: 1; transform: none; } }
@keyframes g-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

[data-recede] { transform: scale(calc(1 - 0.08 * var(--recede, 0))); opacity: calc(1 - 0.6 * var(--recede, 0)); transform-origin: 50% 0; will-change: transform, opacity; }

.lit { max-width: 1080px; margin: 0 auto; text-align: center; }
.lit-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: -0.024em; margin: 0; text-wrap: balance; }
html.anim .lit-text .w { opacity: 0.16; transition: opacity var(--t-mid) var(--ease-stage); }
html.anim .lit-text .w.on { opacity: 1; }

.chip-count { text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }
.entry .entry-glyph { display: block; width: 34px; height: 34px; margin: var(--sp-4) var(--sp-4) 0; color: var(--accent-deep); }
.chapter.dark .entry .entry-glyph { color: var(--accent); }

.rail-card .k-pill { align-self: flex-start; margin-bottom: auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--night-ink) 16%, transparent); color: var(--night-ink); }
.rail-card.books .k-pill { background: var(--books); color: var(--books-ink); }
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }

.pin-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .pin-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: clamp(28px, 4vw, 64px); }
  .pin-grid .pin-beats { order: -1; }
}
@media (max-width: 979px) { .pin-grid .pin-stage { position: relative; top: 0; height: auto; padding-bottom: var(--sp-5); } .pin-grid .pin-beat { min-height: auto; padding-block: var(--sp-4); } }
.beat-card .k { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--sp-2); }
.chapter.dark .beat-card .k { color: var(--accent); }
.beat-card h3 { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 var(--sp-3); }
.beat-card p { margin: 0; color: var(--ink-soft); }
.pin-beat .beat-card { transition: opacity var(--t-mid) var(--ease-stage), transform var(--t-mid) var(--ease-stage); }
html.anim .pin-beat:not(.live) .beat-card { opacity: 0.35; transform: scale(0.98); }

.people { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; margin-top: var(--tile-gap); }
@media (min-width: 720px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .people { grid-template-columns: repeat(4, 1fr); } }


.zmark { width: 34px; height: 34px; display: block; }
.zmark .z-ink { fill: var(--mark-ink); }
.zmark .z-line { fill: var(--mark-line); }
.zmark .z-word { fill: var(--mark-line); font-family: var(--font-display); font-weight: 600; font-size: 50px; letter-spacing: -0.02em; }
.genesis.still .zmark { width: 100%; height: 100%; }

.hero-copy .stage-h.xl { max-width: none; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.hero-copy .lede { max-width: 40ch; margin-inline: auto; }

.stats.bare { gap: clamp(24px, 3vw, 48px) var(--tile-gap); padding-block: clamp(10px, 2vh, 24px) 0; }
.stats.bare .stat { background: none; box-shadow: inset 0 1px 0 var(--line-strong); border-radius: 0; padding: var(--sp-4) 0 0; }
.stats.bare .stat b { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.045em; }
.stats.bare .stat span { font-size: var(--fs-md); }
@media (min-width: 820px) { .stats.bare { grid-template-columns: repeat(4, 1fr); } }

.chapter.statement { padding-block: clamp(96px, 18vh, 220px); }
.chapter.statement .lit-text { font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.04em; font-weight: 700; }

.catalogue.mods { gap: var(--tile-gap); }
@media (min-width: 640px) { .catalogue.mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .catalogue.mods { grid-template-columns: repeat(4, 1fr); } }
.entry.mod { padding-bottom: var(--sp-5); border-radius: var(--tile-r); transition: transform var(--t-mid) var(--ease-stage), box-shadow var(--t-mid) var(--ease-stage); }
.entry.mod:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.entry.mod .entry-glyph { margin: var(--sp-5) var(--sp-4) 0; }
.entry.mod b { font-size: var(--fs-lg); letter-spacing: -0.02em; }

.rail-card.prod {
  justify-content: flex-start; text-decoration: none;
  background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--accent) 46%, var(--night)) 0%, var(--night) 62%);
}
.rail-card.prod::after { display: none; }
.rail-card.prod:nth-child(3n+2) { background: radial-gradient(120% 70% at 15% 0%, color-mix(in srgb, var(--accent) 40%, var(--night)) 0%, var(--night) 62%); }
.rail-card.prod:nth-child(3n) { background: radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--accent) 44%, var(--night)) 0%, var(--night) 64%); }
.rail-card.prod .k-pill { margin-bottom: 0; background: color-mix(in srgb, var(--night-ink) 14%, transparent); color: var(--night-ink); }
.rail-card.prod .glyph { width: 64px; height: 64px; color: var(--night-ink); margin: auto 0 var(--sp-4); opacity: 0.94; transition: transform var(--t-slow) var(--ease-stage); }
.rail-card.prod:hover .glyph { transform: translateY(-6px) scale(1.04); }
.rail-card.prod .rail-card-h { margin-top: 0; }
.rail-card.prod .visit { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-top: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); color: var(--night-ink); }
.rail-card.prod .visit::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.rail-card.prod:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 900px) { .rail { grid-auto-columns: min(78vw, 380px); } }

.pin-grid .pin-art { width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--tile-r);
  background: radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%), color-mix(in srgb, var(--night-ink) 4%, var(--night)); }
.frame .f-ln { stroke: color-mix(in srgb, var(--night-ink) 18%, transparent); stroke-width: 1.2; fill: none; }
.frame .f-hl { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.frame .f-nd { fill: color-mix(in srgb, var(--night-ink) 34%, transparent); }
.frame .f-nh { fill: var(--accent); }
.frame .f-key { fill: none; stroke: var(--night-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.frame .f-key rect { fill: color-mix(in srgb, var(--night) 70%, var(--accent) 30%); }
.frame .f-box { stroke: var(--accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.frame .f-scan { stroke: var(--accent); stroke-width: 2; opacity: 0.8; transform: translateY(70px); }
.pin-art .frame.on .f-scan { animation: scan 3.2s var(--ease-stage) infinite alternate; }
@keyframes scan { from { transform: translateY(70px); } to { transform: translateY(330px); } }
.cube .c-t { fill: color-mix(in srgb, var(--night-ink) 22%, var(--night)); }
.cube .c-l { fill: color-mix(in srgb, var(--night-ink) 12%, var(--night)); }
.cube .c-r { fill: color-mix(in srgb, var(--night-ink) 7%, var(--night)); }
.cube polygon { stroke: color-mix(in srgb, var(--night-ink) 26%, transparent); stroke-width: 1; stroke-linejoin: round; }
.cube.on .c-t { fill: var(--accent); }
.cube.on .c-l { fill: color-mix(in srgb, var(--accent) 66%, var(--night)); }
.cube.on .c-r { fill: color-mix(in srgb, var(--accent) 44%, var(--night)); }
.pin-grid .beat-card { max-width: 460px; }
.pin-grid .beat-card p { color: color-mix(in srgb, var(--night-ink) 76%, transparent); font-size: var(--fs-md); line-height: 1.55; }

.notes.pair-wide { grid-template-columns: 1fr; }
@media (min-width: 760px) { .notes.pair-wide { grid-template-columns: 1fr 1fr; } }
.people .note h3 { font-size: var(--fs-md); }
.people .note p { font-size: var(--fs-sm); }
.people .note .go { font-size: var(--fs-sm); }

.chapter.closing { padding-block: clamp(110px, 20vh, 240px); }
.chapter.closing .stage-h.xl { max-width: none; font-weight: 700; letter-spacing: -0.045em; }

.lost .genesis { width: clamp(96px, 12vw, 132px); }

@media (prefers-reduced-motion: reduce) {
  html.anim .genesis .g-outer, html.anim .genesis .g-inner, html.anim .genesis .g-fill,
  html.anim .genesis .g-word, html.anim .genesis .g-sq { animation: none; opacity: 1; filter: none; transform: none; stroke-dashoffset: 0; }
  html.anim .genesis .g-ring { animation: none; opacity: 0; }
  [data-recede] { transform: none; opacity: 1; }
  html.anim .lit-text .w { opacity: 1; transition: none; }
  html.anim .pin-beat:not(.live) .beat-card { opacity: 1; transform: none; }
  .pin-art .frame.on .f-scan { animation: none; }
  .entry.mod:hover, .rail-card.prod:hover .glyph { transform: none; }
}
@media (max-width: 979px) {
  html.anim .pin-grid .pin-beat:not(.live) .beat-card { opacity: 1; transform: none; }
}

.rail.bleed { --bleed: calc((100vw - min(100vw - 2 * var(--stage-gut), var(--stage-wide))) / 2); margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--bleed); scroll-padding-inline: var(--bleed); }
.rail.bleed > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .chips.tight .chip { padding: 0 var(--sp-3); font-size: var(--fs-xs); } .chips.tight { gap: 6px; } }