/* creel.fish — page layout. Uses ONLY tokens from tokens.css; no colour is
   minted here (web/check-site.sh enforces it). Direction: "the specimen
   plate" — web/mockups/DECISIONS.md §10–§12. */

/* Paper ground: the token colour stays the colour; the scan sits on top so
   the page reads as a page. Fixed so it does not swim under the motion.
   The journal home overrides this per-mode (see JOURNAL HOME below). */
body { background: var(--fj-paper) url(/img/Gemini_Generated_Image_e9ilfne9ilfne9il.jpeg) center top / 2000px auto fixed; }
.contact-plate { max-width: 420px; margin: 0; }

/* ---- chrome — 60px header, shared by every page (README "Header") ---- */
header.site {
  height: var(--w-header-h); display: flex; align-items: center;
  border-bottom: var(--fj-rule-solid); background: var(--fj-paper);
}
header.site .row { display: flex; align-items: center; gap: var(--w-space-xl); width: 100%; }
header.site .wordmark { font: 500 24px/1 var(--fj-serif); letter-spacing: -.02em; color: var(--fj-ink); text-decoration: none; }
header.site nav { display: flex; align-items: center; gap: var(--w-space-xl); margin-left: var(--w-space-sm); }
header.site nav a.nav-link { color: var(--fj-ink-2); text-decoration: none; font: 400 var(--w-t-meta)/1 var(--fj-body); }
header.site nav a.nav-link:hover { color: var(--fj-ink); }
header.site nav a[aria-current="page"] { color: var(--fj-ink); }
header.site .w-btn { margin-left: auto; padding: 10px 16px; font-size: var(--w-t-meta); }
@media (max-width: 640px) { header.site nav a.nav-link { display: none; } }

footer.site { padding-block: var(--w-space-2xl); border-top: var(--fj-rule-solid); margin-top: var(--w-space-3xl); }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--w-space-md); font-size: var(--w-t-meta); color: var(--fj-ink-3); }
.footer-row a { color: var(--fj-ink-3); }
.footer-links { display: flex; gap: var(--w-space-lg); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

a { color: var(--fj-ink); }
p { margin: 0 0 var(--w-space-lg); }
section { padding-block: var(--w-space-3xl); border-top: var(--fj-rule-solid); }
section.hero { border-top: 0; }
.section-kicker { display: block; margin-bottom: var(--w-space-md); }
h2.w-display { margin-bottom: var(--w-space-xl); }

/* A plate PNG is line art on a near-white ground. Multiplying onto the paper
   drops the white out and tints the linework to sit on the page. */
.plate-img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* ---- trust block (used by support.html #contact) --------------------- */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--w-gutter); align-items: start; }
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-statement { font: 400 var(--w-t-subtitle)/1.4 var(--fj-serif); max-width: 32em; }

/* ---- iOS block, footnotes (features.html) ---------------------------- */
.ios-statement { font: 400 var(--w-t-subtitle)/1.4 var(--fj-serif); max-width: 30em; }
ol.footnotes { margin: 0; padding-left: 1.4em; color: var(--fj-ink-3); font-size: var(--w-t-meta); max-width: var(--w-max-text); }
ol.footnotes li { margin-bottom: var(--w-space-sm); }
ol.footnotes li:target { color: var(--fj-ink); }

/* ---- features / support pages --------------------------------------- */
.contents { list-style: none; margin: 0 0 var(--w-space-2xl); padding: 0; display: flex; flex-wrap: wrap; gap: var(--w-space-sm) var(--w-space-lg); }
.contents a { font-size: var(--w-t-meta); color: var(--fj-ink-2); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--w-gutter); align-items: start; padding-block: var(--w-space-2xl); border-top: var(--fj-rule-dashed); }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }
.feature h3 { font: 500 var(--w-t-title)/1.15 var(--fj-serif); margin: 0 0 var(--w-space-md); }
.feature p { color: var(--fj-ink-2); }
.feature .shot img { display: block; width: 100%; max-width: 320px; height: auto; border: var(--fj-rule-solid); border-radius: var(--fj-radius); }
table.info { width: 100%; max-width: var(--w-max-text); border-collapse: collapse; }
table.info tr { border-bottom: var(--fj-rule-solid); }
table.info th, table.info td { text-align: left; padding: var(--w-space-md) 0; font-weight: 400; vertical-align: top; }
table.info th { color: var(--fj-ink-3); font-size: var(--w-t-meta); width: 40%; }
table.plans { width: 100%; max-width: var(--w-max-text); border-collapse: collapse; }
table.plans th, table.plans td { text-align: left; padding: var(--w-space-md) var(--w-space-md) var(--w-space-md) 0; border-bottom: var(--fj-rule-solid); font-weight: 400; vertical-align: top; }
table.plans thead th { color: var(--fj-ink-3); font-size: var(--w-t-meta); }
table.plans td.yes { color: var(--fj-forest); }
table.plans td.no  { color: var(--fj-ink-3); }
.faq { max-width: var(--w-max-text); }
.faq details { border-top: var(--fj-rule-solid); padding-block: var(--w-space-md); }
.faq details:last-child { border-bottom: var(--fj-rule-solid); }
.faq summary { font: 500 var(--w-t-subtitle)/1.3 var(--fj-serif); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--w-space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--fj-mono); color: var(--fj-ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--fj-ink-2); margin-top: var(--w-space-md); }
.prose { max-width: var(--w-max-text); }
.prose p, .prose li { color: var(--fj-ink-2); }

