/* Fonts: self-hosted variable woff2 (fontsource, OFL), latin + latin-ext only */
@font-face { font-family: "Playfair Display"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(/assets/fonts/playfair-display-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900;
  src: url(/assets/fonts/source-serif-4-latin-ext-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* sorenross.com — site stylesheet (from mockup V1, approved 2026-10-21). Tokens derived from docs/DESIGN-BRIEF.md §2–§4.
   Contrast (WCAG, measured): ink/paper 15.9 · navy/paper 11.8 · muted/paper 6.9 · white/accent-ink 5.2 ·
   accent/paper 3.5 (non-text only: rules, underline, focus). Redesign v2 pairs on --wash and --chip: lib/contrast.test.js */
:root {
  --paper: #fdfcf9;       /* near-white, warm; not cream */
  --ink: #1f2023;         /* body text */
  --navy: #1a365d;        /* titles, links, endpaper */
  --muted: #5c5852;       /* meta, deck, margin notes */
  --rule: #e4dfd6;        /* hairlines (decorative) */
  --accent: #ea580c;      /* house orange — NON-TEXT ONLY */
  --accent-ink: #c2410c;  /* orange that carries text (button bg, note numbers) */
  --wash: #f4f2ed;        /* redesign v2: panels, grouped lists, footer (no border, a tone) */
  --chip: #edeae3;        /* chips, grey buttons */
  --sep: rgba(31, 32, 35, .13);   /* hairline separators */
  --deep: #1a365d; --deep-ink: #fdfcf9; --deep-muted: #c9d3e3;   /* the home page's guide panel (redesign v2, step 2) */
  --button-bg: #c2410c; --button-hover: #a8380a; --button-ink: #fff;
  --card: #fff; --field-line: #8a857d;   /* --card: the page from the guide on /free-guide/; --field-line: form fields */
  --flag-red: #b42318; --flag-green: #1e7a3c;
  --flag-red-bg: #f9ebe7; --flag-green-bg: #e8f2ea;   /* redesign v2, step 4: flags and the form's error on a tone */
  --shadow: 26, 54, 93;
  color-scheme: light dark;

  --f-display: "Playfair Display", Georgia, serif;
  --f-text: "Source Serif 4", Georgia, serif;
  /* Redesign v2 (#4764): the UI face is the reader's own system font (SF on Apple devices, Segoe, Roboto). SF Pro is
     licensed for Apple-platform mock-ups only, so it is never shipped; the browser draws it from the device. */
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34em;        /* ≈ 66–70 characters at the text size */
  --margin-w: 13rem;      /* margin-note column */
  --margin-gap: 3rem;
  --gutter: clamp(16px, 5vw, 48px);
  --page: 72rem;

  /* Redesign v2 (#4764): small radii (16–26 px read as generated design); circles stay only on the route line */
  --r-img: 4px; --r-box: 6px; --r-ctl: 6px; --r-menu: 8px;
  --rail: 13rem; --col-gap: 3rem;   /* essay: contents column on the left */
}

/* Dark theme (decision 2026-10-21), from the reader's system setting; no toggle, no JS. Warm near-black, not pure black.
   Contrast (WCAG, measured, enforced by lib/contrast.test.js): ink/paper 13.9 · navy/paper 9.8 · muted/paper 7.1 ·
   accent-ink/paper 8.2 · white/button 5.2 · accent/paper 7.2 (non-text) */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16171a; --ink: #e6e2da; --navy: #a9c1e4; --muted: #a8a297; --rule: #33312d;
    --accent: #f08a4b; --accent-ink: #f29a62;
    --wash: #1f2024; --chip: #27292e; --sep: rgba(230, 226, 218, .14);
    --deep: #15233b; --deep-ink: #e6e2da; --deep-muted: #b4bfd1;
    --button-bg: #c2410c; --button-hover: #a8380a; --button-ink: #fff;
    --card: #1f2125; --field-line: #7d786f;
    --flag-red: #f07167; --flag-green: #5cbf7c;
    --flag-red-bg: #2c1e1d; --flag-green-bg: #1b2a20;
    --shadow: 0, 0, 0;
  }
}

/* Page transitions between pages of the site (CSS only, Chrome/Edge/Safari 18+); none when the reader asks for less motion */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1.6 var(--f-text); font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 1.25rem; } }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration-line: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: .5rem 1rem; font: 600 1rem var(--f-ui); }
.skip:focus { left: var(--gutter); z-index: 10; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header (redesign v2): a translucent bar that stays on top ---------- */
html { scroll-padding-top: 4.75rem; }   /* anchors (contents, notes) land below the bar */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); box-shadow: inset 0 -1px 0 var(--sep); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-head { background: var(--paper); } }
.site-head__inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); min-height: 3.6rem; display: flex; align-items: center; gap: .6rem 1.2rem; }
/* The live site's logo (handwritten, a dashed line; verdict 2026-10-25), as a mask so it takes the theme's navy on the
   light header and its light blue in the dark theme. The name is kept as text for screen readers and forced colours. */
.wordmark { display: inline-flex; align-items: center; color: var(--navy); text-decoration: none; }
.wordmark .logo { display: block; width: calc(2.5rem * 800 / 212); height: 2.5rem; background: currentColor;
  -webkit-mask: url(/assets/brand/soren-ross-logo.png) no-repeat center / contain; mask: url(/assets/brand/soren-ross-logo.png) no-repeat center / contain; }
.wordmark-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (forced-colors: active) {
  .wordmark .logo { display: none; }
  .wordmark-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: italic 400 1.5rem/1 var(--f-display); }
}
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.site-nav a { font: 500 .95rem/1 var(--f-ui); color: var(--ink); text-decoration: none; display: block; padding: .5rem 0; }
.site-nav a:hover { color: var(--navy); text-decoration: none; }
.site-nav [aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--navy); font-size: 1.3rem; cursor: pointer; list-style: none; }
.icon-btn:hover { background: var(--chip); }
.icon-btn::-webkit-details-marker { display: none; }
.nav-menu { display: none; position: relative; }
.nav-menu .close-icon, .nav-menu[open] .open-icon { display: none; }
.nav-menu[open] .close-icon { display: block; }
.nav-menu nav { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 14rem; padding: .35rem; border-radius: var(--r-menu);
  background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 0 0 1px var(--sep), 0 14px 34px -10px rgba(var(--shadow), .38); }
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nav-menu a { display: block; padding: .75rem .8rem; border-radius: 5px; font: 500 1rem/1.2 var(--f-ui); color: var(--ink); text-decoration: none; }
.nav-menu a:hover { background: var(--chip); }
.nav-menu [aria-current="page"] { color: var(--navy); font-weight: 600; }
.nav-menu .is-ask { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 859px) {
  .site-nav, .site-head .head-ask { display: none; }   /* .site-head: outranks .btn, defined below */
  .site-head .search-open { margin-left: auto; }
  .nav-menu { display: block; }
}

