/* ============================ 1. TOKEN BRIDGE ============================ */
/* Declared on BODY as well as :root — the copied Obsidian theme sets --text-accent /
   --interactive-accent / --link-color on `body`, and custom properties inherit from the
   nearest ancestor that declares them, so a body-level theme value would shadow an
   html-level override. Our body selector (later + more specific) wins and inherits down. */
:root,html.theme-light,html.theme-light body{
  --serif:"Hoefler Text","Baskerville","Iowan Old Style","Palatino Linotype","Source Serif 4",Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  /* vellum by day */
  --ground-0:#F4EDDC; --ground-1:#E7DBBE;
  --ink:#2B2210; --ink-soft:rgba(43,34,16,.74);
  --gold:#8B6B24; --gold-hair:#A5822F; --gold-text:#6E541B;
  /* the illuminated-link affordance: ochre-gold ink + gold underline at rest, deepen on hover */
  --link:#6E541B; --link-line:#A5822F; --link-hover:#5A4416;
  --t-quote:#A62F22; --t-allusion:#1F4FB0; --t-echo:#1D6B43;
  --t-quote-text:#A62F22; --t-allusion-text:#1F4FB0; --t-echo-text:#1D6B43;
  --wash-q:rgba(166,47,34,.08); --wash-a:rgba(31,79,176,.08); --wash-e:rgba(29,107,67,.09);
  --wash-q-hov:rgba(166,47,34,.16); --wash-a-hov:rgba(31,79,176,.15); --wash-e-hov:rgba(29,107,67,.16);
  --card:#FBF6E9; --hairline:rgba(139,107,36,.35); --hairline-soft:rgba(139,107,36,.20);
  --halo:rgba(165,130,47,.16);
  /* --- remap the Obsidian vars every component already reads --- */
  --font-text:var(--serif); --font-interface:var(--sans);
  --background-primary:#F5EEDD; --background-secondary:#EFE6CD;
  --background-modifier-border:rgba(139,107,36,.22);
  --background-modifier-hover:rgba(165,130,47,.13);
  --text-normal:#2B2210; --text-muted:rgba(43,34,16,.74); --text-faint:rgba(43,34,16,.5);
  --text-accent:#6E541B; --link-color:#2B2210; --link-color-hover:#6E541B;
  --interactive-accent:#8B6B24; --text-on-accent:#F8F3E4;
  --hb-brand:#6E541B;
}
html.theme-dark,html.theme-dark body{
  --ground-0:#0D1430; --ground-1:#070B19;
  --ink:#EDE6D2; --ink-soft:rgba(237,230,210,.68);
  --gold:#C6A15B; --gold-hair:#C6A15B; --gold-text:#C6A15B;
  /* on night-scriptorium the resting link is warm gold; hover brightens to near-leaf */
  --link:#D9B978; --link-line:#C6A15B; --link-hover:#EBD59A;
  --t-quote:#C0392B; --t-allusion:#2E5BB8; --t-echo:#2E8B57;
  --t-quote-text:#E0705F; --t-allusion-text:#7FA3E8; --t-echo-text:#5FBE8D;
  --wash-q:rgba(192,57,43,.20); --wash-a:rgba(46,91,184,.22); --wash-e:rgba(46,139,87,.20);
  --wash-q-hov:rgba(192,57,43,.32); --wash-a-hov:rgba(46,91,184,.34); --wash-e-hov:rgba(46,139,87,.30);
  --card:#131C3E; --hairline:rgba(198,161,91,.38); --hairline-soft:rgba(198,161,91,.18);
  --halo:rgba(226,199,127,.14);
  --background-primary:#0D1430; --background-secondary:#131C3E;
  --background-modifier-border:rgba(198,161,91,.18);
  --background-modifier-hover:rgba(198,161,91,.11);
  --text-normal:#EDE6D2; --text-muted:rgba(237,230,210,.68); --text-faint:rgba(237,230,210,.45);
  --text-accent:#C6A15B; --link-color:#EDE6D2; --link-color-hover:#C6A15B;
  --interactive-accent:#C6A15B; --text-on-accent:#131022; --hb-brand:#C6A15B;
}
/* the manuscript ground: a calm vellum / indigo wash behind everything */
html{background:linear-gradient(180deg,var(--ground-0),var(--ground-1)) fixed;background-color:var(--ground-0)}
body{background:transparent}
.app-container,.markdown-reading-view,.markdown-preview-view{background:transparent}

/* ============================ 2. TYPE + HEADINGS ============================ */
.markdown-preview-sizer{padding-top:1.9rem}
.markdown-rendered{color:var(--ink);line-height:1.72}
.markdown-rendered p{line-height:1.72}
.markdown-rendered h1,.markdown-rendered h2,.markdown-rendered h3,
.markdown-rendered h4,.markdown-rendered h5,.markdown-rendered h6{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
/* the rule-and-diamond ritual under the page title */
.markdown-rendered h1{font-size:2.35em;line-height:1.1;margin:.2em 0 .8em;position:relative;padding-bottom:.55em}
.markdown-rendered h1::after{content:"";position:absolute;left:0;bottom:.05em;width:min(220px,60%);height:1px;
  background:linear-gradient(90deg,var(--gold-hair) 0%,var(--gold-hair) 74%,transparent)}
.markdown-rendered h1::before{content:"";position:absolute;left:calc(min(220px,60%) - 3px);bottom:calc(.05em - 2.5px);
  width:6px;height:6px;transform:rotate(45deg);background:var(--gold-hair)}
.markdown-rendered h2{font-size:1.6em;font-weight:500}
.markdown-rendered h3{font-size:1.28em;font-weight:600}
.markdown-rendered h2,.markdown-rendered h3{margin-top:1.7em}
.markdown-rendered blockquote{border-left:2px solid var(--gold-hair);color:var(--ink);
  font-family:var(--serif);font-style:italic;background:transparent}
.markdown-rendered strong,.markdown-rendered b{color:inherit}
/* §5 IN-CHAPTER PERICOPE HEADERS — the showcase's centred gold small-caps + hairline
   ritual. The Bible hub emits pericope titles ("The Fall") as its ONLY <h6>; scope to
   sec-the-bible so the many structural h2/h3/h6 on TT / IP / FT / TOSK pages are
   untouched. Flex + flanking hairlines; long titles wrap and stay centred. */
html.theme-light body.sec-the-bible .markdown-rendered h6,html.theme-dark body.sec-the-bible .markdown-rendered h6{
  display:flex;align-items:center;justify-content:center;gap:.9rem;margin:2.6rem 0 1.5rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.24em;line-height:1.5;
  text-transform:uppercase;color:var(--gold-text);text-align:center}
body.sec-the-bible .markdown-rendered h6::before,body.sec-the-bible .markdown-rendered h6::after{
  content:"";flex:1;height:1px;min-width:1.4rem;background:linear-gradient(90deg,transparent,var(--hairline-soft))}
body.sec-the-bible .markdown-rendered h6::after{background:linear-gradient(90deg,var(--hairline-soft),transparent)}
/* §4 hub reading treatment + shared card-component atoms (eyebrow / census / k-dot
   diamond) reused by the IP / TOSK / TT / LXX card page types. */
.markdown-rendered .eyebrow{margin:0 0 .7rem;text-align:center;font-family:var(--sans);
  font-size:.66rem;font-weight:600;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--gold-text)}
.markdown-rendered .census{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.15rem;
  margin:.1rem 0 1.7rem;font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.markdown-rendered .census span{display:inline-flex;align-items:center;gap:.5em}
.k-dot{width:5px;height:5px;flex:none;transform:rotate(45deg);display:inline-block}
.k-dot.q{background:var(--t-quote-text)} .k-dot.a{background:var(--t-allusion-text)}
.k-dot.e{background:var(--t-echo-text)} .k-dot.g{background:var(--gold-hair)}
.markdown-rendered .tb-first .dc{float:left;font-family:var(--serif);font-weight:400;font-size:3.3em;
  line-height:.78;padding:.02em .14em 0 0;color:var(--gold-text)}
/* D-W77: the versal is v1's link to the Readable Bible. It must not read as a link at
   rest (a versal wears no underline), so the affordance is cursor + a hover shift that
   works in BOTH themes — dark mode collapses the three golds to one value, so colour
   alone would be invisible there and opacity carries the cue. */
.markdown-rendered .tb-first a.dc{text-decoration:none;cursor:pointer;
  transition:color .15s ease,opacity .15s ease}
.markdown-rendered .tb-first a.dc:hover{color:var(--gold-hair);opacity:.78}
.tb-vn-hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* generic rule-and-diamond divider used by every card page type under its title */
.markdown-rendered .gold-rule{position:relative;width:min(200px,48vw);height:1px;margin:1.35rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-hair) 22%,var(--gold-hair) 78%,transparent)}
.markdown-rendered .gold-rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-hair)}
/* .sec-head — the showcase's centred gold small-caps + hairline section ritual,
   used by the IP / TT / FT / LT card pages' "Significance"/section headers. Overrides
   the default serif h2/h3 styling for any heading carrying the class. */
