/* home-v24 PAPER preview: colours mapped by ../../build_paper.py (paper_rgb) from /home-assets-2026-10-10/night/v11.css */
/* home-v18 night: colours mapped by build.py (night_rgb) from ../v11.css */
/* home-v10 (2026-10-08): v9 with the charts re-drawn in the page palette and the headline in ink. */
/* home-v9 (2026-10-08): v8-A2 carried through the whole page. Origin comment kept below.
/* home-v7 (2026-10-07, after Oliver's v6 notes): override layer on the live spnc.ai home. Two variants of one system,
   paper and night; the live map engine re-tuned as the background (relief contours, depth parallax, pointer response);
   one bloom drawn into being; no plates, no folios, no glosses. Fewer elements than v6.
   Palette: paper #FBF8F2 · ink #0E0E0E · graphite #4b4a48 · rule #DDD6C8 · Prussian blue #1B365D ·
   sanguine #A4432A · living light #2F7BE8 (as live) · gold #B8860B, ornament only (lab plate frame tick).
   Dark (prefers-color-scheme): night #0f0e0c · ivory #F4ECDD · muted #B8AC95 · rule #5a5957 · link #9DBCE8. */

:root{
  --v8-paper:#f8f5ef; --v8-paper-2:#f0ede8; --v8-ink:#1f1b16; --v8-graphite:#58534c; --v8-rule:#e1ded8;
  --v8-sang:#9c5728; --v8-gold:#875300;
  /* accent per variant (set below): --v8-accent (text-safe), --v8-accent-light (the engine's light), --v8-status */
  /* live tokens, re-pointed */
  --m-paper:var(--v8-paper); --m-paper-inset:var(--v8-paper-2); --m-ink:var(--v8-ink); --m-ink-muted:var(--v8-graphite);
  --m-paper-rule:var(--v8-rule); --m-control-border:#8a8681;
  --m-field:var(--v8-paper); --m-field-raised:var(--v8-paper-2); --m-on-field:var(--v8-ink); --m-on-field-muted:var(--v8-graphite); --m-field-rule:var(--v8-rule);
  --nb-paper:var(--v8-paper); --nb-ink:var(--v8-ink); --nb-graphite:var(--v8-graphite); --nb-sanguine:var(--v8-accent);
  --nb-blue:var(--v8-accent); --nb-light:var(--v8-accent-light); --nb-light-glow:var(--v8-accent-glow); --m-ai:var(--v8-accent-light);
  --m3n-night:var(--v8-paper); --m3n-dusk:0px;
}

html,body,body.nb-site,.nb-site{background:var(--v8-paper)!important;color:var(--v8-ink)!important}
#m3n-night,#m3n-dusk{display:none!important}