/* symbols (lib/symbols.js): sized and coloured by the text around them */
.sym { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* controls: rounded rectangles, not capsules */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: 600 .9rem/1 var(--f-ui); padding: .7rem 1rem;
  min-height: 2.5rem; border: 0; border-radius: var(--r-ctl); background: var(--button-bg); color: var(--button-ink); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--button-hover); text-decoration: none; }
.btn--small { font-size: .85rem; padding: .5rem .85rem; min-height: 2.2rem; }
.btn--gray { background: var(--chip); color: var(--navy); }
.btn--gray:hover { background: var(--chip); box-shadow: inset 0 0 0 1px var(--sep); }
.btn[hidden] { display: none; }

/* ---------- shared type ---------- */
h1, h2, h3 { font-family: var(--f-display); color: var(--navy); font-weight: 600; line-height: 1.15; }
.ui { font-family: var(--f-ui); }
.meta { font: 400 .9rem/1.5 var(--f-ui); color: var(--muted); }
.meta a { color: var(--muted); }
.sep { padding: 0 .45em; color: var(--rule); }
.eyebrow { font: 600 .8rem/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.eyebrow--route { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-ink); margin: 0; }
.meta .m { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- page frame (essay + free-guide) ---------- */
.frame { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- essay ---------- */
/* Redesign v2 (#4764): ≥ 1300 px contents | text | margin notes; 980–1299 px contents | text (notes in the list at the
   end); below, one column with the contents folded above the text. */
.essay { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.essay-head { padding: clamp(2.2rem, 6vw, 4.5rem) 0 1.8rem; max-width: 44rem; }
.essay-head h1 { font-size: clamp(2.5rem, 6.2vw, 3.75rem); line-height: 1.05; margin: 0 0 1.1rem; letter-spacing: -.01em; }
.deck { font: italic 400 1.3rem/1.45 var(--f-text); color: var(--muted); margin: 0 0 1.6rem; max-width: 30em; }
@media (min-width: 768px) { .deck { font-size: 1.4rem; } }
.byline { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; }
.trail-chips { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.2rem; padding: .45rem .7rem; border-radius: 5px;
  background: var(--chip); color: var(--navy); font: 600 .8rem/1.25 var(--f-ui); text-decoration: none; }
.chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--sep); }
.chip small { font-size: 1em; font-weight: 500; color: var(--muted); }

/* the signature: the route line, one station per layer of a trail */
.route { display: flex; align-items: center; flex: none; }
.route i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent); }
.route i.on { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.route b { flex: 1; min-width: 6px; height: 2px; background: var(--accent); opacity: .55; }

.essay-figure { margin: 0 0 2.4rem; }
.essay-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-img); background: var(--wash); }
.essay-figure figcaption { font: 400 .85rem/1.45 var(--f-ui); color: var(--muted); margin-top: .6rem; max-width: var(--measure); }

