/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  register palettes ............................. search: "register palettes"
  masthead the masthead is PRINTED at the top ... search: "masthead the masthead"
  the front page grid ........................... search: "the front page grid"
  THE PHONE EDITION (EXTRA² 2026-07-24): ........ search: "THE PHONE EDITION"
  a story card (front cells + the river) ........ search: "a story card (front"
  the widget rail ............................... search: "the widget rail"
  the content card (scroll-card.js) — comics .... search: "the content card"
  the radar overlay (scroll-radar.js) ........... search: "the radar overlay"
  SEARCH THE NAMED SOURCES (scroll-search.js) ... search: "SEARCH THE NAMED"
  THE WIRELESS (scroll-radio.js) — a ............ search: "THE WIRELESS"
  THE TUNER (Sum 2026-07-23): the player IS ..... search: "THE TUNER (Sum"
  THE SKY — the weather page (Sum ............... search: "THE SKY — the weather"
  THE LOUPE (Sum 2026-07-25: "zoom on art ....... search: "THE LOUPE (Sum"
  THE COLOPHON — page 4, the printer's page + ... search: "THE COLOPHON — page 4,"
  SEARCH/SURF MODE reshapes the grid ............ search: "SEARCH/SURF MODE"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — The complete visual design and layout of the broadsheet newspaper interface. This
   **file is the single source of truth for all `.sf-*` class names (the "scroll" namespace),
   **color palette variables (`--sf-bg`, `--sf-ink`, `--sf-dek`, `--sf-card`, `--sf-line`,
   **`--sf-rule`, `--sf-kick`, `--sf-shadow`), and the four register themes (`oz`, `unicorn`,
   **`corp`, `clinical`). JavaScript files (`scroll-card.js`, `scroll-radar.js`,
   **`scroll-search.js`, `scroll-radio.js`) and the shell (`shell/desk.css`) depend on these
   **class names and variables existing exactly as written.
   
   **TOUCH HERE** —
   - Change color palette for a register → edit the `:root[data-reg="X"]` block (lines 20–45)
   - Adjust masthead layout or spacing → `.sf-masthead`, `.sf-flagtop`, `.sf-word`, `.sf-motto`,
   - `.sf-date` (lines 49–82)
   - Modify the three-column grid proportions → `.sf-page` grid-template-columns (line 105)
   - Alter phone breakpoints (currently 1060px and 680px) → `@media (max-width: X)` (lines 113,
   - 117)
   - Change story card image aspect ratio → `.sf-hero` aspect-ratio (line 142)
   - Adjust widget rail styling → `.sf-widget`, `.sf-widget h3` (lines 199–201)
   - Modify the card overlay (modal) appearance → `.sf-cardov`, `.sf-cardpaper` (lines 243–246)
   - Change the radio player dock position → `#sf-radio` position and `@media (max-width: 680px)`
   - (lines 323, 414)
   - Adjust weather widget card size or layout → `.sf-wxc` flex basis and min-width (line 460)
   - Modify reading mode zoom scale → `--fs-scale` variable in `.sf-page.sf-onecol
   - .sf-col-center` (line 594)
   
   **TRAPS** —
   - The four register names (`oz`, `unicorn`, `corp`, `clinical`) are hardcoded in HTML
   - `data-reg` attributes; renaming them here orphans the attribute selectors (lines 20, 27, 34,
   - 40).
   - The `.sf-page` grid at line 105 uses `290px 1fr 300px` proportions; the phone breakpoint at
   - line 113 changes this to `260px 1fr`; changing one without the other breaks the layout on
   - tablets.
   - The masthead border-bottom at line 50 is `3px solid`; the page divider at line 580 is also
   - `3px double`; these are intentionally different weights and must not be unified.
   - The `.sf-col-center` uses `display: flow-root` at line 509 to contain floats; removing this
   - breaks the lowres hero float (line 502).
   - The radio player's fixed position (line 323) and the overlay's absolute position (line 391)
   - are interdependent; moving one without the other breaks the overlay anchor.
   - The `--fs-scale` variable at line 594 is read by JavaScript to detect reading mode; the zoom
   - property must remain on `.sf-col-center`, not moved to a parent.
   - The `.sf-page.sf-surfing` grid at line 586 hides the left rail; it must be kept in sync with
   - the base `.sf-page` grid or search results will wear the wrong column width.
   
   **DO NOT** —
   - Do not rename any `.sf-*` class without updating `scroll-card.js`, `scroll-radar.js`,
   - `scroll-search.js`, `scroll-radio.js`, and `shell/desk.css` (they query these selectors).
   - Do not change the `data-reg` attribute values; they are set in HTML and matched here.
   - Do not move the register palette definitions (lines 19–45) or add new registers without
   - coordinating with the HTML template.
   - Do not alter the masthead's `position: static` (line 49); the comment at line 47 explains
   - why sticky was rejected.
   - Do not modify the radar overlay's hardcoded colors (lines 268–296); it uses a fixed dark
   - theme independent of the register system.
   - Do not change the loupe's z-index (9999 at line 549) without checking `shell/desk.css` for
   - conflicts.
   - Do not add new media queries below line 582 without checking the existing breakpoints
   - (1060px, 680px, 700px) for overlap.
   - Do not edit the colophon or "touch grass" sections (lines 557–575) without consulting the
   - content team; these are editorial, not design.
   
   
   
   ---

END IC SHIP PASS
*/

/* scroll.css — THE PORT SIDE VIEW. 0z·Info reborn as an old-school broadsheet
   (Sum 2026-07-22): masthead, a widget rail, double-wide draggable news, and a
   Portal (the shell reader) on click. FOUR registers on <html data-reg>:
   oz · unicorn = newsprint (serif, warm/lavender paper) — HOME.
   corp · clinical = the clean card skin (sans, dark/white) — the clinical room. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sf-serif);
  background: var(--sf-bg); color: var(--sf-ink);
  overflow-y: auto; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(rgba(0,0,0,.013) 1px, transparent 1px);
  background-size: 3px 3px;
}
:root[data-reg="corp"] body, :root[data-reg="clinical"] body { background-image: none; }

/* ── register palettes ── */
:root, :root[data-reg="oz"] {
  --sf-bg: #f4efe1; --sf-ink: #1b1712; --sf-dek: #4a423a; --sf-card: #efe8d6;
  --sf-line: #c9bfa4; --sf-rule: #1b1712; --sf-kick: #8b2e1f; --sf-shadow: rgba(90,64,24,.10);
  --sf-serif: "Old Standard TT", "Iowan Old Style", Georgia, serif;
  --sf-display: "Playfair Display", Georgia, serif;
  --sf-mono: "Courier New", monospace;
}
:root[data-reg="unicorn"] {
  --sf-bg: #f3edf9; --sf-ink: #241a33; --sf-dek: #5a4c74; --sf-card: #ebe1f5;
  --sf-line: #d8c9ea; --sf-rule: #2a1f3d; --sf-kick: #7b3aa0; --sf-shadow: rgba(90,60,140,.10);
  --sf-serif: "Old Standard TT", "Iowan Old Style", Georgia, serif;
  --sf-display: "Playfair Display", Georgia, serif;
  --sf-mono: "Courier New", monospace;
}
:root[data-reg="corp"] {
  --sf-bg: #0f1117; --sf-ink: #e9ecf3; --sf-dek: #9aa3b5; --sf-card: #171a22;
  --sf-line: #262b36; --sf-rule: #3a4150; --sf-kick: #6ea8ff; --sf-shadow: rgba(0,0,0,.4);
  --sf-serif: -apple-system, system-ui, sans-serif; --sf-display: -apple-system, system-ui, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", monospace;
}
:root[data-reg="clinical"] {
  --sf-bg: #ffffff; --sf-ink: #14181f; --sf-dek: #55606f; --sf-card: #f7f9fc;
  --sf-line: #e4e9f0; --sf-rule: #cdd6e2; --sf-kick: #1f7ae0; --sf-shadow: rgba(20,40,70,.06);
  --sf-serif: -apple-system, system-ui, sans-serif; --sf-display: -apple-system, system-ui, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", monospace;
}

/* ── masthead ── the masthead is PRINTED at the top and scrolls away with the page (Sum 2026-07-24:
   "it just lives up top, scroll past it" — no sticky, no autohide; autohide got too messy on use). */
.sf-masthead { position: static; background: var(--sf-bg);
  border-bottom: 3px solid var(--sf-rule); padding: 8px 20px 6px; }
/* (the ocean/island band moved to the card's actual TOP BAR — shell/desk.css [data-card="scroll"] .card-head) */
.sf-flagtop { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--sf-mono); font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--sf-dek); border-bottom: 1px solid var(--sf-rule); padding-bottom: 5px; }
.sf-flagtop b { color: var(--sf-kick); }
.sf-flagtop .mid { flex: 1; text-align: center; white-space: pre-line; }   /* the sting's \n is the law — the browser never picks the wrap */
.sf-flagtop .r { text-align: right; }
.sf-keygear { background: var(--sf-card); border: 1px solid var(--sf-rule); color: var(--sf-ink);
  font-size: 14px; line-height: 1; min-width: 30px; min-height: 26px; cursor: pointer;
  border-radius: 4px; vertical-align: -2px; margin-left: 4px; }
/* the newsie's mark — a little cap tips the holler line. png (photo-real) on fun skins, drawn on boring (Sum 2026-07-22) */
.sf-flagtop .mid::before { content: ""; display: inline-block; vertical-align: -4px;
  width: 25px; height: 16px; margin-right: 7px;
  background: url('../../agents/newsie/newsie-cap.png') no-repeat center / contain; }
:root[data-reg="corp"] .sf-flagtop .mid::before,
:root[data-reg="clinical"] .sf-flagtop .mid::before { background-image: url('../../agents/newsie/newsie-cap.svg'); }
.sf-gear { display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--sf-rule);
  padding: 4px 9px; color: var(--sf-ink); background: var(--sf-card); font-family: var(--sf-mono);
  font-size: 13px; text-transform: uppercase; }
