/* Editorial Council — grettir.ai site stylesheet.
   Design language: the archival reader's-report aesthetic (paper/ink, double
   rules, mono eyebrows, stamps) unified with the pilot interface's dimension
   hues. Theme-aware (light/dark). No webfonts, no framework. */

:root {
  color-scheme: light dark;
  --paper: #F7F6F2; --card: #FDFCFA; --ink: #1B222B; --ink-soft: #4A5462;
  --line: #D8D5CC; --line-soft: #E6E3DB;
  --archive: #33506B; --stamp: #A8322A; --stamp-soft: #F3E4E2;
  --verified: #3E6B4F; --verified-soft: #E4EDE6;
  --warn: #7A5D1F; --warn-soft: #F2EAD6;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* dimension hues — same system as the review interface */
  --c-style: #7d631c;      --bg-style: rgba(212, 175, 55, .18);
  --c-grammar: #2f5d8a;    --bg-grammar: rgba(90, 140, 190, .18);
  --c-continuity: #6b4d8a; --bg-continuity: rgba(150, 110, 190, .18);
  --c-voice: #8a2e5d;      --c-plot: #2e7a4f; --c-pacing: #7a6a2e;
  --c-theme: #2e6a7a;      --c-character: #7a4a2e;
  --accent: #7a2e2e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131920; --card: #1A212A; --ink: #E6E1D6; --ink-soft: #9AA3AE;
    --line: #313B47; --line-soft: #232C36;
    --archive: #8FB0CE; --stamp: #D9776C; --stamp-soft: #33211F;
    --verified: #8CBA9B; --verified-soft: #1E2B22;
    --warn: #CDA95C; --warn-soft: #2C2617;
    --c-style: #c9a94a; --bg-style: rgba(212, 175, 55, .14);
    --c-grammar: #7fa8d0; --bg-grammar: rgba(90, 140, 190, .16);
    --c-continuity: #a98cd0; --bg-continuity: rgba(150, 110, 190, .16);
    --c-voice: #d07fa8; --c-plot: #7fc09a; --c-pacing: #b0a45e;
    --c-theme: #6fb0c2; --c-character: #c29a72;
    --accent: #c98a80;
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hub { transition: none; }
  .hub:hover { transform: none; }
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 4px; padding: .55rem 1rem; font-family: var(--mono);
  font-size: .78rem; text-decoration: none; }
.skip:focus { left: .5rem; top: .5rem; }
[role="button"]:focus-visible, mark.hl:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
body { margin: 0; font-family: var(--serif); color: var(--ink);
  line-height: 1.62; font-size: 17px; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--archive); }
a:hover { color: var(--ink); }
p { max-width: 66ch; }
code { font-family: var(--mono); font-size: .86em; }

/* ---------- site header / footer ---------- */
header.site { border-bottom: 1px solid var(--line); background: var(--card); }
header.site .wrap { display: flex; align-items: baseline; gap: 1.4rem;
  padding-top: .8rem; padding-bottom: .8rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.12rem; color: var(--ink);
  text-decoration: none; letter-spacing: .01em; }
.brand .tick { border-left: 3px double var(--stamp); margin: 0 .35rem; }
nav.top { display: flex; gap: 1.1rem; flex-wrap: wrap; font-family: var(--mono);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
nav.top a { color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; }
nav.top a:hover, nav.top a[aria-current] { color: var(--ink);
  border-bottom: 2px solid var(--stamp); }
.cta { margin-left: auto; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .05em; border: 1.5px solid var(--ink); border-radius: 4px;
  padding: .35rem .8rem; color: var(--ink); text-decoration: none;
  white-space: nowrap; }
a.cta:hover { background: var(--ink); color: var(--paper); }
.cta .soon { color: var(--ink-soft); }
footer.site { border-top: 3px double var(--ink); margin-top: 5rem;
  border-bottom: none; background: transparent; }
footer.site .wrap { padding-top: 1.1rem; padding-bottom: 2.4rem;
  font-family: var(--mono); font-size: .76rem; color: var(--ink-soft);
  display: flex; gap: .6rem 1rem; flex-wrap: wrap; }
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--ink); }