.rail { display: none; }
.rail-h { font: 600 .74rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .35rem 0 .9rem; }
.toc { list-style: none; margin: 0 0 1.8rem; padding: 0 0 0 1.15rem; position: relative; display: grid; gap: .8rem; }
.toc::before { content: ""; position: absolute; left: 4px; top: .45rem; bottom: .45rem; width: 2px; background: var(--rule); }
.toc li { position: relative; }
.toc li::before { content: ""; position: absolute; left: -1.15rem; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--rule); }
.toc li.done::before { background: var(--accent); box-shadow: none; }
.toc li:has([aria-current])::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.toc a { display: block; color: var(--muted); text-decoration: none; }
.toc a:hover, .toc a[aria-current] { color: var(--navy); }
.toc a[aria-current] { font-weight: 600; }
.trailbox { display: grid; gap: .6rem; padding: .9rem; border-radius: var(--r-box); background: var(--wash); }
.trailbox .route { width: 100%; }
.trailbox-title { color: var(--navy); font-weight: 600; text-decoration: none; }
.trailbox .meta { margin: 0; font-size: .82rem; }
.trailbox .go { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.trailbox .go .sym { margin-left: .25rem; }

.toc-m { margin: 0 0 1.8rem; border-radius: var(--r-box); background: var(--wash); font: 400 .95rem/1.4 var(--f-ui); }
.toc-m summary { display: flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 .9rem; color: var(--navy); font-weight: 600; cursor: pointer; list-style: none; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m .chev { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.toc-m[open] .chev { transform: rotate(180deg); }
.prose .toc-m ol { margin: 0; padding: .1rem .9rem .9rem 2.2rem; display: grid; gap: .5rem; }
.prose .toc-m li { margin: 0; }

@media (min-width: 980px) {
  .essay { max-width: calc(var(--rail) + var(--col-gap) + var(--measure) + 2 * var(--gutter)); }
  .essay-head, .draft-note, .essay-figure figcaption { margin-left: calc(var(--rail) + var(--col-gap)); }
  .essay-grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--col-gap); }
  .essay-grid > .prose:first-child { grid-column: 2; }   /* no rail (no trail, one H2): the text keeps its column (review e6ceaa1 C1) */
  .rail { display: block; position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; font: 500 .88rem/1.4 var(--f-ui); }
  .toc-m { display: none; }
}
@media (min-width: 1300px) {
  .essay { max-width: calc(var(--rail) + var(--col-gap) + var(--measure) + var(--margin-gap) + var(--margin-w) + 2 * var(--gutter)); }
  .essay-grid .prose { padding-right: calc(var(--margin-w) + var(--margin-gap)); }   /* the margin notes' column */
}

.prose > * { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; hyphens: manual; }
.prose h2 { font-size: 1.65rem; margin: 2.3em 0 .55em; }
.prose blockquote { margin: 1.6em 0; padding: .1em 0 .1em 1.2em; border-left: 2px solid var(--navy);
                    font-style: italic; color: var(--navy); }
.prose blockquote p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose .questions, .prose .steps, .prose .who, .keep ul { padding-left: 0; }

/* the signature: notes live in the margin, next to the sentence they support */
.fnref { text-decoration: none; font: 600 .7em/1 var(--f-ui); color: var(--accent-ink); padding: 0 .1em; }
.fnref sup { vertical-align: super; font-size: 1em; line-height: 0; }
.sidenote { display: none; }
@media (min-width: 1300px) {
  .sidenote {
    display: block; float: right; clear: right; position: relative;
    width: var(--margin-w); margin: .3em calc(-1 * (var(--margin-w) + var(--margin-gap))) 1em 0;
    font: 400 .82rem/1.5 var(--f-text); color: var(--muted);
    border-top: 1px solid var(--accent); padding-top: .5rem;
  }
  .sidenote b { font: 600 .75rem/1 var(--f-ui); color: var(--accent-ink); margin-right: .35em; }
  .sidenote a { color: var(--muted); }
}

.endmark { display: flex; align-items: center; gap: .9rem; margin: 2.6em 0 3.2em;
           font: italic 400 1.35rem/1 var(--f-display); color: var(--navy); }
.endmark::before { content: ""; width: 2.5rem; height: 2px; background: var(--accent); }

/* Keep Exploring (lib/transforms.js restyleKeep): the essay's own block, in place, as a grouped list with images */
.keep { margin: 2.4em 0; }
.keep > p:first-child, .keep > h2 { font: 600 1.3rem/1.2 var(--f-display); color: var(--navy); margin: 0 0 .35rem; }
.keep > p:first-child strong, .keep > h2 strong { font-weight: inherit; }
.keep > p + p { margin: 0 0 .9rem; color: var(--muted); font-size: .95em; }
.prose .keep-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-box); background: var(--wash); overflow: hidden; }
.prose .keep-row { position: relative; display: flex; align-items: center; gap: .8rem; margin: 0; padding: .7rem .8rem .7rem .9rem; }
.keep-row + .keep-row::before { content: ""; position: absolute; top: 0; right: 0; left: .9rem; height: 1px; background: var(--sep); }
.keep-row:has(.keep-th) + .keep-row:has(.keep-th)::before { left: calc(.9rem + 72px + .8rem); }
.keep-th { flex: none; width: 72px; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden; background: var(--chip); }
.prose .keep-th img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.keep-text { flex: 1; min-width: 0; display: grid; gap: .15rem; font-family: var(--f-ui); }
.keep-text > a { font: 600 1.02rem/1.3 var(--f-display); color: var(--navy); text-decoration: none; }
.keep-text > a strong { font-weight: inherit; }
.keep-text > a::after { content: ""; position: absolute; inset: 0; }   /* the whole row opens the essay */
.keep-row:hover .keep-text > a { text-decoration: underline; text-decoration-color: var(--accent); }
.keep-row:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.keep-text > a:focus-visible { outline: none; }
.keep-desc { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.keep-desc a { position: relative; z-index: 1; }
.keep .dash { display: none; }
.keep-row .chev { flex: none; color: var(--muted); opacity: .6; }

/* Share and Next stop, after "Safe travels." (redesign v2) */
.share { margin: 0 0 2.4rem; padding-top: 1.2rem; box-shadow: inset 0 1px 0 var(--sep); }
.share .eyebrow { margin-bottom: .7rem; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.prose .pop { position: absolute; z-index: 5; top: calc(100% + .4rem); left: 0; min-width: 14rem; margin: 0; padding: .35rem; list-style: none;
  border-radius: var(--r-menu); background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 0 0 1px var(--sep), 0 14px 34px -10px rgba(var(--shadow), .38); }
.prose .pop li { margin: 0; }
.pop a { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 5px; font: 500 .92rem/1.2 var(--f-ui); color: var(--ink); text-decoration: none; }
.pop a .sym { color: var(--muted); }
.pop a:hover, .pop a:focus-visible { background: var(--button-bg); color: var(--button-ink); outline: none; }
.pop a:hover .sym, .pop a:focus-visible .sym { color: inherit; }
.pop-sep { height: 1px; margin: .3rem .6rem; background: var(--sep); }

.next { display: grid; margin: 0 0 2.4rem; border-radius: var(--r-box); background: var(--wash); overflow: hidden; color: var(--ink); text-decoration: none; }
.next:hover { text-decoration: none; }
.next:hover .next-title { text-decoration: underline; text-decoration-color: var(--accent); }
.prose .next-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; }
.next-txt { display: grid; gap: .6rem; padding: 1.3rem; align-content: center; }
.next .route { width: 100%; max-width: 18rem; }
.next-title { font: 600 1.45rem/1.15 var(--f-display); color: var(--navy); }
.next-deck { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.next .meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
@media (min-width: 720px) {
  .next:has(.next-pic) { grid-template-columns: 1fr 1.15fr; }
  .prose .next-pic img { height: 100%; aspect-ratio: auto; }
}

/* CTA: copy and placement unchanged; a neutral panel without a border, with the guide's cover (redesign v2,
   decision (c) 2026-10-25: no orange tint, so it stays incolor); button on accent-ink for AA */
.cta { display: grid; gap: 1rem 1.4rem; margin: 2.5rem 0; padding: clamp(1.3rem, 4vw, 1.8rem); border-radius: var(--r-box); background: var(--wash);
       text-align: left; font-family: var(--f-ui); }
.cta:has(.cta-cover) { grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
.prose .cta-cover { width: 4rem; margin: .3rem 0 0; border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 8px 18px -8px rgba(var(--shadow), .55); }
.cta h2 { color: var(--navy); font-size: 1.4rem; margin: 0 0 .6rem; }
.cta p { color: var(--ink); font-size: 1rem; line-height: 1.6; max-width: 36em; margin: 0 0 1.2rem; }
.cta .small { color: var(--muted); font-size: .875rem; margin: 1.2rem 0 0; }
.button { display: inline-block; background: var(--button-bg); color: var(--button-ink); font: 600 1rem/1 var(--f-ui);
          padding: 1rem 2rem; border-radius: var(--r-ctl); text-decoration: none; border: 0; cursor: pointer; }
.button:hover { background: var(--button-hover); text-decoration: none; }
.button:focus-visible { outline-color: var(--navy); }

.notes { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.4rem; font-size: .9em; }
.notes h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.notes ol { padding-left: 1.3em; }
.notes li { margin-bottom: .8rem; }
.notes li::marker { font: 600 .85em var(--f-ui); color: var(--accent-ink); }
.back { text-decoration: none; font-family: var(--f-ui); padding-left: .25em; }

/* FAQ (Ghost card .sr-faq on About and 24 essays; redesign v2, step 5b): a grouped list that folds, one tone, hairlines
   inset from the leading edge, a disclosure chevron. Two shapes in the export: a folded "wrap" holding the questions
   (22 pages) and an H2 followed by plain <details> (2 essays). Markup, text and FAQPage schema are Ghost's, untouched. */
.sr-faq { margin: 2.2rem 0 3rem; max-width: var(--measure); font-size: .95em; }
.sr-faq > h2 { margin: 0 0 .8rem; }
.sr-faq-wrap { border-radius: var(--r-box); background: var(--wash); }
.sr-faq > details:not(.sr-faq-wrap) { position: relative; background: var(--wash); }
.sr-faq > details:not(.sr-faq-wrap):first-of-type { border-radius: var(--r-box) var(--r-box) 0 0; }
.sr-faq > details:not(.sr-faq-wrap):last-of-type { border-radius: 0 0 var(--r-box) var(--r-box); }
.sr-faq > details:not(.sr-faq-wrap):only-of-type { border-radius: var(--r-box); }
.sr-faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: .8rem 2.6rem .8rem .9rem;
  font: 600 .98rem/1.4 var(--f-ui); color: var(--ink); }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.35rem;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.sr-faq details[open] > summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.sr-faq-wrap > summary { min-height: 3.2rem; font: 600 1.15rem/1.3 var(--f-display); color: var(--navy); display: flex; align-items: center; }
.sr-faq-item { position: relative; }
.sr-faq-item::before, .sr-faq > details:not(.sr-faq-wrap) + details::before { content: ""; position: absolute; top: 0; right: 0; left: .9rem; height: 1px; background: var(--sep); }
.sr-faq details > p { margin: 0 .9rem .8rem; font: 400 1rem/1.6 var(--f-text); color: var(--ink); }

/* ---------- home (redesign v2, step 2; lib/home.js chooses what is shown) ---------- */
.home { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.home > section + section { margin-top: clamp(3.5rem, 8vw, 5rem); }
.hero { padding: clamp(2.8rem, 8vw, 6rem) 0 0; display: grid; gap: 1.8rem 3rem; }
.hero-title { display: flex; flex-direction: column; }
.hero-title .eyebrow { order: -1; margin-bottom: .9rem; }   /* above the title on screen, after it in the source */
.hero h1 { font-size: clamp(2.9rem, 8.5vw, 5.75rem); line-height: 1; letter-spacing: -.02em; margin: 0; font-weight: 500; }
.hero h1 em { font-weight: 400; }
.hero-side { display: grid; gap: 1.3rem; align-content: end; }
.hero-lede { font-size: 1.25rem; line-height: 1.5; margin: 0; max-width: 30em; }
.hero .prov { font: 400 .95rem/1.55 var(--f-ui); color: var(--muted); margin: 0; max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; font-family: var(--f-ui); }
.more { display: inline-flex; align-items: center; gap: .2rem; font: 600 .92rem/1.2 var(--f-ui); color: var(--accent-ink); text-decoration: none; }
.more:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.3rem; }
.sec-h h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); margin: 0; }

