/* Page composition and local exceptions. Shared primitives: ../../design-system/. */
:root {
  --parlour-rest-ink: #CDD2BF; /* cream at 80% on #164B41 */
  --parlour-scene-ink: #94A897; /* cream at 55% on #164B41 */
  --parlour-closing-track: 419px;
  --parlour-closing-gap: var(--s-48);

  /* Quiet label text and amber text that must clear WCAG AA on the sage
     and frost tints, where --text-soft and --signal both fall short. */
  --text-on-tint: #5A574E;
  --signal-text: #7A5310;

    --s-40: 40px;

}

body {

   text-rendering: optimizeLegibility;
}

img {   height: auto; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.nowrap { white-space: nowrap; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0; background: var(--signal);
  z-index: 100; transition: width .06s linear;
}

.h-section {

  text-wrap: balance;
}

/* ============================================================
   COVER — cobalt slab. Two floors: text left + the shipped
   onboarding illustration right as a tilted collage object
   (design-brief §7 Depth & Layering). Metrics row spans below.
   ============================================================ */
.cover .inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--s-96) var(--gutter) var(--s-80);
  position: relative; z-index: 1;
}
.cover .split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: var(--s-64); align-items: start; margin-top: var(--s-48);
}
.cover h1 {

  --cover-title-size: clamp(40px, 4vw, 58px);
  --cover-title-leading: 1.08; --cover-title-tracking: -0.025em;

}
.cover h1 br { display: none; }
@media (min-width: 1025px) { .cover h1 br { display: block; } }
.cover .lede {

   max-width: 56ch;
  margin-top: var(--s-32);
}
.cover .rule {    margin: var(--s-40) 0 var(--s-20); }
.cover .cover-cta {
  display: inline-flex; align-items: center; gap: var(--s-12); margin-top: var(--s-32);
  font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: 0.01em;
  color: var(--depth); background: var(--on-dark); padding: 13px 22px; border-radius: 999px;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.cover .cover-cta:hover { transform: translateY(-1px); background: #FFFFFF; }
.cover .cover-cta svg { width: 18px; height: 18px; fill: currentColor; }
.cover .cover-cta .flag { font-family: var(--f-body); font-size: var(--label-size); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7A5310; background: var(--signal-tint); padding: 3px 8px; border-radius: 999px; }

.cover-art { position: relative; justify-self: end; width: min(100%, 360px); }
.cover-art img {
  width: 100%; height: auto; border-radius: 18px;
  transform: rotate(2.4deg);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.55);
}
.cover-art .art-cap {
  margin-top: var(--s-20); font-size: 13px; line-height: 1.5;
  color: var(--on-dark-soft); opacity: .85; max-width: 34ch;
  transform: none; text-align: left;
}
.cover .metrics-row {
  margin-top: var(--s-80);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-48);
}
.cover .metric .num {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--on-dark);
}
.cover .metric .label {
  font-size: 15px; font-weight: 500;
  line-height: 1.55; color: var(--on-dark-soft);
  margin-top: var(--s-12); max-width: 34ch;
}

/* CHAPTER SYSTEM */
.chapter { position: relative; }

.chapter.bg { background: var(--bg); }
.chapter.sage { background: var(--sage); }
.chapter.frost { background: var(--frost); }

.chapter .eyebrow { margin-bottom: var(--s-16); }
.chapter h2 { margin-bottom: var(--s-24); color: var(--text-primary); }
.chapter .body p { font-size: var(--body-size); line-height: 1.72; }
.chapter .body p + p { margin-top: var(--s-16); }
.chapter .body .named { font-weight: 600; color: var(--text-primary); }


/* Two-column prose. A section with no illustration beside its text does not
   strand the prose in a narrow measure: it fills the container in two
   columns, and the copy is written so the two columns come out level.
   One wrapper div per column, paragraphs inside. */
.body-2col { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: start; }
@media (max-width: 900px) {
  .body-2col { grid-template-columns: 1fr; gap: var(--s-16); }
}

/* EPILOGUE */
.epilogue { background: var(--depth); color: var(--on-dark); }
/* The quote and the deck are one statement: the promise, and the object that
   keeps it. They sit close, level at the top, sized so neither looks
   stranded on the cobalt. */
.epilogue .inner {
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--section-pad-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--parlour-closing-track);
  gap: var(--parlour-closing-gap); align-items: start;
}
.epilogue .lbl {
  font-family: var(--f-display); font-weight: 900;
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal-on-dark);
  margin-bottom: var(--s-24);
}
/* Three lines, one sentence each, broken by hand: the rhythm is the point.
   The size is capped at what the longest sentence clears in its column, so
   no line ever wraps into a fourth. */
.epilogue p.big {
  font-family: var(--f-quote); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 2.7vw, 36px); line-height: 1.32; color: var(--on-dark);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.epilogue .ep-sentence { display: block; text-wrap: balance; }
.epilogue .sub {
  font-family: var(--f-body); font-size: var(--body-size);
  line-height: 1.7; color: var(--on-dark-soft); max-width: 42ch; margin-top: var(--s-32);
}
/* Epilogue demo — the live card deck from the marketing site, ported:
   step through real shipped cards, hear the narrator, flip for the answer.
   The arrows are the site's own deck controls. */