/* top bar: paper, hairline, serif mark */
.topbar{background:var(--v8-paper)!important;color:var(--v8-ink)!important;border-bottom:1px solid var(--v8-rule);transition:none}
.topbar .nav a{color:var(--v8-ink)}
.topbar .nav a:hover{color:var(--v8-accent)}
.topbar .nav .m-btn-primary{background:var(--v8-accent);color:#efece6;border-color:var(--v8-accent)}

/* hero: paper, the live map stays as the only moving thing; the live text halo (made for the night band) goes */
.m-hero h1,.m-hero p,.m-hero li,#m-paper p,#m-paper li,#m-paper dt,#m-paper dd,#m-paper h2,#m-paper h3,#m-paper figcaption,#m-paper blockquote,#m-paper summary,#m-paper td,#m-paper th,.m3-weeksec p,.m3-weeksec li,.m3-weeksec h2,.m3k-who p,.m3k-who h2,.m3kb-everyday p,.m3kb-everyday h2,.m3kb-everyday h3,.m3kb-index p,.m3kb-index h2,.m-how p,.m-how h2,.m-how li,.m3-q1sec p,.m3-q1sec h2,.m-label,.m-label a{text-shadow:none!important}
.m-hero{background:transparent!important;color:var(--v8-ink)}
.m-hero h1{font-weight:400;letter-spacing:-.012em;color:var(--v8-ink)}
.m-hero h1 em{color:var(--v8-ink)!important;font-style:italic}  /* v10: ink, not umber (Oliver 2026-10-08); the italic stays */
.m-hero p,.m-hero li{color:var(--v8-ink)}
.m3-hosted,.m3-ctanote{color:var(--v8-graphite)}
.m-hero .m3l-heroplate{border:1px solid var(--v8-rule);background:var(--v8-paper-2)}

/* labels and headings: a little more colour, in one place each */
.m-label,.m-label a,.m3kb-st,.m3-status,.m3j-tag,.m3-scope,.m3l-cap{color:var(--v8-accent)!important;letter-spacing:.06em!important}
.m-label a{text-decoration:none;border-bottom:1px solid transparent}
.m-label a:hover{border-bottom-color:var(--v8-accent)}
.m-sec h2,.m3-weeksec h2,.m3k-who h2,.m3kb-everyday h2{font-weight:400;letter-spacing:-.008em;color:var(--v8-ink)}
.m-status{color:var(--v8-status)!important;font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:0!important}
.m-sec h3{font-weight:500;color:var(--v8-ink)}
.m-body,.m-rows dd,.m-quote blockquote{color:var(--v8-ink)}
.m-rows dt,.m3-offer dt{color:var(--v8-accent)}

/* links and buttons */
a{color:var(--v8-accent)}
.m-link{color:var(--v8-accent)!important;text-decoration-color:var(--v8-rule-strong)}
.m-btn-primary{background:var(--v8-ink)!important;color:#f8f5ef!important;border:1px solid var(--v8-ink)!important}
.m-btn-primary:hover{background:var(--v8-accent)!important;border-color:var(--v8-accent)!important}

/* rules: hairlines in the paper rule colour */
.m-rows>div,.m3-offer>div,.m-foot,.m3-weeksec,.m-sec{border-color:var(--v8-rule)!important}
.m-quote{border-left:1px solid var(--v8-rule);padding-left:18px}
.m-quote figcaption{color:var(--v8-graphite);font-style:italic}

/* charts and app stills: paper plates, so they also hold in the dark (NOTE.md item 4) */
.m3j-chart img,.ht-chart img,.m3-weeksec img,.a6-tom img,.m3kb-everyday img,video{background:#f8f5ef;border:1px solid var(--v8-rule);border-radius:2px}
.m3j-chart figcaption,.ht-chart figcaption{color:var(--v8-graphite)}
.a4-results h2{background:transparent!important;box-shadow:none!important}

/* ---- the background: the live map engine, re-tuned (build.py patches its controls and palette) ------------------
   Present behind the first screen, quieter under dense text (the live halos do that); never above the page. */
/* canvas presence: the live .25 at rest leaves the relief under 1 percent on the page, so rest is lifted to .7 (paper)
   and .8 (night); the per-layer alphas in the engine (bands .10/.09, contours .5/.7) keep the composite near Astra's
   8 to 12 percent in the margins; the live text halos keep it under 3 percent behind text */
#scene{opacity:.7!important;transition:opacity 1.2s ease}
html.e3-mapup #scene{opacity:1!important}
/* night: the hero plate and the Ask card are drawn for paper in the live CSS */
#e33-blooms{display:none!important}  /* the engine's generated blooms: off for the first comparison (Astra 230503) */
/* the live page keeps text legible over the map with paper-coloured fog and plates (rgba(251,248,242,...), hardcoded);
   in the dark those become light boxes over ivory text, so every one is re-fogged in night */
  background:rgba(15,14,12,.7)!important;box-shadow:0 0 18px 12px rgba(248,245,239,.7)!important}
  background:rgba(22,21,19,.88)!important;box-shadow:none!important}
  background:radial-gradient(ellipse at 50% 50%,rgba(15,14,12,.94) 55%,rgba(15,14,12,0) 100%)!important}
  --a5-paper:#161513;background:rgba(45,40,33,.92)!important;box-shadow:0 0 22px 16px rgba(248,245,239,.8)!important}