.feature { position: relative; display: grid; gap: 1.3rem 2.8rem; align-items: center; }
.feature-pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-img); background: var(--wash); }
.feature h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.08; margin: .5rem 0 .8rem; }
.feature h2 a { color: var(--navy); text-decoration: none; }
.feature h2 a::after { content: ""; position: absolute; inset: 0; }   /* image and text open the essay */
.feature:hover h2 a { text-decoration: underline; text-decoration-color: var(--accent); }
.feature-deck { margin: 0 0 1rem; font-size: 1.1rem; max-width: 32em; }
.feature .meta, .way .meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; }

.ways { display: grid; gap: 1rem; }
.way { display: grid; gap: .9rem; align-content: start; padding: 1.5rem; border-radius: var(--r-box); background: var(--wash); color: var(--ink); text-decoration: none; }
.way:hover { text-decoration: none; }
.way:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); }
.way h3 { font-size: 1.4rem; line-height: 1.15; margin: 0; }
.way-deck { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.way-body { display: grid; gap: .9rem; align-content: start; }
/* Card art (decision Sorin 2026-11-01): an engraving at full strength behind the whole card; the text sits on a panel
   that starts clear at the top of the eyebrow and thickens gradually, so the drawing stays visible under the text.
   Each theme has its own edition of the plate (partials/plate.njk), and the panel takes the ground of that edition. */
.way--art { position: relative; isolation: isolate; overflow: hidden; padding: 0; gap: 0; background: rgb(var(--plate));
  container-type: inline-size; --band: calc(100cqw / 3.3); }
.way--art, .plate-hero { --plate: 244 242 237; --wash: rgb(var(--plate) / .72); --scrim-1: .78; --scrim-2: .88; --scrim-3: .92; }   /* dark ink under dark text needs more cover than light ink */
@media (prefers-color-scheme: dark) { .way--art, .plate-hero { --plate: 28 29 33; --scrim-1: .62; --scrim-2: .8; --scrim-3: .86; } }
.way-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.way-art picture, .plate-art picture { display: contents; }
.art-l { display: block; } .art-d { display: none; }
@media (prefers-color-scheme: dark) { .art-l { display: none; } .art-d { display: block; } }
.way-art img { width: 100%; height: auto; }
.way--art .way-body { margin-top: var(--band); padding: 2.6rem 1.5rem 1.5rem;
  background: linear-gradient(rgb(var(--plate) / 0) 0, rgb(var(--plate) / var(--scrim-1)) 2.6rem, rgb(var(--plate) / var(--scrim-2)) 6rem, rgb(var(--plate) / var(--scrim-3)) 100%); }
@media (max-width: 599px) { .way--art { --band: calc(100cqw / 2.4); } }   /* a taller band on a phone, so the drawing is not cut */
/* a card with links inside (home: collections): the title covers the card, the rows stay clickable above it */
.way--link h3 a { color: var(--navy); text-decoration: none; }
.way--link h3 a::after { content: ""; position: absolute; inset: 0; }
.way--link .glist { position: relative; z-index: 1; }
/* Hero of a trail or a collection: the card's plate, used large on the right and melting into the plate's ground */
.page-head.plate-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(1rem, 3vw, 2rem); padding: 0; border-radius: var(--r-box); background: rgb(var(--plate)); color: var(--ink); }
.plate-art { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.plate-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.plate-hero .plate-text { width: 60%; padding: clamp(1.8rem, 4vw, 3.2rem); }
.plate-hero + .trail-grid { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.page-wide:has(> .plate-hero) + .frame { margin-top: clamp(1.2rem, 3vw, 2rem); }
@media (max-width: 767px) {
  .plate-art { position: static; width: 100%; aspect-ratio: 2 / 1; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .plate-hero .plate-text { width: auto; padding: .4rem 1.25rem 1.6rem; }
}
/* station names alternate above and below the line, as on a transit diagram, so seven fit */
.stops { display: grid; gap: .45rem; padding: 0 1.6rem; margin: .4rem 0; }
.stops .route { width: 100%; }
.names { position: relative; height: 2.6em; font: 600 .66rem/1.3 var(--f-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.names span { position: absolute; top: 0; width: max-content; max-width: 8em; text-align: center; transform: translateX(-50%); }
.names.up span { top: auto; bottom: 0; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem 1.4rem; }
.card { position: relative; }
.card-pic { margin-bottom: .9rem; }
.card-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img); background: var(--wash); }
.card .eyebrow, .feature .meta .m { display: inline-flex; align-items: center; gap: .35rem; }
.card .eyebrow .sym { color: var(--accent-ink); }
.card h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .5rem; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { text-decoration: underline; text-decoration-color: var(--accent); }
.card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 1rem; }


/* grouped list (iOS Settings): rows on one tone, hairlines inset from the leading edge, a chevron at the end */
.glist { list-style: none; margin: 0; padding: 0; border-radius: var(--r-box); background: var(--wash); overflow: hidden; font-family: var(--f-ui); --inset: .9rem; }
.glist > li > a { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 2.9rem; padding: .65rem .8rem .65rem .9rem;
  color: var(--ink); font-size: .98rem; line-height: 1.35; text-decoration: none; }
.glist > li + li > a::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset); height: 1px; background: var(--sep); }
.glist > li > a:hover .t { text-decoration: underline; text-decoration-color: var(--accent); }
.glist .t { flex: 1; min-width: 0; }
.glist .t small { display: block; margin-top: .15rem; font: 400 .8rem/1.35 var(--f-ui); color: var(--muted); }
.glist .all { color: var(--accent-ink); font-weight: 600; }
.glist .chev { flex: none; color: var(--muted); opacity: .6; }
.glist--media { --inset: calc(.9rem + 96px + .8rem); }
.glist--media .th { flex: none; width: 96px; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden; background: var(--chip); }
.glist--media .th img { width: 100%; height: 100%; object-fit: cover; }
.glist--media .t { font: 600 1.02rem/1.3 var(--f-display); color: var(--navy); }
@media (max-width: 599px) { .glist--media { --inset: calc(.9rem + 64px + .8rem); } .glist--media .th { width: 64px; } }   /* titles keep their width on a phone */