.epi-demo { justify-self: center; width: min(100%, var(--parlour-closing-track)); }
.epi-stage { display: flex; align-items: center; gap: var(--s-16); }
.epi-card-wrap { perspective: 1400px; flex: 1; min-width: 0; }
.deck-arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid rgba(247,245,238,0.45); color: var(--on-dark);
  cursor: pointer; padding: 0;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.deck-arrow:hover { border-color: var(--on-dark); background: rgba(247,245,238,.08); transform: scale(1.05); }
.deck-arrow:active { transform: scale(.96); }
.deck-arrow svg { width: 22px; height: 22px; }
.epi-dots { display: flex; justify-content: center; gap: 7px; margin-top: var(--s-16); }
.epi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark); opacity: .3; transition: opacity .2s var(--ease); }
.epi-dots i.on { opacity: .95; }
.epi-card {
  position: relative; width: 100%; aspect-ratio: 62 / 82;
  transform-style: preserve-3d; transition: transform .65s var(--ease);
  cursor: default;
}
.epi-card.flipped { transform: rotateY(180deg); }
.epi-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #FBF4DE; border: 1.5px solid #C9B98F; border-radius: 22px;
  box-shadow: 0 34px 70px -30px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s-32) var(--s-32) var(--s-24);
}
.epi-back { transform: rotateY(180deg); }
.epi-label {
  font-family: var(--f-body); font-weight: 700; font-size: var(--label-size);
  letter-spacing: 0.14em; text-transform: uppercase; color: #8A6E3F;
}
.epi-prompt, .epi-answer {
  font-family: var(--f-quote); font-size: 26px; line-height: 1.38; color: #2A2118;
  margin: auto 0; padding: var(--s-16) 0; text-wrap: balance;
}
.epi-answer { font-size: 21px; }
.epi-foot { display: flex; align-items: center; gap: var(--s-12); width: 100%; justify-content: center; }
.epi-btn {
  font-family: var(--f-body); font-weight: 600; font-size: 14px; color: #6B5638;
  background: none; border: 1.5px solid #C9B98F; border-radius: 999px;
  padding: 9px 20px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.epi-btn:hover { background: #6B5638; color: #FBF4DE; border-color: #6B5638; }
.epi-speak {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.epi-speak svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.epi-speak.speaking { background: #6B5638; color: #FBF4DE; border-color: #6B5638; }
/* On a phone the deck is the width of a real card, so the prompt has to come
   down with it or every line breaks into two. */
@media (max-width: 620px) {
  .epi-face { padding: var(--s-20) var(--s-20) var(--s-16); }
  .epi-prompt { font-size: 20px; }
  .epi-answer { font-size: var(--body-size); }
}

/* NEXT CTA */


/* ============================================================
   CH1 · THE FIELD (niche) — the researched category as a
   scattered wall of real rival app icons filling the section
   around the text. Chaos is the message: a sea of apps dug
   through before the bet. Hover/focus a tile → what it does
   well, where it fails. Text column keeps its measure; icons
   live in the side bands and above/below, never under text.
   ============================================================ */
/* The field is not contained by the chapter, because the category is not.
   The side rails run past both the top and the bottom edge into the
   neighbouring sections; the clip still holds left and right, so the fly-in
   never streaks sideways across the page. Nothing spills in the middle
   band, where those sections' own headings and prose live. */
.fieldwrap { position: relative; overflow: visible; z-index: 3; }
@media (min-width: 901px) {
  .fieldwrap { clip-path: inset(-230px 0 -230px 0); }
}
.fieldwrap .inner { position: relative; z-index: 2; padding-bottom: 260px; }
.fieldwrap .body p { font-size: var(--body-large-size); line-height: 1.75; }
.fieldwrap h2 { max-width: none; }
.fieldwrap h2 { text-wrap: balance; }
/* Icons rest in the side bands and along the bottom; they fly in from
   outside the section when it enters view. --fx/--fy carry the offscreen
   start vector, zeroed once .in-view lands. */
.fico {
  position: absolute; z-index: 1;
  border: 0; padding: 0; cursor: pointer; background: none;
  width: var(--sz, 64px);
  transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg)));
  opacity: 0;
  filter: saturate(.82);
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.fieldwrap.in-view .fico {
  opacity: var(--op, .92);
  transform: translate(0, 0) rotate(var(--rot, 0deg));
  transition:
    transform .9s cubic-bezier(0.16, 0.84, 0.28, 1) calc(var(--i, 0) * 32ms),
    opacity .45s var(--ease) calc(var(--i, 0) * 32ms),
    filter .25s var(--ease);
}
.fico img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 23%; display: block; box-shadow: 0 10px 24px -12px rgba(28,27,24,0.35); }
.fieldwrap.in-view .fico:hover, .fieldwrap.in-view .fico:focus-visible {
  transform: translate(0, 0) rotate(0deg) scale(1.12);
  transition: transform .25s var(--ease), filter .25s var(--ease);
  filter: saturate(1); z-index: 30; opacity: 1;
}
.fico-sea { cursor: default; pointer-events: none; filter: saturate(.55); }
.fico .tip {
  position: absolute; top: 50%; left: calc(100% + 14px);
  transform: translateY(-50%);
  width: 232px; text-align: left;
  background: var(--text-primary); color: var(--on-dark);
  border-radius: var(--r-md); padding: var(--s-12) var(--s-16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease);
  z-index: 40;
}
.fico.tip-left .tip { left: auto; right: calc(100% + 14px); }
.fico:hover .tip, .fico:focus .tip { opacity: 1; visibility: visible; }
.fico .tip .t-name { font-family: var(--f-display); font-weight: 800; font-size: 13.5px; letter-spacing: 0.01em; }
.fico .tip .t-s, .fico .tip .t-w { font-size: 13px; line-height: 1.45; margin-top: 5px; display: block; }
.fico .tip .t-s::before { content: "+ "; color: #9CD4C4; font-weight: 700; }
.fico .tip .t-w::before { content: "− "; color: var(--signal-tint); font-weight: 700; }
.fico .tip .t-note { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); margin-top: 7px; display: block; }
@media (max-width: 900px) {
  .fieldwrap .inner { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }
  .fieldwrap.in-view .fico, .fico, .fico:hover, .fico:focus-visible { position: static; transform: none; filter: none; width: 52px; opacity: 1; }
  .fico .tip { position: fixed; left: 50%; right: auto; top: auto; bottom: 20px; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); z-index: 60; }
  .field-icons-mobile { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-40); justify-content: center; }
}