.sf-gear svg { width: 14px; height: 14px; display: block; }
.sf-word { font-family: var(--sf-display); font-weight: 900; text-align: center;
  font-size: clamp(34px, 8vw, 62px); line-height: .95; letter-spacing: .5px; padding: 6px 0 2px; }
:root[data-reg="corp"] .sf-word, :root[data-reg="clinical"] .sf-word { font-weight: 800; letter-spacing: -.01em; }
.sf-motto { text-align: center; font-family: var(--sf-display); font-style: italic;
  font-size: clamp(13px, 3vw, 17px); color: var(--sf-dek); }
:root[data-reg="corp"] .sf-motto, :root[data-reg="clinical"] .sf-motto { font-style: normal; }
.sf-date { text-align: center; font-size: 13px; color: var(--sf-dek); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .14em; font-family: var(--sf-mono); }
/* clean skins (corp/clinical) — a clean app header: title left-justified, not the broadsheet center (Sum 2026-07-22) */
:root[data-reg="corp"] .sf-word, :root[data-reg="clinical"] .sf-word,
:root[data-reg="corp"] .sf-motto, :root[data-reg="clinical"] .sf-motto,
:root[data-reg="corp"] .sf-date, :root[data-reg="clinical"] .sf-date { text-align: left; }

/* the weather ear */
.sf-wx { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  border-top: 1px solid var(--sf-rule); margin-top: 6px; padding: 5px 2px 1px;
  font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-dek); }
.sf-wx b { color: var(--sf-kick); }
.sf-wx .radar { cursor: pointer; color: var(--sf-kick); border-bottom: 1px solid var(--sf-kick); }
/* the multi-day forecast strip — a top banner below the masthead, toggle-able (Sum 2026-07-22) */
.sf-forecast { max-width: 1560px; margin: 6px auto 0; padding: 8px 20px; border-bottom: 1px solid var(--sf-line); }
.sf-forecast[hidden] { display: none; }
.sf-fc-label { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--sf-kick); margin-bottom: 6px; }
.sf-fc-days { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-fc-day { flex: 1 1 70px; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--sf-line); border-radius: 8px; background: var(--sf-card); }
.sf-fc-wd { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; color: var(--sf-dek); }
.sf-fc-ic { font-size: 20px; line-height: 1; }
.sf-fc-hi { font-weight: 700; font-size: 15px; }
.sf-fc-lo { font-size: 13px; color: var(--sf-dek); }
/* drawn weather glyphs (no emoji) — inherit currentColor, sit on the text baseline */
.wxg { width: 1.25em; height: 1.25em; vertical-align: -.24em; display: inline-block; }
.sf-fc-ic .wxg { width: 26px; height: 26px; vertical-align: middle; }

/* ── the front page grid ── */
.sf-page { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; max-width: 1560px; margin: 0 auto; align-items: start; }
.sf-col { min-width: 0; }
.sf-col-left { border-right: 1px solid var(--sf-line); padding: 8px 14px 40px; }
.sf-col-center { border-right: 1px solid var(--sf-line); }
.sf-col-right { padding-bottom: 40px; }
/* ── THE PHONE EDITION (EXTRA² 2026-07-24): STACK the rails, never amputate them — a phone
   reader gets the WHOLE paper: news first, then the left rail's widgets, then the right.
   double rules mark the folds, like sections of a real broadsheet folded for the train. ── */