/* ---- screenshot placeholders — say exactly what the capture must show --- */
.shot-placeholder {
  margin-top: var(--w-space-md);
  border: 1px dashed var(--fj-rule); border-radius: var(--fj-radius);
  background: var(--fj-paper-2);
  padding: var(--w-space-lg);
  min-height: 220px; max-width: 320px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--w-space-sm);
}
.shot-placeholder .w-kicker { color: var(--fj-sun); }
.shot-placeholder p { margin: 0; font-size: var(--w-t-meta); color: var(--fj-ink-3); }
.card--wide .shot-placeholder { max-width: none; min-height: 300px; }

/* =====================================================================
   MOTION — scroll-driven, CSS only. Everything here is progressive:
   a browser without animation-timeline shows the page at rest, and the
   token-layer reduced-motion rule zeroes every duration. Restrained by
   design: the brand is quiet, so the motion is paper settling, not a show.
   ===================================================================== */

/* Sticky header with an oxblood progress hairline that tracks the scroll. */
header.site { position: sticky; top: 0; z-index: 900; background: var(--fj-paper); }
header.site::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--fj-oxblood); transform-origin: left; transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  header.site::after { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* Features / support prose rises as it enters (home is handled by the
     book's own GSAP stagger, not scroll-timeline). */
  .faq details, table.info tr, .feature > div:first-child {
    animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
  }
  @keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

  /* Feature rows on /features: text from the left, capture from the right. */
  .feature > .figrow { animation: slide-right linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes slide-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

  /* Section kickers draw a short rule beneath themselves. */
  .section-kicker { position: relative; padding-bottom: var(--w-space-sm); }
  .section-kicker::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 48px; background: var(--fj-ink-3); transform-origin: left; animation: draw linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* =====================================================================
   JOURNAL HOME — the page-turn book (index.html only). Two modes:
   stacked (default: no JS, reduced motion, < 960x660) and book
   (html.w-book: JS + motion + viewport big enough). README:
   web/design-return/journal-home/README.md. Source reference:
   web/design-return/journal-home/a/flip.html (dead layers not ported —
   see NOTES.md trap 3: the CSS-drawn cover/page-edge stack and the
   intermediate asset layers it iterated through before the shipped
   book-open-shell.webp art).
   ===================================================================== */

body.journal { background: var(--fj-paper) url(/assets/paper-tile.jpg) 0 0 / 512px repeat; margin: 0; }
.journal img { display: block; max-width: 100%; height: auto; }
.journal a { color: var(--fj-oxblood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.journal a:hover { color: var(--fj-ink); }
.journal p, .journal figure { margin: 0; }
.journal ul { margin: 0; padding: 0; list-style: none; }
.journal h1, .journal h2, .journal h3 { margin: 0; text-wrap: balance; }

/* stacked mode (default): every page in reading order, one column */
.page { position: relative; padding: var(--w-section-pad) var(--w-gutter); max-width: var(--w-max-text); margin-inline: auto; border-bottom: var(--fj-rule-solid); }
.page > .in { display: flex; flex-direction: column; gap: var(--w-space-lg); }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--w-space-md); padding-bottom: var(--w-space-sm); border-bottom: 1px solid var(--fj-rule); }
/* a kicker long enough to wrap on a phone gets real line spacing, not the token's 1 */
.head .w-kicker { line-height: 1.5; text-wrap: balance; }
.body { color: var(--fj-ink-2); font-size: var(--w-t-body); line-height: 1.6; max-width: var(--w-measure); text-wrap: pretty; }
.note, .marg { color: var(--fj-ink-2); font: 400 var(--w-t-meta)/1.55 var(--fj-mono); max-width: 22em; }
.cap { font: italic 400 var(--w-t-lede)/1.4 var(--fj-serif); color: var(--fj-ink-2); text-wrap: pretty; }
.plate-pg .in { align-items: center; text-align: center; }
.plate-hero { width: 100%; display: none; }
/* Spread 1's question lines (item 10): one question per line, written in by
   the plate's runner; the two answers sit upright in ink between them. */
.asks.scene-entry { display: block; } /* one line per question, not the entry's two-column grid */
.asks { width: 100%; max-width: 32em; text-align: left; border-top: 1.5px solid var(--fj-ink); padding-top: var(--w-space-sm); }
.asks p { border-top: var(--fj-rule-solid); padding: 6px 1.25rem 5px; min-height: 1.6em; }
.asks .q { font: italic 400 var(--w-t-lede)/1.4 var(--fj-serif); color: var(--fj-ink-2); }
.asks .a { font: 500 var(--w-t-lede)/1.4 var(--fj-serif); color: var(--fj-ink); }
/* The first question is the page's entry point: near headline size, full ink, so the eye lands left of the fold first. */
.asks .q.lead { font-size: var(--w-t-title); line-height: 1.2; color: var(--fj-ink); text-wrap: balance; }
/* Stacked-mode-only catch record (the plate's book-mode tag is hidden here, plate-hero
   display:none). Hidden again in book mode below, where the tag on the plate stands in for it. */
.asks .rec { font: 400 12px/1.5 var(--fj-mono); color: var(--fj-ink-2); }
img.folio { height: 24px; width: auto; opacity: .95; }

/* Spread 1 book-mode specimen tag: typed in over the plate once it finishes drawing
   (js/spread1-plate.js onEntry hook), same record as .asks .rec below. Positioned in the
   blank paper lower-right of the plate, clear of the fish body and the bottom caption. */
.tag { position: absolute; left: 66%; top: 3%; width: 33%; text-align: left; } /* top right, above the tail: the only clear paper that misses the fish and the caption */
.tag-label { font: 400 10px/1 var(--fj-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fj-ink-3); margin: 0 0 4px; }
.tag-rec { margin: 0; font: 400 12px/1.3 var(--fj-serif); color: var(--fj-ink); white-space: pre-line; }
.tag-leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tag-leader line { stroke: var(--fj-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* footnote markers restored on the six paid-tier right pages (grill Q3) */
.fnmark { font: 400 .68em/0 var(--fj-mono); color: var(--fj-oxblood); }
.fnmark a { text-decoration: none; color: inherit; }
.fnmark + .fnmark::before { content: ","; margin-right: .15em; }

/* pasted-in prints */
.figrow { display: flex; align-items: flex-end; gap: var(--w-space-xl); flex-wrap: wrap; }
.print { position: relative; width: min(240px, 64vw); aspect-ratio: 1206 / 1500; overflow: hidden; border: 7px solid var(--w-print-border); background: var(--fj-paper-2);
  box-shadow: var(--w-print-shadow); transform: rotate(var(--w-print-tilt)); }
.print img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.print.small { width: min(170px, 44vw); transform: rotate(2.5deg); }
/* A landscape crop (spread 12's year graph) and a row of three (spread 13). */
.print.wide { width: 100%; max-width: 520px; aspect-ratio: 900 / 552; }
.print.wide img { object-position: center; }
.trio { gap: var(--w-space-md); justify-content: center; }
.trio .print.small:nth-child(2) { transform: rotate(-1.5deg); }
.tape { position: absolute; z-index: 2; left: 50%; top: -11px; width: 84px; height: 24px; margin-left: -42px; transform: rotate(-3deg);
  background: url(/assets/tape-strip.webp) center / 100% 100% no-repeat; opacity: .92; }

/* versos carry the prints; rectos carry the words and a plate footer */
.verso-fig .in { align-items: stretch; text-align: left; }
.verso-fig .figrow { justify-content: center; align-items: center; }
/* spread 3's plate: printed on the leaf (no mat, no tape); height-bound in book mode */
.verso-fig .plate { margin: 0; flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; }

/* spread 3's engraved scene — a <canvas> drawn by js/creel-engraver.js +
   js/spread3-scene.js, with a small replay mark pinned to its corner.
   spread 6's engraved chart (js/spread6-trip.js), spread 4's engraved
   photo pile + chart (js/spread4-scan.js) and spread 2's engraved journal
   (js/spread2-journal.js) share these rules. */
.scene { position: relative; width: 100%; }
.scene canvas { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
.scene .scene-replay {
  position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; background: none; padding: 0;
  color: var(--fj-ink-3); font-size: 18px; line-height: 1; cursor: pointer;
}
.scene .scene-replay:hover { color: var(--fj-ink); }

/* every scene's recto — the catch record inked in below the copy, printed-record
   voice (mono labels, serif values). Ported from spread 3's original prototype,
   engraver-prototype/scene.html's .entry; spreads 2/4/6/7 share the same rules. */
/* dl's own children are the grid now (valid dl content model needs dt/dd pairs as
   direct children, or as direct children of a div that is itself a direct child of
   dl — no further nesting), so .f sits straight under the dl and .sp spans both
   columns as its own group. The old .grid wrapper's margin-top becomes .sp's
   margin-bottom (same gap, now trailing the species row) or, when there's no .sp,
   margin-top on the first .f (same gap, now leading the first field row). */
.scene-entry { border-top: 1.5px solid var(--fj-ink); padding-top: var(--w-space-sm); margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.scene-entry dd { margin: 0; } /* browsers indent dd by 40px by default */
.scene-entry .sp { grid-column: 1 / -1; margin-bottom: var(--w-space-sm); font: 500 20px/1.2 var(--fj-serif); color: var(--fj-ink); }
.scene-entry .sp i { font-style: italic; font-size: 14px; color: var(--fj-ink-2); font-weight: 400; margin-left: var(--w-space-sm); }
.scene-entry > .f:first-child { margin-top: var(--w-space-sm); }
.scene-entry .f { border-top: var(--fj-rule-solid); padding: 6px 0 5px; min-height: 40px; margin: 0; }
.scene-entry .f dt { font: 400 10px/1 var(--fj-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fj-ink-3); margin: 0 0 4px; }
.scene-entry .f dd { margin: 0; font: 400 16px/1.3 var(--fj-serif); color: var(--fj-ink); }
.scene-entry .f.full { grid-column: 1 / -1; }
.scene-entry .badge {
  font: 400 9px/1 var(--fj-mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--fj-oxblood); border: 1px solid var(--fj-oxblood); padding: 2px 4px;
  margin-left: var(--w-space-sm); vertical-align: 2px; transition: opacity .3s; /* visible by default: no-JS readers and book-turn clones; JS hides it while the entry types */
}

/* lists */
.also li { padding: var(--w-space-md) 0; border-top: var(--fj-rule-dotted); color: var(--fj-ink-2); font-size: var(--w-t-meta); line-height: 1.5; }
.also li:last-child { border-bottom: var(--fj-rule-dotted); }

/* pricing */
.plan { display: grid; gap: var(--w-space-sm); padding: var(--w-space-lg) 0; border-top: var(--fj-rule-solid); }
.plan .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--w-space-lg); }
.plan .name { font: 500 var(--w-t-subtitle)/1.2 var(--fj-serif); }
.plan .price { font: 500 var(--w-t-subtitle)/1.2 var(--fj-serif); color: var(--fj-oxblood); white-space: nowrap; }
.plan .sub { color: var(--fj-ink-3); font-size: var(--w-t-meta); }
.plan ul li { color: var(--fj-ink-2); font-size: var(--w-t-meta); line-height: 1.5; padding-left: 14px; position: relative; }
.plan ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; border-top: 1px solid var(--fj-ink-3); }

/* notes / footer */
.notes li { color: var(--fj-ink-2); font-size: var(--w-t-meta); line-height: 1.5; padding: var(--w-space-sm) 0; border-top: var(--fj-rule-dotted); }
.notes li:target { color: var(--fj-ink); }
.ft { display: flex; flex-wrap: wrap; gap: var(--w-space-lg) var(--w-space-xl); align-items: baseline; padding-top: var(--w-space-lg); border-top: var(--fj-rule-solid); }
.ft small { font-size: var(--w-t-meta); color: var(--fj-ink-3); }
.ft ul { display: flex; gap: var(--w-space-xl); }
.ft a { font-size: var(--w-t-meta); color: var(--fj-ink-2); text-decoration: none; }
.ft a:hover { color: var(--fj-ink); text-decoration: underline; }
.coffee { position: absolute; right: 6%; bottom: 8%; width: 36%; opacity: .5; mix-blend-mode: multiply; pointer-events: none; transform: rotate(12deg); }

/* invite form: three states via data-state */
.inv { display: grid; gap: var(--w-space-sm); max-width: 520px; }
.inv .row { display: flex; gap: var(--w-space-sm); flex-wrap: wrap; }
.inv input { flex: 1 1 200px; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--fj-rule); border-radius: var(--fj-radius); background: var(--fj-paper); font: 400 var(--w-t-body)/1 var(--fj-body); color: var(--fj-ink); }
.inv input::placeholder { color: var(--fj-ink-3); }
.inv .w-btn { height: 46px; padding-block: 0; }
.inv .msg { font-size: var(--w-t-meta); color: var(--fj-ink-3); min-height: 1.5em; }
.inv .msg-sent, .inv .msg-err { display: none; }
.inv[data-state="sent"] .msg-empty, .inv[data-state="error"] .msg-empty, .inv[data-state="sent"] .row { display: none; }
.inv[data-state="sent"] .msg-sent { display: block; color: var(--fj-forest); }
.inv[data-state="error"] .msg-err { display: block; color: var(--fj-oxblood); }
.inv[data-state="error"] input { border-color: var(--fj-oxblood); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bookfolio { display: none; }

/* stacked-mode reading order: document order, so spread 1's questions come
   before the hero that answers them. This reverses grill Q8 (hero first): the H1
   became the answer to the questions (Jon, 2026-09-28), and the questions page
   is short enough stacked (no plate) that the H1 still makes the first screen.
   .leaf/.flat unwrap via display:contents so every page is one flex item. */
.spread { display: flex; flex-direction: column; }
.leaf, .flat { display: contents; }
/* A figure belongs to the text under it (Jon, 2026-09-28): the spread's head is lifted
   above the figure (js/journal-home.js), and the figure and its text drop the rule and
   most of the gap between them, so the only full break is the one between spreads. */
/* Score spread: how far each condition can move the score, as hatched ink bars
   scaled to the largest (water temperature, 59 points). */
.score-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.score-factors li { display: grid; grid-template-columns: 1fr 40%; align-items: center; gap: 4px 10px; padding-top: 6px; border-top: var(--fj-rule-solid); font-size: calc(1em - 2px); color: var(--fj-ink-2); line-height: 1.35; }
.score-factors b { font-weight: 500; color: var(--fj-ink); }
.sf-bar { height: 9px; width: var(--w); background: repeating-linear-gradient(-55deg, var(--fj-ink) 0 1.2px, transparent 1.2px 3.5px); border: 1px solid var(--fj-ink); transition: width .65s cubic-bezier(.2,.7,.2,1); box-sizing: border-box; }
.score-factors li:nth-child(2) .sf-bar { transition-delay: 90ms; }
.score-factors li:nth-child(3) .sf-bar { transition-delay: 180ms; }
.score-factors li:nth-child(4) .sf-bar { transition-delay: 270ms; }
.score-factors.sf-retract .sf-bar { transition-duration: .18s; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .sf-bar { transition: none; } }
.head-lifted { display: none; }
html:not(.w-book) .head-lifted { display: flex; align-self: stretch; text-align: left; }
/* page numbers only mean something when the pages turn (Jon, 2026-09-28) */
html:not(.w-book) .head .folio { display: none; }
html:not(.w-book) .plate-pg .head-lifted { border-bottom: 0; } /* the questions' own rule sits right under it */
html:not(.w-book) .head-origin { display: none; }
html:not(.w-book) .verso-fig { border-bottom: 0; padding-bottom: 0; }
html:not(.w-book) .leaf:has(.verso-fig) + .leaf .front { padding-top: var(--w-space-lg); border-top: 0; }
/* Spread 1 groups the same way: the questions and the hero that answers them. */
html:not(.w-book) .plate-pg { border-bottom: 0; padding-bottom: 0; }
html:not(.w-book) #s1 { padding-top: var(--w-space-xl); border-top: 0; }

/* stacked-mode entry fade (JS + motion only; book mode's GSAP timeline
   owns .rc opacity/transform directly and never sees this class). */
.stacked-motion .rc { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.25,.46,.45,.94), transform .6s cubic-bezier(.25,.46,.45,.94); }
.stacked-motion .rc-in { opacity: 1; transform: none; }
/* .rc-seq: items that arrive one by one after the page does (the "Also in
   Creel" list, item 14). Stacked: same fade as .rc, staggered by JS. Book:
   hidden until arrival, then GSAP staggers the flat face's items in — the
   turn's clones stay blank, like the scene canvases do until painted. */
.stacked-motion .rc-seq { opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.25,.46,.45,.94), transform .5s cubic-bezier(.25,.46,.45,.94); }
.stacked-motion .rc-seq.rc-in { opacity: 1; transform: none; }
html.w-book .rc-seq { opacity: 0; }

/* ======================================================================
   BOOK MODE — html.w-book (JS, motion allowed, >= 960 x 660).
   A cloth-bound book on a linen desk, built from the production layer
   pack (book-open-shell.webp, paper-tile.jpg, paper-verso-tile.jpg,
   linen-tile.jpg, light-bands.webp, stamp-N.webp, tape-strip.webp).
   ====================================================================== */
html.w-book body.journal { background: var(--w-desk) url(/assets/linen-tile.jpg) 0 0 / 512px repeat fixed; }
html.w-book body.journal::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(/assets/light-bands.webp) center / cover no-repeat; mix-blend-mode: soft-light; opacity: .9; }
html.w-book header.site { position: sticky; }
html.w-book .track { position: relative; z-index: 1; }
html.w-book .book { position: sticky; top: var(--w-header-h); height: calc(100vh - var(--w-header-h)); overflow: hidden; }
html.w-book .tome { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  aspect-ratio: 2440 / 1500;
  width: min(var(--w-max), 100vw - 2 * var(--w-gutter) - 40px, (100vh - var(--w-header-h) - 56px) * 1.6267);
  background: url(/assets/book-open-shell.webp) center / 100% 100% no-repeat;
  filter: var(--w-book-shadow); }
html.w-book .spread { position: absolute; inset: 2.6% 3.52% 5.2% 3.44%; perspective: var(--w-turn-perspective); perspective-origin: 50% 40%; }

html.w-book .page { position: absolute; top: 0; height: 100%; width: 50%; max-width: none; margin: 0; padding: var(--w-page-pad); padding-top: calc(var(--w-page-pad) + 1vh);
  background: transparent; border: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
html.w-book .page > .in { position: relative; z-index: 2; gap: clamp(8px, 1.5vh, 18px); max-height: 100%; }
html.w-book .base-left { left: 0; z-index: 1; }
html.w-book .base-right { left: 50%; z-index: 1; }

html.w-book .leaf { display: block; position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
html.w-book .flat, html.w-book .curl { display: block; position: absolute; inset: 0; transform-style: preserve-3d; }
html.w-book .curl { visibility: hidden; opacity: 0; }
html.w-book .flat .face { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.6px);
  background: var(--fj-paper) url(/assets/paper-tile.jpg) 0 0 / 420px repeat; }
html.w-book .flat .back { transform: rotateY(180deg) translateZ(.6px); background: var(--w-verso) url(/assets/paper-verso-tile.jpg) 0 0 / 420px repeat; }
/* --segs is set by buildBook(): the leaf curls as --segs hinged strips (item 1). */
html.w-book .seg { position: absolute; top: 0; height: 100%; left: 0; width: calc(100% / var(--segs, 3)); transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
html.w-book .seg-n { left: 100%; width: 100%; }
html.w-book .win { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: transparent; transform: translateZ(.6px); }
html.w-book .win.front .clone { background: var(--fj-paper) url(/assets/paper-tile.jpg) 0 0 / 420px repeat; }
html.w-book .win.back .clone { background: var(--w-verso) url(/assets/paper-verso-tile.jpg) 0 0 / 420px repeat; }
html.w-book .win.back { transform: rotateY(180deg) translateZ(.6px); }
html.w-book .win .clone { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% * var(--segs, 3)); }
/* One shade gradient across the whole leaf, offset per strip like the clone —
   a gradient per strip repeated S times read as S ridges. */
html.w-book .win .sh { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% * var(--segs, 3)); pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(to right, var(--w-shade), rgba(43,42,37,.10) 55%, rgba(43,42,37,.22)); }
html.w-book .win.back .sh { opacity: 1; }

/* type fits the page box */
html.w-book .page { --ps: clamp(13px, .55vw + .35vh, 17px); font-size: var(--ps); }
html.w-book .body { font-size: var(--ps); line-height: 1.55; max-width: 36em; }
html.w-book .note, html.w-book .marg, html.w-book .also li, html.w-book .plan ul li, html.w-book .notes li, html.w-book .plan .sub, html.w-book .inv .msg { font-size: calc(var(--ps) - 2px); }
html.w-book .hero-h1 { font-size: clamp(24px, 1.5vw + 1vh, 44px); }
html.w-book .w-lede { font-size: calc(var(--ps) + 2px); line-height: 1.4; }
html.w-book .w-title { font-size: clamp(22px, 1.4vw + .8vh, 34px); }
html.w-book .w-display { font-size: clamp(22px, 1.6vw + .8vh, 40px); }
html.w-book .cap { font-size: clamp(14px, .8vw + .3vh, 19px); }
html.w-book .page img.folio { height: calc(var(--ps) + 11px); }
html.w-book .print { width: auto; height: clamp(120px, 24vh, 250px); aspect-ratio: 1206 / 1500; margin-top: 10px; flex: none; }
html.w-book .print.small { height: clamp(90px, 17vh, 180px); }
html.w-book .figrow { flex-wrap: nowrap; align-items: flex-end; }
html.w-book .plate-pg .in { justify-content: center; gap: clamp(14px, 3vh, 34px); }
html.w-book .plate-hero { display: block; max-height: 46vh; }
html.w-book .plate-hero canvas { max-height: 46vh; }
html.w-book .asks .rec { display: none; } /* the plate's .tag carries the same record in book mode */
/* sized to the plate, not the viewport, so the tag keeps to the clear paper above the tail at every book size */
html.w-book .plate-hero { container-type: inline-size; }
html.w-book .tag-label { font-size: clamp(7px, 1.9cqw, 11px); }
html.w-book .tag-rec { font-size: clamp(8px, 2.5cqw, 13px); }
html.w-book .asks .q, html.w-book .asks .a { font-size: clamp(14px, .8vw + .3vh, 19px); }
html.w-book .asks .q.lead { font-size: clamp(20px, 1.2vw + .8vh, 34px); }
html.w-book .asks p { padding: clamp(3px, .5vh, 6px) 1.25rem; }
html.w-book .also { column-count: 2; column-gap: var(--w-space-xl); }
html.w-book .also li { break-inside: avoid; padding: clamp(4px, .7vh, 10px) 0; line-height: 1.4; }
html.w-book .also li:first-child { border-top: 0; }
html.w-book .plan { padding: clamp(6px, 1vh, 12px) 0; gap: clamp(2px, .5vh, 6px); }
html.w-book .plan ul li { line-height: 1.4; }
html.w-book .notes li { padding: clamp(3px, .5vh, 6px) 0; }
html.w-book .verso-fig .in { height: 100%; }
html.w-book .verso-fig .figrow { flex: 1 1 auto; align-items: center; }
html.w-book .verso-fig .print { height: clamp(200px, 48vh, 460px); }
html.w-book .verso-fig .print.small { height: clamp(140px, 32vh, 310px); }
html.w-book .verso-fig .print.wide { width: 100%; height: auto; aspect-ratio: 900 / 552; }
html.w-book .verso-fig .trio .print.small { height: auto; width: calc((100% - 2 * var(--w-space-md)) / 3); }

/* spread 3's entry, compacted to fit the recto box in book mode */
html.w-book .scene-entry { padding-top: clamp(4px, 1vh, 10px); gap: 0 16px; }
html.w-book .scene-entry .sp { font-size: calc(var(--ps) + 4px); margin-bottom: 4px; }
html.w-book .scene-entry > .f:first-child { margin-top: 4px; }
html.w-book .scene-entry .f { padding: 4px 0 3px; min-height: 32px; }
html.w-book .scene-entry .f dd { font-size: var(--ps); }
/* Short book windows (660-760px tall): the densest pages (Also in Creel, the Capture
   record) outgrew the page after the 2026-09-28 folds. Tighten leading, not the type scale. */
@media (max-height: 760px), (max-width: 1180px) {
  html.w-book .body { line-height: 1.45; }
  html.w-book .also li { line-height: 1.3; padding: 3px 0; }
  html.w-book .scene-entry .f { min-height: 28px; padding: 3px 0 2px; }
  html.w-book .scene-entry .sp { font-size: calc(var(--ps) + 1px); margin-bottom: 2px; }
}
@media (max-height: 700px) { html.w-book .also li { line-height: 1.25; padding: 2px 0; } html.w-book .score-factors { gap: 3px; } html.w-book .score-factors li { padding-top: 2px; } }
@media (max-height: 760px), (max-width: 1180px) { html.w-book .sf-desc { display: none; } } /* short book windows: the Score page keeps names, bars and points */

/* draggable spread slider */
html.w-book .bookfolio { display: flex; position: absolute; left: 0; right: 0; bottom: 26px; justify-content: center; gap: var(--w-space-md); align-items: center;
  font: 400 var(--w-t-kicker)/1 var(--fj-mono); letter-spacing: var(--fj-track-kicker); color: var(--fj-ink-2); }
html.w-book .bookfolio .bar { width: min(460px, 42vw); height: 2px; cursor: pointer; touch-action: none; background: rgba(43,42,37,.28); position: relative; }
html.w-book .bookfolio .bar::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
html.w-book .bookfolio .bar i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--fj-oxblood); }
html.w-book .bookfolio .bar i::after { content: ""; position: absolute; right: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--fj-oxblood); box-shadow: 0 1px 2px rgba(43,42,37,.3); }
html.w-book .bookfolio .bar:hover i::after, html.w-book .bookfolio .bar.dragging i::after { transform: scale(1.25); }
/* Navigator (item 13): a tick per spread and a label that names the spread
   under the pointer while hovering or scrubbing, and the NEXT spread at rest —
   so the turn is never a surprise. */