/* ============================================================
   CH2 · DE-RISK — the throwaway voice spike, shown as itself:
   a bare test build inside an iPhone 17 Pro, play buttons live.
   Text sits beside the device; the device carries the evidence.
   ============================================================ */
/* Heading, prose and device are one composition, so the whole left column
   balances against the phone instead of stranding it beside dead space. */
.spike { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-64); align-items: start; }
.spike-text { max-width: 62ch; }
.spike-text .lead { margin-bottom: var(--s-24); }
.spike-text h2 { margin-bottom: 0; }
.iphone {
  width: 300px; background: #3A3A3C;
  border-radius: 47px; padding: 10px;
  box-shadow: inset 0 0 3px rgba(255,255,255,0.35), 0 34px 70px -30px rgba(28,27,24,0.45);
  position: relative;
}
/* iPhone 17 Pro screen: 402×874 pt, kept proportional */
.iphone .screen {
  background: #F6F4EC; border-radius: 38px; overflow: hidden;
  position: relative; aspect-ratio: 402 / 874;
  display: flex; flex-direction: column;
}
.iphone .spike-ui { flex: 1; min-height: 0; }
.iphone .island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 28px; background: #000; border-radius: 999px; z-index: 5;
}
.iphone .statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 26px 0; font-size: 13px; font-weight: 600; color: #1C1B18;
  font-family: -apple-system, 'SF Pro Text', var(--f-body);
}
.iphone .sb-icons { display: flex; gap: 5px; align-items: center; }
.iphone .sb-icons svg { width: 16px; height: 12px; fill: #1C1B18; }
.spike-ui { padding: 22px 18px 0; font-family: -apple-system, 'SF Pro Text', var(--f-body); }
.spike-ui .su-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #111; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.spike-ui .su-sub { font-size: 11.5px; color: #8A8880; margin-top: 3px; }
.spike-ui .su-sect { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #8A8880; margin: 18px 4px 6px; }
.spike-list { background: #FFFFFF; border-radius: 12px; overflow: hidden; }
.srow {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 11px 14px; font: inherit; color: inherit;
}
.srow + .srow { border-top: 1px solid #F0EEE6; }
.srow .sp-btn {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--primary); color: var(--primary); background: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.srow:hover .sp-btn, .srow.playing .sp-btn { background: var(--primary); color: #fff; }
.srow .sp-btn svg { width: 12px; height: 12px; fill: currentColor; }
.srow .sp-btn .ico-pause { display: none; }
.srow.playing .sp-btn .ico-play { display: none; }
.srow.playing .sp-btn .ico-pause { display: block; }
.srow .sr-name { font-size: 14.5px; font-weight: 600; color: #111; line-height: 1.25; }
.srow .sr-model { display: block; font-size: 11px; font-weight: 400; color: #8A8880; margin-top: 1px; }
.srow .sr-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #7A5310; background: var(--signal-tint); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
/* The equaliser is playback feedback, not decoration: at rest it reads as
   four meaningless ticks, so it only exists while a row is playing. */
.srow .sr-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; width: 30px; visibility: hidden; }
.srow.playing .sr-bars { visibility: visible; }
.srow .sr-bars i { flex: 1; background: var(--primary); border-radius: 1px; height: 20%; transition: height .18s var(--ease); }
.srow.playing .sr-bars i:nth-child(1) { animation: eq .7s ease-in-out infinite alternate; }
.srow.playing .sr-bars i:nth-child(2) { animation: eq .6s .15s ease-in-out infinite alternate; }
.srow.playing .sr-bars i:nth-child(3) { animation: eq .8s .05s ease-in-out infinite alternate; }
.srow.playing .sr-bars i:nth-child(4) { animation: eq .55s .22s ease-in-out infinite alternate; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.iphone .homebar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 110px; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.85); }
@media (max-width: 900px) {
  .spike { grid-template-columns: 1fr; gap: var(--s-48); }
  .spike-text { max-width: 62ch; }
  .iphone-wrap { justify-self: center; }
}

/* ============================================================
   CH3 · THE SYSTEM — the docs-first operating model as folders
   with their real key documents peeking out. Beside the text.
   ============================================================ */
.sysgrid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-64); align-items: start; }
.sys-text { max-width: 54ch; }
/* The folder wall runs past the container's right edge: the tree is
   bigger than the page, which is the point being made. */
.folders {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-40) var(--s-48);
  width: calc(100% + var(--gutter) + 72px);
}
@media (min-width: 1441px) { .folders { width: calc(100% + var(--gutter) + 120px); } }
.folder { position: relative; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sysgrid.in-view .folder { opacity: 1; transform: none; }
.sysgrid.in-view .folder:nth-child(1) { transition-delay: .04s; }
.sysgrid.in-view .folder:nth-child(2) { transition-delay: .10s; }
.sysgrid.in-view .folder:nth-child(3) { transition-delay: .16s; }
.sysgrid.in-view .folder:nth-child(4) { transition-delay: .22s; }
.sysgrid.in-view .folder:nth-child(5) { transition-delay: .28s; }
.sysgrid.in-view .folder:nth-child(6) { transition-delay: .34s; }
.folder .f-tab {
  display: flex; align-items: center; gap: var(--s-12);
}
.folder .f-tab svg { width: 28px; height: 22px; flex: none; }
.folder .f-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.folder .f-count { font-family: var(--f-display); font-weight: 900; font-size: 15px; color: var(--depth); margin-left: auto; white-space: nowrap; }
.folder .f-docs { margin-top: var(--s-12); padding-left: 40px; display: flex; flex-direction: column; gap: 7px; }
.folder .f-doc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.4;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 9px;
}
.folder .f-doc::before {
  content: ""; width: 11px; height: 14px; flex: none;
  background: linear-gradient(135deg, var(--bg) 70%, var(--border) 70%);
  border: 1px solid var(--border); border-radius: 2px;
}
.folder .f-more { font-size: 15px; font-weight: 500; color: var(--text-secondary); padding-left: 40px; margin-top: 9px; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .sysgrid { grid-template-columns: 1fr; gap: var(--s-48); }
  .sys-text { max-width: 62ch; }
  .folders { width: 100%; }
}
@media (max-width: 560px) { .folders { grid-template-columns: 1fr; } }

/* ============================================================
   CH6 · THE INTERFACE — the three shipped store screenshots,
   run wider than the reading container so they carry the
   section: the game's face, a real prompt, the answer.
   ============================================================ */
.shipshots {
  max-width: 1320px; margin: var(--s-48) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32);
  align-items: start;
}
.shipshots img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl);
  box-shadow: 0 34px 70px -30px rgba(28,27,24,0.45);
}
@media (max-width: 720px) {
  .shipshots { grid-template-columns: 1fr; gap: var(--s-24); max-width: 420px; }
}