.markdown-rendered .sec-head{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:2.6rem 0 1.5rem;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.24em;
  line-height:1.5;text-transform:uppercase;color:var(--gold-text);text-align:center}
.markdown-rendered .sec-head::before,.markdown-rendered .sec-head::after{content:"";flex:1;height:1px;
  min-width:1.4rem;background:linear-gradient(90deg,transparent,var(--hairline-soft))}
.markdown-rendered .sec-head::after{background:linear-gradient(90deg,var(--hairline-soft),transparent)}
/* ILLUMINATED LINKS (D-W51). Real links get a PERSISTENT at-rest affordance —
   a distinct ochre-gold ink + a visible solid gold underline, no hover needed —
   so clickable text is obvious at a glance (the manuscript answer to "old blue").
   AA-clean both themes (light 6.2:1 on vellum, dark 9.6:1 on night). The gold
   still deepens on hover as the interaction layer. The three reserved pigments
   (vermilion/ultramarine/verdant) are NOT reused here — links get their own gold. */
/* Scope to .internal-link (every cross-ref / apparatus / TOSK / prev-next link is
   one) — NOT bare `a`, so chrome anchors that live inside .markdown-rendered but
   carry their own component design (the .lens-chip "Read as" tabs, sidebar) are
   left alone. theme.css forces `.markdown-rendered .internal-link{text-decoration:
   none!important}`, so the at-rest underline needs !important to survive (illumination
   loads last). Colour needs no !important — theme.css doesn't force it. */
html.theme-light .markdown-rendered .internal-link,html.theme-dark .markdown-rendered .internal-link{
  color:var(--link);
  text-decoration-line:underline!important;text-decoration-color:var(--link-line)!important;
  text-decoration-thickness:.06em!important;text-underline-offset:.16em}
html.theme-light .markdown-rendered .internal-link:hover,html.theme-dark .markdown-rendered .internal-link:hover{
  color:var(--link-hover);text-decoration-color:var(--link-hover)!important}
/* genuine external links in prose get the same manuscript affordance (theme.css
   doesn't force these, so no !important). Chrome (lens-chip, topbar) is excluded:
   lens-chip hrefs are internal, and this is scoped inside .markdown-rendered. */
.markdown-rendered a[href^="http"]{color:var(--link);
  text-decoration-line:underline;text-decoration-color:var(--link-line);
  text-decoration-thickness:.06em;text-underline-offset:.16em}
.markdown-rendered a[href^="http"]:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}
/* EXEMPT hub Scripture-phrase links: an <a.internal-link> wrapping a .hl pigment
   span. The link affordance would recolour the verse (the .hl inherits the anchor
   colour) and lay a second underline over the pigment one. Keep them at --ink with
   pigment only. :has(.hl) → (0,4,1) so !important beats the underline rule above;
   the .hl-* children (§3) supply the pigment colour + underline; the anchor only
   needs to drop its own ochre link underline so it doesn't double the pigment one. */
html.theme-light .markdown-rendered .internal-link:has(.hl),html.theme-dark .markdown-rendered .internal-link:has(.hl){
  color:var(--ink);text-decoration:none!important}
html.theme-light .markdown-rendered .internal-link:has(.hl):hover,html.theme-dark .markdown-rendered .internal-link:has(.hl):hover{color:var(--ink)}
/* † connection daggers are sup > a.internal-link — pigment-coloured (inline !important
   upstream), never underlined. Needs class-count >= the underline rule + !important. */
html.theme-light .markdown-rendered sup a.internal-link,html.theme-dark .markdown-rendered sup a.internal-link{
  text-decoration:none!important}

/* ============================ 3. PIGMENT HIGHLIGHTS ============================ */
/* D-W51: the inter-biblical highlights colour the WORDS in pigment (vermilion=
   Quotation, ultramarine=Allusion, verdant=Echo) + a same-pigment underline, and
   the faint wash is REMOVED — sharp and instantly distinguishable at a glance, the
   way the old live site read (Brian's ruling; a deliberate move past the showcase's
   ink+wash). AA-clean both themes via the lightened --t-*-text vars (light 5.6–6.5,
   dark 5.7–8.0). These three pigments stay RESERVED for hub highlights — never the
   nav-link ochre. text-decoration needs !important to beat theme.css's
   `.internal-link{text-decoration:none!important}` on the phrase's parent anchor. */
.markdown-rendered .hl{border-radius:0;padding:0;margin:0;background:transparent!important;
  text-decoration-line:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.18em}
.markdown-rendered .hl-q{color:var(--t-quote-text)!important;text-decoration-style:solid!important;text-decoration-color:var(--t-quote-text)!important}
.markdown-rendered .hl-a{color:var(--t-allusion-text)!important;text-decoration-style:dashed!important;text-decoration-color:var(--t-allusion-text)!important}
.markdown-rendered .hl-e{color:var(--t-echo-text)!important;text-decoration-style:dotted!important;text-decoration-color:var(--t-echo-text)!important}
.markdown-rendered a:hover .hl{text-decoration-thickness:2px!important}
/* hub daggers stay KIND-coloured (the vault inlines color:#hex !important per
   connection type — already the pigment palette); we only drop the link underline. */
.markdown-rendered sup a{text-decoration:none}
/* keep Reader's Mode clean: drop the underline + wash too (colour already handled upstream) */
html.reader-mode body.sec-the-bible .markdown-rendered a.internal-link .hl{
  background:transparent !important;text-decoration:none !important}

/* ============================ 4. ILLUMINATED TOP BAR ============================ */
/* M5: sticky top bar was 90% secondary + blur(10px); scrolled body text bled faintly
   through. Push to a near-opaque 97% ground with a stronger blur + a soft hairline
   shadow for separation — keeps the frosted-vellum feel, stops the bleed-through. */
.site-topbar{background:color-mix(in srgb,var(--background-secondary) 97%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hairline-soft);
  box-shadow:0 1px 6px rgba(70,54,22,.06)}
html.theme-dark .site-topbar{box-shadow:0 1px 6px rgba(0,0,0,.28)}
.site-topbar .brand{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:1.08rem;
  display:inline-flex;align-items:center;gap:.5rem}
.site-topbar .brand-logo{width:26px;height:26px;border-radius:50%;flex:none;display:block;
  box-shadow:0 0 0 1px var(--gold-hair)}
.site-topbar .brand .brand-text{color:var(--ink)}
.site-topbar .crumbs{font-family:var(--sans);letter-spacing:.02em}
.home-btn,.nav-toggle,.graph-toggle,.legend-toggle,.reader-toggle,.theme-toggle{
  color:var(--gold-text);border-color:var(--hairline-soft)}
.home-btn:hover,.graph-toggle:hover,.legend-toggle:hover,.reader-toggle:hover,.theme-toggle:hover{
  color:var(--gold);border-color:var(--gold-hair)}
.search input#q{font-family:var(--sans);background:var(--background-primary);
  border:1px solid var(--hairline-soft);color:var(--ink)}
.search input#q:focus{border-color:var(--gold-hair)}
/* re-assert the site's phone topbar collapse (D-W24): our .brand display rule
   above loads after site-chrome and would otherwise clobber its media-query hide. */
@media(max-width:640px){.site-topbar .brand{display:none}}

/* ============================ 5. "READ AS" LENS STRIP ============================ */
.lens-strip{align-items:baseline;gap:.2rem clamp(.7rem,2.4vw,1.3rem)}
.lens-strip .lens-label{color:var(--gold-text);letter-spacing:.24em}
.lens-strip .lens-chip{border:none;background:none;border-radius:0;padding:.15rem .1rem .5rem;
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);position:relative}
.lens-strip a.lens-chip:hover{color:var(--gold);border:none;background:none}
.lens-strip .lens-chip.active{background:none;color:var(--gold);border:none;font-weight:600}
.lens-strip .lens-chip.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-hair) 18%,var(--gold-hair) 82%,transparent)}
.lens-strip .lens-chip.active::before{content:"";position:absolute;left:50%;bottom:-1.5px;width:4px;height:4px;
  transform:translateX(-50%) rotate(45deg);background:var(--gold-hair)}

/* ============================ 6. "IN THE WIDER WEB" CARD (D-W51 item 6) ==========
   The apparatus card now sits at the BOTTOM of the reading page (relocated in
   render_page), so it is NO LONGER the sticky top bar — override site-chrome's
   position:sticky + the 38vh internal scroll cap. Styling ported from the showcase:
   illuminated card, thread ornament, pigment-diamond kind labels. */
.web-strip{position:static!important;top:auto!important;z-index:auto;
  margin:clamp(2.6rem,6vh,3.6rem) 0 0!important;padding:0;
  background:var(--card);border:1px solid var(--hairline-soft);border-radius:4px;
  box-shadow:0 1px 2px rgba(70,54,22,.05),0 10px 30px rgba(70,54,22,.06);font-family:var(--sans)}