.guide-panel { display: grid; gap: 2rem; align-items: center; padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.4rem, 5vw, 3.8rem);
  border-radius: var(--r-menu); background: var(--deep); color: var(--deep-ink); }
.guide-panel .eyebrow { color: var(--deep-muted); }
.guide-panel h2 { color: inherit; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; margin: 0; }
.guide-panel p:not(.eyebrow) { margin: .8rem 0 1.4rem; color: var(--deep-muted); font-size: 1.05rem; max-width: 30em; }
.guide-panel .button:focus-visible { outline-color: var(--deep-ink); }
.guide-cover { width: 60%; max-width: 14rem; justify-self: center; border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }

@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
  .stops { padding: 0; } .names.up, .names span.mid { display: none; }
  .names span.first { transform: none; text-align: left; } .names span.last { transform: translateX(-100%); text-align: right; }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.55fr 1fr; align-items: end; }
  .feature { grid-template-columns: 1.4fr 1fr; }
  .ways { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .glist.recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; background: none; border-radius: 0; overflow: visible; }
  .glist.recent > li > a { padding: 0; align-items: flex-start; }
  .glist.recent > li > a::before, .glist.recent .chev { display: none; }
  .guide-panel { grid-template-columns: 1.4fr 1fr; }
}

/* lists of essays (redesign v2, step 5): /essays/ by year, a collection's page; grouped lists with the essay titles in
   the display face, the deck and the date with minutes under it */
.collection-chips ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.collection-chips .chip .sym { color: var(--accent-ink); }
.archive { margin-top: 2.4rem; }
.archive h2 { font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .55rem; padding-left: .9rem; }
.glist--titles .t > a { font: 600 1.05rem/1.3 var(--f-display); }
.glist--titles .t small { line-height: 1.45; }
.glist--titles .t small.when { font-size: .78rem; }
.collection-hero .deck { max-width: 34em; }
.collection-hero + .glist { margin-top: .4rem; }
.glist--titles.glist--media > li { align-items: flex-start; }   /* the thumbnail sits by the title, not mid-row */
.glist--titles.glist--media .th { margin-top: .2rem; }
.glist--titles.glist--media .chev { align-self: center; }

/* ---------- free guide (redesign v2, step 4: view "Ghidul" of the approved mock-up) ---------- */
.fg-head { padding: clamp(2.5rem, 7vw, 5rem) 0 2.2rem; display: grid; gap: 2rem; align-items: center; }
/* hero and story share one left edge; the cover hangs in the same right-hand space the margin notes use */
@media (min-width: 900px) {
  .frame--aside { max-width: calc(var(--measure) + 18.5rem + 2 * var(--gutter)); }
  .frame--aside.prose { padding-right: calc(18.5rem + var(--gutter)); }
  .fg-head { grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 20rem); column-gap: 3rem; } }