/* ============================================================
   CH4 · THE APP ICON — the documented field behind one mark,
   shown as a full-viewport row of candidates regenerated live
   from their saved prompts. The shipped pomegranate closes it.
   ============================================================ */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.iconstrip-wrap { margin-top: var(--s-64); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.iconstrip {
  display: flex; gap: var(--s-20); align-items: flex-end;
  width: max-content; min-width: 100%;
  justify-content: center; padding: var(--s-8) var(--s-24) var(--s-16);
}
.ic { display: flex; flex-direction: column; align-items: center; gap: var(--s-12); flex: none;
  opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease) calc(var(--i, 0) * 60ms), transform .5s var(--ease) calc(var(--i, 0) * 60ms); }
.iconstrip-wrap.in-view .ic { opacity: 1; transform: none; }
.ic img { width: clamp(96px, calc((100vw - 240px) / 8.6), 196px); height: auto; border-radius: 23%; box-shadow: 0 18px 40px -20px rgba(28,27,24,0.4); }
.ic .ic-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-secondary); }
/* The shipped mark stands at the same scale as the candidates it beat, so
   the row reads as one field; the ring and the green label mark it instead. */
.ic-shipped img { outline: 3px solid var(--primary); outline-offset: 6px; box-shadow: 0 26px 56px -22px rgba(28,27,24,0.5); }
.ic-shipped .ic-name { color: var(--primary); font-weight: 700; }
.iconstrip-cap { margin-top: var(--s-24); max-width: 72ch; }


/* ============================================================
   CH5 · THE ONBOARDING ART — two full-viewport rows, ten
   variants each: the scene above, the title block below.
   ============================================================ */
.obrow-cap { margin: var(--s-48) 0 var(--s-16); max-width: 88ch; text-wrap: balance; }