html.theme-dark .web-strip{box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 34px rgba(0,0,0,.28)}
.web-strip>summary{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.15rem;
  color:var(--gold-text);font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.web-strip>summary::before{content:none!important}
.web-mark{width:7px;height:7px;flex:none;transform:rotate(45deg);
  border:1px solid var(--gold-hair);background:transparent;transition:background .3s ease}
.web-strip[open] .web-mark{background:var(--gold-hair)}
.web-strip .web-n{margin-left:auto;background:none;color:var(--ink-soft);
  font-size:.66rem;font-weight:500;letter-spacing:.06em;text-transform:none}
.web-strip[open] .web-body{max-height:none!important;overflow:visible!important}
.web-body{background:transparent;border-top:1px solid var(--hairline-soft);
  margin:0;padding:.25rem 1.15rem 1.25rem}
.web-ornament{display:block;width:100%;max-width:340px;height:auto;margin:.7rem auto 1.1rem}
.web-ornament .th{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.web-ornament .th-q{stroke:var(--t-quote-text)}
.web-ornament .th-a{stroke:var(--t-allusion-text)}
.web-ornament .th-e{stroke:var(--t-echo-text)}
.web-ornament .tip{opacity:0;transition:opacity .6s ease}
.web-ornament .tip-q{fill:var(--t-quote-text)} .web-ornament .tip-a{fill:var(--t-allusion-text)}
.web-ornament .tip-e{fill:var(--t-echo-text)} .web-ornament .orn-center{fill:var(--gold-hair)}
.web-strip[open] .web-ornament .th{animation:thread-draw 1.15s cubic-bezier(.22,.61,.2,1) both}
.web-strip[open] .web-ornament .th-a{animation-delay:.5s}
.web-strip[open] .web-ornament .th-q{animation-delay:.68s}
.web-strip[open] .web-ornament .th-e{animation-delay:.86s}
.web-strip[open] .web-ornament .tip{opacity:1}
@keyframes thread-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.web-ornament .th,.web-strip[open] .web-ornament .th{animation:none;stroke-dashoffset:0}.web-ornament .tip{opacity:1}}
.web-group{margin:0 0 1.05rem} .web-group:last-child{margin-bottom:0}
a.web-gl-link{display:inline-block;margin-bottom:.35rem;font-size:.78rem;font-weight:600;
  letter-spacing:.05em;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
a.web-gl-link::after{content:none}
a.web-gl-link:hover{color:var(--gold);border-bottom-color:var(--gold-hair)}
/* Type label always leads on its own line; the links fall UNDER it, never beside it
   (block-stacked subgroup — consistent for every kind, every screen width). */
.web-sub{margin:.35rem 0 0 .15rem;font-size:.82rem;line-height:1.65}
.web-kind{display:flex;align-items:center;gap:.45em;margin:0 0 .18rem;
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.web-refs{display:block}
.web-kind.rt-q{color:var(--t-quote-text)} .web-kind.rt-a{color:var(--t-allusion-text)}
.web-kind.rt-e{color:var(--t-echo-text)}
.web-strip .web-body a{color:var(--link);border-bottom:none;
  text-decoration:underline;text-decoration-color:var(--link-line);
  text-decoration-thickness:.06em;text-underline-offset:.14em}
.web-strip .web-body a:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}

/* ============================ 7. BACKLINKS + SIDEBAR + FOOTER ============================ */
.backlinks-header,.bl-group-title{color:var(--gold-text)}
.bl-group-title::before{color:var(--gold-hair)}
.nav-lib-list .nav-lib-hub .nav-file,.nav-chap.active{color:var(--gold-text)}
.nav-chap.active{background:var(--halo)}
.nav-file.active{color:var(--gold-text)}
.nav-file:hover,.nav-chap:hover{background:var(--halo)}
.site-sidebar{border-right:1px solid var(--hairline-soft)}
.site-footer{border-top:1px solid var(--hairline-soft)}
.foot-brand{font-family:var(--serif);color:var(--ink-soft)}
/* M3: footer "Suggest a correction" pill — site-chrome sets background:var(--text-accent)
   (gold); illumination previously only overrode color to --gold-text, which equals
   --text-accent in BOTH themes → gold-on-gold, invisible label. Mirror .suggest-submit:
   own the gold fill + a contrasting on-accent ink so the label reads in light and dark. */
.suggest-link{background:var(--gold);color:var(--text-on-accent)}
.suggest-link:hover{background:var(--gold-hair);color:var(--text-on-accent);opacity:1}

/* ============================ 8. GRAPH VIEW (illuminated palette) ============================ */
/* Graph View — the constellation: gold star-nodes + type-coloured curved connectors on a
   deep navy night-sky ground (the splash's visual language). Navy in both themes — a
   window into the web of light. Edge colour is set inline per edge (by connection type). */
.local-graph{background:radial-gradient(ellipse 120% 92% at 50% 26%,#141d33 0%,#0b1122 58%,#070c18 100%);
  border-color:#1c2740}
.lg-svg{background:transparent}
.lg-edge{fill:none;stroke-width:1.3;opacity:.62;stroke-linecap:round;
  transition:opacity .14s ease,stroke-width .14s ease}
.lg-edge.hot{opacity:1;stroke-width:2.1}
.lg-edge.lg-mute{opacity:0;pointer-events:none}   /* neighbour-to-neighbour mesh hidden at rest; revealed on hover */
.lg-halo{pointer-events:none}
.lg-hit{fill:transparent;pointer-events:all;cursor:pointer}
.lg-node .lg-shape{fill:#FFF7DE;stroke:none;filter:drop-shadow(0 0 3px rgba(240,214,144,.75))}
.lg-node.center .lg-shape{fill:#FFFDF4;stroke:none}
.lg-node text{fill:#C7BC9E;font-family:var(--sans);opacity:.82}
.lg-node.center text{fill:#F2E7C4;font-weight:700;opacity:1}
.lg-node:hover text,.lg-node:focus-within text{fill:#FBF3D8;opacity:1}
/* legend / title / footer must read on the navy ground (base uses light-theme muted ink) */
.local-graph .lg-title{color:#C9B786}
.local-graph .lg-legend,.local-graph .lg-key{color:#DCD3B9}
.local-graph .lg-foot{color:#ADA488}
.lg-node.center .lg-shape{stroke:var(--gold);stroke-width:2.5;
  filter:drop-shadow(0 0 7px var(--halo))}
.lg-title{color:var(--gold-text)}
.graph-toggle{color:var(--gold-text)}

/* ============================ 9. BUTTONS + CTA ============================ */
.suggest-submit,.skip-link{background:var(--gold);color:var(--text-on-accent)}
.suggest-submit:hover{background:var(--gold-hair);opacity:1}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[role="button"]:focus-visible,[tabindex="0"]:focus-visible{
  outline:2px solid var(--gold-hair);outline-offset:2px}

/* ============================ 10. INTERTEXTUALITY-PAIR CARDS (item 8) ============ */
.pair-col{max-width:46rem;margin:0 auto}
.pair-h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.pair-h1::after,.pair-h1::before{content:none}
.pair-h1 .pair-arrow{color:var(--gold-hair)}
.pair-col .gold-rule{position:relative;width:min(200px,48vw);height:1px;margin:1.35rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-hair) 22%,var(--gold-hair) 78%,transparent)}
.pair-col .gold-rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-hair)}
/* Walk the Square self-hosted video (registry-driven; see build.py _ip_video_block).
   Native <video> streamed from R2 — never a YouTube iframe. Reuses the TT wave preview
   player idiom: 16/9, rounded, dark letterbox ground in both themes. */
.ip-video{margin:clamp(1.6rem,4vh,2.4rem) auto clamp(1.9rem,4.5vh,2.6rem);max-width:44rem}
.ip-video-el{display:block;width:100%;aspect-ratio:16/9;background:#0d1b2a;border:1px solid var(--hairline-soft);
  border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(20,29,51,.22)}
.ip-video-cap{margin:.6rem 0 0;text-align:center;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.02em;color:var(--ink-soft)}
.ip-video-kicker{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.ip-video-dur{margin-left:.5em;padding-left:.6em;border-left:1px solid var(--hairline-soft);color:var(--ink-soft)}
.pair-type{display:flex;justify-content:center;margin:0 0 clamp(1.8rem,4vh,2.4rem)}
.pair-pill{display:inline-flex;align-items:center;gap:.55em;padding:.34rem .95rem;border-radius:999px;
  font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.pair-pill.rt-q{border:1px solid var(--t-quote);color:var(--t-quote-text);background:var(--wash-q)}
.pair-pill.rt-a{border:1px solid var(--t-allusion);color:var(--t-allusion-text);background:var(--wash-a)}
.pair-pill.rt-e{border:1px solid var(--t-echo);color:var(--t-echo-text);background:var(--wash-e)}
.pair-duo{display:grid;grid-template-columns:1fr 3.4rem 1fr;align-items:stretch;gap:.35rem}
.pair-side{display:flex;flex-direction:column;gap:.35rem}
.pair-card{flex:1;background:var(--card);border:1px solid var(--hairline-soft);border-radius:4px;
  box-shadow:0 1px 2px rgba(70,54,22,.05),0 10px 30px rgba(70,54,22,.06);padding:1.15rem 1.3rem 1.35rem;
  transition:transform .3s cubic-bezier(.22,.61,.2,1),border-color .3s ease,box-shadow .3s ease}
html.theme-dark .pair-card{box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 34px rgba(0,0,0,.28)}
/* source/target verse cards lift on hover — the site's shared card affordance */
.pair-card:hover,.pair-card:focus-within{transform:translateY(-3px);border-color:var(--gold-hair);
  box-shadow:0 8px 24px var(--halo)}
html.theme-dark .pair-card:hover,html.theme-dark .pair-card:focus-within{border-color:var(--gold-hair);
  box-shadow:0 14px 36px rgba(0,0,0,.42)}
@media(prefers-reduced-motion:reduce){.pair-card{transition:none}
  .pair-card:hover,.pair-card:focus-within{transform:none}}
/* Home hub hero — the splash constellation animation reused as a bounded frame,
   with the wordmark centred. Full-bleed within the reading column. */
.markdown-rendered .home-hero-embed{position:relative;width:100%;margin:0 0 clamp(1.6rem,4vh,2.6rem);
  border-radius:8px;overflow:hidden;line-height:0;box-shadow:0 2px 10px var(--halo)}
.markdown-rendered .home-hero-embed iframe{display:block;width:100%;
  height:clamp(20rem,58vh,38rem);border:0}
.markdown-rendered .home-h1-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Home hub — "Start here" block (site review fix #3, 2026-09-23): title, one-line lede,
   three doors (Read · Follow · Learn). Stacks to one column on phones. */
.markdown-rendered .hs-top{margin:.4rem 0 1.6rem}
.markdown-rendered .hs-eyebrow{margin:0 0 .35rem;font:600 .7rem/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.markdown-rendered h1.hs-h1{margin:0;font-size:clamp(2rem,5vw,3rem);line-height:1.08;text-transform:none;letter-spacing:0}
.markdown-rendered .hs-lede{font-size:1.12rem;line-height:1.6;max-width:44rem;margin:.8rem 0 1.2rem}
.markdown-rendered .hs-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.markdown-rendered a.hs-door{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;text-decoration:none;
  border:1px solid var(--hairline-soft);border-radius:6px;background:var(--card);color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.07);transition:transform .2s,border-color .2s}
.markdown-rendered a.hs-door:hover,.markdown-rendered a.hs-door:focus-visible{transform:translateY(-2px);border-color:var(--gold)}
.markdown-rendered .hs-door .hs-k{font:600 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.markdown-rendered .hs-door b{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.25}
.markdown-rendered .hs-door b::after{content:" \2192";color:var(--gold)}
.markdown-rendered .hs-door span:last-child{font-size:.9rem;line-height:1.45;opacity:.8}
@media(max-width:700px){.markdown-rendered .hs-doors{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.markdown-rendered a.hs-door{transition:none}
  .markdown-rendered a.hs-door:hover{transform:none}}
/* Home hub — the Library-scale stat cards (gold number + small-caps label) */
.markdown-rendered .home-stats{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.55rem,1.5vw,1rem);margin:clamp(1.4rem,3.5vh,2.2rem) 0 .7rem}
@media(max-width:560px){.markdown-rendered .home-stats{grid-template-columns:repeat(2,1fr)}}
.markdown-rendered .home-stat{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.05rem .7rem .95rem;background:var(--card);border:1px solid var(--hairline-soft);border-radius:4px;
  text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.22,.61,.2,1),border-color .3s ease,box-shadow .3s ease}
a.home-stat{cursor:pointer}
a.home-stat:hover .hs-label{color:var(--gold-text)}
.markdown-rendered .home-stat:hover{transform:translateY(-3px);border-color:var(--gold-hair);
  box-shadow:0 6px 20px var(--halo)}
.markdown-rendered .hs-num{font-family:var(--serif);font-weight:400;line-height:1;color:var(--gold-text);
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.15rem)}
.markdown-rendered .hs-label{margin-top:.42rem;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);line-height:1.35}
.markdown-rendered .home-stats-cap{text-align:center;font-family:var(--serif);font-size:.92rem;
  line-height:1.6;color:var(--ink-soft);margin:.5rem 0 0}
@media(prefers-reduced-motion:reduce){.markdown-rendered .home-stat{transition:none}
  .markdown-rendered .home-stat:hover{transform:none}}
.pair-role{margin:0 0 .2rem;font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-text)}
.pair-refline{margin:0 0 .8rem;padding-bottom:.65rem;border-bottom:1px solid var(--hairline-soft);
  font-family:var(--serif);font-size:1.06rem;color:var(--ink)}
.pair-refline-link{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);
  text-decoration-thickness:.06em;text-underline-offset:.16em}
.pair-refline-link:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}
.pair-ver{margin-left:.5em;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.pair-card blockquote{margin:0;border:0;padding:0;background:transparent;font-family:var(--serif);
  font-style:normal;font-size:1.02rem;line-height:1.8;color:var(--ink)}
.pair-novtext{margin:0;font-family:var(--sans);font-size:.82rem;font-style:italic;color:var(--ink-soft)}
.pair-thread{display:flex;align-items:center;justify-content:center}
.pair-thread svg{width:100%;height:auto;overflow:visible}
.pair-thread .pth{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;
  animation:pair-draw 1.1s cubic-bezier(.22,.61,.2,1) .25s both}
.pair-thread-q .pth{stroke:var(--t-quote)} .pair-thread-q .ptip{fill:var(--t-quote)}
.pair-thread-a .pth{stroke:var(--t-allusion)} .pair-thread-a .ptip{fill:var(--t-allusion)}
.pair-thread-e .pth{stroke:var(--t-echo)} .pair-thread-e .ptip{fill:var(--t-echo)}
.pair-thread-g .pth{stroke:var(--gold-hair)} .pair-thread-g .ptip{fill:var(--gold-hair)}
@keyframes pair-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pair-sig p{margin:0 0 1.15em;font-family:var(--serif);font-size:clamp(1rem,.98rem + .25vw,1.1rem);
  line-height:1.85;color:var(--ink)}
.pair-sig p:last-child{margin-bottom:0}
.pair-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem 1.2rem;
  margin:clamp(2.2rem,5vh,3rem) 0 0;padding-top:1rem;border-top:1px solid var(--hairline-soft);
  font-family:var(--sans);font-size:.63rem;font-weight:500;letter-spacing:.12em;color:var(--ink-soft)}
.pair-meta span{display:inline-flex;align-items:center;gap:.5em}
/* Labeled fact list under Significance: gold small-caps label column (the page's eyebrow
   voice) + serif value column (the Significance voice). Centred, hairline-separated. */
.pair-facts{max-width:36rem;margin:clamp(2.2rem,5vh,3rem) auto 0;padding-top:1.25rem;
  border-top:1px solid var(--hairline-soft);display:grid;gap:.7rem .9rem}
.pair-fact{display:grid;grid-template-columns:11.5rem 1fr;gap:.2rem 1rem;align-items:baseline}
.pair-fact dt{margin:0;text-align:right;font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);line-height:1.7}
.pair-fact dd{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--ink)}
.pair-fact dd em{font-style:italic}
@media(max-width:560px){.pair-fact{grid-template-columns:1fr;gap:.05rem}
  .pair-fact dt{text-align:left}}
@media(prefers-reduced-motion:reduce){.pair-thread .pth{animation:none;stroke-dashoffset:0}}
@media(max-width:640px){.pair-duo{grid-template-columns:1fr}.pair-thread{height:2.4rem}}

/* ============================ 11. LXX WORD-CARD GRID (item 3) ============================ */
.markdown-rendered .lxx-col{max-width:46rem;margin:0 auto}
.markdown-rendered .lxx-col h1{text-align:center;padding-bottom:0}
.markdown-rendered .lxx-col h1::before,.markdown-rendered .lxx-col h1::after{display:none}
.markdown-rendered .lxx-col .eyebrow{margin-top:.2rem}
.markdown-rendered .lxx-intro{max-width:34rem;margin:0 auto clamp(1.6rem,4vh,2.2rem);
  text-align:center;font-family:var(--sans);font-size:.8rem;line-height:1.65;color:var(--ink-soft)}
.markdown-rendered .lxx-col>p:has(.nav-link){text-align:center;font-family:var(--sans);font-size:.85rem}
.markdown-rendered .lxx-col h4{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:2.4rem 0 1.2rem;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;line-height:1.5;text-transform:uppercase;color:var(--gold-text);text-align:center}
.markdown-rendered .lxx-col h4::before,.markdown-rendered .lxx-col h4::after{content:"";flex:1;height:1px;
  min-width:1.2rem;background:linear-gradient(90deg,transparent,var(--hairline-soft))}
.markdown-rendered .lxx-col h4::after{background:linear-gradient(90deg,var(--hairline-soft),transparent)}
.markdown-rendered .lxx-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:0 0 clamp(1.6rem,4vh,2.2rem)}
.markdown-rendered .lxx-cell{display:flex;flex-direction:column;align-items:center;gap:.28rem;
  min-width:6.4rem;max-width:12rem;padding:.95rem .85rem .8rem;background:var(--card);
  border:1px solid var(--hairline-soft);border-radius:3px;text-align:center;text-decoration:none!important;
  transition:transform .3s cubic-bezier(.22,.61,.2,1),border-color .3s ease,box-shadow .3s ease}
.markdown-rendered .lxx-cell:hover,.markdown-rendered .lxx-cell:focus-visible{transform:translateY(-3px);
  border-color:var(--gold-hair);box-shadow:0 6px 20px var(--halo);text-decoration:none!important}
/* the whole card is the Lexicon link; suppress the site's inline-link underline on
   its inner lines (match the theme-scoped internal-link specificity + later source). */
html.theme-light .markdown-rendered a.lxx-cell,html.theme-dark .markdown-rendered a.lxx-cell{text-decoration:none!important}
.markdown-rendered .lxx-orig{font-family:var(--serif);font-size:1.55rem;line-height:1.25;color:var(--ink)}
.markdown-rendered .lxx-translit{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--ink-soft)}
.markdown-rendered .lxx-gloss{font-family:var(--sans);font-size:.76rem;line-height:1.35;color:var(--ink)}
.markdown-rendered .lxx-str{margin-top:.15rem;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.markdown-rendered .lxx-cell{transition:none}
  .markdown-rendered .lxx-cell:hover,.markdown-rendered .lxx-cell:focus-visible{transform:none}}
@media (max-width:560px){.markdown-rendered .lxx-cell{min-width:5.2rem;padding:.8rem .6rem .7rem}
  .markdown-rendered .lxx-orig{font-size:1.35rem}}
/* Reference Bible — Hebrew OT reads right-to-left; cards flow RTL, interior stays LTR
   (transliteration + gloss are Latin). Hebrew script rides a touch larger for legibility. */
.markdown-rendered .lxx-row--he{direction:rtl}
.markdown-rendered .lxx-cell--he{direction:rtl}
.markdown-rendered .lxx-cell--he .lxx-translit,.markdown-rendered .lxx-cell--he .lxx-gloss,
.markdown-rendered .lxx-cell--he .lxx-str{direction:ltr}
.markdown-rendered .lxx-cell--he .lxx-orig{font-size:1.85rem;line-height:1.15}
@media (max-width:560px){.markdown-rendered .lxx-cell--he .lxx-orig{font-size:1.6rem}}
/* The parallel-Septuagint link that follows each Old-Testament verse. */
.markdown-rendered .rb-lxx{text-align:center;margin:-.7rem 0 clamp(1.6rem,4vh,2.2rem)}
.markdown-rendered .rb-lxx-link{font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-text);text-decoration:none}
.markdown-rendered .rb-lxx-link:hover{text-decoration:underline}

/* ============================ 12. FOUNDATION TEXT — reading page ============================ */
.ft-col{max-width:44rem;margin:0 auto}
.ft-col .ft-h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.ft-col .ft-h1::after,.ft-col .ft-h1::before{content:none}
.ft-col .ft-h1 a{color:var(--ink);text-decoration-color:var(--gold-hair)}
.ft-col .gold-rule{margin:1.35rem auto 2.2rem}
.ft-col p{font-size:clamp(1rem,.98rem + .2vw,1.08rem);line-height:1.85}
.ft-col > .sec-head:first-of-type{margin-top:1.6rem}
.ft-col ul{margin:.4rem 0 1.1rem}.ft-col li{line-height:1.7;margin:.2rem 0}

/* ============================ 13. LONGITUDINAL THEME — canon survey ============================ */
.lt-col{max-width:46rem;margin:0 auto}
.lt-col .lt-h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,5.4vw,2.7rem);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.lt-col .lt-h1::after,.lt-col .lt-h1::before{content:none}
.lt-col .lt-stage{display:flex;align-items:baseline;gap:.6rem;margin:2.1rem 0 .55rem;
  font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--gold-text)}