html.w-book .bookfolio .bar .tick { position: absolute; top: -3px; width: 1px; height: 8px; background: var(--fj-ink-3); opacity: .45; pointer-events: none; }
html.w-book .bookfolio .bar .tick.done { background: var(--fj-oxblood); opacity: .6; }
html.w-book .bookfolio .folio-label { position: absolute; left: 0; right: 0; top: 14px; text-align: center; color: var(--fj-ink-3); pointer-events: none; text-transform: uppercase; }
html.w-book .bookfolio .folio-label.hover { color: var(--fj-ink); }

/* Score-spread bite dial (slice C). Left-page interactive gauge: replaces the
   old three-screenshot trio. Sized to fit the fixed-height book-mode left
   page (html.w-book .verso-fig .in is height:100%, .page > .in gap is
   clamp(8px,1.5vh,18px)) alongside every other spread's single figure. */
.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; }

.dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1vh, 10px); flex: 1 1 auto; min-height: 0; width: 100%; }
.dial-gauge { width: min(210px, 58vw); height: auto; flex: none; }
.dial-track { fill: none; stroke: var(--fj-rule); stroke-width: 2; }
.dial-bands { fill: none; }
.dial-bands path { stroke-width: 6; stroke-linecap: butt; fill: none; }
.band-1 { stroke: var(--fj-bite-slow); }
.band-2 { stroke: var(--fj-bite-low); }
.band-3 { stroke: var(--fj-bite-mid); }
.band-4 { stroke: var(--fj-bite-high); }
.band-5 { stroke: var(--fj-bite-peak); }
.dial-needle { stroke: var(--fj-ink); stroke-width: 2.5; stroke-linecap: round; }
.dial-hub { fill: var(--fj-ink); }