.fg-head h1 { font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.06; margin: 0 0 1rem; letter-spacing: -.01em; }
.fg-head .eyebrow { color: var(--accent-ink); }
.fg-head .deck { margin-bottom: 1.6rem; }
.fg-head .actions .meta { margin: 0; }
/* the cover and the page from the guide are paper objects: 2–3 px corners and a soft shadow, no outline */
.fg-cover { width: 100%; justify-self: center; border-radius: 3px; transform: rotate(-4deg);
  box-shadow: 0 40px 80px -24px rgba(var(--shadow), .5), 0 4px 10px rgba(var(--shadow), .18); }

.questions { counter-reset: q; list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; }
.prose .questions li { counter-increment: q; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; margin: 0; padding: .85rem 0;
  box-shadow: inset 0 1px 0 var(--sep); color: var(--navy); }
.questions li::before { content: counter(q); font: 600 1.7rem/1 var(--f-display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }

.sample { margin: 2rem 0 1rem; padding: clamp(1.3rem, 4vw, 1.9rem); border-radius: 3px; background: var(--card); font-size: .95em;
  box-shadow: 0 22px 50px -22px rgba(var(--shadow), .5), 0 2px 6px rgba(var(--shadow), .08); }
.sample h3 { font-size: 1.35rem; margin: 0 0 .7rem; }
.flags { display: grid; gap: .7rem; margin: 1.1rem 0; }
@media (min-width: 640px) { .flags { grid-template-columns: 1fr 1fr; } }
/* a flag is a tone, not a bar; the label is text with a filled symbol, so colour is never the only signal */
.flag { margin: 0; padding: .75rem .9rem; border-radius: var(--r-ctl); font: 400 .95rem/1.45 var(--f-ui); color: var(--ink); }
.flag b { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; font: 700 .74rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.flag b .sym { font-size: 1.45em; }
.flag--red { background: var(--flag-red-bg); } .flag--red b { color: var(--flag-red); }
.flag--green { background: var(--flag-green-bg); } .flag--green b { color: var(--flag-green); }
.sample blockquote { margin: 1rem 0 0; font-style: italic; color: var(--navy); }
.after-sample { font: italic 400 1rem var(--f-text); color: var(--muted); }

/* from 900 px the seven questions and the page from the guide side by side, across the whole frame */
@media (min-width: 900px) {
  .frame--aside.prose.fg-pair { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start;
    padding-right: var(--gutter); margin-top: 3rem; }
  .fg-pair h2 { margin-top: 0; }
  .fg-pair .sample { margin: 0; }
  .fg-pair .flags { grid-template-columns: 1fr; }
}

/* who it's for: a grouped list (iOS), one tone, hairlines inset from the leading edge */
.who { list-style: none; padding: 0; margin: 1rem 0 1.4rem; border-radius: var(--r-box); background: var(--wash); font-family: var(--f-ui); }
.prose .who li { position: relative; margin: 0; padding: .8rem .9rem; font-size: .98rem; line-height: 1.45; color: var(--muted); }
.who li + li::before { content: ""; position: absolute; top: 0; right: 0; left: .9rem; height: 1px; background: var(--sep); }
.who b { display: block; margin-bottom: .1rem; font-weight: 600; color: var(--navy); }

/* what happens next: three stations on the route line, the first one where the reader stands; each step draws its part
   of the line (dot to dot, whatever the height of its text) */
.prose .steps { counter-reset: s; list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; }
.prose .steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 1.7rem 1fr; margin: 0; padding: 0 0 1rem 1.9rem;
  background: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 0 0) 5px 0 / 2px 100% no-repeat; }
.prose .steps li:first-child { background-position: 5px calc(.5rem + 6px); }
.prose .steps li:last-child { padding-bottom: 0; background-size: 2px calc(.5rem + 6px); }
.steps li::before { content: counter(s) "."; font: 600 1rem/1.6 var(--f-ui); color: var(--accent-ink); }
.steps li::after { content: ""; position: absolute; left: 0; top: .5rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent); }
.steps li:first-child::after { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* the one signup form (partials/signup.njk): a panel on one tone, macOS-style fields; only the look changed in step 4 */
.signup { display: grid; gap: 1rem 1.4rem; margin: 2.5rem 0 1.2rem; padding: clamp(1.3rem, 4vw, 2rem); border-radius: var(--r-box); background: var(--wash);
  font-family: var(--f-ui); }
.signup--cover { grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
.signup-cover { width: 4rem; margin: .3rem 0 0; border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 8px 18px -8px rgba(var(--shadow), .55); }
.signup-body { min-width: 0; }
.signup h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.6rem; margin: 0 0 .4rem; }
.signup h2 .sym { color: var(--flag-green); }
.signup-lede, .signup-success p { color: var(--ink); font-size: 1rem; margin: 0 0 1.2rem; }
.signup label { display: block; font: 600 .85rem var(--f-ui); color: var(--navy); margin-bottom: .4rem; }
.signup .row { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup input[type=email] { flex: 1 1 16rem; min-width: 0; min-height: 2.9rem; font: 400 1rem var(--f-ui); padding: .75rem .9rem;
  border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--paper); color: var(--ink); }
.signup input[type=email]:focus { outline: 2px solid transparent; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 30%, transparent); }
.signup label.consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; line-height: 1.4; color: var(--ink); margin: .9rem 0 0; cursor: pointer; }
.signup .consent input { width: 1.15rem; height: 1.15rem; margin: .05rem 0 0; flex: none; accent-color: var(--accent); }
.signup .consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signup .fine { color: var(--muted); font-size: .85rem; line-height: 1.45; margin: .9rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-success { display: none; }
#sent:target { display: block; }
.signup:has(#sent:target) form { display: none; }
.signup-success p:last-child { margin-bottom: 0; }
@media (max-width: 599px) { .signup--cover { grid-template-columns: minmax(0, 1fr); } }   /* the cover sits above the form on a phone */

/* ---------- footer (redesign v2): light, four columns ---------- */
.endpaper { background: var(--wash); color: var(--muted); margin-top: clamp(3rem, 8vw, 6rem); font-family: var(--f-ui); }
.endpaper a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.endpaper a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--accent); }
.endpaper__inner { max-width: var(--page); margin: 0 auto; padding: 3rem var(--gutter) 2rem; display: grid; gap: 2rem; }
@media (min-width: 820px) { .endpaper__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.endpaper .wordmark { color: var(--navy); }
.endpaper .wordmark .logo { width: calc(2.25rem * 800 / 212); height: 2.25rem; }
.endpaper p { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 24em; }
.endpaper .signoff { font: italic 400 1.15rem var(--f-display); color: var(--navy); }
.endpaper h2 { font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: .3rem 0 .8rem; }
.endpaper ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .95rem; }
.endpaper .sym, .endpaper .accent-link { color: var(--accent-ink); }
.legal { max-width: var(--page); margin: 0 auto; padding: 1.2rem var(--gutter) 2rem; border-top: 1px solid var(--sep); font-size: .82rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .fg-cover { max-width: 9.5rem; }   /* proof of the object, not a second hero */
}