/* ---------- masthead (per-page hero) ---------- */
.masthead { position: relative; margin: 3rem 0 2.6rem; }
.rule-double { border-top: 3px double var(--ink); margin: 0 0 1rem; }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--archive); margin: 0 0 .4rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.masthead h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.05;
  margin: .2rem 0 .6rem; font-weight: 700; letter-spacing: .01em;
  text-wrap: balance; max-width: 24ch; }
.lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch;
  margin: 0 0 1.4rem; }
.lede strong, .lede b { color: var(--ink); }
.stamp { position: absolute; right: 0; top: 3rem; transform: rotate(-4deg);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
  color: var(--verified); border: 2px solid var(--verified);
  padding: .3rem .65rem; border-radius: 3px; background: var(--verified-soft);
  text-transform: uppercase; }
.stamp.red { color: var(--stamp); border-color: var(--stamp);
  background: var(--stamp-soft); }
@media (max-width: 46rem) { .stamp { position: static; display: inline-block;
  margin-bottom: 1rem; } }

.statstrip { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px; background: var(--line-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: .8rem .5rem .7rem; background: var(--paper); }
.stat b { display: block; font-family: var(--mono); font-size: 1.28rem;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }

.btnrow { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.btn { font-family: var(--mono); font-size: .8rem; letter-spacing: .05em;
  border: 1.5px solid var(--ink); border-radius: 4px; padding: .55rem 1.1rem;
  color: var(--ink); text-decoration: none; background: var(--card); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--archive); border-color: var(--archive); }

/* ---------- sections ---------- */
section { margin-top: 4.2rem; }
.kicker, .sec-label { font-family: var(--mono); font-size: .72rem;
  font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--archive); border-bottom: 1px solid var(--line);
  padding-bottom: .45rem; margin: 0 0 1.1rem; }
section h2 { font-size: 1.7rem; line-height: 1.15; margin: 0 0 .5rem;
  text-wrap: balance; }
.sub { color: var(--ink-soft); margin: 0 0 1.6rem; max-width: 64ch; }

/* ---------- annotated excerpt (hero exhibit) ---------- */
.annotated { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 1fr);
  gap: 1.4rem; align-items: start; margin-top: 1.8rem; }
@media (max-width: 52rem) { .annotated { grid-template-columns: 1fr; } }
.excerpt-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.2rem 1.4rem; }
.excerpt-card .from, .from { font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: .7rem; }
.excerpt-card h3, .excerpt-card h4 { margin: 0 0 .6rem; font-size: 1.05rem;
  font-weight: 700; }
.excerpt-card p { margin: 0 0 .6rem; font-size: .97rem; }
.mark { background: var(--warn-soft); box-shadow: 0 1px 0 var(--warn);
  padding: 0 2px; }
.mark sup { font-family: var(--mono); font-size: .62rem; color: var(--stamp); }
.margin-notes { display: flex; flex-direction: column; gap: .8rem; }
.margin-notes .note { font-family: var(--sans); font-size: .82rem;
  line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--line);
  padding-left: .8rem; }
.margin-notes .note b { color: var(--stamp); font-family: var(--mono); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 1.6rem 0; }
.step { background: var(--card); border: 1px solid var(--line-soft);
  border-top: 3px solid var(--archive); border-radius: 0 0 4px 4px;
  padding: 1rem 1.2rem; }
.step .n { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--archive); }
.step h3 { margin: .3rem 0 .4rem; font-size: 1.1rem; }
.step p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.clerk-table { overflow-x: auto; margin-top: 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .45rem .9rem .45rem 0;
  border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--archive); font-weight: 600; }
.clerk-table td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem; margin-top: 1.6rem; }
.gcard { background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.1rem 1.3rem 1.2rem; display: flex;
  flex-direction: column; position: relative; }
.gcard h3 { margin: 0 0 .15rem; font-size: 1.14rem; }
.gcard .byline { font-family: var(--mono); font-size: .68rem;
  color: var(--ink-soft); letter-spacing: .04em; margin-bottom: .7rem; }
.gcard ul.stats { list-style: none; padding: 0; margin: 0 0 1rem;
  font-size: .88rem; color: var(--ink-soft); flex: 1; }
.gcard ul.stats li { padding: .22rem 0; border-bottom: 1px solid var(--line-soft); }
.gcard ul.stats b { color: var(--ink); font-family: var(--mono); font-size: .84rem; }
.gcard .go { font-family: var(--mono); font-size: .78rem; text-decoration: none; }
.gcard.feature { border: 2px solid var(--verified); }
.gcard.feature .flag-chip { position: absolute; top: -0.7rem; right: .8rem;
  transform: rotate(-2deg); font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--verified);
  background: var(--verified-soft); border: 1.5px solid var(--verified);
  border-radius: 3px; padding: .12rem .5rem; }