.lt-col .lt-stage::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg);
  background:var(--gold-hair);align-self:center}
.lt-col p{line-height:1.8}.lt-col > .sec-head:first-of-type{margin-top:1.4rem}
.lt-col .lt-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0}
.lt-col .lt-tablewrap table{border-collapse:collapse;width:100%;display:table;margin:0;
  font-family:var(--serif);font-size:.95rem}
.lt-col .lt-tablewrap th,.lt-col .lt-tablewrap td{border:0;
  border-bottom:1px solid var(--hairline-soft);padding:.55rem .8rem;text-align:left;vertical-align:top}
.lt-col .lt-tablewrap th{background:transparent;color:var(--gold-text);font-family:var(--sans);
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--gold-hair)}

/* ============================ 14. READABLE "THREADS" CHIPS (item 7) ============================ */
.markdown-rendered .rb-xref.rb-threads{display:block;margin:.4rem 0 1.35rem;font-family:var(--sans);
  font-size:.73rem;line-height:1.95;color:var(--ink-soft)}
.markdown-rendered .rb-seg{display:inline-flex;flex-wrap:wrap;align-items:baseline;
  gap:.3em;max-width:100%;margin:0 1.1em .2rem 0}
.markdown-rendered .rb-tag{flex:none;font-size:.6rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--rbk,var(--gold-text));
  background:color-mix(in srgb,var(--rbk,var(--gold-text)) 13%,transparent);
  border-radius:3px;padding:.12em .4em;line-height:1}