@media (max-width: 1060px) {
  .sf-page { grid-template-columns: 260px minmax(0, 1fr); }
  .sf-col-right { grid-column: 1 / -1; border-top: 3px double var(--sf-line); }
}
@media (max-width: 680px) {
  .sf-page { grid-template-columns: 1fr; }
  .sf-col-center { border-right: none; order: 1; }
  .sf-col-left  { order: 2; border-right: none; border-top: 3px double var(--sf-line); }
  .sf-col-right { order: 3; }
  .sf-word { font-size: 24px; }
  .sf-title { font-size: 18px; }
  .sf-big .sf-title { font-size: 22px; }   /* Playfair 900 ink discipline, phone tier */   /* FIXED small: Playfair 900 ink defeated three vw estimates — 24px fits every phone down to 320, by construction */
  .sf-flagtop { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .sf-flagtop .mid { flex: 1 1 100%; order: -1; }   /* the sting leads, on its own full line */
  .sf-rad-player { width: min(330px, calc(100vw - 16px)); }
  .sf-rad-ov { width: min(330px, calc(100vw - 16px)); }
}
.sf-block { border-top: 1px solid var(--sf-rule); padding: 16px 20px; }
.sf-col-center > .sf-block:first-child { border-top: none; }
.sf-col-right .sf-block { padding: 14px 16px; }
.sf-block.story { cursor: pointer; }
.sf-block.story:focus { outline: none; }
.sf-block.story:focus-visible { outline: 3px solid var(--sf-kick); outline-offset: -1px; }   /* ADA — keyboard focus ring (Sum tests the switch keyboard) */
.sf-block.drag { opacity: .5; }
.sf-block.over { background: var(--sf-card); }
.sf-block.story:hover .sf-title { color: var(--sf-kick); }

/* ── a story card (front cells + the river) ── */
.sf-card { display: block; }
.sf-hero { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;
  background: var(--sf-card); border: 1px solid var(--sf-rule); margin-bottom: 10px; }
.sf-small .sf-hero { display: block; aspect-ratio: auto; max-height: 120px; object-fit: cover; margin-bottom: 6px; }   /* rails wear compact thumbs (Sum 2026-07-25: 'side columns need more pics') */

/* THE NEWSREEL — on "both" view, the video feeds sit in their OWN box, separate from the text paper
   (Sum 2026-07-22: "both in separate boxes"). a bordered broadsheet panel, video thumbnails in a grid. */
.sf-newsreel { border: 1px solid var(--sf-rule); background: var(--sf-card); padding: 12px 14px 14px;
  margin: 0 0 22px; }
.sf-newsreel-h { font-family: var(--sf-display, var(--sf-mono)); font-weight: 900; font-size: 18px;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--sf-rule); color: var(--sf-ink);
  display: flex; align-items: baseline; gap: 8px; }
.sf-newsreel-h::before { content: "▶"; color: var(--sf-kick); font-size: 14px; }
.sf-newsreel-h span { font-family: var(--sf-mono); font-size: 13px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sf-dek); }
.sf-newsreel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sf-newsreel-grid .sf-dek-txt { display: none; }      /* thumbnails + headline only — keep the reel tight */
/* The Funny Pages — comics + the funnies, grouped at the foot of the center (Sum 2026-07-22:
   "like the funny pages in trad print, not at top, but grouped"). same bordered panel as the reel. */
.sf-funnypages { border: 1px solid var(--sf-rule); background: var(--sf-card); padding: 12px 14px 14px;
  margin: 26px 0 8px; }
.sf-funnypages-h { font-family: var(--sf-display, var(--sf-mono)); font-weight: 900; font-size: 18px;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--sf-rule); color: var(--sf-ink);
  display: flex; align-items: baseline; gap: 8px; }
.sf-funnypages-h span { font-family: var(--sf-mono); font-size: 13px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sf-dek); }
.sf-funnypages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* the lane label as a section header WITH A RULE (Sum 2026-07-27: "I like this title with line — the good
   one from the pic, not my shitty dashed =; not liking the little red font, hard to read"). ink not red;
   solid hairline rule beneath (mirrors Today's Koan's h3). the author no longer rides here — see .sf-attrib. */
.sf-kick { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sf-ink); border-bottom: 1px solid var(--sf-rule); padding-bottom: 5px; margin-bottom: 8px; }
.sf-kick .sec { color: var(--sf-dek); }
/* the voice on its own line — the attribution beneath the excerpt (mirrors .sf-koan .src) */
.sf-attrib { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--sf-dek); margin-top: 8px; }
/* PORT SIDE U — a major and its real free courses (Sum 2026-07-27) */
.sf-psu-major .sf-title { margin-bottom: 8px; }
.sf-psu-courses { list-style: none; margin: 12px 0 0; padding: 0; }
.sf-psu-courses li { margin: 0 0 8px; padding-left: 18px; text-indent: -18px; line-height: 1.5; }
.sf-psu-courses li::before { content: "▸ "; color: var(--sf-kick); }
.sf-psu-course { color: var(--sf-ink); text-decoration: none; border-bottom: 1px solid var(--sf-line); }
.sf-psu-course:hover { color: var(--sf-kick); border-color: var(--sf-kick); }
.sf-psu-prov { font-family: var(--sf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-dek); }
.sf-title { font-family: var(--sf-display); font-weight: 900; line-height: 1.05; margin: 0 0 6px; font-size: 20px; }
.sf-big .sf-title { font-size: clamp(26px, 2.8vw, 36px); }
.sf-small .sf-title { font-size: 17px; }
:root[data-reg="corp"] .sf-title, :root[data-reg="clinical"] .sf-title { font-weight: 700; }
.sf-dek-txt { font-size: var(--fs-ui, 15px); line-height: 1.5; color: var(--sf-dek); white-space: pre-wrap; }
.sf-small .sf-dek-txt { font-size: 13px; line-height: 1.45; }
.sf-foot { margin-top: 10px; display: flex; align-items: center; gap: 10px;
  font-family: var(--sf-mono); font-size: 13px; color: var(--sf-dek); text-transform: uppercase; letter-spacing: .4px; }
.sf-open { margin-left: auto; color: var(--sf-kick); text-decoration: none; border-bottom: 1px solid var(--sf-kick); }

/* pull-quote / lane card — no image, reads as a broadsheet aside */
.sf-card.quote .sf-title { font-style: italic; font-weight: 700; }

/* ── the widget rail ── */
.sf-widget { background: var(--sf-card); border: 1px solid var(--sf-rule); padding: 10px 12px; margin-bottom: 12px; }
.sf-widget h3 { font-family: var(--sf-display); font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--sf-rule); text-align: center; }
.sf-koan { font-family: var(--sf-display); font-style: italic; font-size: 16px; line-height: 1.35; text-align: center; }
.sf-koan .src { display: block; font-family: var(--sf-mono); font-style: normal; font-size: 13px;
  text-transform: uppercase; color: var(--sf-dek); margin-top: 8px; letter-spacing: .5px; }
.sf-obit { text-align: center; }
.sf-obit b { font-family: var(--sf-display); font-size: 16px; }
.sf-obit .dates { font-family: var(--sf-mono); font-size: 13px; letter-spacing: .5px; color: var(--sf-dek); }
.sf-obit p { text-align: justify; font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
.sf-classified { font-family: var(--sf-mono); font-size: 13px; line-height: 1.5; text-transform: uppercase;
  letter-spacing: .3px; text-align: center; }
.sf-funny { font-size: 14px; line-height: 1.4; font-style: italic; }
.sf-funny-img { width: 100%; display: block; border: 1px solid var(--sf-rule); margin-bottom: 8px; }
/* inline YouTube in the content card — WEB only (real origin embeds; the app routes out) */
.sf-cardyt { display: block; width: 100%; aspect-ratio: 16/9; border: 1px solid var(--sf-rule); margin: 0 0 12px; }
/* On This Day — ported from the clock (the audit 2026-07-24); dated lines, justified like the obits */
.sf-onday { font-size: 13px; line-height: 1.45; text-align: justify; margin-bottom: 8px; }
.sf-onday b { font-family: var(--sf-mono); letter-spacing: .5px; }
.sf-onday a { color: inherit; text-decoration: none; }
.sf-onday a:hover { text-decoration: underline; }
.sf-onday + .src, .sf-widget .sf-onday ~ .src { display: block; font-family: var(--sf-mono); font-size: 12px;
  text-transform: uppercase; color: var(--sf-dek); letter-spacing: .5px; text-align: center; }
.sf-horo { text-align: center; }
.sf-horo b { font-family: var(--sf-display); font-size: 16px; letter-spacing: .04em; }
.sf-horo p { font-size: 13px; line-height: 1.5; margin: 8px 0 0; text-align: justify; }
.sf-horo-lab { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--sf-kick); vertical-align: middle; }
.sf-horo-hr { border: none; border-top: 1px dotted var(--sf-line); margin: 10px 0 0; }
/* the house ad — the only advertisement in the paper, and it teaches you to use the free tool better */
.sf-widget.sf-ad { border-style: dashed; }
.sf-widget.sf-ad h3 { border-bottom-style: dashed; letter-spacing: .2em; }
.sf-adbody { font-size: 14px; line-height: 1.5; text-align: center; }
.sf-adbody b { font-family: var(--sf-display); color: var(--sf-kick); }