/* The zoom hint is only true where a pointer can hover. */
.on-hover { display: none; }
@media (hover: hover) { .on-hover { display: inline; } }
/* Both rows are galleries of equals: every candidate at the same tile size,
   at the source's own portrait ratio, never cropped. Hover lifts one tile
   out of the row large enough to actually read it. */
.obrow { display: flex; gap: 4px; align-items: flex-start; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.obrow.in-view { opacity: 1; transform: none; }
.obrow > span {
  flex: 1 1 0; min-width: 0; position: relative; display: block;
  border-radius: var(--r-md); overflow: hidden;
  transform-origin: center center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.obrow img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.obrow > span:hover, .obrow > span:focus-within {
  transform: scale(1.7); z-index: 20;
  box-shadow: 0 40px 90px -30px rgba(28,27,24,0.6);
}
/* Edge tiles grow inward so the zoom never leaves the viewport. */
.obrow > span:nth-child(-n+2) { transform-origin: left center; }
.obrow > span:nth-last-child(-n+2) { transform-origin: right center; }
/* The shipped scene keeps the row's size; the ring and the tag mark it.
   The tag is chrome, not artwork, so it holds its own size when the tile
   zooms instead of blowing up into a banner over the image. */
.obrow .ob-chosen::after {
  content: "shipped"; position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%); transform-origin: bottom center;
  font-family: var(--f-display); font-weight: 900; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark); background: var(--primary); border-radius: 999px; padding: 3px 8px;
  white-space: nowrap; pointer-events: none;
  transition: transform .3s var(--ease);
}
.obrow .ob-chosen:hover::after, .obrow .ob-chosen:focus-within::after {
  transform: translateX(-50%) scale(0.588);
}
.obrow .ob-chosen { outline: 3px solid var(--primary); outline-offset: -3px; z-index: 2; }
#appicon > div:first-child, #onbart > div:first-child, #interface > div:first-child { padding-bottom: 0; }
#interface > .inner:last-child { padding-top: var(--s-24); }
@media (max-width: 900px) {
  .obrow { flex-wrap: wrap; }
  .obrow > span { flex: 1 1 22%; }
  .obrow > span:hover, .obrow > span:focus-within { transform: scale(1.45); }
}