/* KIND labels coordinated with the Graph View node palette (same hues as the graph
   nodes) so a chip and its graph dot read as the same thing. Graph hexes are tuned for
   the light canvas; dark theme lightens each toward white to hold contrast. */
.markdown-rendered .rb-tag--ip{--rbk:#1D6B43}  .markdown-rendered .rb-tag--c{--rbk:#2E7D8A}
.markdown-rendered .rb-tag--tosk{--rbk:#8A7550} .markdown-rendered .rb-tag--tt{--rbk:#B0761F}
.markdown-rendered .rb-tag--lt{--rbk:#7C5CAF}  .markdown-rendered .rb-tag--atn{--rbk:#B23A6B}
html.theme-dark .markdown-rendered .rb-tag{color:color-mix(in srgb,var(--rbk,var(--gold-text)),white 42%);
  background:color-mix(in srgb,var(--rbk,var(--gold-text)) 24%,transparent)}
.markdown-rendered a.rb-ref{color:var(--link);text-decoration:none;
  border-bottom:1px solid var(--link-line);overflow-wrap:anywhere}
.markdown-rendered a.rb-ref:hover{color:var(--link-hover);border-bottom-color:var(--link-hover)}
.markdown-rendered .rb-mid{color:var(--ink-soft);opacity:.6;padding:0 .1em}
.markdown-rendered .rb-eyebrow-sep{color:var(--gold-hair)}
.markdown-rendered .census.rb-census{margin-bottom:1.35rem}
@media(max-width:600px){.markdown-rendered .rb-seg{display:flex;margin-right:0;width:100%}
  .markdown-rendered .rb-xref.rb-threads{font-size:.7rem;line-height:1.85}}

/* ============================ 15. TRAJECTORY TABLE (item 10) ============================ */
/* The stages TABLE now has just three columns — # / Stage-&-Text / Theological Development
   (Key Text(s) + Text Analysis were folded into the Stage cell in the vault). That is narrow
   enough to sit beside BOTH the left sidebar AND the opt-in Graph View right rail on a normal
   desktop, so TT pages use the plain sidebar+content(+rail) layout like every other page — no
   special grid, no graph-drop-below, no forced full-screen. The table fills its column and its
   own `.tt-scroll` region handles any residual overflow on the narrowest widths. Prose blocks
   below (.tt-intro / .tt-tail) keep their own narrow reading measure. */
body.sec-trajectory-tables .markdown-preview-sizer,
body.sec-longitudinal-themes .markdown-preview-sizer,
body.sec-anchor-texts .markdown-preview-sizer{max-width:100%}
.markdown-rendered .tt-col{max-width:74rem;margin:0 auto}
.markdown-rendered .tt-head{text-align:center}
.markdown-rendered .tt-h1{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.14;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.markdown-rendered .tt-intro{max-width:44rem;margin:1.5rem auto clamp(1.6rem,4vh,2.4rem)}
.markdown-rendered .tt-intro>p{margin:0 0 1rem;font-family:var(--serif);font-size:1.02rem;
  line-height:1.72;color:var(--ink);text-wrap:pretty}
.markdown-rendered .tt-intro>p:last-child{margin-bottom:0}
.markdown-rendered .tt-method{margin-top:1.3rem;padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--gold-hair);font-family:var(--sans)!important;font-size:.86rem!important;
  line-height:1.62!important;color:var(--ink-soft)!important}
.markdown-rendered .tt-method strong{color:var(--gold-text)}
.markdown-rendered .tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:0 0 clamp(1.8rem,4vh,2.6rem);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  scrollbar-width:thin;scrollbar-color:var(--gold-hair) transparent}
.markdown-rendered .tt-scroll:focus-visible{outline:2px solid var(--gold-hair);outline-offset:3px}
.markdown-rendered .tt-scroll::-webkit-scrollbar{height:8px}
.markdown-rendered .tt-scroll::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:4px}
.markdown-rendered .tt-table{width:100%;min-width:35rem;border-collapse:collapse;margin:0;
  font-family:var(--sans);background:transparent}
.markdown-rendered .tt-table th,.markdown-rendered .tt-table td{border:0;padding:.85rem .95rem;
  vertical-align:top;text-align:left;hyphens:auto;overflow-wrap:anywhere}
.markdown-rendered .tt-table thead th{position:sticky;top:0;padding-top:.7rem;padding-bottom:.7rem;
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);
  background:var(--card);border-bottom:1px solid var(--hairline);white-space:nowrap}