.dial-readout { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: clamp(-20px, -2.5vh, -10px); }
.dial-score { font: 500 clamp(26px, 4.5vh, 42px)/1 var(--fj-serif); color: var(--fj-oxblood); }
.dial-reason { margin: 0; font: 400 var(--w-t-meta)/1.3 var(--fj-body); color: var(--fj-ink-2); max-width: 26em; text-align: center; }
/* Reserves space for the salmon/deep-coldwater note (js/score-dial.js) so
   switching species never changes the dial's height, whether or not the
   selected species gets a note. */
.dial-species-note { margin: 2px 0 0; font: 400 var(--w-t-folio)/1.3 var(--fj-body); color: var(--fj-ink-3); max-width: 26em; text-align: center; min-height: 2.6em; }

.dial-controls { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 260px; }
.dial-field { display: flex; flex-direction: column; gap: 2px; }
.dial-field label { display: flex; justify-content: space-between; gap: var(--w-space-sm); font: 400 var(--w-t-kicker)/1 var(--fj-mono); letter-spacing: var(--fj-track-kicker-tight); text-transform: uppercase; color: var(--fj-ink-3); }
.dial-field output { color: var(--fj-ink); text-transform: none; letter-spacing: 0; }
.dial-field input[type="range"] { width: 100%; height: 14px; accent-color: var(--fj-oxblood); }
.dial-field input[type="range"]:focus-visible { outline: 2px solid var(--fj-oxblood); outline-offset: 2px; }

/* Species picker: one compact row (label + select), not a label line plus a
   control line like the sliders below it — keeps the added control to ~22px.
   The select takes the rest of the row (flex: 1, no max-width) so the
   longest label ("Hybrid Striped Bass") fits on one line instead of clipping. */
.dial-field-species { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--w-space-sm); margin-bottom: var(--w-space-md); } /* species picks the model; the sliders below set the conditions */
.dial-field-species label { flex: none; }
.dial-field-species select { flex: 1; min-width: 0; height: 22px; font: 400 var(--w-t-meta) var(--fj-body); color: var(--fj-ink); background: none; border: 1px solid var(--fj-rule); border-radius: 2px; padding: 2px 4px; }
.dial-field-species select:focus-visible { outline: 2px solid var(--fj-oxblood); outline-offset: 2px; }

.dial-note { margin: var(--w-space-sm) 0 0; font: 400 var(--w-t-folio)/1.3 var(--fj-body); color: var(--fj-ink-3); text-align: center; }

html.w-book .verso-fig .dial-gauge { width: min(170px, 40vh); }
html.w-book .dial-controls { max-width: 220px; }