/* ---------- terminal ---------- */
.terminal { background: #14181d; color: #d6d3c9; border-radius: 6px;
  padding: 1.1rem 1.3rem; overflow-x: auto; font-family: var(--mono);
  font-size: .82rem; line-height: 1.65; border: 1px solid var(--line); }
.terminal .ps { color: #8CBA9B; }
.terminal .out { color: #8a939e; }
.term-caption { font-size: .85rem; color: var(--ink-soft); margin-top: .8rem; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line-soft); padding: .7rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.faq p { color: var(--ink-soft); font-size: .95rem; margin: .6rem 0 .2rem; }

/* ---------- callout blocks (flags / watches / tensions) ---------- */
.flag { border-left: 3px solid var(--stamp); background: var(--stamp-soft);
  padding: .85rem 1.1rem; margin: 0 0 .9rem; border-radius: 0 4px 4px 0; }
.flag b { font-family: var(--mono); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--stamp); display: block;
  margin-bottom: .3rem; }
.flag p { margin: 0; font-size: .95rem; }
.watch { border-left: 3px solid var(--warn); background: var(--warn-soft);
  padding: .85rem 1.1rem; margin: 0 0 .9rem; border-radius: 0 4px 4px 0; }
.watch b { font-family: var(--mono); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--warn); display: block;
  margin-bottom: .3rem; }
.watch p { margin: 0; font-size: .95rem; }
.tension { background: var(--card); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--archive); border-radius: 0 4px 4px 0;
  padding: .85rem 1.1rem; margin-bottom: .9rem; }
.tension b { font-family: var(--mono); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--archive); display: block;
  margin-bottom: .3rem; }
.tension p { margin: 0 0 .35rem; font-size: .94rem; }
.letter { font-size: 1.05rem; border-left: 3px solid var(--archive);
  padding: .35rem 0 .35rem 1.35rem; font-style: italic; }
.letter em { font-style: normal; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 1rem;
  padding: 0; list-style: none; }
.chips li { font-family: var(--mono); font-size: .74rem; padding: .22rem .6rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
  background: var(--card); }
.ok { color: var(--verified); font-weight: 600; }
.warn-t { color: var(--warn); font-weight: 600; }
td.k, th.k { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft);
  white-space: nowrap; font-weight: 400; text-align: left; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .88rem; }
.tablewrap { overflow-x: auto; }
dl.voice { margin: 0; }
dl.voice dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--archive); margin-top: 1.05rem; }
dl.voice dd { margin: .25rem 0 0; font-size: .97rem; max-width: 66ch; }
.idea { background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: .9rem 1.1rem; margin-bottom: .8rem; }
.idea p { margin: 0 0 .45rem; font-style: italic; font-size: .98rem; }
.idea .meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }

/* ---------- brief pages (briefs/*.html — verbatim converter output) ---------- */
article.brief { max-width: 46rem; margin: 2.6rem auto 0; padding: 0 1.25rem; }
article.brief h1 { font-size: 2rem; line-height: 1.1; }
article.brief h2 { font-size: 1.25rem; border-bottom: 1px solid var(--line);
  padding-bottom: .35rem; margin-top: 2.2rem; }
article.brief hr { border: none; border-top: 3px double var(--ink);
  margin: 1.4rem 0; }
article.brief table { font-size: .88rem; }
.provenance { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: 4px; padding: .7rem .9rem;
  margin: 1.2rem 0; line-height: 1.7; }

/* ---------- the review-room replica (walkthrough) ---------- */
.demo-note { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft);
  letter-spacing: .04em; margin: .6rem 0 1rem; }
.demo-split { display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1.6fr) minmax(16rem, 1.9fr);
  gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--card); font-family: var(--sans); }
@media (max-width: 62rem) { .demo-split { grid-template-columns: 1fr; } }
.dpane { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.dpane + .dpane { border-left: 1px solid var(--line); }
@media (max-width: 62rem) { .dpane + .dpane { border-left: none;
  border-top: 1px solid var(--line); } }
.dpane-head { font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
  padding: .6rem .9rem .5rem; border-bottom: 1px solid var(--line-soft);
  background: var(--paper); display: flex; align-items: baseline; gap: .6rem; }
.dpane-head .brand-mini { font-family: var(--serif); font-weight: 700;
  text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink); }