/* the "keep reading" sentinel at the foot of the center column */
.sf-more { text-align: center; color: var(--sf-dek); font-family: var(--sf-mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; padding: 18px 0 40px; opacity: .8; }
.sf-empty { text-align: center; color: var(--sf-dek); padding: 50px 24px; line-height: 1.7; font-size: var(--fs-ui, 15px); }

.sf-colophon { max-width: 1560px; margin: 0 auto; border-top: 3px double var(--sf-rule); padding: 8px 20px;
  text-align: center; font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sf-dek); }

/* ── the content card (scroll-card.js) — comics + hand-rolls read IN a card ── */
.sf-cardov { position: fixed; inset: 0; z-index: 3300; background: rgba(9, 7, 12, .86); backdrop-filter: blur(6px);
  display: flex; justify-content: center; overflow-y: auto; padding: 24px 16px; }
.sf-cardpaper { width: min(720px, 100%); align-self: flex-start; background: var(--sf-bg); color: var(--sf-ink);
  border: 1px solid var(--sf-rule); box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.sf-cardbar { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--sf-bg); border-bottom: 1px solid var(--sf-rule); font-family: var(--sf-mono); font-size: 13px; }
.sf-cardsrc { color: var(--sf-dek); text-transform: uppercase; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cardbtn { flex: 0 0 auto; border: 1px solid var(--sf-line); background: var(--sf-card); color: var(--sf-ink);
  padding: 6px 11px; font: inherit; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-decoration: none; }
.sf-cardbtn:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-cardbtn.x { margin-left: auto; }
.sf-cardbody { padding: 22px clamp(18px, 5vw, 44px) 48px; }
.sf-cardkick { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-dek); margin-bottom: 6px; }
.sf-cardtitle { font-family: var(--sf-display); font-weight: 900; font-size: clamp(24px, 4vw, 38px); line-height: 1.05; margin: 0 0 14px; }
.sf-cardimg { width: 100%; display: block; height: auto; border: 1px solid var(--sf-rule); margin: 0 0 16px; }
.sf-cardimg.zoomable { cursor: zoom-in; margin-bottom: 8px; }
.sf-cardzoom { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; background: none; border: 1px solid var(--sf-line); border-radius: 999px; padding: 7px 15px; min-height: 36px; color: var(--sf-ink); cursor: zoom-in; }
.sf-cardzoom:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-cardtext { font-size: 17px; line-height: 1.62; white-space: pre-wrap; }
.sf-cardnote { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sf-line); font-family: var(--sf-mono); font-size: 13px; color: var(--sf-dek); }
.sf-cardnote a { color: var(--sf-kick); }