/* ---------- Ghost content, as exported ---------- */
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; max-width: var(--measure); }
.prose hr:has(+ .endmark) { display: none; }               /* the end mark already closes the essay */
.prose figure { margin: 2em 0; }
.prose figcaption { font: 400 .85rem/1.5 var(--f-ui); color: var(--muted); margin-top: .5rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: .9em; margin: 1.6em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .5em .6em; text-align: left; vertical-align: top; }
.prose li { margin-bottom: .4em; }
.prose img { margin: 1.5em 0; }
.prose .cta { max-width: var(--measure); }
.notes-list, .prose ol li[id^="fn-"] { font-size: .9em; }
.page-head { padding: clamp(2.5rem, 7vw, 4.5rem) 0 1.5rem; }
.page-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); line-height: 1.08; margin: 0; letter-spacing: -.01em; }
.page-head h1 + .deck { margin-top: 1rem; }
.page-image { max-width: var(--measure); width: 100%; border-radius: var(--r-img); margin: 0 0 2rem; }
.button[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- search dialog ---------- */
.search { width: min(42rem, calc(100vw - 2 * var(--gutter))); max-height: 80vh; border: 0; border-radius: var(--r-menu); padding: 1.2rem 1.4rem 1.6rem;
  background: var(--paper); color: var(--ink); font-family: var(--f-ui); box-shadow: 0 0 0 1px var(--sep), 0 24px 60px -16px rgba(var(--shadow), .45); }
/* Pagefind's UI follows the site's tokens and theme (redesign v2, step 5b; its own defaults are a white field in dark) */
.search .pagefind-ui { --pagefind-ui-scale: .9; --pagefind-ui-primary: var(--navy); --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--field-line); --pagefind-ui-tag: var(--chip); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 6px;
  --pagefind-ui-font: var(--f-ui); }
.search::backdrop { background: rgba(var(--shadow), .35); }
.search > form { text-align: right; margin: 0 0 .6rem; }
.search-close { background: none; border: 0; font: 600 .9rem var(--f-ui); color: var(--navy); cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent); }

/* signup error state: shown when the endpoint sends the reader back to #signup-error (a tone and a symbol, no bar) */
.signup-error { display: none; gap: .55rem; align-items: flex-start; padding: .7rem .9rem; margin: 0 0 1rem; border-radius: var(--r-ctl);
  background: var(--flag-red-bg); color: var(--ink); font-size: .95rem; line-height: 1.45; }
.signup-error .sym { color: var(--flag-red); font-size: 1.25em; margin-top: .05em; }
.signup-error:target { display: flex; }

/* Intent Trails (decision 2026-10-21). Redesign v2, step 3: trail pages and /trails/ (lib/trails.js trailView) */
.page-wide { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.trail-hero .eyebrow a { color: inherit; text-decoration: none; }
.trail-hero .eyebrow a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.trail-hero .deck { max-width: 34em; }
.t-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.3rem 0 1.2rem; font: 500 .95rem/1.4 var(--f-ui); color: var(--muted); }
.t-stats .m { display: inline-flex; align-items: center; gap: .35rem; }
.t-stats .sym { color: var(--accent-ink); }
.t-stats b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.trail-hero .actions .button { max-width: 100%; line-height: 1.3; }
.trail-map, .trail-explore { margin: 3.5rem 0 0; scroll-margin-top: 4.75rem; }
.trail-map h2, .trail-explore h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin: 0 0 1.2rem; }
.map-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 1.8rem; }
.map-h h2 { margin: 0; }

/* iOS segmented control, no JavaScript: the radios stay focusable (arrow keys switch), the labels are the segments */
.tseg { display: inline-flex; gap: 2px; margin: 0; padding: 2px; border: 0; border-radius: var(--r-menu); background: var(--chip); }
.tseg input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tseg label { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .4rem .9rem; border-radius: var(--r-ctl);
  font: 500 .88rem/1 var(--f-ui); color: var(--navy); cursor: pointer; }