/* phone: no horizontal scroll from the absolute blooms */
html,body{overflow-x:hidden}


/* ---- the two accents (Oliver 2026-10-07: no blue anywhere) -------------------------------------------------------- */
/* A: ink and sepia. Umber for eyebrows, links, the headline italic, status lines and the engine's light. */
html.v8-a-sepia,html.v8-a2-sepia-3d{--v8-accent:#735233; --v8-accent-light:#906031; --v8-accent-glow:rgba(144,96,49,.55); --v8-status:#735233; --v8-rule-strong:rgba(115,82,51,.45)}
/* B: graphite and sanguine. Graphite carries eyebrows and links; red chalk only on the headline italic, the status
   lines and the engine's light. */
html.v8-b-sanguine{--v8-accent:#58534c; --v8-accent-light:#9c5728; --v8-accent-glow:rgba(156,87,40,.5); --v8-status:#9c5728; --v8-rule-strong:rgba(88,83,76,.45)}
html.v8-b-sanguine .m-hero h1 em{color:#9c5728!important}
html.v8-b-sanguine .m-label,html.v8-b-sanguine .m-label a{color:var(--v8-graphite)!important}
/* blue drawn into the live studies (discovery loop, living light, brain and dial figures, the hero plate) follows the accent */
svg [stroke="#1B365D"]{stroke:var(--v8-accent)} svg [fill="#1B365D"]{fill:var(--v8-accent)}
svg [stroke="#2F7BE8"],svg [stroke="#2f7be8"],svg [stroke="#4A7FC1"]{stroke:var(--v8-accent-light)}
svg [fill="#2F7BE8"],svg [fill="#2f7be8"],svg [fill="#4A7FC1"]{fill:var(--v8-accent-light)}
.study .pulse,.study .travel{stroke:var(--v8-accent-light)!important;filter:drop-shadow(0 0 3px var(--v8-accent-glow))!important}
.v4cite i,.a6-ask .v4cite i{background:var(--v8-accent-light)!important}

/* remaining blue in the live stylesheet (Ask card, loop markers, added-text marks, bloom tokens, two keyframes) */
.a6-ask #askGo,.a6-ask .v4own{color:var(--v8-accent)!important;border-color:var(--v8-accent)!important}
.a6-ask .v4chip:hover{border-color:var(--v8-accent)!important;color:var(--v8-accent)!important}
.m3-st.on circle{fill:var(--v8-accent-light)!important;stroke:var(--v8-accent-light)!important}
.m3-added{background:var(--v8-accent-wash)!important;border-bottom-color:var(--v8-accent-light)!important}
.m-over li.on::before{background:var(--v8-accent-wash)!important;border-color:var(--v8-accent-light)!important}
:root,html[data-bloom]{--bl-vein:var(--v8-accent);--bl-heart:var(--v8-accent-light);--bl-core:var(--v8-accent)}
html.v8-a-sepia,html.v8-a2-sepia-3d{--v8-accent-wash:rgba(144,96,49,.14)} html.v8-b-sanguine{--v8-accent-wash:rgba(156,87,40,.12)}
@keyframes m3l-accent-t{from{stroke:var(--v8-accent-light)}}
@keyframes m3l-sdraw{from{stroke-dashoffset:1;stroke:var(--v8-accent-light)}55%{stroke:var(--v8-accent-light)}to{stroke-dashoffset:0}}
/* A2: the moving map sits a little lower in contrast than A, because it moves */
html.v8-a2-sepia-3d #scene{opacity:.6!important}
html.v8-a2-sepia-3d.e3-mapup #scene{opacity:.85!important}

/* ---- v9: one hand through the whole page ------------------------------------------------------------------------- */
/* the live studies' red-chalk notes and any leftover blue become sepia; gold stays only on the loop's one star */
svg [stroke="#9C3E26"],svg [stroke="#8B3A2A"],svg [stroke="#8A2D1C"],svg [stroke="#A4432A"]{stroke:var(--v8-accent)}
svg [fill="#9C3E26"],svg [fill="#8B3A2A"],svg [fill="#8A2D1C"],svg [fill="#A4432A"]{fill:var(--v8-accent)}
:root,.nb-site{--m-gold:#875300;--m-gold-light:#6e3e00;--m-gold-shade:#925b1d;--nb-sanguine:var(--v8-accent)}
.m-status{color:var(--v8-accent)!important}
/* v10: the tone filter is gone; the four chart PNGs are re-rendered in the page palette (figs/, figs-src/) */
/* focus and hover never fall back to the live blue */
:focus-visible{outline:2px solid var(--v8-accent)!important;outline-offset:2px}
a:hover,.m-link:hover{color:var(--v8-accent)!important;text-decoration-color:var(--v8-accent)!important}
.v4chip:focus-visible,.m-btn:focus-visible,button:focus-visible{outline-color:var(--v8-accent)!important}
/* rhythm: one section gap, one heading measure, captions in graphite italic, nothing bold but the eyebrow weight */
.m-sec{padding-top:clamp(56px,6vw,96px)!important}
.m-sec h2,.m3-weeksec h2,.m3k-who h2,.m3kb-everyday h2{max-width:22ch;font-weight:400;letter-spacing:-.008em;line-height:1.12}
.m-sec h3{font-weight:500}
figcaption,.m3-scope,.m3l-cap,.m3-herocap{color:var(--v8-graphite)!important;font-style:italic}
.m-label,.m3kb-st,.m3j-tag{font-size:.8125rem!important;letter-spacing:.08em!important}
/* paper plates under figures: one hairline, one radius, no shadows */
.m3j-chart img,.ht-chart img,.m-rec,.m3-deckplate,.m3j-table,.m3l-card,.m3kc-card,.m3kb-card,.a4-col,.a4-row,.ht-pairs>div,#people .m-quote+.m-quote,#behind .m-papers li>a{box-shadow:none!important;outline:0!important;border:1px solid var(--v8-rule)!important;border-radius:2px!important}

/* ---- v11: one card per result (chart, sentence, notes in place) ---- */
.v11-results{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:34px}
.v11-card{background:rgba(248,245,239,.96);border-top:1px solid rgba(31,27,22,.4);padding:16px 0 14px;min-width:0}
.v11-theme{margin:0;font:500 .9375rem/1.375rem var(--sans);color:var(--v8-accent,#735233);letter-spacing:.04em}
#m-paper .v11-result,.v11-result{font-family:'EB Garamond',Garamond,Georgia,serif!important;font-size:1.6rem!important;line-height:1.3!important;color:#1f1b16!important;margin:8px 0 14px!important;max-width:880px}
.v11-fig{margin:0;min-width:0}
.v11-fig img,.v11-fig picture{display:block;width:100%;height:auto;max-width:none}
.v11-fig img{border:1px solid var(--v8-rule,#e1ded8)!important;border-radius:2px;background:#f8f5ef}
.v11-pan{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.v11-fig figcaption{font-size:1.0625rem;line-height:1.55rem;color:var(--v8-graphite,#58534c);margin-top:10px;max-width:880px}
.v11-notes{margin-top:8px}
.v11-go{margin:6px 0 0;font:500 .9rem/1.4 var(--sans)}
@media (max-width:700px){
  .v11-results{gap:26px}
  #m-paper .v11-result,.v11-result{font-size:1.3rem!important}
  .v11-pan img{width:var(--v11-minw)!important;max-width:none!important}
  .v11-pan{margin-right:calc(-1 * var(--gut,16px));padding-bottom:6px}
  .v11-fig figcaption{font-size:.98rem;line-height:1.45rem}
}