/* ── the radar overlay (scroll-radar.js) ── */
.rd-ov { position: fixed; inset: 0; z-index: 3400; background: rgba(10, 8, 14, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.rd-panel { background: #0d0d14; border: 1px solid #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,.5); max-width: 96vw; }
.rd-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid #23202e; color: #d8d2e6; }
.rd-title { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #9a90c0; }
.rd-x { background: none; border: none; color: #8a80a8; font-size: 16px; cursor: pointer; }
/* simple zoom — same frame, bigger pixels. buttons big enough for a shaky day (30px palsy rule) */
.rd-zooms { display: flex; gap: 8px; margin-left: auto; margin-right: 12px; }
.rd-zoom { min-width: 34px; min-height: 30px; border: 1px solid #3a3352; background: #1c1830;
  color: #cfc8ea; font-size: 17px; cursor: pointer; border-radius: 6px; }
.rd-grid { transition: transform 150ms ease; }
.rd-stage { position: relative; width: 768px; max-width: 92vw; height: 768px; max-height: 62vh; overflow: hidden; background: #101018; cursor: grab; touch-action: none; }
.rd-grid img { -webkit-user-drag: none; user-select: none; pointer-events: none; }   /* drag/scroll-zoom target is the stage, not the tiles */
.rd-grid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 768px; height: 768px;
  display: grid; grid-template-columns: repeat(3, 256px); grid-template-rows: repeat(3, 256px); }
.rd-cell { position: relative; width: 256px; height: 256px; }
.rd-base, .rd-rad { position: absolute; inset: 0; width: 256px; height: 256px; display: block; }
.rd-base { filter: grayscale(.4) brightness(.85); }
.rd-rad { mix-blend-mode: normal; }
.rd-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #c9a7ff; border: 2px solid #14121d; transform: translate(-50%, -50%); box-shadow: 0 0 10px #c9a7ff; pointer-events: none; }
.rd-cred { position: absolute; top: 8px; right: 10px; background: rgba(20,18,29,.85); color: #a89ec4;
  font-family: var(--sf-mono); font-size: 13px; padding: 4px 9px; border-radius: 6px; }
.rd-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #14121d; color: #e8e4f0; }
.rd-play { width: 40px; height: 40px; border-radius: 50%; border: none; background: #c9a7ff; color: #14121d; font-size: 18px; cursor: pointer; flex: 0 0 auto; }
.rd-stamps { min-width: 130px; }
.rd-stamps #rd-stamp { font-weight: 800; font-size: 18px; }
.rd-sub { color: #a89ec4; font-size: 13px; font-family: var(--sf-mono); }
.rd-scrub { flex: 1; }

/* ── SEARCH THE NAMED SOURCES (scroll-search.js) ── */
.sf-search { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 640px; margin: 8px auto 2px; }
.sf-q { flex: 1 1 auto; min-width: 0; padding: 10px 14px; font: inherit; font-size: calc(var(--fs-ui, 15px) * 1.1);
  border: 2px solid var(--sf-line); border-radius: 0; background: var(--sf-card); color: inherit; }
.sf-q:focus { outline: none; border-color: var(--sf-kick); }
.sf-go, .sf-back { flex: 0 0 auto; padding: 10px 16px; font: inherit; font-size: var(--fs-ui, 15px); font-weight: 700;
  border: 2px solid var(--sf-line); border-radius: 0; background: transparent; color: inherit; cursor: pointer;
  font-family: var(--sf-mono); text-transform: uppercase; }
.sf-go:hover, .sf-back:hover { background: var(--sf-card); }
.sf-back[hidden] { display: none; }
/* the surf-the-web toggle — flips the search from named sources to the open web (Sum 2026-07-22) */
.sf-surf { flex: 0 0 auto; padding: 10px 14px; font: inherit; font-size: var(--fs-ui, 15px); font-weight: 700;
  border: 2px solid var(--sf-line); border-radius: 0; background: transparent; color: var(--sf-dek); cursor: pointer;
  font-family: var(--sf-mono); text-transform: uppercase; white-space: nowrap; }
/* the ＋ door — open anything in the Portal (Sum 2026-07-22). square, matches the bar. */
.sf-plus { flex: 0 0 auto; width: 40px; padding: 10px 0; font: inherit; font-size: 20px; font-weight: 700; line-height: 1;
  border: 2px solid var(--sf-line); border-radius: 0; background: transparent; color: var(--sf-kick); cursor: pointer; }
.sf-plus:hover { background: var(--sf-kick); border-color: var(--sf-kick); color: #fff; }
.sf-surf:hover { background: var(--sf-card); color: inherit; }
.sf-surf.on { background: var(--sf-kick); border-color: var(--sf-kick); color: #fff; }
.sf-found-head { max-width: 640px; margin: 14px auto 6px; font-family: var(--sf-mono); font-size: var(--fs-ui, 14px);
  font-weight: 700; letter-spacing: .04em; opacity: .75; text-align: center; }

/* ── THE WIRELESS (scroll-radio.js) — a newspaper with a soundtrack. A persistent dock,
      bottom-left, immune to the render loop. All glyphs drawn (no emoji), themed by register. */
#sf-radio { position: fixed; left: 14px; bottom: 14px; z-index: 3200; font-family: var(--sf-mono); }
#sf-radio[hidden] { display: none; }
.sf-rad-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  background: var(--sf-card); color: var(--sf-ink); border: 1px solid var(--sf-rule); cursor: pointer;
  font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 6px 20px var(--sf-shadow); }
.sf-rad-pill:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-rad-ico { font-size: 17px; line-height: 0; color: var(--sf-kick); display: inline-flex; }
.sf-rad-pill-txt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the "on air" tell — a soft pulse, not an emoji */
.sf-rad-air { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-kick); flex: 0 0 auto;
  box-shadow: 0 0 0 0 var(--sf-kick); animation: sf-rad-pulse 1.8s ease-out infinite; }
@keyframes sf-rad-pulse { 0% { box-shadow: 0 0 0 0 var(--sf-kick); opacity: 1; }
  70% { box-shadow: 0 0 0 7px transparent; opacity: .55; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-rad-air { animation: none; } }

.sf-rad-panel { width: 366px; max-width: calc(100vw - 28px); background: var(--sf-bg); color: var(--sf-ink);
  border: 1px solid var(--sf-rule); box-shadow: 0 14px 44px var(--sf-shadow); }
.sf-rad-top { display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-bottom: 2px solid var(--sf-rule); background: var(--sf-card); }
.sf-rad-name { font-family: var(--sf-display); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.sf-rad-status { margin-left: auto; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--sf-dek); }
.sf-rad-status[data-air="true"] { color: var(--sf-kick); }
.sf-rad-x { flex: 0 0 auto; border: none; background: none; color: var(--sf-dek); cursor: pointer; font-size: 15px;
  line-height: 0; display: inline-flex; padding: 2px; }
.sf-rad-x:hover { color: var(--sf-kick); }
.sf-rad-dial { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.sf-rad-chip { text-align: left; border: 1px solid var(--sf-line); background: var(--sf-card); color: var(--sf-ink);
  padding: 7px 9px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.sf-rad-chip b { font-family: var(--sf-display); font-size: 15px; letter-spacing: .02em; }
.sf-rad-chip span { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-dek); }
.sf-rad-chip:hover { border-color: var(--sf-kick); }
.sf-rad-chip.on { border-color: var(--sf-kick); background: var(--sf-kick); color: #fff; }
.sf-rad-chip.on span { color: #fff; }
.sf-rad-loc { grid-column: 1 / -1; }
/* MY MUSIC ＋ — the "add local music" chip, a quiet accent (Sum 2026-07-22) */
.sf-rad-add { border-style: dashed; color: var(--sf-kick); }
.sf-rad-add b { color: var(--sf-kick); }
.sf-rad-slot { display: flex; gap: 6px; padding: 0 10px 10px; }
.sf-rad-url { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--sf-line); background: var(--sf-card); color: inherit; }
.sf-rad-url:focus { outline: none; border-color: var(--sf-kick); }
.sf-rad-url.nudge { border-color: var(--sf-kick); box-shadow: 0 0 0 3px var(--sf-shadow); }
.sf-rad-set { flex: 0 0 auto; padding: 7px 11px; font: inherit; font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; border: 1px solid var(--sf-line); background: transparent; color: inherit; cursor: pointer; }
.sf-rad-set:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-rad-transport { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--sf-line); }
.sf-rad-play { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--sf-kick); color: #fff; cursor: pointer; font-size: 18px; line-height: 0; display: inline-flex;
  align-items: center; justify-content: center; }
.sf-rad-now { flex: 1 1 auto; min-width: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sf-dek); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-rad-vol { flex: 0 0 58px; accent-color: var(--sf-kick); }
.sf-rad-foot { padding: 0 11px 10px; font-size: 13px; line-height: 1.4; color: var(--sf-dek); }
/* ── THE TUNER (Sum 2026-07-23): the player IS the base state; ◀ ▶ dial the stations; the one
   overlay (all stations / the playlist) floats ABOVE, picks-and-vanishes, never hides the player. ── */
#sf-radio { position: fixed; }              /* (re-asserted — the overlay anchors to this box) */
.sf-rad-player { width: 330px; padding: 9px 11px 11px; }
.sf-rad-dialrow { display: flex; align-items: center; gap: 7px; }
.sf-rad-stname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sf-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; text-align: center;
  background: var(--sf-card); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; }
.sf-rad-stname:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-rad-song { font-size: 13px; color: var(--sf-dek); margin: 6px 2px 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sf-rad-mode { padding: 5px 7px; border: 1px solid var(--sf-line); border-radius: 8px; background: var(--sf-card);
  color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sf-rad-ov { position: absolute; bottom: calc(100% + 8px); left: 0; width: 366px; max-width: calc(100vw - 28px);
  max-height: 62vh; overflow-y: auto; background: var(--sf-bg); color: var(--sf-ink);
  border: 1px solid var(--sf-rule); box-shadow: 0 14px 44px var(--sf-shadow); padding-bottom: 4px; }
.sf-rad-player .sf-rad-transport { border-top: none; padding: 8px 0 0; }
.sf-rad-modrow { padding-top: 6px; }
.sf-rad-modrow .sf-rad-mode { flex: 0 0 auto; }
.sf-rad-modrow .sf-rad-vol { flex: 1 1 auto; }
/* transport step/toggle buttons — back · next · shuffle · loop */
.sf-rad-tbtn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--sf-line);
  background: var(--sf-card); color: var(--sf-ink); cursor: pointer; font-size: 15px; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.sf-rad-tbtn:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-rad-tbtn.on { background: var(--sf-kick); border-color: var(--sf-kick); color: #fff; }
/* the iPod/Zune list — tap a track to play it; the playing one is lit */
.sf-rad-list { max-height: 184px; overflow-y: auto; padding: 4px 10px; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--sf-line); }
.sf-rad-track { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  border: none; background: none; color: var(--sf-ink); font: inherit; padding: 7px 8px; border-radius: 7px; }
.sf-rad-track:hover { background: var(--sf-card); }
.sf-rad-track.on { background: var(--sf-kick); color: #fff; }
.sf-rad-tnum { flex: 0 0 auto; width: 1.6em; text-align: right; font-family: var(--sf-mono); font-size: 13px; color: var(--sf-dek); }
.sf-rad-track.on .sf-rad-tnum { color: #fff; }
.sf-rad-tname { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) { #sf-radio { left: 8px; bottom: 8px; } }
/* the playlist's one exit — a full-width close bar at its foot (the playlist stays open otherwise) */
.sf-rad-ovclose { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 9px 0; border: none; border-top: 1px solid var(--sf-line); background: var(--sf-card);
  color: var(--sf-dek); font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.sf-rad-ovclose:hover { color: var(--sf-kick); }
/* the resting plug — one small icon, an opaque seat (the png-contrast law), the on-air pulse riding it */
.sf-rad-icobtn { border: none; background: none; cursor: pointer; padding: 2px; display: inline-flex; }
.sf-rad-icobtn:hover { color: var(--sf-kick); }
.sf-rad-minicon { position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sf-rule); background: var(--sf-bg); color: var(--sf-kick);
  box-shadow: 0 8px 24px var(--sf-shadow); cursor: pointer; font-size: 19px; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.sf-rad-minicon:hover { border-color: var(--sf-kick); }
.sf-rad-minicon .sf-rad-air { position: absolute; top: 3px; right: 3px; }
/* TWO BARS (Sum 2026-07-23): horizontal = track position; volume = a number box popping a VERTICAL
   slider (parabolic taper — the quiet end fine, loud is just loud). pick, it hides on any other click. */
.sf-rad-volwrap { position: relative; display: inline-flex; margin-left: auto; }
.sf-rad-volnum { min-width: 40px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sf-line); border-radius: 8px;
  background: var(--sf-card); color: var(--sf-ink); font-family: var(--sf-mono); font-size: 14px;
  font-weight: 700; cursor: pointer; text-align: center; }
.sf-rad-volnum:hover { border-color: var(--sf-kick); color: var(--sf-kick); }
.sf-rad-volpop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--sf-bg); border: 1px solid var(--sf-rule); box-shadow: 0 10px 30px var(--sf-shadow);
  padding: 12px 10px; border-radius: 10px; z-index: 5; }
.sf-rad-vvol { -webkit-appearance: slider-vertical; writing-mode: vertical-lr; direction: rtl;
  width: 26px; height: 120px; accent-color: var(--sf-kick); }
.sf-rad-seek { width: 100%; accent-color: var(--sf-kick); }
/* drag-to-trash (Sum 2026-07-23): the can waits under the list; drop arms the are-you-sure bar */
.sf-rad-trash { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 10px;
  padding: 10px; border: 2px dashed var(--sf-line); border-radius: 10px; color: var(--sf-dek);
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sf-rad-trash.hot { border-color: var(--sf-kick); color: var(--sf-kick); background: var(--sf-card); }
.sf-rad-delbar { display: flex; align-items: center; gap: 8px; margin: 6px 10px; padding: 10px;
  border: 2px solid var(--sf-kick); border-radius: 10px; }
.sf-rad-deltxt { flex: 1 1 auto; font-size: 13px; line-height: 1.4; }
.sf-rad-delyes { border-color: var(--sf-kick); color: var(--sf-kick); font-weight: 700; }

/* ── THE SKY — the weather page (Sum 2026-07-24): clock-style widget cards at the top of the paper,
   each clickable to expand its detail. scrolls with the content (does NOT auto-hide). ── */
.sf-wxpage { max-width: 1560px; margin: 0 auto; padding: 12px 20px 4px; border-bottom: 1px solid var(--sf-line); }
.sf-wxpage[hidden] { display: none; }
.sf-wxpage-head { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--sf-dek); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.sf-wxpage-head b { color: var(--sf-kick); }
.sf-wxpage-radar { margin-left: auto; cursor: pointer; color: var(--sf-kick); border-bottom: 1px solid var(--sf-kick); }
.sf-wxc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-wxc { flex: 1 1 116px; min-width: 104px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 6px; border: 1px solid var(--sf-line); border-radius: 10px; background: var(--sf-card); color: var(--sf-ink); cursor: pointer; font: inherit; }
.sf-wxc:hover { border-color: var(--sf-kick); }
.sf-wxc.on { border-color: var(--sf-kick); box-shadow: inset 0 -3px 0 var(--sf-kick); }
.sf-wxc-ic { display: block; }
.sf-wxc-ic .wxg { width: 26px; height: 26px; }
.sf-wxc-big { font-family: var(--sf-display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.sf-wxc-big small { font-size: 12px; font-weight: 600; }
.sf-wxc-lab { font-family: var(--sf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-dek); }
.sf-wxc-detail { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--sf-kick); background: var(--sf-card); font-size: 15px; color: var(--sf-ink); }
.sf-wxc-detail[hidden] { display: none; }
/* The Sky — OUR png on oz/unicorn, drawn glyph on corp/clinical (Sum 2026-07-24) + the click-to-expand detail */
.sf-wxc-ic .sf-wxc-png { width: 30px; height: 30px; object-fit: contain; display: block; }
.sf-wxc-rows { display: flex; flex-direction: column; }
.wx-detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border-bottom: 1px dotted var(--sf-line); }
.wx-detail-key { color: var(--sf-dek); text-transform: uppercase; font-family: var(--sf-mono); font-size: 12px; letter-spacing: .05em; }
.wx-detail-val { font-weight: 700; }
.sf-wxc-prose { margin: 8px 0 0; color: var(--sf-ink); }
.sf-wxc-tut { margin: 8px 0 0; padding-left: 18px; color: var(--sf-dek); font-size: 14px; line-height: 1.5; }
.sf-wxc-tut li { margin: 3px 0; }
.sf-fc-ic .sf-wxc-png { width: 26px; height: 26px; object-fit: contain; display: inline-block; vertical-align: middle; }
/* THE FUNNY PAGES in the left rail (Sum 2026-07-24) — a small cartoon THUMBNAIL; click → the whole strip
   opens in the card (SF_CARD) with a "feed the artist" link. text-only where a feed gives no image. */
.sf-funnies-rail .sf-block { padding: 9px 0; border-top: 1px solid var(--sf-line); cursor: pointer; }
.sf-funnies-rail .sf-block:first-of-type { border-top: 0; padding-top: 2px; }
.sf-funnies-rail .sf-hero { width: 100%; max-height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 5px; display: block; }
.sf-funnies-rail .sf-title { font-size: 15px; line-height: 1.25; }
.sf-funnies-rail .sf-dek-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
@media (max-width: 680px) { .sf-wxc { flex: 1 1 88px; min-width: 84px; } }

/* THE LITTLE CARD (2026-07-24: the clock's grammar — pop, pairs tight, vanish; never a page-wide bar) */
.wx-pop { position: absolute; z-index: 40; background: var(--sf-card); border: 1px solid var(--sf-rule);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px 14px; }
.wx-pop .wx-pop-head { font-family: var(--sf-serif); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.wx-pop .wx-detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0;
  border-bottom: 1px dotted var(--sf-line); font-size: 14px; }
.wx-pop .wx-detail-row b { font-weight: 700; }
.wx-pop .sf-wxc-prose { font-size: 13px; color: var(--sf-dek); margin: 8px 0 0; line-height: 1.5; }
.wx-pop .sf-wxc-tut { font-size: 13px; color: var(--sf-dek); margin: 6px 0 0 16px; line-height: 1.5; }
.sf-fc-day { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* THE QUALITY SCREEN — a low-res hero demotes itself to an honest thumb; the headline leads */
.sf-hero-lowres { float: right; width: 200px; max-width: 42%; height: auto; margin: 4px 0 8px 14px; border: 1px solid var(--sf-line); }

/* TOO SOON -- the widget header's little resident of the commons */
.sf-mona { height: 20px; vertical-align: -4px; margin-right: 5px; }

/* contain the lowres float inside its own cell (2026-07-25: the Headspace thumb
   overflowed the card bottom) — flow-root is the modern clearfix, zero side effects */
.sf-col-center article { display: flow-root; }

/* today's koan wears its picture when it has one (2026-07-25) */
.sf-koan-pic { display: block; width: 100%; height: auto; margin: 8px 0 2px; border: 1px solid var(--sf-line); }

/* the canvas hangs the WHOLE work — never crop a painting (2026-07-25: the 16/9 cover
   framed Mona at the chest. her eyes are up here.) */
.sf-hero-art { aspect-ratio: auto; height: auto; object-fit: contain; max-height: 78vh; }
/* ⚠ max-height (2026-08-05): contain with no cap means a 2000x4000 plate renders TWO THOUSAND
   pixels tall at column width — the reader is scrolled inside the picture and reads it as cropped.
   Sum: "still cropped". It was not cropped; it was taller than the screen. 78vh keeps a tall piece
   whole and on one screen; the loupe is there for the detail. */
/* the rails hang the whole work too (2026-07-25 round 2: the compact-thumb cover rule outweighed
   contain and re-cropped her) — smaller art, taller card, never the bosom crop */
.sf-small .sf-hero-art { aspect-ratio: auto; max-height: 300px; width: auto; max-width: 100%; margin: 0 auto 6px; object-fit: contain; }

/* the bottom bar is now the gear door (first-edition calm) */
button.sf-more { font: inherit; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; background: none; border: 2px solid var(--sf-rule); border-radius: 999px; padding: 12px 22px; min-height: 44px; cursor: pointer; display: block; margin: 22px auto 30px; color: inherit; }
/* CHOOSE YOUR OWN ADVENTURE — the page-foot menu (Sum 2026-07-26): pick your next section, or the gear */
.sf-menu { text-align: center; margin: 22px auto 34px; }
.sf-menu .sf-more { margin: 9px auto; }
.sf-menu-lab { font-family: var(--sf-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--sf-dek); margin-bottom: 2px; }
.sf-menu .sf-menu-gear { border-style: dashed; opacity: .72; font-size: 13px; }
.sf-menu .sf-menu-gear:hover { opacity: 1; }
.sf-menu .sf-menu-close { border-color: var(--sf-kick); }

/* THE PRESS CURTAIN — the masthead holds the stage till the wire lands; then the sheet lifts */
.sf-curtain { position: fixed; inset: 0; z-index: 60; background: var(--sf-bg, #f4efe2); display: flex; align-items: center; justify-content: center; transition: transform .85s cubic-bezier(.7, 0, .3, 1); }
.sf-curtain-inner { text-align: center; padding: 20px; }
.sf-curtain-inner img { width: 120px; height: auto; margin-bottom: 6px; }
.sf-curtain-inner h1 { font-size: 34px; letter-spacing: .5px; }
.sf-curtain-rule { width: 220px; margin: 10px auto; border-top: 3px double var(--sf-ink, #232019); }
.sf-curtain-inner p { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--sf-dek, #7a7263); }
.sf-curtain-up { transform: translateY(-101%); }
.sf-curtain-dots span { animation: sfdots 1.2s infinite; }
.sf-curtain-dots span:nth-child(2) { animation-delay: .2s; } .sf-curtain-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes sfdots { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sf-curtain { transition: opacity .45s; } .sf-curtain-up { transform: none; opacity: 0; } .sf-curtain-dots span { animation: none; } }

/* ── THE LOUPE (Sum 2026-07-25: "zoom on art cards — scroll zoom at cursor, drag to pan") ── */
.sf-card { position: relative; }
.sf-loupe-btn { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: var(--sf-card); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 999px; cursor: pointer; opacity: .85; }
.sf-loupe-btn:hover, .sf-loupe-btn:focus-visible { opacity: 1; }
.sf-loupe-btn svg { width: 20px; height: 20px; }
.sf-loupe { position: fixed; inset: 0; z-index: 9999; background: rgba(18, 15, 10, .94); display: flex; flex-direction: column; }
.sf-loupe-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #f4efe1; }
.sf-loupe-title { flex: 1; font-size: 17px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-loupe-bar button { min-width: 44px; min-height: 44px; font-size: 22px; background: none; border: 2px solid #f4efe1; color: #f4efe1; border-radius: 999px; cursor: pointer; }
.sf-loupe-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.sf-loupe-stage.grabbing { cursor: grabbing; }
.sf-loupe-stage img { max-width: 92vw; max-height: 82vh; transform-origin: center; user-select: none; -webkit-user-drag: none; }

/* ── THE COLOPHON — page 4, the printer's page + THE STERN LOCKER ── */
.sf-colophon { border: 2px solid var(--sf-rule); padding: 26px 28px; margin: 8px 0 18px; background: var(--sf-card); }
.sf-colophon h2 { font-size: 34px; margin: 0 0 6px; text-align: center; }
.sf-colo-line { text-align: center; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; margin: 0 0 18px; color: var(--sf-dek); }
.sf-colo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.sf-colo-grid h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.sf-colo-grid p { margin: 0; font-size: 15px; }
.sf-colo-sup { margin: 18px 0 0; font-size: 15px; font-style: italic; text-align: center; }
.sf-colo-gear { text-decoration: underline; cursor: pointer; font-style: normal; }
.sf-locker-h { letter-spacing: .12em; text-transform: uppercase; font-size: 14px; border-top: 2px solid var(--sf-rule); padding-top: 14px; margin: 10px 0 10px; }
/* TOUCH GRASS (Sum 2026-07-26) — the floor of the news; the paper ends and sends you outside. */
.sf-touchgrass { max-width: 620px; margin: 64px auto 48px; text-align: center; padding: 36px 22px 8px; border-top: 3px double var(--sf-rule); }
.sf-touchgrass h2 { font-size: 27px; line-height: 1.2; margin: 0 0 18px; }
.sf-touchgrass p { font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.sf-tg-note { font-size: 14px; font-style: italic; color: var(--sf-dek); }
.sf-tg-big { font-weight: 700; font-size: 22px; line-height: 1.45; margin: 28px 0; }
.sf-tg-sig { font-family: var(--sf-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-dek); }
.sf-tg-rule { border: 0; border-top: 1px solid var(--sf-rule); width: 56px; margin: 26px auto; }
.sf-tg-grass { font-style: italic; font-size: 16px; }

/* THE PAGE DIVIDER (Sum 2026-07-26: pages open BELOW) — the seam where the next sheet begins as the
   paper grows. a heavy double rule with the section name centered in it, the way a broadsheet turns. */
.sf-page-div { display: flex; align-items: center; gap: 14px; margin: 34px 0 22px; }
.sf-page-div::before, .sf-page-div::after { content: ""; flex: 1; border-top: 3px double var(--sf-rule); }
.sf-page-div span { font-family: var(--sf-mono); letter-spacing: .18em; text-transform: uppercase; font-size: 13px; color: var(--sf-dek); white-space: nowrap; }
@media (max-width: 700px) { .sf-colo-grid { grid-template-columns: 1fr; } }

/* ── SEARCH/SURF MODE reshapes the grid (2026-07-25: without this, hiding the left rail slid
   the center into the narrow 290px track — results wore the rail's clothes) ── */
.sf-page.sf-surfing { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1060px) { .sf-page.sf-surfing { grid-template-columns: minmax(0, 1fr); } }

/* READING MODE — one column, whole screen, XL & zoomable (Sum 2026-07-27: "the L/R balancer's toggles are
   no longer needed; I need a columns-or-all-in-center toggle on the whole map — biggest font I can zoom to
   and still read, starts XL in the center, zoom down to legally-blind-on-a-tiny-phone"). Pure ADA-for-Sum. */
.sf-page.sf-onecol { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.sf-page.sf-onecol .sf-col-left, .sf-page.sf-onecol .sf-col-right { display: none; }
.sf-page.sf-onecol .sf-col-center { border-right: none; zoom: var(--fs-scale, 1.25); }   /* zoom scales the whole reading column — text AND art — proportionally; WebKit-native */
/* the reading toolbar — fixed, always reachable, every control NAMED so Voice Control can drive it */
/* UP TOP, not a bottom-corner ghost (Sum 2026-07-27). the toggle shows ONE column icon 3× (columns) or
   1× (reader) — the count IS the mode. all in the card (standalone; no app-shell lean). */
.sf-readctl { position: fixed; top: 2px; left: 6px; z-index: 60; display: flex; gap: 4px; align-items: center;
  background: var(--sf-card); border: 1px solid var(--sf-rule); border-radius: 999px; padding: 3px 7px; box-shadow: 0 2px 10px var(--sf-shadow); }
.sf-readctl button { font-family: var(--sf-mono); font-size: 14px; background: none; border: 1px solid transparent;
  border-radius: 999px; padding: 5px 9px; min-height: 34px; cursor: pointer; color: var(--sf-ink); display: inline-flex; align-items: center; gap: 4px; }
.sf-readctl button:hover, .sf-readctl button:focus-visible { border-color: var(--sf-kick); outline: none; }
.sf-rc-col { height: 22px; width: auto; display: block; }   /* the single column, repeated to show the mode */
.sf-readctl .sf-rc-z { display: none; text-transform: uppercase; }
.sf-readctl.onecol .sf-rc-z { display: inline-flex; align-items: center; justify-content: center; }
@media print { .sf-readctl { display: none; } }

/* THE CURATE BOX + THE WAKE — the surf's right rail */
.sf-pinzone.over { outline: 2px dashed var(--sf-kick); outline-offset: -4px; }
.sf-pin-hint { font-size: 14px; font-style: italic; color: var(--sf-dek); margin: 4px 0 2px; }
.sf-wake-run { border-top: 1px solid var(--sf-line); padding: 8px 0 4px; }
.sf-wake-run:first-of-type { border-top: none; }
.sf-wake-q { display: block; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--sf-kick); margin-bottom: 4px; }
.sf-wake-link { display: flex; align-items: baseline; gap: 6px; margin: 3px 0; }
.sf-wake-link a { font-size: 14px; color: var(--sf-ink); text-decoration: none; border-bottom: 1px solid var(--sf-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sf-wake-link a:hover { border-bottom-color: var(--sf-kick); }
.sf-unpin { background: none; border: none; color: var(--sf-dek); cursor: pointer; font-size: 14px; min-width: 32px; min-height: 32px; }

/* HOLD THE SPACE (Sum 2026-07-25: "cards hold their space while they wait — blanks filling in") —
   an unloaded canvas keeps a blank plate instead of 0 height, so paint arriving never shoves the page */
.sf-hero-art { min-height: 220px; background: var(--sf-card); }
.sf-small .sf-hero-art { min-height: 150px; }

/* THE COMIC SCROLLER — one card per source; multiple strips swipe/arrow with a 1/N counter
   (Sum 2026-07-25: "if more than one from each source, a scroller into a card to read them all") */
.sf-comic-scroller { position: relative; border: 1px solid var(--sf-line); border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.sf-cs-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 9px; font-family: var(--sf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-kick); }
.sf-cs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-cs-track::-webkit-scrollbar { display: none; }
.sf-cs-track:focus-visible { outline: 2px solid var(--sf-kick); outline-offset: -2px; }
.sf-cs-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.sf-cs-slide .sf-block { padding: 0 9px 9px; }
.sf-cs-prev, .sf-cs-next { position: absolute; top: 54%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-ink); cursor: pointer; opacity: .9; font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.sf-cs-prev:hover, .sf-cs-next:hover, .sf-cs-prev:focus-visible, .sf-cs-next:focus-visible { opacity: 1; border-color: var(--sf-kick); }
.sf-cs-prev { left: 5px; } .sf-cs-next { right: 5px; }

/* CONTINUOUS SCROLL section headers — THE TOWN · THE WORLD stacked below the front (Sum 2026-07-26) */
.sf-section-h { font-family: var(--sf-display); font-weight: 900; font-size: clamp(26px, 5vw, 40px); text-align: center; letter-spacing: .02em; margin: 34px 0 6px; padding-top: 22px; border-top: 3px double var(--sf-rule); color: var(--sf-ink); }
:root[data-reg="corp"] .sf-section-h, :root[data-reg="clinical"] .sf-section-h { font-weight: 800; letter-spacing: -.01em; }

/* ⭐ THE PAPER IS THE PORT (Sum 2026-08-05: "just no roll, no shuffle, no change under my feet, no
   10 page scroll settings — just port the paper. scroll.js is desk.js in disguise"). The roll, the
   shuffle and the churn were already cut (SET_EDITION · EDSEED · baked canvas · press unloaded).
   This is the last cut: the settings DOOR does not ship on the public paper. Nothing is renamed and
   nothing is removed — scroll-settings.html still exists for the desk; the reader just never sees
   the handle. One rule, fully reversible. */
#gear, [data-adact="gear"] { display: none !important; }
/* THE FOLD · the Too Soon faces (art deployed Jul 27, entries never pointed at it) */
.sf-ts-media{width:100%;height:auto;display:block;margin:0 0 8px;border:1px solid var(--sf-line)}
/* THE LONG READ — the card scrolls; the page never had to fit it */
.sf-longread{max-width:680px;max-height:88vh;overflow-y:auto;background:var(--sf-bg);border:1px solid var(--sf-line);padding:30px 36px;position:relative}
.sf-longread .k{font-family:var(--sf-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-kick)}
.sf-longread h2{font-family:var(--sf-display);font-size:28px;margin:6px 0 14px}
.sf-longread p{font-size:16.5px;line-height:1.7;margin:0 0 14px}
.sf-longread .sig{font-family:var(--sf-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-kick)}
.sf-longread .sf-loupe-x{position:sticky;top:0;float:right;font-family:var(--sf-mono);font-size:11px;background:var(--sf-card);color:var(--sf-kick);border:1px solid var(--sf-kick);padding:6px 10px;cursor:pointer}
/* THE CARD PLAYS VIDEO — one player, in the paper, close is the same ✕ */
.sf-cardvid{width:100%;height:auto;display:block;margin:10px 0;border:1px solid var(--sf-line);background:#000}
/* the living still rides in its own frame — his file, his tempos */
.sf-livingframe{width:100%;aspect-ratio:3/2;border:1px solid var(--sf-line);display:block;background:var(--sf-card)}