.tseg input:checked + label { background: var(--paper); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--shadow), .14), 0 0 0 1px var(--sep); }
.tseg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-view { display: none; }
.trail-map:has(#view-list:checked) .list-view { display: block; }
.trail-map:has(#view-list:checked) .map-view { display: none; }

/* the route line runs down the map; a station per layer */
.map-line { position: relative; padding-left: 30px; }
.map-line::before { content: ""; position: absolute; left: 9px; top: .7rem; bottom: 2.4rem; width: 3px; border-radius: 3px; background: var(--accent); }
.hub { position: relative; margin: 0 0 1.8rem; font: 700 .78rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.hub::before { content: ""; position: absolute; left: -30px; top: -.25rem; width: 21px; height: 21px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.layer { position: relative; display: grid; gap: 1rem; padding-bottom: 2.6rem; }
.layer::before { content: ""; position: absolute; left: -26px; top: .45rem; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--accent); }
.layer h3 { font-size: 1.45rem; margin: 0; }
.layer .q { font: italic 400 1.05rem/1.45 var(--f-text); color: var(--muted); margin: .25rem 0 0; }
.layer-body { display: grid; gap: 1rem; min-width: 0; }
.key { position: relative; display: grid; gap: .9rem; }
.key-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-img); background: var(--wash); }
.badge { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font: 700 .72rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.badge .sym { font-size: 1.35em; }
.key h4 { font: 600 1.3rem/1.2 var(--f-display); margin: .45rem 0 .4rem; }
.key h4 a { color: var(--navy); text-decoration: none; }
.key h4 a::after { content: ""; position: absolute; inset: 0; }   /* image and text open the essay */
.key:hover h4 a { text-decoration: underline; text-decoration-color: var(--accent); }
.key p:not(.badge):not(.meta) { margin: 0 0 .5rem; color: var(--muted); font-size: 1rem; }
.key .meta { margin: 0; }

/* grouped list whose rows hold more than one line or more than one link: the first link opens the row */
.glist--rich > li { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 2.9rem; padding: .7rem .8rem .7rem .9rem; font-size: .98rem; line-height: 1.35; }
.glist--rich > li + li::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset); height: 1px; background: var(--sep); }
.glist--rich .t { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.glist--rich .t > a { color: var(--navy); font-weight: 600; text-decoration: none; }
.glist--rich .t > a:first-of-type::after { content: ""; position: absolute; inset: 0; }
.glist--rich .t > a + a { position: relative; z-index: 1; }
.glist--rich > li:hover .t > a:first-of-type { text-decoration: underline; text-decoration-color: var(--accent); }
.glist--rich .t small { font-size: .85rem; line-height: 1.4; color: var(--muted); }
.glist--rich .t .start { font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.glist .lead { flex: none; color: var(--accent-ink); font-size: 1.1em; }
.glist .lead.blank { display: inline-block; width: 1.15em; }
.glist--q .qtext { font-weight: 600; color: var(--ink); }
.glist--q .t > a { font-weight: 500; font-size: .92rem; line-height: 1.5rem; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .18em; }   /* 24 px targets (WCAG 2.5.8) */
.qgrid { display: grid; gap: 1rem; align-items: start; }
.trails-index .ways { margin-top: 1.6rem; }
.trail-signup .signup { max-width: calc(var(--measure) + 4rem); }
/* Trail pages like the essay (verdict 2026-10-25): from 980 px the contents on the left, the hero, the text, the map and
   the form in the column beside it; the text keeps its measure, the map and the questions use the whole column */
@media (min-width: 980px) {
  .trail-grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--col-gap); }
  .trail-hero:not(.plate-hero), .trail-signup .signup { margin-left: calc(var(--rail) + var(--col-gap)); }
}
.trail .prose .toc-m ol { list-style: none; padding-left: .9rem; }   /* the 7 questions are numbered already */
@media (min-width: 860px) {
  .map-line { padding-left: 46px; } .map-line::before { left: 14px; }
  .hub::before { left: -41px; } .layer::before { left: -37px; }
  .layer { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.8rem; }
  .key { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.3rem; align-items: center; }
  .key-pic img { aspect-ratio: 16 / 10; }
  .qgrid { grid-template-columns: 1fr 1fr; }
}
.trail-notes { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; font-size: .95rem; color: var(--muted); }
.trail-notes h2 { font-size: 1.1rem; font-family: var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.trail-notes a { overflow-wrap: anywhere; }

/* Start Here (redesign v2, step 5b; lib/transforms.js startHereRoute): the hero as the page's head, then the essays as
   numbered stations on the route line, the first one large. After the trail map, whose line, hub and stations it adapts. */
.sh-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; margin: clamp(2.5rem, 7vw, 4.5rem) 0 1.3rem; }
.prose .sh-route { margin: 2.8rem 0 1rem; }
.prose .sh-stops { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.prose .sh-stop { counter-increment: st; margin: 0; }
.sh-stop::before { content: counter(st); display: grid; place-items: center; left: -31px; top: .1rem; width: 22px; height: 22px;
  font: 700 .72rem/1 var(--f-ui); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.sh-stop--first::before { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.prose .sh-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-img); margin: 0; background: var(--wash); }
.sh-stop h2 { font: 600 1.3rem/1.2 var(--f-display); margin: 0 0 .4rem; }
.sh-stop--first h2 { font-size: clamp(1.45rem, 3.4vw, 1.8rem); }
.sh-stop h2 a { color: var(--navy); text-decoration: none; }
.sh-stop h2 a::after { content: ""; position: absolute; inset: 0; }   /* image and text open the essay */
.sh-stop:hover h2 a { text-decoration: underline; text-decoration-color: var(--accent); }
.sh-txt p { margin: 0; color: var(--muted); font-size: 1rem; }
@media (min-width: 860px) {
  .sh-stop::before { left: -42px; }
  .sh-stop--first { grid-template-columns: minmax(0, 1fr); }
  .prose .sh-stop--first .sh-pic img { aspect-ratio: 16 / 10; }
  .prose .sh-stop:not(.sh-stop--first) .sh-pic img { aspect-ratio: 16 / 10; }
}

/* Breadcrumb on essays (Phase C): Home › primary collection; the essay title is announced, not shown twice */
.crumbs ol { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.crumbs li + li::before { content: "›"; margin: 0 .45rem; color: var(--muted); }
.crumbs li.visually-hidden + li::before, .crumbs li.visually-hidden::before { content: none; }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.crumbs .sym { color: var(--accent-ink); font-size: 1.15em; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--accent); }

/* Print (Phase D): the essay on paper, nothing else. Light colours whatever the screen theme, no navigation, no
   signup, notes as a list (the margin copies are screen-only), and the address of every outside source printed. */
@media print {
  :root { --paper: #fff; --ink: #000; --navy: #000; --muted: #333; --rule: #bbb; --accent: #000; --accent-ink: #000; }
  @page { margin: 18mm 16mm; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  .skip, .site-head, .endpaper, .cta, .signup, .search, .sidenote, .crumbs, .trail-chips, .rail, .toc-m, .share, .next, .keep, .sr-faq, .back, .draft-note { display: none !important; }
  .frame, .essay, .home { max-width: none; padding: 0; }
  .essay-head, .essay-figure figcaption { margin-left: 0; }
  .essay-grid { display: block; }
  .trail-facts, .tseg, .map-view { display: none !important; }   /* on paper the map is the list (redesign v2, step 3) */
  .list-view { display: block !important; }
  .prose > * { max-width: none; }
  .essay-head { padding: 0 0 1rem; }
  .essay-head h1 { font-size: 22pt; }
  h1, h2, h3 { break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }
  figure, img, blockquote { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; word-break: break-all; }
  .prose a[href^="/"]::after { content: " (sorenross.com" attr(href) ")"; font-size: 85%; }
  .prose a.fnref::after, .notes a::after { content: none; }
}