/* left: manuscript */
.ms-doc { padding: 1.3rem 1.6rem 1.6rem; overflow-y: auto; max-height: 40rem;
  font-family: var(--serif); font-size: .95rem; line-height: 1.75; }
.ms-doc h4 { margin: 0 0 .8rem; font-size: 1.05rem; }
.ms-doc .poem { font-style: italic; color: var(--ink-soft);
  margin: 0 0 1rem 1.2rem; }
.ms-doc p { margin: 0 0 .9rem; max-width: none; }
.ms-doc .snip { text-align: center; color: var(--ink-soft);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .3em;
  margin: 1rem 0; }
mark.hl { padding: 0 2px; border-radius: 2px; cursor: pointer;
  background: var(--bg-style); box-shadow: 0 1.5px 0 var(--c-style);
  color: inherit; }
mark.hl.d-grammar { background: var(--bg-grammar);
  box-shadow: 0 1.5px 0 var(--c-grammar); }
mark.hl.d-continuity { background: var(--bg-continuity);
  box-shadow: 0 1.5px 0 var(--c-continuity); }
mark.hl.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
mark.hl del { color: var(--stamp); text-decoration: line-through; }
mark.hl ins { color: var(--verified); text-decoration: underline; }
mark.hl.applied { background: transparent; box-shadow: none; cursor: default; }
mark.hl.dismissed { background: transparent; box-shadow: none; opacity: .85;
  cursor: default; }

/* middle: hubs + findings list */
.dmid-scroll { overflow-y: auto; max-height: 40rem; }
.dmid-label { font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
  padding: .55rem .8rem .3rem; }
.hubs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem .8rem .8rem;
  border-bottom: 1px solid var(--line-soft); }
.hub { border-radius: 999px; border: 2px solid var(--ink-soft);
  background: var(--paper); display: inline-flex; align-items: center;
  gap: .45em; padding: .32em .8em; cursor: pointer; user-select: none;
  font-size: .78rem; transition: transform .12s; white-space: nowrap; }
.hub:hover { transform: scale(1.06); }
.hub .hl { font-weight: 600; }
.hub .hc { color: var(--ink-soft); font-size: .9em; font-family: var(--mono); }
.hub.d-style { border-color: var(--c-style); color: var(--c-style); }
.hub.d-grammar { border-color: var(--c-grammar); color: var(--c-grammar); }
.hub.d-continuity { border-color: var(--c-continuity); color: var(--c-continuity); }
.hub.off { border-style: dashed; border-color: var(--line);
  color: var(--ink-soft); }
.hub.ohub { border-style: double; border-width: 3px; border-color: var(--accent);
  color: var(--accent); background: var(--card); }
.hub.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.findings { padding: .6rem .7rem 1rem; }
.frow { background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: .55rem .8rem; margin-bottom: .55rem;
  cursor: pointer; font-size: .8rem; }
.frow:hover { border-color: var(--ink-soft); }
.frow .fhead { display: flex; gap: .5rem; align-items: baseline; }
.frow .dim { font-weight: 600; font-size: .68rem; text-transform: capitalize; }
.frow .rule { font-size: .64rem; color: var(--ink-soft); font-style: italic; }
.frow .st { margin-left: auto; font-size: .66rem; font-family: var(--mono);
  color: var(--ink-soft); }