/* Content review funnel, restored with documented round counts. */
#content .inner { padding-bottom: var(--s-48); }
.funnel {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 26%, var(--sage) 82%, var(--sage) 100%);
  padding: var(--s-64) 0 0;
}
/* 600 shaft + 64 gap + 400 label column, centred as one block. */
.fn-stack { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.fn-shaft { max-width: 600px; }
.fn-intake, .fn-outfall { max-width: 600px; text-align: center; }
.fn-num {
  font-family: var(--f-display); font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(52px, 6.4vw, 96px);
}
.fn-intake .fn-num { color: var(--depth); }
.fn-outfall .fn-num { color: var(--primary); }
.fn-num .fn-tilde { font-size: .52em; vertical-align: 0.16em; opacity: .55; margin-right: 2px; }
.fn-cap {
  font-family: var(--f-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-tint);
  margin-top: var(--s-12);
}
.fn-intake { margin-bottom: var(--s-24); }
.fn-outfall { margin-top: var(--s-24); }

/* Schematic intermediate stages. End width is 42% of intake (21/50). */
.fn-band { background: var(--depth); }
.fn-b1 { height: 160px; clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 8% 100%); }
.fn-b2 { height: 216px; clip-path: polygon(8% 0%, 92% 0%, 84% 100%, 16% 100%); }
.fn-b3 { height: 160px; clip-path: polygon(16% 0%, 84% 0%, 76% 100%, 24% 100%); }
.fn-b4 { height: 120px; clip-path: polygon(24% 0%, 76% 0%, 71% 100%, 29% 100%); }
.fn-band { opacity: 0; transform: scaleY(.6); transform-origin: top; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.funnel.in-view .fn-band { opacity: 1; transform: none; }
.funnel.in-view .fn-b2 { transition-delay: .12s; }
.funnel.in-view .fn-b3 { transition-delay: .24s; }
.funnel.in-view .fn-b4 { transition-delay: .36s; }

/* A gate is a cut across the mass. The dashed rule spans exactly the
   funnel's width at that depth; the label hangs off its right end. */
.fn-gate { position: relative; height: 16px; }
.fn-gate::before {
  content: ""; position: absolute; top: 50%; height: 0;
  border-top: 2px dashed var(--signal);
  opacity: 0; transition: opacity .4s var(--ease);
}
.funnel.in-view .fn-gate::before { opacity: 1; }
.fn-g1::before { left: 8%; right: 8%; }
.fn-g2::before { left: 16%; right: 16%; }
.fn-g3::before { left: 24%; right: 24%; }
.funnel.in-view .fn-g1::before { transition-delay: .16s; }
.funnel.in-view .fn-g2::before { transition-delay: .28s; }
.funnel.in-view .fn-g3::before { transition-delay: .40s; }

/* Anchored to the top of its cut and flowing down past the band it gates,
   so the reading order is gate line, then what that gate rejects. */
.fn-label {
  position: absolute; left: calc(100% + var(--s-64)); top: 0; width: 400px;
  opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.funnel.in-view .fn-label { opacity: 1; }
.funnel.in-view .fn-g1 .fn-label { transition-delay: .20s; }
.funnel.in-view .fn-g2 .fn-label { transition-delay: .32s; }
.funnel.in-view .fn-g3 .fn-label { transition-delay: .44s; }
.fn-label .fn-name {
  font-family: var(--f-display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary);
  display: block;
}
.fn-label .fn-name i { font-style: normal; color: var(--signal-ink); margin-right: 9px; }
.fn-label .fn-what { display: block; font-size: var(--body-size); line-height: 1.6; color: var(--text-primary); margin-top: var(--s-8); }
.fn-label .fn-honest {
  display: block; font-size: 15px; line-height: 1.55; color: #8A6210;
  border-left: 2px solid var(--signal-tint); padding-left: var(--s-12); margin-top: var(--s-12);
}
.fn-foot {
  max-width: var(--content-std); margin: 0 auto; padding: var(--s-48) var(--gutter) var(--s-80);
  text-align: center; font-size: 17px; line-height: 1.6; color: var(--text-primary);
}
.fn-foot b { font-weight: 700; }
@media (max-width: 1210px) {
  .fn-label { position: static; transform: none; width: auto; max-width: 46ch; padding-top: var(--s-16); }
  .fn-gate { height: auto; padding-bottom: var(--s-24); }
  .fn-gate::before { position: relative; display: block; top: 0; margin-bottom: var(--s-16); }
  .fn-g1::before, .fn-g2::before, .fn-g3::before { left: 0; right: 0; width: 100%; }
  .fn-shaft, .fn-intake, .fn-outfall { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-band, .fn-label, .fn-gate::before { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   CH6 · THE MOTION — one defect, two sensors. A before/after
   switch drives both a live replay of the card morph (CSS
   reconstruction of the retired spring vs the shipped easeOut)
   and the extracted-frames strip below it, full width.
   ============================================================ */
.motionlab { margin-top: var(--s-64); --pgreen: #164B41; --pcream: #FBF4DE; }
.mswitch {
  display: inline-flex; background: var(--bg); border-radius: 999px; padding: 4px;
  border: 1px solid var(--border);
}
.mswitch button {
  font-family: var(--f-display); font-weight: 800; font-size: 13.5px; letter-spacing: 0.02em;
  border: 0; background: none; cursor: pointer; color: var(--text-secondary);
  padding: 9px 20px; border-radius: 999px; transition: background .18s var(--ease), color .18s var(--ease);
  display: flex; align-items: center; gap: 8px;
}
.mswitch button code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 400; }
.mswitch button[aria-pressed="true"] { background: var(--text-primary); color: var(--on-dark); }
.motionlab .mlab-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-64); align-items: start; margin-top: var(--s-32); }
.mstage-wrap { position: relative; }
.mfilm { width: 100%; min-width: 0; }
@media (max-width: 1024px) {
  .mfilm { overflow-x: auto; }
  .mfilm svg.dm-film { min-width: 760px; }
}
/* The stage keeps the phone's proportions and the game's own deep green. */
.mstage {
  position: relative; width: 100%; aspect-ratio: 402 / 874;
  background: var(--pgreen); border-radius: 24px; overflow: hidden;
}
.mstage .rest-line {
  position: absolute; left: 10%; right: 10%; top: 44%;
  border-top: 1.5px dashed rgba(251,244,222,0.6);
}
.mstage .rest-lbl {
  position: absolute; left: 10%; top: 44%; transform: translateY(-100%);
  font-family: var(--f-display); font-weight: 900; font-size: var(--label-size); letter-spacing: 0.12em; color: var(--parlour-rest-ink);
  padding-bottom: 4px;
}
.mcard {
  position: absolute; left: 50%; top: 44%;
  width: 46%; aspect-ratio: 62 / 88;
  margin-left: -23%; margin-top: -32.6%;
  background: var(--pcream); border: 1.5px solid #C9B98F; border-radius: 12px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5);
  transform-origin: center;
}
.mcard::before, .mcard::after {
  content: ""; position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: #B4A375;
}
.mcard::before { top: 8%; left: 10%; }
.mcard::after { bottom: 8%; right: 10%; }
/* BEFORE — the defect lives on the scene stitch: scene 1 overshoots and has
   no time to swing back; scene 2 draws the card parked. The keyframe cut at
   72% IS the defect: a visible jump. */
.mstage.play-defect .mcard { animation: deal-defect 2.1s linear both; }
.mstage.play-fix .mcard { animation: deal-fix 1.4s cubic-bezier(0.0, 0.0, 0.2, 1) both; }
@keyframes deal-defect {
  0%    { transform: translateY(120%) scale(.72); animation-timing-function: cubic-bezier(.2,.6,.35,1); }
  48%   { transform: translateY(-21%) scale(1.045); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  71.9% { transform: translateY(-12%) scale(1.02); }
  72%   { transform: translateY(0) scale(1); }
  100%  { transform: translateY(0) scale(1); }
}
@keyframes deal-fix {
  0%   { transform: translateY(120%) scale(.72); }
  70%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
.mstage .scene-tag {
  position: absolute; right: 10%; bottom: 6%;
  font-family: var(--f-display); font-weight: 900; font-size: var(--label-size); letter-spacing: 0.14em;
  color: var(--parlour-scene-ink); text-transform: uppercase;
}
/* Replay belongs to the stage it replays, so it sits inside the phone at the
   foot of the screen, in the game's own cream. */
.mreplay {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; z-index: 3;
  font-family: var(--f-display); font-weight: 800; font-size: 13px; color: var(--pcream);
  background: rgba(251,244,222,0.10); border: 1.5px solid var(--pcream); border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mreplay:hover { background: var(--pcream); color: var(--pgreen); }
.mreplay svg { width: 14px; height: 14px; fill: currentColor; }

.mfilm .film-views > div { display: none; }
.mfilm .film-views > div.active { display: block; }
.dm-film { width: 100%; height: auto; display: block; margin-top: var(--s-12); }
.dm-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-primary); background: rgba(28,27,24,0.05); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.dm-verdict { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: 0.005em; }
.mfilm .film-head { display: flex; align-items: baseline; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-12); }
.mfilm .v-defect .dm-verdict { color: var(--signal-text); }
.mfilm .v-fix .dm-verdict { color: var(--primary); }
/* Chart label hierarchy: (1) the verdict in the head, (2) the one callout
   at the scene cut, (3) quiet structure — rest line, scene bands, frame
   numbers. Nothing else earns a label. */
.dm-restline { stroke: var(--depth); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .45; }
.dm-restlabel { fill: var(--depth); font-family: var(--f-display); font-weight: 900; font-size: 13px; letter-spacing: .12em; opacity: .8; }
.dm-scene { fill: var(--text-on-tint); font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; }
.dm-cutline { stroke-width: 1.5; stroke-dasharray: 7 6; }
.dm-callout { font-family: var(--f-display); font-weight: 900; font-size: 13px; letter-spacing: .15em; }
.v-defect .dm-cutline { stroke: #9A6B12; }
.v-defect .dm-callout { fill: var(--signal-text); }
.v-fix .dm-cutline { stroke: var(--primary); }
.v-fix .dm-callout { fill: var(--primary); }
.dm-target { fill: var(--depth); }
.dm-fnum { fill: var(--text-on-tint); font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.dm-cardbody { fill: var(--bg); stroke: var(--quiet); stroke-width: 1.2; }
.dm-pip { fill: var(--text-soft); }
.dm-path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-defect .dm-path, .v-defect .dm-card--rest .dm-cardbody { stroke: var(--signal); }
.v-fix .dm-path, .v-fix .dm-card--rest .dm-cardbody { stroke: var(--primary); }
.dm-peak { fill: var(--signal); }
@media (max-width: 900px) {
  .motionlab .mlab-grid { grid-template-columns: 1fr; gap: var(--s-48); }
  .mstage-wrap { max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .mstage.play-defect .mcard, .mstage.play-fix .mcard { animation: none; transform: none; }
}

/* ============================================================
   CH7 · THE WEBSITE — the artifacts already in the repo
   (docs, saved image prompts, illustrations, narrated audio)
   assembling into the site: pieces on the left, the live page
   on the right, one day of work between them.
   ============================================================ */
.assembly { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: var(--s-80); align-items: start; --p: 0; }
.web-left .body { max-width: 54ch; }
/* The pieces sit on a faint jigsaw field: the artifacts already in the repo
   were the site's parts before the site existed. The cue stays in the
   background at low contrast so it reads only once you look for it. */
.pieces-zone {
  position: relative; height: 430px; margin-top: var(--s-48);
  --jig: rgba(30,61,123,0.13);
}
.pieces-zone::before {
  content: ""; position: absolute; inset: -6% -4%;
  background-image:
    repeating-linear-gradient(90deg, var(--jig) 0 1.5px, transparent 1.5px 33.333%),
    repeating-linear-gradient(0deg,  var(--jig) 0 1.5px, transparent 1.5px 33.333%);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 48%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 48%, #000 30%, transparent 78%);
  pointer-events: none;
}
/* The tabs and blanks that make the grid read as a puzzle rather than a chart. */
.pieces-zone::after {
  content: ""; position: absolute; inset: -6% -4%;
  background-image:
    radial-gradient(circle 7px at 33.333% 16.5%, var(--jig) 0 6px, transparent 6.5px),
    radial-gradient(circle 7px at 66.666% 49.5%, var(--jig) 0 6px, transparent 6.5px),
    radial-gradient(circle 7px at 33.333% 83%,   var(--jig) 0 6px, transparent 6.5px),
    radial-gradient(circle 7px at 16.5% 33.333%, var(--jig) 0 6px, transparent 6.5px),
    radial-gradient(circle 7px at 49.5% 66.666%, var(--jig) 0 6px, transparent 6.5px),
    radial-gradient(circle 7px at 83% 33.333%,   var(--jig) 0 6px, transparent 6.5px);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 48%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 48%, #000 30%, transparent 78%);
  pointer-events: none;
}
.browser {
  background: var(--bg); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(30,61,123,0.4);
}
.browser .chrome-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.browser .dots { display: flex; gap: 5px; }
.browser .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.browser .urlbar {
  flex: 1; background: var(--bg); border-radius: 999px; padding: 4px 14px;
  font-size: 12.5px; color: var(--text-secondary); font-family: var(--f-body);
}
.browser img { width: 100%; display: block; }
/* Tile pieces: big icon + name, converging on the site as you scroll.
   Each tile flies from (--dx, --dy, --rot) to its resting spot; the JS
   scroll handler drives --p from 0 to 1. */
.pieces-m { display: contents; }
.piece {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 132px; text-align: center;
  transform: translate(calc(var(--dx) * (1 - var(--p))), calc(var(--dy) * (1 - var(--p)))) rotate(calc(var(--rot) * (1 - var(--p))));
  opacity: calc(0.25 + 0.75 * var(--p));
  will-change: transform;
}
.piece .p-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.35;
  color: var(--text-primary); word-break: break-word;
}
.piece .p-sub { display: block; font-family: var(--f-body); font-size: 13px; color: var(--text-on-tint); }
.piece-doc .p-icon { width: 64px; height: 78px; }
.piece-img { width: 150px; }
.piece-img img { width: 150px; height: 106px; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 14px 30px -16px rgba(28,27,24,0.4); }
.piece-audio .p-icon { width: 64px; height: 64px; }
@media (max-width: 900px) {
  .assembly { display: flex; flex-direction: column; gap: var(--s-32); }
  .pieces-zone { height: auto; }
  .pieces-zone::before, .pieces-zone::after { display: none; }
  .piece { position: static; transform: none; opacity: 1; flex-direction: column; }
  .assembly .pieces-m { display: flex; flex-wrap: wrap; gap: var(--s-24); justify-content: center; }
}

/* ============================================================
   CH8 · THE RELEASE — the outcome as an emblem: the app's own
   wreath (generated in the brand's watercolor voice for the
   release announcement) around the shipped icon.
   ============================================================ */
/* The release emblem and the epilogue deck stand in the same right-hand
   track, on the same container width, so the wreath reads as sitting
   directly above the card that follows it. The prose fills what is left. */
.relgrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--parlour-closing-track); gap: var(--parlour-closing-gap); align-items: start; }
.rel-text { max-width: none; }
.emblem { width: min(76vw, 360px); justify-self: center; opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.relgrid.in-view .emblem { opacity: 1; transform: none; }
/* The icon is centred on the wreath's hollow, measured from the asset:
   the leaf ring spans 49.5% of the image height, and the bow below it
   carries no cavity. Positioning is relative to the ring, not to the
   emblem block, so the caption underneath cannot drag the icon down. */
.emblem .e-ring { position: relative; display: block; }
.emblem .wreath { width: 100%; display: block; }
.emblem .e-icon {
  position: absolute; top: 49.5%; left: 50%; transform: translate(-50%, -50%);
  width: 31%; border-radius: 23%; box-shadow: 0 16px 34px -16px rgba(28,27,24,0.4);
}
/* The asset carries 7% of empty canvas under the bow, so the caption sits
   tight against the image and still reads as a comfortable gap. */
.emblem .e-caption { display: block; margin-top: calc(var(--s-8) * -1); text-align: center; }
.emblem .e-approved { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.emblem .e-sub { display: block; font-family: var(--f-body); font-size: 15px; color: var(--text-secondary); margin-top: 6px; }
/* RESPONSIVE */
@media (max-width: 1024px) {
  .cover h1 { max-width: 100%; }
  .cover .split { grid-template-columns: 1fr; }
  .cover-art { justify-self: start; width: min(100%, 320px); }
  .cover .metrics-row { grid-template-columns: 1fr; gap: var(--s-32); margin-top: var(--s-64); }
  /* The final sections share their desktop track and their stacked centre.
     Release prose fills the tablet width while its heading and emblem
     establish the same central axis as the epilogue's quote and live deck. */
  .relgrid, .epilogue .inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
  .rel-text { max-width: none; }
  #release .lead { max-width: 680px; margin: 0 auto; text-align: center; }
  .release-copy { columns: 2; column-gap: var(--s-40); }
  .release-copy p { orphans: 3; widows: 3; }
  .emblem, .epilogue .epi-demo { justify-self: center; }
  .ep-copy { max-width: 760px; width: 100%; justify-self: center; text-align: center; }
  .epilogue .sub { max-width: 52ch; margin-inline: auto; }
}
@media (max-width: 640px) {
  .mswitch button code { display: none; }
  .cover .rule {  margin: var(--s-32) 0 var(--s-16); }
  .relgrid, .epilogue .inner { gap: var(--s-32); }
  .release-copy { columns: auto; }
  .emblem { width: min(100%, 292px); }
  .epilogue .sub { margin-top: var(--s-24); }
}
@media (prefers-reduced-motion: reduce) {
  .fieldwrap .fico, .fieldwrap.in-view .fico, .folder, .ic, .obrow, .piece, .browser, .emblem {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  /* The gallery zoom stays: it is the only way to read a tile. It just
     arrives instantly instead of easing. */
  .obrow > span { transition: none; }
}