.markdown-rendered .tt-table tbody tr{border-bottom:1px solid var(--hairline-soft)}
.markdown-rendered .tt-table tbody tr:last-child{border-bottom:0}
.markdown-rendered .tt-table tbody tr:hover{background:color-mix(in srgb,var(--gold-hair) 7%,transparent)}
.markdown-rendered .tt-table .tt-num-h,.markdown-rendered .tt-table .tt-num{width:2.6rem;text-align:center;padding-inline:.4rem}
.markdown-rendered .tt-ord{display:inline-block;font-family:var(--serif);font-weight:400;font-size:1.02rem;
  line-height:1;color:var(--gold-text);letter-spacing:.02em}
.markdown-rendered .tt-table .tt-stage-h{min-width:13rem}
.markdown-rendered .tt-table th.tt-stage{min-width:13rem;max-width:20rem;font-weight:400;
  color:var(--ink);vertical-align:top}
/* the merged Stage / Text cell: name = serif heading; each labelled link-group = its own block */
.markdown-rendered .tt-stage-name{display:block;font-family:var(--serif);font-weight:600;
  font-size:.98rem;line-height:1.38;color:var(--ink)}
.markdown-rendered .tt-stage-name strong{font-weight:600}
.markdown-rendered .tt-stage-sub{display:block;margin-top:.55rem;font-family:var(--sans);font-weight:400;
  font-size:.86rem;line-height:1.5}
.markdown-rendered .tt-lbl{display:block;font-size:.62rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.12rem}
.markdown-rendered .tt-dev{min-width:21rem;font-size:.92rem;line-height:1.62;color:var(--ink);text-wrap:pretty;vertical-align:top}
.markdown-rendered .tt-table .tt-ref{min-width:8.5rem;font-size:.9rem;line-height:1.5}
.markdown-rendered .tt-table .tt-analysis{min-width:8.5rem;font-size:.9rem;line-height:1.5}
.markdown-rendered .tt-table .tt-cell{min-width:8rem;font-size:.92rem;line-height:1.55}
.markdown-rendered .tt-table tbody td{color:var(--ink)}
.markdown-rendered .tt-table a{color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--hairline-soft)}
.markdown-rendered .tt-table a:hover{color:var(--gold);border-bottom-color:var(--gold-hair)}
.markdown-rendered .tt-table strong{color:inherit}
.markdown-rendered .tt-tail{max-width:44rem;margin:0 auto}
.markdown-rendered .tt-tail>hr:first-child{display:none}
@media(max-width:40rem){.markdown-rendered .tt-table th,.markdown-rendered .tt-table td{padding:.7rem .7rem}
  .markdown-rendered .tt-table{min-width:46rem}}

/* ============================ 16. TOSK CATCHWORD LAYOUT (item 9) ============================ */
.markdown-rendered .tosk-col{max-width:46rem;margin:0 auto}
.markdown-rendered .tosk-h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,6.5vw,3.1rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.markdown-rendered .tosk-chapnav{margin:.2rem 0 1.3rem;text-align:center;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft)}
.markdown-rendered .tosk-chapnav a{color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--hairline-soft)}
.markdown-rendered .tosk-chapnav a:hover,.markdown-rendered .tosk-chapnav a:focus-visible{border-bottom-color:var(--gold-hair)}
.markdown-rendered .tosk-lead{max-width:40rem;margin:0 auto clamp(2rem,5vh,2.8rem);
  padding-bottom:1.2rem;border-bottom:1px solid var(--hairline-soft);text-align:center}
.markdown-rendered .tosk-lead p{margin:0;font-family:var(--serif);font-style:italic;font-size:.95rem;
  line-height:1.75;color:var(--ink-soft)}
.markdown-rendered .tosk-lead a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline-soft)}
.markdown-rendered .tosk-lead a:hover,.markdown-rendered .tosk-lead a:focus-visible{color:var(--gold-text);border-bottom-color:var(--gold-hair)}
.markdown-rendered .tosk-vblock{margin:0 0 clamp(2rem,5vh,2.8rem)}
.markdown-rendered .tosk-vblock + .tosk-vblock{padding-top:clamp(1.6rem,4vh,2.2rem);border-top:1px solid var(--hairline-soft)}
.markdown-rendered .tosk-vhead{margin:0 0 .6rem}
.markdown-rendered .tosk-vlabel{font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:.01em;color:var(--gold-text)}
.markdown-rendered .tosk-verse{margin:0 0 .45rem;font-family:var(--serif);
  font-size:clamp(1.06rem,2.4vw,1.2rem);line-height:1.85;color:var(--ink)}
.markdown-rendered .tosk-cw{font-variant-caps:small-caps;letter-spacing:.06em;color:var(--gold-text)}
.markdown-rendered .tosk-verse-ref{margin:0 0 1.5rem;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.markdown-rendered .tosk-group{margin:0 0 1.3rem}
.markdown-rendered .tosk-group:last-of-type{margin-bottom:0}
.markdown-rendered .tosk-cwhead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .55rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--hairline-soft);font-family:var(--sans);
  font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.markdown-rendered .tosk-cwhead .k-dot{flex:none}
.markdown-rendered .tosk-cwhead .tosk-n{margin-left:auto;font-weight:500;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap}
.markdown-rendered ul.tosk-refs{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 0;
  margin:0;padding:0 0 0 .15rem;list-style:none;font-family:var(--serif);font-size:.95rem;line-height:1.7}
.markdown-rendered ul.tosk-refs li{display:inline-flex;align-items:baseline}
.markdown-rendered ul.tosk-refs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--hairline-soft)}
.markdown-rendered ul.tosk-refs a:hover,.markdown-rendered ul.tosk-refs a:focus-visible{color:var(--gold-text);border-bottom-color:var(--gold-hair)}
.markdown-rendered ul.tosk-refs li:not(:last-child)::after{content:"";align-self:center;width:3px;height:3px;
  margin:0 .6rem;transform:rotate(45deg);background:var(--gold-hair);opacity:.65}