.frow .msg { color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }
.frow.d-style .dim { color: var(--c-style); }
.frow.d-grammar .dim { color: var(--c-grammar); }
.frow.d-continuity .dim { color: var(--c-continuity); }
.frow.active { border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.frow.st-applied .dim, .frow.st-rejected .dim { color: var(--ink-soft); }
.frow.st-applied .st { color: var(--verified); }
.frow.st-rejected .msg { text-decoration: line-through; }

/* right: correction panel */
.corr-wrap { padding: .8rem .95rem 1rem; overflow-y: auto; max-height: 40rem; }
.corr-head { display: flex; align-items: baseline; gap: .5rem; }
#corr-title { font-weight: 600; font-size: .84rem; }
.stepper { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.stepper button { border: 1px solid var(--line); background: var(--card);
  border-radius: 6px; padding: 0 .5rem; cursor: pointer; font-size: .85rem;
  color: var(--ink); line-height: 1.4; }
.stepper button:hover { border-color: var(--ink-soft); }
#step-pos { font-family: var(--mono); font-size: .64rem; color: var(--ink-soft);
  min-width: 2.6rem; text-align: center; }
.corr-empty { color: var(--ink-soft); font-size: .8rem; padding: .6rem 0; }
.corr-msg { color: var(--ink-soft); font-size: .8rem; margin: .4rem 0 .6rem;
  line-height: 1.5; }
.corr-def { font-size: .72rem; font-style: italic; color: var(--ink-soft);
  background: var(--paper); border-left: 3px solid var(--c-style);
  padding: .35rem .7rem; margin: .3rem 0 .6rem; }
.corr-label { font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  margin-top: .6rem; }
.corr-orig { font-family: var(--serif); background: var(--paper);
  border-left: 3px solid var(--line); padding: .4rem .7rem; margin: .3rem 0;
  font-size: .85rem; max-height: 7rem; overflow-y: auto; }
#corr-text { width: 100%; font-family: var(--serif); font-size: .88rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem;
  margin-top: .3rem; resize: vertical; background: var(--card);
  color: var(--ink); }
.corr-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.corr-actions button { font-size: .74rem; border: 1px solid var(--line);
  background: var(--card); border-radius: 8px; padding: .4rem .8rem;
  cursor: pointer; color: var(--ink); font-family: var(--sans); }
.corr-actions button:hover { border-color: var(--ink-soft); }
#corr-apply { border-color: var(--accent); color: var(--accent);
  font-weight: 600; }
#corr-apply:hover { background: var(--accent); color: var(--paper); }
.corr-status { font-family: var(--mono); font-size: .68rem;
  color: var(--verified); margin-top: .55rem; min-height: 1em; }
.demo-reset { margin-top: .8rem; }
.parts-strip { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem .8rem;
  border-bottom: 1px solid var(--line-soft); background: var(--card); }
.part-chip { border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: .1rem .7rem; font-size: .66rem;
  color: var(--ink-soft); font-family: var(--mono); }
.part-chip.active { border-color: var(--accent); color: var(--accent);
  font-weight: 600; }

/* ---------- tutorial beats ---------- */
.beat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 1fr);
  gap: 1.6rem; align-items: start; margin: 2.4rem 0; }
@media (max-width: 52rem) { .beat { grid-template-columns: 1fr; } }
.beat .artifact { background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.1rem 1.3rem; }
.beat .artifact p { font-size: .95rem; margin: 0 0 .6rem; }
.beat .commentary h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.beat .commentary .stepno { font-family: var(--mono); font-size: .66rem;
  letter-spacing: .16em; color: var(--stamp); display: block;
  margin-bottom: .3rem; }
.beat .commentary p { font-size: .93rem; color: var(--ink-soft);
  margin: 0 0 .7rem; }
.statgrid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  margin: .6rem 0; }
.statgrid .stat { background: var(--card); border-left: none; }
.readfull { font-family: var(--mono); font-size: .82rem; }

/* ---------- link cards (about) ---------- */
.linkcards { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem; margin-top: 1.6rem; }
.lcard { background: var(--card); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.1rem 1.3rem; display: flex;
  flex-direction: column; }
.lcard .from { margin-bottom: .5rem; }
.lcard h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.lcard p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem;
  flex: 1; }
.lcard .go { font-family: var(--mono); font-size: .78rem; }

/* ---------- split masthead (index hero: text + screenshot) ---------- */
.masthead.split { display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 1rem 2.4rem; align-items: center; }
.masthead.split .rule-double, .masthead.split .eyebrow,
.masthead.split .statstrip, .masthead.split .btnrow { grid-column: 1 / -1; }
.masthead.split .statstrip { margin-top: 1.4rem; }
@media (max-width: 56rem) { .masthead.split { grid-template-columns: 1fr; } }

/* ---------- framed screenshot (CSS window chrome around a real capture) ---- */
a.shot { display: block; text-decoration: none; position: relative;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line-soft), 0 18px 40px -22px rgba(27, 34, 43, .45); }
a.shot:hover { border-color: var(--ink-soft); }
a.shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.shot-bar { display: flex; gap: .45rem; align-items: center;
  padding: .45rem .75rem; border-bottom: 1px solid var(--line-soft);
  background: var(--paper); font-family: var(--mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.shot-bar .dot { width: .5rem; height: .5rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); flex: none; }
.shot img { display: block; width: 100%; height: auto; }
.shot .play { position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%); font-family: var(--mono); font-size: .74rem;
  letter-spacing: .08em; color: var(--paper); background: rgba(27, 34, 43, .82);
  border-radius: 999px; padding: .5rem 1rem; white-space: nowrap; }
a.shot:hover .play { background: var(--stamp); }
.shot .stamp.on-shot { position: absolute; top: 2rem; right: .7rem;
  transform: rotate(3deg); z-index: 2; }
figure.fig { margin: 0; }
figure.fig figcaption { font-family: var(--mono); font-size: .68rem;
  letter-spacing: .05em; color: var(--ink-soft); margin-top: .55rem;
  line-height: 1.6; }

/* ---------- data figures (inline SVG exhibits) ---------- */
.curve-fig { margin: 1rem 0 0; }
.curve-fig svg, .bar-fig svg { display: block; width: 100%; height: auto; }
.bar-fig { margin: .9rem 0 0; }
.fig-note, .foot-note { font-family: var(--mono); font-size: .7rem;
  color: var(--ink-soft); margin-top: .45rem; line-height: 1.6; }

/* ---------- trust chips ---------- */
.chips.trust li { border-color: var(--verified); color: var(--verified);
  background: var(--verified-soft); }

/* ---------- memoir band (a portal into the memoir page's own world) ------- */
.memoir-band { display: grid; grid-template-columns: auto 1fr;
  gap: 1.5rem; align-items: center; margin-top: 1.6rem;
  background: #0e1b1f; border: 1px solid #21383d; border-radius: 6px;
  padding: 1.4rem 1.6rem; color: #c4ccc9; }
.memoir-band img { width: 7.5rem; height: auto; border-radius: 3px;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .85),
              0 0 36px -12px rgba(126, 224, 226, .35); }
.memoir-band h3 { margin: 0 0 .35rem; color: #f3efe6; font-size: 1.2rem; }
.memoir-band h3 .ai { color: #7ee0e2; }
.memoir-band p { margin: 0 0 .8rem; font-size: .95rem; color: #c4ccc9;
  max-width: 60ch; }
.memoir-band a { color: #7ee0e2; }
.memoir-band .go { font-family: var(--mono); font-size: .78rem;
  margin-right: 1.4rem; }
@media (max-width: 40rem) { .memoir-band { grid-template-columns: 1fr; }
  .memoir-band img { width: 6rem; } }

/* ---------- cover + text split (book pages) ---------- */
.cover-split { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 1.5rem; align-items: start; }
.cover-split img { width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 3px; box-shadow: 0 12px 26px -16px rgba(27, 34, 43, .55); }
@media (max-width: 40rem) { .cover-split { grid-template-columns: 1fr; }
  .cover-split img { max-width: 8.5rem; } }

/* ---------- print (the reader's-report aesthetic on paper) ---------- */
@media print {
  header.site nav.top, .cta, .btnrow, .skip, .demo-split, .demo-note,
  .stamp.on-shot, .shot .play { display: none !important; }
  .terminal { background: #fff !important; color: #1B222B !important;
    border: 1px solid #999; }
  .terminal .ps { color: #3E6B4F; } .terminal .out { color: #555; }
  .gcard, .flag, .tension, .step, .beat, .excerpt-card, .lcard, .idea,
  .memoir-band { break-inside: avoid; }
  .mark, mark.hl { background: none !important; box-shadow: none !important;
    border-bottom: 2px solid #999; }
  .memoir-band { background: #fff; color: #1B222B; border: 1px solid #999; }
  .memoir-band h3, .memoir-band p, .memoir-band a { color: #1B222B; }
  a.shot { box-shadow: none; }
}

/* ---------- misc ---------- */
.flagline { font-size: .88rem; color: var(--warn); }
.note-soft { color: var(--ink-soft); font-size: .92rem; }
.prov { margin-top: 3rem; border-top: 3px double var(--ink); padding-top: 1rem;
  font-family: var(--mono); font-size: .76rem; color: var(--ink-soft);
  line-height: 1.8; }
.prov b { color: var(--ink); font-weight: 600; }