.markdown-rendered .tosk-noteline{margin:.7rem 0 0;padding-left:.15rem;font-family:var(--serif);
  font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.markdown-rendered .tosk-noteline .tosk-cw{margin-right:.35em}
/* per-reference catchword gloss (the phrase TSK attaches to a Reciprocal / marg. ref) */
.markdown-rendered ul.tosk-refs .tosk-gloss{margin-left:.32em;font-style:italic;
  font-size:.82em;color:var(--ink-soft);opacity:.85}
/* leading marginal note inside a group ("Heb. waters of quietness", "*marg.") */
.markdown-rendered .tosk-groupnote{margin:0 0 .5rem;padding-left:.15rem;font-family:var(--serif);
  font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.markdown-rendered .tosk-note{margin:clamp(2.2rem,6vh,3rem) 0 0;padding-top:1.1rem;
  border-top:1px solid var(--hairline-soft);text-align:center}
.markdown-rendered .tosk-note p{max-width:42ch;margin:0 auto;font-family:var(--serif);font-style:italic;
  font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
@media(max-width:34rem){.markdown-rendered .tosk-cwhead .tosk-n{margin-left:0;width:100%}}

/* ============================ 17. ANCHOR-TEXT NETWORK (blanket) ============================ */
.markdown-rendered .atn-h1{margin:0 0 .2rem;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,1.3rem+2.2vw,2.6rem);line-height:1.14;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.markdown-rendered .atn-net{margin:0 0 2.4rem;padding:1.15rem clamp(.9rem,3vw,1.6rem) 1.35rem;
  border:1px solid var(--hairline);border-radius:10px;background:var(--card)}
.markdown-rendered .atn-net .sec-head{margin:.2rem 0 1.25rem}
.markdown-rendered .atn-group{margin:0 0 1.05rem}.markdown-rendered .atn-group:last-child{margin-bottom:0}
.markdown-rendered .atn-group-label{margin:0 0 .38rem;font-family:var(--sans);font-size:.63rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.markdown-rendered .atn-refs{margin:0;font-family:var(--serif);font-size:clamp(.98rem,.95rem+.2vw,1.06rem);
  line-height:1.9;color:var(--ink)}
.markdown-rendered .atn-refs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)}
.markdown-rendered .atn-refs a:hover,.markdown-rendered .atn-refs a:focus-visible{
  color:var(--gold-text);border-bottom-color:var(--gold-hair)}
.markdown-rendered .atn-sep{color:var(--gold-hair);padding:0 .12em;user-select:none}
.markdown-rendered .atn-more{font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
@media (max-width:480px){.markdown-rendered .atn-net{padding:1rem .85rem 1.1rem}}

/* ============================ 18. CHIASM staircase (blanket) ============================ */
.markdown-rendered.chiasm .chi-col{max-width:46rem;margin:0 auto}
.markdown-rendered.chiasm .chi-head{text-align:center;margin:.4rem 0 0}
.markdown-rendered.chiasm .chi-h1{margin:0 0 .1rem;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,1.4rem+2.2vw,2.7rem);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.markdown-rendered.chiasm .chi-how{margin:.2rem 0 clamp(1.6rem,4vh,2.4rem);text-align:center;
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-soft);text-wrap:balance}
.markdown-rendered.chiasm .chi-wrap{overflow-x:auto}
.markdown-rendered.chiasm .chi-tree ul{list-style:none;margin:0;
  padding-left:clamp(.7rem,1.7vw,1.05rem);border-left:1px solid var(--hairline-soft)}
.markdown-rendered.chiasm .chi-tree > ul{border-left:0;padding-left:0}
.markdown-rendered.chiasm .chi-tree li{position:relative;margin:0;padding:.5rem 0;
  font-family:var(--serif);font-size:clamp(.96rem,.93rem+.3vw,1.06rem);line-height:1.62;color:var(--ink)}
.markdown-rendered.chiasm .chi-tree ul > li::before{content:"";position:absolute;left:0;top:0;
  width:.5rem;height:1px;background:var(--hairline-soft);transform:translateX(calc(-1 * clamp(.85rem,3vw,1.5rem)))}
.markdown-rendered.chiasm .chi-tag{display:inline-block;min-width:1.7em;font-family:var(--sans);
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);vertical-align:.08em}
.markdown-rendered.chiasm .chi-tree a.chi-vn{font-family:var(--sans);font-size:.72em;font-weight:600;
  letter-spacing:.02em;color:var(--gold-text);text-decoration:none;border-bottom:1px solid transparent}
.markdown-rendered.chiasm .chi-tree a.chi-vn:hover,.markdown-rendered.chiasm .chi-tree a.chi-vn:focus-visible{border-bottom-color:var(--gold-hair)}
/* The pivot — the single deepest frame where the pattern turns. One clean marker
   (gold tag + a faint halo behind the turn line), never a cascade of nested boxes. */
.markdown-rendered.chiasm .chi-tree li.chi-pivot{border-radius:6px;
  box-shadow:inset 2px 0 0 var(--gold-hair)}
.markdown-rendered.chiasm .chi-tree li.chi-pivot > .chi-tag{color:var(--gold)}
@media (max-width:480px){.markdown-rendered.chiasm .chi-tree ul{padding-left:.6rem}
  .markdown-rendered.chiasm .chi-tree li{padding:.42rem 0}}

/* ============================ 19. LEXICON entry cards (illuminated) ============================ */
/* Each Lexicon entry is an ENTRY CARD (matches the LXX word-card / lxx-cell system:
   var(--card) ground, hairline border, gold-hair lift + var(--halo) glow on hover).
   The <article class="lex-card" id="g#/h#"> stays a self-contained, sliceable block so
   the LXX->Lexicon hover preview shows exactly one entry (build.py render_lexicon_page). */
.markdown-rendered .lex-col{max-width:62rem;margin:0 auto}
.markdown-rendered .lex-h1{margin:0 0 .15rem;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,1.3rem+2vw,2.5rem);letter-spacing:.02em;color:var(--ink)}
.markdown-rendered .lex-list{display:grid;grid-template-columns:1fr;gap:1rem;margin:.6rem 0 0}
@media (min-width:720px){.markdown-rendered .lex-list{grid-template-columns:1fr 1fr}}
.markdown-rendered .lex-list.lex-grid--rtl{direction:rtl}
.markdown-rendered .lex-card{position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.1rem,2.6vw,1.5rem) clamp(1rem,2.4vw,1.4rem) 1rem;
  background:var(--card);border:1px solid var(--hairline-soft);border-radius:3px;scroll-margin-top:5rem;
  transition:transform .3s cubic-bezier(.22,.61,.2,1),border-color .3s ease,box-shadow .3s ease}
.markdown-rendered .lex-card:hover,.markdown-rendered .lex-card:focus-within{transform:translateY(-3px);
  border-color:var(--gold-hair);box-shadow:0 6px 20px var(--halo)}
.markdown-rendered .lex-card:target{border-color:var(--gold-hair);
  box-shadow:0 0 0 1px var(--gold-hair),0 6px 20px var(--halo)}
/* --- illuminated headword --- */
.markdown-rendered .lex-hw{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,1.2rem+2vw,2.3rem);line-height:1.15;letter-spacing:.015em;color:var(--ink)}
.markdown-rendered .lex-card--grc .lex-hw::first-letter{color:var(--gold)}
/* Hebrew: ::first-letter is unreliable in RTL, so the whole headword is laid in gold,
   vowel points intact, seated beside a gold diamond */
.markdown-rendered .lex-card--he .lex-hw{color:var(--gold);display:inline-flex;align-items:center;
  gap:.5rem;text-align:right}
.markdown-rendered .lex-card--he .lex-hw .hw-dia{width:6px;height:6px;flex:none;
  transform:rotate(45deg);background:var(--gold-hair)}
/* everything below a Hebrew headword reads left-to-right */
.markdown-rendered .lex-card--he .lex-latin{direction:ltr;text-align:left;display:flex;
  flex-direction:column;flex:1;gap:.5rem}
/* --- transliteration + pronunciation --- */
.markdown-rendered .lex-say{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;margin:0}
.markdown-rendered .lex-translit{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink)}
.markdown-rendered .lex-pron{font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* --- data row: gold Strong's (part-of-speech / occurrences can join later) --- */
.markdown-rendered .lex-data{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;margin:0;
  font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.markdown-rendered .lex-strong{font-weight:700;color:var(--gold-text)}
/* --- gloss/definition --- */
.markdown-rendered .lex-def{margin:0;font-family:var(--serif);
  font-size:clamp(1rem,.97rem+.25vw,1.06rem);line-height:1.7;color:var(--ink)}
.markdown-rendered ul.lex-gloss{margin:0;padding-left:1.15rem}
.markdown-rendered ul.lex-gloss li{margin:.1rem 0;font-family:var(--serif);font-size:.96rem;
  line-height:1.55;color:var(--ink-soft)}
/* M1: nested sub-senses (e.g. "ancestor > grandfather / of people") — indent + quiet them
   one step so the sense hierarchy reads without shouting. */
.markdown-rendered ul.lex-gloss ul{margin:.1rem 0 .15rem;padding-left:1rem;list-style:circle}
.markdown-rendered ul.lex-gloss ul li{font-size:.9rem;color:var(--text-faint)}
.markdown-rendered .lex-note{margin:0;font-family:var(--sans);font-size:.84rem;line-height:1.6;color:var(--ink-soft)}
.markdown-rendered .lex-lab{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-text);margin-right:.35em}
.markdown-rendered .lex-note a{color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--hairline)}
.markdown-rendered .lex-note a:hover,.markdown-rendered .lex-note a:focus-visible{border-bottom-color:var(--gold-hair)}
/* --- footer: kin words / cross-refs under a quiet SEE tag --- */
.markdown-rendered .lex-foot{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;
  gap:.35rem .8rem;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--hairline-soft);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft)}
.markdown-rendered .lex-foot .foot-tag{flex:none;font-size:.56rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text)}
/* see-also links keep the site's persistent illuminated-link affordance (a.internal-link) */
@media (prefers-reduced-motion:reduce){.markdown-rendered .lex-card{transition:none}
  .markdown-rendered .lex-card:hover,.markdown-rendered .lex-card:focus-within{transform:none}}
@media (max-width:560px){.markdown-rendered .lex-card{padding:1rem .9rem .9rem}
  .markdown-rendered .lex-hw{font-size:1.55rem}}
/* ============================ 10b. VIDEO FUNNEL (D-W88 PROPOSED) ================== */
/* Two fixes to the pair page that ride with the landing layout (scoped to .pair-landing so
   a flags-off build is visually unchanged):
   (1) the page-title rule: `.markdown-rendered h1::after/::before` out-ranks
       `.pair-h1::after{content:none}`, so every pair page draws a second, left-aligned
       rule above the centred .gold-rule;
   (2) on phones the connecting thread's SVG fills the full column width (a 390px-wide
       wave with two large diamonds); here it is the same small stitch as the desktop
       thread, turned 90 degrees. */
.markdown-rendered .pair-landing .pair-h1::after,.markdown-rendered .pair-landing .pair-h1::before{content:none}
.markdown-rendered .pair-landing .pair-h1{padding-bottom:0}
@media(max-width:640px){.pair-landing .pair-thread svg{width:3.4rem;flex:none;transform:rotate(90deg)}}

/* the video-visitor landing layout (flag ip_landing -> .pair-landing on .pair-col) */
.pair-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem .6rem;margin:0 0 1.5rem}
.pj-chip{display:inline-flex;align-items:center;gap:.45em;padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--hairline);background:var(--card);color:var(--link);text-decoration:none;
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;line-height:1.2;min-height:2.5rem}
.pj-chip:hover{border-color:var(--gold-hair);color:var(--link-hover)}
.pj-chip.pj-watch{background:var(--gold);border-color:var(--gold);color:var(--text-on-accent)}
.pj-chip.pj-watch:hover{color:var(--text-on-accent);filter:brightness(1.08)}
.pj-dur{font-weight:500;opacity:.85}
.markdown-rendered a.pj-chip{text-decoration:none}
.markdown-rendered a.pj-chip.pj-watch,.markdown-rendered a.pair-next-btn,
.markdown-rendered a.pair-next-btn:hover,.markdown-rendered a.st-btn,.markdown-rendered a.st-btn:hover{
  color:var(--text-on-accent);text-decoration:none}
.pair-landing .pair-duo{align-items:start}
@media(min-width:641px){.pair-landing .pair-thread{align-self:start;margin-top:5.2rem}}
@media(max-width:480px){.pair-jump{flex-wrap:nowrap;gap:.4rem}
  .pj-chip{font-size:.72rem;padding:.45rem .7rem;gap:.35em;white-space:nowrap}.pj-long{display:none}}
.pair-landing .pair-type{margin:0 0 1.1rem}
.pair-landing .ip-video{scroll-margin-top:4.5rem}
.pair-more{margin:0}
.pair-more>summary{cursor:pointer;list-style:none;padding:.7rem 1rem;border:1px dashed var(--hairline);
  border-radius:4px;text-align:center;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);min-height:2.75rem;
  display:flex;align-items:center;justify-content:center}
.pair-more>summary::-webkit-details-marker{display:none}
.pair-more[open]>summary{margin-bottom:.35rem}
.pair-more .pair-card{margin-bottom:.35rem}
.pair-next{max-width:36rem;margin:clamp(1.8rem,4vh,2.6rem) auto 0;text-align:center}
.pair-next-k{margin:0 0 .6rem;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text)}
.pair-next-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem 1.25rem;
  border-radius:8px;background:var(--gold);color:var(--text-on-accent);text-decoration:none;
  box-shadow:0 6px 22px var(--halo)}
.pair-next-btn:hover{filter:brightness(1.08);color:var(--text-on-accent)}
.pair-next-v{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em}
.pair-next-t{font-family:var(--serif);font-size:1.02rem;line-height:1.35;opacity:.95}
.pair-next-more{margin:.8rem 0 0;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.pair-next-more>summary{cursor:pointer;padding:.5rem 0;min-height:2.5rem;display:inline-flex;align-items:center}
.pair-next-more ul{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.pair-next-more li a{display:block;padding:.45rem 0;font-family:var(--serif);font-size:.98rem}
@media(max-width:640px){
  .markdown-preview-sizer:has(> .pair-landing){padding-top:1.1rem}
  .pair-landing .eyebrow{margin-bottom:.45rem}
  .pair-landing .pair-h1{font-size:1.62rem}
  .pair-landing .gold-rule{margin:.8rem auto .9rem}
  .pair-landing .pair-jump{margin-bottom:1.1rem}
  .pair-landing .pair-card{padding:.85rem 1rem 1rem}
  .pair-landing .pair-refline{margin-bottom:.55rem;padding-bottom:.5rem}
  .pair-landing .pair-card blockquote{line-height:1.62}
  .pair-landing .pair-thread{height:1.9rem}
  .pair-landing .ip-video{margin:1.4rem auto 1.5rem}
}

/* the marked email placeholder (flag email_placeholder; preview builds only) */
.email-ph{max-width:36rem;margin:1.6rem auto 0;padding:1rem 1.15rem;border:2px dashed var(--t-quote);
  border-radius:8px;text-align:center;background:var(--wash-q)}
.email-ph-tag{margin:0 0 .35rem;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--t-quote-text)}
.email-ph-h{margin:0 0 .3rem;font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.email-ph-b{margin:0;font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-soft)}

/* /privacy and /terms — site-operations pages (flag legal_pages) */
.legal-col{max-width:40rem;margin:0 auto}
.markdown-rendered .legal-h1{margin:0;padding-bottom:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,6vw,2.4rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.markdown-rendered .legal-h1::after,.markdown-rendered .legal-h1::before{content:none}
.legal-col .gold-rule{margin:1rem auto .9rem}
.markdown-rendered .legal-col .legal-date{margin:0 0 1.5rem;text-align:center;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.markdown-rendered .legal-col p,.markdown-rendered .legal-col li{font-family:var(--serif);font-size:1.02rem;line-height:1.65;color:var(--ink)}
.markdown-rendered .legal-col h2{margin:2rem 0 .5rem;font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.3;
  letter-spacing:0;text-transform:none;text-align:left;color:var(--ink)}
.markdown-rendered .legal-col ul{margin:.4rem 0 1rem;padding-left:1.25rem}
.markdown-rendered .legal-col li{margin:.4rem 0}
.markdown-rendered .legal-col a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.markdown-rendered .legal-col code{font-size:.9em;padding:.05em .3em;border-radius:3px;background:var(--halo);color:var(--ink)}
.site-footer .foot-links a{font-family:var(--sans)}

/* /start — the "link in bio" page (flag start_page) */
.start-col{max-width:40rem;margin:0 auto}
.markdown-rendered .start-h1{margin:0;padding-bottom:0;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,6vw,2.4rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.markdown-rendered .start-h1::after,.markdown-rendered .start-h1::before{content:none}
.start-col .gold-rule{margin:1rem auto 1.1rem}
.markdown-rendered .start-lede{margin:1.7rem auto 1.6rem;max-width:34rem;text-align:center;font-family:var(--serif);
  font-size:1.02rem;line-height:1.62;color:var(--ink)}
.st-today{margin:0 0 1.2rem}
.markdown-rendered a.st-today-card,.markdown-rendered a.st-card,.markdown-rendered a.st-recent-a{
  text-decoration:none;color:var(--ink)}
.st-today-card{display:flex;gap:1rem;align-items:stretch;padding:.9rem;border-radius:8px;text-decoration:none;
  background:var(--card);border:1px solid var(--gold-hair);box-shadow:0 8px 26px var(--halo);color:var(--ink)}
.st-today-card:hover{border-color:var(--gold);color:var(--ink)}
.st-thumb{flex:none;width:108px;height:192px;object-fit:cover;border-radius:6px;background:#0d1b2a}
.st-today-txt{display:flex;flex-direction:column;gap:.3rem;min-width:0;justify-content:center}
.st-kicker{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-text)}
.st-title{font-family:var(--serif);font-size:1.22rem;line-height:1.22;color:var(--ink)}
.st-pair{font-family:var(--sans);font-size:.76rem;font-weight:600;color:var(--ink-soft)}
.st-desc{font-family:var(--serif);font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.st-go{margin-top:.35rem;align-self:flex-start;padding:.5rem .95rem;border-radius:999px;background:var(--gold);
  color:var(--text-on-accent);font-family:var(--sans);font-size:.8rem;font-weight:700}
.st-recent{margin:0 0 1.2rem}
.markdown-rendered .st-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.markdown-rendered .st-recent-list li{margin:0;padding:0}
.markdown-rendered .st-recent-list li::marker{content:""}
.st-recent-a{display:flex;flex-direction:column;gap:.1rem;padding:.65rem .9rem;border-radius:6px;min-height:2.75rem;
  background:var(--card);border:1px solid var(--hairline-soft);text-decoration:none;justify-content:center}
.st-recent-a:hover{border-color:var(--gold-hair)}
.st-recent-t{font-family:var(--serif);font-size:1rem;color:var(--ink)}
.st-recent-p{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 1.6rem}
.st-card{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem 1rem;border-radius:6px;text-decoration:none;
  background:var(--card);border:1px solid var(--hairline-soft);color:var(--ink)}
.st-card:hover{border-color:var(--gold-hair);color:var(--ink)}
.st-card .st-title{font-size:1.08rem}
.st-next{display:flex;justify-content:center;margin:0 0 1rem}
.st-btn{display:inline-flex;align-items:center;gap:.4em;padding:.85rem 1.5rem;border-radius:999px;min-height:3rem;
  background:var(--gold);color:var(--text-on-accent);text-decoration:none;font-family:var(--sans);
  font-size:1rem;font-weight:700;box-shadow:0 6px 22px var(--halo)}
.st-btn:hover{filter:brightness(1.08);color:var(--text-on-accent)}
@media(max-width:560px){.st-grid{grid-template-columns:1fr}
  .markdown-preview-sizer:has(> .start-col){padding-top:1.1rem}
  .st-thumb{width:92px;height:164px}}