/* sgit.ai — shared stylesheet (light theme) — loaded via the SG bridge (sg.loadCss / sg.vfs.readText) */
:root{
  --bg:#faf9f5; --panel:#ffffff; --panel2:#f2f0e9; --line:#e5e1d5; --line2:#d5d0c2;
  --fg:#1c1d21; --dim:#5c5f66; --dim2:#8a8d94;
  --accent:#0f766e; --accent-dk:#115e59; --yellow:#a16207; --warm:#b45309;
  --term-bg:#0d1117; --term-green:#3fb950; --term-red:#f85149; --term-cyan:#58a6ff;
  --term-yellow:#d29922; --term-dim:#8b949e;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure:960px; --wide:1360px;
  --shadow:0 1px 2px rgba(28,29,33,.05),0 4px 14px rgba(28,29,33,.04);
}
*{box-sizing:border-box}
/* Paint the canvas the site colour: on iOS, pinch-zooming out (or rotating while
   zoomed) shows the area beyond the layout viewport, which takes the HTML element's
   background — unset, that area is white and reads as "the site does not fill the
   screen". */
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65}
a{color:var(--accent-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
code,pre,kbd{font-family:var(--mono)}
p code,li code,td code,.note code,.doc code{overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.08em .35em;font-size:.84em;color:#24343f}
/* ...but never inside a block. `.doc code` matches <code> nested in a <pre>, which gave every
   line of an ASCII diagram its own bordered chip — the block rendered as horizontal stripes.
   The house convention is <pre class="shell"> with no inner <code>; this is the guard for
   when somebody reasonably writes <pre><code> anyway. */
pre code{background:none;border:0;border-radius:0;padding:0;font-size:inherit;color:inherit}
.inner{max-width:var(--measure);margin:0 auto;padding:0 1.1rem}
.inner-wide{max-width:var(--wide);margin:0 auto;padding:0 1.1rem}
.dim{color:var(--dim)} .small{font-size:.85rem}

/* ---------- top nav ---------- */
nav.site{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .row{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;gap:1.1rem;padding:.7rem 1.1rem;flex-wrap:wrap}
nav.site .brand{font-weight:800;font-size:1.05rem;color:var(--fg);letter-spacing:-.02em;white-space:nowrap}
nav.site .brand span{color:var(--accent)}
nav.site a.nl{color:var(--dim);font-size:.85rem}
nav.site a.nl.here{color:var(--fg);font-weight:600}
nav.site a.nl:hover{color:var(--fg);text-decoration:none}
nav.site .gh{margin-left:auto;border:1px solid var(--line2);border-radius:6px;padding:.28rem .7rem;color:var(--fg);font-size:.78rem;white-space:nowrap;background:var(--panel)}
nav.site .gh:hover{border-color:var(--accent);text-decoration:none}
/* Two-level nav. The flat one reached 14 items and wrapped to three rows on a phone.
   Opening is :hover for a mouse and :focus-within for a keyboard — no JS needed for
   either — plus a click toggle (nav.js) for touch, where hover does not exist. Every
   group label is itself a link to that section's index, so nothing is reachable only
   by opening a menu: the submenu is a shortcut, never the only door. */
nav.site .ni{position:relative}
nav.site .ni-has > .nl{display:inline-flex;align-items:center;gap:.25rem}
nav.site .caret{font-size:.55em;opacity:.55;transition:transform .15s ease}
nav.site .sub{position:absolute;left:-.7rem;top:100%;min-width:11rem;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 24px rgba(28,29,33,.13);padding:.4rem;
  display:none;flex-direction:column;gap:.05rem}
nav.site .ni-has:hover > .sub,
nav.site .ni-has:focus-within > .sub,
nav.site .ni-has.open > .sub{display:flex}
nav.site .ni-has:hover .caret,
nav.site .ni-has.open .caret{transform:rotate(180deg)}
nav.site .sub a.sl{display:block;padding:.36rem .6rem;border-radius:6px;
  font-size:.83rem;color:var(--dim);white-space:nowrap}
nav.site .sub a.sl:hover{background:var(--panel2);color:var(--fg);text-decoration:none}
nav.site .sub a.sl.here{color:var(--accent-dk);font-weight:600}
/* Phone. Inline submenus were tried first and measured 498px of navigation before the
   page began — worse than the 14-item flat nav they replaced. So below the breakpoint
   the whole thing collapses behind one button: the bar stays a single row, and opening
   it gives a vertical list with each group's children indented under it. */
.nav-items{display:contents}
.nav-toggle{display:none}
@media (max-width:820px){
  nav.site .row{position:relative;gap:.6rem}
  .nav-toggle{display:block;margin-left:auto;order:3;background:var(--panel);
    border:1px solid var(--line2);border-radius:6px;padding:.3rem .7rem;
    font:600 .78rem/1 var(--sans);color:var(--fg);cursor:pointer}
  .nav-toggle:hover{border-color:var(--accent)}
  nav.site .gh{order:4;margin-left:0}
  .nav-items{display:none;order:5;width:100%;flex-direction:column;gap:.1rem;
    padding:.5rem 0 .3rem;border-top:1px solid var(--line);margin-top:.4rem}
  /* The open menu is 42 links and measures ~1536px on an iPhone, against a 664px
     viewport. nav.site is position:sticky, so the overflow was only reachable by
     scrolling the PAGE, and the menu appeared frozen until you did. Cap it to the
     viewport and let it scroll itself. 100dvh, where supported, follows iOS Safari's
     collapsing URL bar; the 100vh line above it is the fallback. The subtraction is
     the worst-case closed bar, 92px on an iPhone SE where the row wraps rather than the
     55px it takes when it does not, plus this element's own border, padding and margin,
     which is another 17px and was what kept the nav 12px taller than the viewport.
     overscroll-behavior:contain stops the gesture chaining to the page at its end. */
  nav.site.open .nav-items{display:flex;
    max-height:calc(100vh - 7rem);
    max-height:calc(100dvh - 7rem);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  nav.site .ni{width:100%}
  nav.site .ni > .nl{display:block;padding:.42rem .2rem;font-size:.95rem}
  nav.site .caret{display:none}
  nav.site .sub{position:static;display:flex;flex-direction:column;border:0;
    box-shadow:none;background:none;padding:0 0 .3rem .9rem;min-width:0;gap:0}
  nav.site .sub a.sl{padding:.3rem .2rem;font-size:.86rem}
}
.stage-pill{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dk);
  border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.07);border-radius:99px;padding:.15rem .55rem;white-space:nowrap}
a.ver{font-family:var(--mono);font-size:.68rem;color:var(--dim2);border:1px solid var(--line);border-radius:99px;padding:.14rem .55rem;white-space:nowrap}
a.ver:hover{color:var(--accent-dk);border-color:var(--accent);text-decoration:none}

/* ---------- hero ---------- */
header.hero{text-align:center;padding:4.5rem 1.2rem 2.8rem;max-width:960px;margin:0 auto}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
header.hero h1{font-family:var(--serif);font-size:clamp(2.1rem,5.5vw,3.3rem);margin:.9rem 0;color:#101114}
header.hero .sub{color:var(--dim);font-size:1.05rem;max-width:600px;margin:0 auto 1.7rem;line-height:1.6}
.ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;align-items:center}
.pipbtn{display:inline-flex;align-items:center;gap:.6rem;background:var(--term-bg);border:1px solid #2c3646;
  border-radius:8px;padding:.6rem 1rem;font-family:var(--mono);font-size:.9rem;color:var(--term-green);cursor:pointer;box-shadow:var(--shadow)}
.pipbtn .cp{color:var(--term-dim);font-family:var(--sans);font-size:.68rem;border-left:1px solid #2c3646;padding-left:.6rem}
.cta2{color:var(--accent-dk);font-size:.9rem;font-weight:600}
.install-note{margin-top:1rem;font-size:.75rem;color:var(--dim2)}

/* ---------- sections ---------- */
section.band{padding:3.2rem 0;scroll-margin-top:64px}
section.band.alt{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band h2{font-family:var(--serif);font-size:1.9rem;color:#101114;text-align:center;margin:0 0 .6rem}
section.band .blurb{color:var(--dim);text-align:center;max-width:620px;margin:0 auto 1.8rem;font-size:.95rem}

/* ---------- terminal (stays dark — it's a terminal) ---------- */
.term{max-width:1000px;margin:0 auto;padding:0 1.1rem}
.ttabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:-1px;position:relative;z-index:2}
.ttab{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--dim);background:var(--panel2);
  border:1px solid var(--line2);border-bottom:none;border-radius:8px 8px 0 0;padding:.45rem .85rem;cursor:pointer}
.ttab.active{color:#fff;background:var(--term-bg);border-color:var(--term-bg)}
.ttab .n{color:var(--accent);font-family:var(--mono);margin-right:.3rem}
.ttab.active .n{color:#2dd4bf}
.tbody{background:var(--term-bg);border:1px solid var(--term-bg);border-radius:0 10px 10px 10px;padding:1rem 1.15rem;
  font-family:var(--mono);font-size:.79rem;line-height:1.65;min-height:270px;overflow-x:auto;color:#c9d1d9;box-shadow:var(--shadow)}
.tbody .pane{display:none}
.tbody .pane.active{display:block}
.tcap{font-family:var(--sans);font-size:.74rem;color:var(--dim);margin:.7rem auto 0;text-align:center;max-width:1000px;padding:0 1.1rem}

/* terminal colors (also used by pre.shell) */
.p{color:var(--term-dim)} .cmd{color:#fff;font-weight:600}
.g{color:var(--term-green)} .r{color:var(--term-red)} .cy{color:var(--term-cyan)}
.y{color:var(--term-yellow)} .d{color:var(--term-dim)}
pre.shell{background:var(--term-bg);border-radius:10px;padding:.9rem 1.1rem;
  font-size:.79rem;line-height:1.65;overflow-x:auto;margin:1.1rem 0;color:#c9d1d9;box-shadow:var(--shadow)}

/* ---------- feature grid ---------- */
.feat{max-width:1100px;margin:0 auto;padding:0 1.1rem;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat .f{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.95rem 1.05rem;box-shadow:var(--shadow)}
.feat .f b{display:block;font-size:.86rem;color:#101114;margin-bottom:.3rem}
.feat .f span{font-size:.78rem;color:var(--dim);line-height:1.55}

/* ---------- server-sees diagram ---------- */
.sees{max-width:1040px;margin:0 auto;padding:0 1.1rem}
.sees .cols{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:stretch}
.sees .col{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;box-shadow:var(--shadow)}
.sees .col h3{margin:0 0 .6rem;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--sans)}
.sees .col.you h3{color:var(--accent-dk)}
.sees .col.srv h3{color:var(--yellow)}
.sees ul{margin:0;padding:0;list-style:none;font-size:.82rem;line-height:1.95;color:#34363c}
.sees .you li::before{content:"\25CF  ";color:var(--accent)}
.sees .srv li{font-family:var(--mono);font-size:.73rem;color:var(--dim)}
.sees .srv li::before{content:"\25AA  ";color:var(--yellow)}
.sees .arrow{display:flex;align-items:center;color:var(--dim2)}
.sees .cap{font-size:.76rem;color:var(--dim);text-align:center;margin-top:.9rem;line-height:1.6}
@media (max-width:640px){.sees .cols{grid-template-columns:1fr}.sees .arrow{justify-content:center;transform:rotate(90deg);padding:.2rem 0}}

/* ---------- cards ---------- */
.cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1160px;margin:0 auto;padding:0 1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.15rem;display:block;color:var(--fg);box-shadow:var(--shadow)}
a.card:hover{border-color:var(--accent);text-decoration:none}
.cardgo{color:var(--accent-dk);font-weight:600;font-size:.82rem;margin-bottom:0}
.card .tag{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}
.card h3,.card h4{margin:.25rem 0 .45rem;font-size:.95rem;color:#101114;font-family:var(--sans)}
.card p{margin:0;font-size:.8rem;color:var(--dim);line-height:1.55}
.card .go{display:inline-block;margin-top:.55rem;font-size:.75rem;color:var(--accent-dk);font-weight:600}

/* ---------- ecosystem + trust ---------- */
.eco{max-width:1100px;margin:0 auto;padding:0 1.1rem;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.eco .e{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;box-shadow:var(--shadow)}
.eco .e .think{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow);margin-bottom:.35rem}
.eco .e b{font-size:1rem;color:#101114}
.eco .e .as{color:var(--dim);font-size:.78rem}
.eco .e p{font-size:.78rem;color:var(--dim);margin:.45rem 0 0;line-height:1.55}
.trust{display:flex;flex-wrap:wrap;gap:.45rem .6rem;justify-content:center;max-width:860px;margin:0 auto;padding:0 1.1rem}
.trust span{font-size:.72rem;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:.3rem .8rem;background:var(--panel)}
.trust span b{color:var(--accent-dk);font-weight:700}
.trust a{text-decoration:none}
.triplet{font-family:var(--serif);font-size:1.25rem;color:#101114;text-align:center;letter-spacing:.01em}
.triplet b{color:var(--accent-dk);font-weight:400;font-style:italic}

/* ---------- docs & content pages ---------- */
main.doc{max-width:var(--measure);margin:0 auto;padding:2.4rem 1.4rem 3.5rem}
main.doc.wide{max-width:1120px}
main.doc .crumb{font-size:.75rem;color:var(--dim2);margin-bottom:1rem}
main.doc .crumb a{color:var(--dim)}
main.doc h1{font-family:var(--serif);font-size:2.1rem;color:#101114;margin:.2rem 0 .9rem}
main.doc h2{font-family:var(--serif);font-size:1.4rem;color:#101114;margin:2.2rem 0 .7rem;scroll-margin-top:70px}
main.doc h3{font-size:1.02rem;color:#101114;margin:1.7rem 0 .5rem}
main.doc .lead{color:#34363c;font-size:1.12rem}
main.doc .abstract{color:#34363c;font-size:1.08rem;font-style:italic;line-height:1.55}
main.doc .abstract b{font-weight:600}
main.doc p, main.doc li{color:#34363c;font-size:.98rem}
main.doc ul,main.doc ol{padding-left:1.3rem}
main.doc li{margin:.3rem 0}
main.doc table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1.1rem 0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
main.doc th{background:var(--panel2);text-align:left;padding:.55rem .8rem;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
main.doc td{padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;color:#34363c}
.tablewrap{overflow-x:auto}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.warnbox{border:1px solid var(--line);border-left:3px solid var(--yellow);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.note b,.warnbox b{color:#101114}
.subscribe{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;margin:1.4rem 0;font-size:.88rem;color:#34363c;box-shadow:var(--shadow)}
.subscribe p{margin:.2rem 0}
.subform{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0 .2rem}
.subform input[type=email],.subform input[type=text]{flex:1 1 13rem;min-width:0;padding:.45rem .65rem;border:1px solid var(--line);
  border-radius:6px;font:inherit;background:#fff;color:#101114}
.subform input:focus-visible,.subform button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.subform .subbtn{padding:.45rem 1rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;font:inherit;
  font-weight:600;cursor:pointer}
.subform .subbtn:disabled{opacity:.6;cursor:progress}
.subform .consent{flex:1 1 100%;display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;color:var(--dim)}
.subform .consent input{margin-top:.2rem}
.subform .sub-status{flex:1 1 100%;margin:0;min-height:1.1em}
.subform .sub-status.warn{color:#8a5a00}
.subform .sub-status.ok{color:#1c6b3a}
.subform .sub-mailto{flex:1 1 100%}
.sr,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-done{margin:.6rem 0 .2rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
@media print{.subscribe{display:none}}
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem}

/* docs hub */
.dochub{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1.4rem 0}
.dochub .grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;box-shadow:var(--shadow)}
.dochub .grp h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 .6rem}
.dochub .grp a{display:block;padding:.3rem 0;font-size:.9rem;color:var(--fg)}
.dochub .grp a small{display:block;color:var(--dim2);font-size:.75rem}

/* use-case sections */
section.uc{padding:2.4rem 0;border-bottom:1px solid var(--line);scroll-margin-top:70px}
section.uc:last-of-type{border-bottom:none}
section.uc h2{font-family:var(--serif);font-size:1.5rem;color:#101114;margin:0 0 .6rem;text-align:left}
section.uc p{color:#34363c;font-size:.93rem}

/* versions table */
table.vers td.vnum{font-family:var(--mono);font-weight:700;color:var(--accent-dk);white-space:nowrap}
table.vers td.vid{font-family:var(--mono);font-size:.72rem;color:var(--dim)}
table.vers td.vid a{color:inherit}
table.vers .vchg{margin-top:.4rem;font-size:.8rem;color:var(--dim)}
table.vers .vchg span{margin-right:.5rem}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:3.5rem;padding:2.2rem 0 3rem;background:var(--panel2)}
footer.site .cols{max-width:var(--wide);margin:0 auto;padding:0 1.1rem;display:grid;gap:1.6rem;grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:940px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 .6rem}
footer.site a{display:block;color:var(--dim);font-size:.82rem;padding:.15rem 0}
footer.site .brandline{font-weight:800;color:var(--fg)}
footer.site .brandline span{color:var(--accent)}
footer.site p{color:var(--dim);font-size:.76rem;line-height:1.65;max-width:420px}
footer.site .vaultnote{color:var(--accent-dk);opacity:.9}
footer.site .verline{font-family:var(--mono);font-size:.72rem;color:var(--dim2);margin-top:.6rem}
footer.site .verline a{display:inline;color:var(--accent-dk);padding:0}
@media (max-width:700px){footer.site .cols{grid-template-columns:1fr}}

/* reveal */
.rev{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- try page ---------- */
.try-term{background:var(--term-bg);border-radius:10px;padding:1rem 1.15rem;font-family:var(--mono);
  font-size:.78rem;line-height:1.6;min-height:200px;max-height:420px;overflow:auto;color:#c9d1d9;
  white-space:pre-wrap;box-shadow:var(--shadow);margin:1rem 0}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.btn{background:var(--accent-dk);color:#fff;border:none;border-radius:8px;padding:.55rem 1.1rem;
  font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--accent)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.alt{background:var(--panel);color:var(--fg);border:1px solid var(--line2)}
.btn.alt:hover{border-color:var(--accent)}
textarea.pyin{width:100%;min-height:96px;background:var(--term-bg);color:#c9d1d9;border:1px solid var(--line2);
  border-radius:8px;font-family:var(--mono);font-size:.8rem;padding:.7rem;box-sizing:border-box;resize:vertical}
.shrow{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 1rem;background:var(--term-bg);
  border-radius:8px;padding:.45rem .8rem;box-shadow:var(--shadow)}
.shp{font-family:var(--mono);font-size:.78rem;color:#3fb950;white-space:nowrap}
input.shin{flex:1;background:transparent;border:none;outline:none;color:#c9d1d9;
  font-family:var(--mono);font-size:.8rem;padding:.2rem 0}
input.shin::placeholder{color:#8b949e;opacity:.6}

/* ---------- live vault docs ---------- */
.vdocs{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;max-width:var(--wide);margin:0 auto;padding:0 1.1rem;align-items:start}
.vdocs-nav{position:sticky;top:64px;border-right:1px solid var(--line);padding-right:.9rem}
.vdocs-nav a{display:block;padding:.28rem 0;font-size:.85rem;color:var(--dim)}
.vdocs-nav a:hover{color:var(--fg);text-decoration:none}
.vdocs-nav a.here{color:var(--accent-dk);font-weight:600}
.vdocs-group{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);margin:.9rem 0 .3rem}
.vdocs-body{min-width:0}
.vdocs-body h1{font-family:var(--serif);font-size:1.9rem;color:#101114;margin:.2rem 0 .8rem}
.vdocs-body h2{font-family:var(--serif);font-size:1.3rem;color:#101114;margin:1.8rem 0 .6rem}
.vdocs-body h3{font-size:1rem;color:#101114;margin:1.4rem 0 .4rem}
.vdocs-body p,.vdocs-body li{color:#34363c;font-size:.93rem;line-height:1.65}
.vdocs-body ul,.vdocs-body ol{padding-left:1.3rem}
.vdocs-src{font-family:var(--mono);font-size:.7rem;color:var(--dim2);border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:1.1rem}
.md-code{background:var(--term-bg);color:#c9d1d9;border-radius:8px;padding:.8rem 1rem;font-size:.78rem;overflow-x:auto;line-height:1.6}
.md-tablewrap{overflow-x:auto}
.vdocs-body table{width:100%;border-collapse:collapse;font-size:.83rem;margin:1rem 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vdocs-body th{background:var(--panel2);text-align:left;padding:.5rem .7rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.vdocs-body td{padding:.5rem .7rem;border-top:1px solid var(--line);color:#34363c;vertical-align:top}
@media (max-width:820px){.vdocs{grid-template-columns:1fr}.vdocs-nav{position:static;border-right:none;border-bottom:1px solid var(--line);padding-bottom:.8rem}}

/* debug side panel */
.vdbg-toggle{position:fixed;right:0;top:35%;z-index:60;background:var(--term-bg);color:#c9d1d9;border:none;
  border-radius:8px 0 0 8px;padding:.6rem .5rem;font-family:var(--mono);font-size:.68rem;cursor:pointer;
  writing-mode:vertical-rl;letter-spacing:.1em;box-shadow:var(--shadow)}
.vdbg{position:fixed;top:0;right:0;height:100%;width:min(460px,92vw);background:var(--term-bg);color:#c9d1d9;
  z-index:70;transform:translateX(100%);transition:transform .25s ease;
  display:flex;overflow:hidden;padding:0;
  font-family:var(--mono);font-size:.72rem;box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.vdbg-inner{flex:1;min-width:0;overflow-y:auto;padding:1rem 1.1rem}
.vdbg.open{transform:translateX(0)}
/* the slide is for hand-driven open/close only — never for restoring state on load */
.vdbg.vdbg-noanim{transition:none}
.vdbg h3{font-family:var(--sans);font-size:.8rem;color:#fff;margin:0 0 .8rem;display:flex;justify-content:space-between;align-items:center}
.vdbg-help{margin-left:auto;margin-right:.7rem;font-family:var(--sans);font-size:.68rem;font-weight:400;
  color:#2dd4bf;text-decoration:none;border-bottom:1px dotted #1f6f68;white-space:nowrap}
.vdbg-help:hover{color:#5eead4;border-bottom-color:#5eead4}
.vdbg-more{margin-top:1.1rem;padding:.7rem .8rem;background:#11161f;border:1px solid #1d2532;border-radius:8px;
  font-family:var(--sans);font-size:.72rem;line-height:1.6;white-space:normal}
.vdbg-more a{display:block;color:#2dd4bf;text-decoration:none;font-weight:600;margin-bottom:.25rem}
.vdbg-more a:hover{color:#5eead4;text-decoration:underline}
.vdbg-more span{color:#6b7280}
.vdbg-h{font-family:var(--sans);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:#2dd4bf;margin:1.2rem 0 .5rem}
.vdbg-dim{color:#6b7280;letter-spacing:0;text-transform:none}
.vdbg-grid{display:grid;grid-template-columns:auto 1fr;gap:.25rem .7rem}
.vdbg-grid .k{color:#8b949e}
.vdbg-grid .v{color:#c9d1d9;word-break:break-all}
.vdbg-log{max-height:230px;overflow-y:auto;line-height:1.7;white-space:pre;font-size:.68rem}
.vdbg-log .g{color:#3fb950}
.vdbg-log .cy{color:#58a6ff}
.vdbg-btns{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap}
.vdbg-btns button{background:#161b26;color:#c9d1d9;border:1px solid #2c3646;border-radius:6px;padding:.35rem .7rem;font-size:.7rem;cursor:pointer;font-family:var(--sans)}
.vdbg-btns button:hover{border-color:#2dd4bf}
#vdbg-note{color:#3fb950;margin-top:.6rem;min-height:1em}

/* ---------- why / faq ---------- */
blockquote.challenge{margin:1.6rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--warm);
  background:var(--panel);border-radius:0 10px 10px 0;font-size:1rem;font-style:italic;color:#34363c;
  box-shadow:var(--shadow);line-height:1.7}
/* ---------- capability stack (why.html) ----------
   Scoped under .capstack on purpose: a bare .cap would also hit the .sees figure
   captions, which are <p class="cap"> and long predate this. */
.capstack{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.capstack .cap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:1.1rem 1.3rem 1.1rem 3.4rem;box-shadow:var(--shadow)}
.capstack .capnum{position:absolute;left:1.15rem;top:1.15rem;font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:-.03em}
.capstack .cap h3{margin:0 0 .5rem;font-size:1.05rem;color:#101114;letter-spacing:-.015em}
.capstack .cap p{margin:.5rem 0;font-size:.92rem;line-height:1.65;color:#34363c}
.capstack .capvs{background:var(--panel2);border-radius:8px;padding:.7rem .85rem;font-size:.86rem;color:#3c3f45}
.capstack .capvs b{color:var(--warm)}
.capstack .capsee{font-size:.82rem;color:var(--dim);margin-bottom:0}
@media (max-width:560px){.capstack .cap{padding:2.4rem 1rem 1rem}.capstack .capnum{top:.85rem;left:1rem}}

/* ---------- evidence status boxes (use-cases/*) ---------- */
.evbox{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  background:var(--panel);padding:1rem 1.15rem;box-shadow:var(--shadow);margin:.9rem 0 1.4rem}
.evbox.ev-warn{border-left-color:var(--warm)}
.evbox p:first-of-type{margin-top:.5rem}
.evbox p:last-child{margin-bottom:0}
.evtag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:99px;padding:.16rem .6rem}
.evbox.ev-warn .evtag{background:var(--warm)}

/* ---------- vault-app embed (demos/*) ---------- */
.sgv-embed{margin:1.2rem 0}
.sgv-embed-load{background:var(--term-bg);color:#2dd4bf;border:1px solid #2c3646;border-radius:10px;
  padding:.8rem 1.3rem;font-family:var(--mono);font-size:.92rem;cursor:pointer;box-shadow:var(--shadow)}
.sgv-embed-load:hover{border-color:#2dd4bf}
.sgv-embed-load:disabled{opacity:.6;cursor:wait}
.sgv-embed-loading{font-family:var(--mono);font-size:.8rem;color:var(--dim);padding:.8rem 0}
.sgv-embed-frame{width:100%;height:600px;
  }
.sgv-embed-frame.sgv-embed-tall{height:760px}
/* The official-UI embed: the vault surface itself is a full working application, so the
   IFRAME breaks out of the text column — the buttons and copy around it stay aligned with
   the prose. Centered breakout via translate — no ancestor has overflow:hidden, and
   94vw < 100vw keeps the page free of horizontal scroll. Height tracks the viewport. */
.sgv-breakout{width:min(94vw,1680px);position:relative;left:50%;transform:translateX(-50%)}
.sgv-btnrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sgv-uiembed-label{font-family:var(--mono);font-size:.85rem;font-weight:600;color:#0f766e;margin:1.4rem 0 0}
/* Comparison entries + the freshness states */
.cmp{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;margin:1.4rem 0;background:var(--panel)}
.cmp h3{margin:0 0 .2rem}
.cmp-lose{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#9a3412;
  border:1px solid rgba(154,52,18,.3);background:rgba(154,52,18,.07);border-radius:99px;padding:.12rem .5rem;margin-left:.5rem;vertical-align:middle}
.cmp-check{border-left:3px solid var(--line2);padding:.6rem .85rem;margin:.6rem 0;background:var(--panel2);border-radius:0 8px 8px 0}
.cmp-check.cmp-fresh{border-left-color:#0f766e}
.cmp-check.cmp-stale{border-left-color:#b45309;background:rgba(180,83,9,.06)}
.cmp-check.cmp-fail{border-left-color:#b91c1c;background:rgba(185,28,28,.06)}
.cmp-check-h{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap;font-size:.86rem}
.cmp-badge{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:.1rem .5rem;white-space:nowrap}
.cmp-b-pass{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.cmp-b-absent{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}
.cmp-b-fail{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}
.cmp-ev{font-family:var(--mono);font-size:.73rem;color:var(--fg);margin:.35rem 0 .2rem;line-height:1.55;word-break:break-word}
.cmp-meta{font-size:.71rem;color:var(--dim);line-height:1.5}
.cmp-banner{border-radius:8px;padding:.5rem .8rem;margin:.8rem 0}
.cmp-banner.cmp-fresh{border:1px solid rgba(15,118,110,.3);background:rgba(15,118,110,.06);color:var(--fg)}
.cmp-banner.cmp-stale{border:1px solid rgba(180,83,9,.4);background:rgba(180,83,9,.08);color:var(--fg)}
.vtranscript{border-left:3px solid var(--line2);padding:.2rem 0 .2rem 1rem;margin:.6rem 0 0}
.vtranscript p{font-size:.88rem;color:var(--dim);line-height:1.7;margin:.6rem 0}
/* Walkthrough rows: prose and a screenshot side by side, the side alternating down
   the page. One column on narrow screens, where the picture always follows its text
   (source order), so the explanation is never orphaned from what it explains. */
.wt{display:grid;gap:1.6rem 2.2rem;margin:1.6rem 0 2.4rem}
.wt-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.4rem 2.2rem;align-items:center;
  padding:1.4rem 0;border-top:1px solid var(--line)}
.wt-row:first-child{border-top:0}
.wt-row > .wt-text{min-width:0}
.wt-row > figure.shot{min-width:0;margin:0}
.wt-row.wt-alt > .wt-text{order:2}
.wt-row.wt-alt > figure.shot{order:1}
.wt-text h3{margin:0 0 .5rem;font-size:1.02rem}
.wt-text p{margin:.5rem 0}
.wt-text .wt-tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.07);border-radius:99px;padding:.1rem .55rem;margin-bottom:.5rem}
figure.shot{margin:0;opacity:0;transition:opacity .35s ease}
figure.shot.shot--in,figure.shot.shot--failed{opacity:1}
figure.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);background:var(--term-bg)}
figure.shot figcaption{font-size:.75rem;color:var(--dim);margin-top:.5rem;font-family:var(--mono);line-height:1.5}
/* Tall figures (infographics, phone mock-ups, timelines) at full measure dwarf the text beside them.
   The !shot directive's fourth field narrows them; the lightbox still opens the full image. */
figure.shot.shot--small{max-width:42%;margin:0 auto}
figure.shot.shot--narrow{max-width:62%;margin:0 auto}
figure.shot.shot--medium{max-width:78%;margin:0 auto}
@media (max-width:720px){figure.shot.shot--narrow,figure.shot.shot--medium{max-width:100%}figure.shot.shot--small{max-width:80%}}
@media (max-width:820px){
  .wt-row{grid-template-columns:1fr;gap:1rem}
  .wt-row.wt-alt > .wt-text{order:0}
  .wt-row.wt-alt > figure.shot{order:1}
}
.sgv-embed-frame.sgv-embed-ui{height:clamp(560px,78vh,1050px)}
.sgv-embed-frame:fullscreen{width:100vw;height:100vh;border-radius:0;background:#0d1117}
.sgv-embed-frame{border:1px solid var(--line2);border-radius:12px;
  background:#0e1116;box-shadow:var(--shadow)}

/* details.src: a diagram's source, collapsed under its render. The summary reads as a
   line of prose in the .md twin; the copy button is skipped there. */
details.src{border:1px solid var(--line);border-radius:10px;margin:.6rem 0 1.2rem;background:var(--panel)}
details.src summary{cursor:pointer;padding:.6rem .9rem;font-size:.86rem;color:#34363c;list-style:none;display:flex;gap:.6rem;align-items:baseline}
details.src summary::-webkit-details-marker{display:none}
details.src summary::before{content:"\25B8";color:var(--accent);flex:none}
details.src[open] summary::before{content:"\25BE"}
details.src summary::after{content:"view source";margin-left:auto;font-size:.78rem;color:var(--accent-dk)}
details.src[open] summary::after{content:"hide source"}
details.src .src-bar{display:flex;gap:1rem;align-items:center;padding:0 .9rem .4rem;font-size:.82rem}
details.src .src-copy{font:inherit;font-size:.8rem;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#fff;padding:.15rem .6rem;color:#101114}
details.src .src-copy:hover{background:var(--panel2)}
details.src pre.shell{margin:0 .9rem .9rem;max-height:420px;overflow:auto;font-size:.78rem}
details.faq{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:.5rem 0;
  box-shadow:var(--shadow);overflow:hidden}
details.faq summary{cursor:pointer;padding:.75rem 1rem;font-size:.9rem;font-weight:600;color:#101114;
  list-style:none;display:flex;align-items:flex-start;gap:.5rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--accent);font-weight:700;flex:none;width:.9em}
details.faq[open] summary::before{content:"−"}
details.faq summary:hover{background:var(--panel2)}
details.faq p{margin:0;padding:0 1rem 1rem 2.4rem;font-size:.9rem;color:#34363c;line-height:1.65}
.vdbg-log .dimc{color:#6b7280}

/* figures */
.figure{margin:1.6rem 0}
.figure svg{width:100%;height:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.8rem;box-shadow:var(--shadow)}
.figcap{font-size:.78rem;color:var(--dim);text-align:center;margin:.5rem 0 0;line-height:1.5}

/* vault panel — object inspector + resize */
.vdbg-grip{flex:none;width:12px;cursor:ew-resize;background:#11161f;border-right:1px solid #1d2532;
  display:flex;align-items:center;justify-content:center;touch-action:none}
.vdbg-grip::after{content:"";width:3px;height:34px;border-radius:2px;background:#2c3646}
.vdbg-grip:hover{background:#161b26}
.vdbg-grip:hover::after,.vdbg-grip.dragging::after{background:#2dd4bf}
.vdbg-grip.dragging{background:#161b26}
.vdbg-objs{margin-top:.3rem}
.objrow{border-bottom:1px solid #1d2532;padding:.35rem 0}
.objhead{display:flex;align-items:baseline;gap:.45rem;cursor:pointer;flex-wrap:wrap}
.objhead:hover{background:#161b26}
.objrow .kind{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:.05rem .3rem;
  background:#1d2532;color:#8b949e;flex:none}
.objrow .k-ref{background:#3a2a12;color:#d29922}
.objrow .k-commit{background:#12303a;color:#58a6ff}
.objrow .k-tree{background:#16302a;color:#2dd4bf}
.objrow .k-blob{background:#2a2036;color:#d2a8ff}
.objrow .k-index{background:#2c2c2c;color:#c9d1d9}
.objrow .oid{color:#c9d1d9;font-size:.68rem;word-break:break-all}
.objrow .meta{color:#6b7280;font-size:.65rem;margin-left:auto;white-space:nowrap}
.objwhy{color:#8b949e;font-size:.66rem;line-height:1.45;padding:.1rem 0 .15rem 0;white-space:normal;font-family:var(--sans)}
.objbody{background:#080b10;border:1px solid #1d2532;border-radius:6px;margin:.35rem 0 .2rem;padding:.5rem .6rem;
  font-size:.64rem;line-height:1.55;max-height:320px;overflow:auto;white-space:pre;word-break:normal;
  overflow-wrap:normal;tab-size:2;color:#9fb3c8}
/* json syntax colours — key / string / number / literal / punctuation */
.objbody .j-k{color:#7ee3d8}
.objbody .j-s{color:#e3a86c}
.objbody .j-n{color:#a5b4fc}
.objbody .j-l{color:#d2a8ff;font-style:italic}
.objbody .j-p{color:#4c5566}
.objbody::-webkit-scrollbar{height:9px;width:9px}
.objbody::-webkit-scrollbar-track{background:#080b10}
.objbody::-webkit-scrollbar-thumb{background:#2c3646;border-radius:5px}
.objbody::-webkit-scrollbar-thumb:hover{background:#3d4a5e}
.objrow.open .objhead{background:#161b26}
.vdbg-objs .m{color:#d2a8ff}
.vdbg-objs .t{color:#d29922}
.ttlpill{color:#d29922;background:#2a2110;border:1px solid #3a2a12;border-radius:4px;padding:0 .3rem;white-space:nowrap}

/* Walkthrough videos: the recording on top, the session as a document underneath.
   A fixed 16:9 box because a YouTube iframe has no intrinsic size — without one it
   collapses to the HTML default of 150px and the video arrives as a letterbox slot. */
.vembed{position:relative;width:100%;max-width:900px;margin:1rem 0 .4rem;
  aspect-ratio:16/9;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  background:#0d1117;box-shadow:var(--shadow)}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* What the author actually said at that moment, as opposed to what it means — kept
   visually distinct so the quotation is never mistaken for our own description. */
.msaid{border-left:3px solid var(--line2);padding:.1rem 0 .1rem .85rem;margin:.7rem 0 .2rem;
  color:var(--dim);font-style:italic}
.msaid b{font-style:normal;color:var(--fg)}
.wt-tag a{color:inherit}
.wt-tag a:hover{text-decoration:underline}

/* ---------- print / save-as-PDF ----------
   These pages get read as documents at least as often as they get browsed, and Cmd-P
   is how one ends up in a meeting. Two real defects were found by exporting the seven
   views page and looking at what came out:

   1. nav.site is position:sticky. Chrome paints a sticky/fixed box ONCE, wherever it
      happens to land in the paginated flow — which put the entire nav across the
      middle of page 2, over the prose, translucent enough that the text showed
      through it. Static in print: it flows normally, once, at the top of page 1.
   2. figure.shot starts at opacity:0 and its <img> is only created when an
      IntersectionObserver fires. Print without scrolling to the foot of the page
      first and every figure below the fold exports blank. That one had not been hit
      yet only because the export was taken after reading the whole page. shots.js
      now prefetches on idle and sweeps again on beforeprint; this half makes the
      figures visible regardless.

   Chrome honours @page margin when the user leaves Layout > Margins on "Default",
   which is what people leave it on. Picking Custom or None overrides us, correctly. */
@page{margin:14mm}
@media print{
  /* Chrome drops background colours unless asked, and on this site the tints carry
     meaning — amber for exposure, green for assurance, teal for a section tag. */
  html{print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#fff}
  /* 10pt with tighter leading is not cosmetic: at 10.5pt the longest walkthrough row
     overflowed an A4 landscape page by about two lines, and break-inside:avoid can only
     keep a row whole if the row actually fits one. */
  body{background:#fff;font-size:10pt;line-height:1.5}

  /* 1. nothing sticky or fixed survives pagination. The nav keeps its brand and
     version as a masthead; thirteen dead links are noise on paper. */
  nav.site{position:static;background:none;backdrop-filter:none}
  nav.site a.nl,nav.site .gh{display:none}
  .vdocs-nav{position:static;border-right:0;padding-right:0}
  .vdbg,.vdbg-toggle{display:none!important}

  /* 2. every screenshot present and visible, scrolled to or not */
  figure.shot{opacity:1!important;transition:none}
  figure.shot img{box-shadow:none;width:auto;max-width:100%;max-height:10cm;margin:0 auto}
  .wt-row{padding:1rem 0}
  .wt-text p{margin:.42rem 0}

  /* Keep a walkthrough row whole. Tag, prose, screenshot and caption are one unit;
     splitting them strands a caption on the page after its picture, which is exactly
     what pages 2->3 of the first export did. */
  .wt-row,figure.shot,.note,pre,table,details.faq,.cmp-banner,blockquote,.vtranscript{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  p,li{orphans:3;widows:3}
  .page-break{break-before:page}

  /* A live surface cannot print — an iframe exports as an empty box, and .sgv-breakout
     is a viewport-width transform that overflows the page box on the way out. */
  .sgv-embed-frame,.sgv-embed-load,.sgv-embed-loading,.sgv-btnrow,.vembed{display:none!important}
  details.faq{display:block}
  details.faq > summary{font-weight:700;list-style:none}
  .sgv-uiembed-label::after{content:" — live surface; open this page online to use it";
    font-weight:400;color:var(--dim)}

}

/* ---------- updates & articles ---------- */
.upd-date{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--dim2);
  border-top:1px solid var(--line);padding-top:1.1rem;margin:2.2rem 0 .3rem;font-weight:600}
.upd{margin:0 0 1.9rem}
.upd h3{font-size:1.12rem;margin:.5rem 0 .35rem}
.upd h3 a{color:var(--fg)}
.upd h3 a:hover{color:var(--accent-dk);text-decoration:none}
.upd-ver{font-family:var(--mono);font-size:.66rem;color:var(--dim2);border:1px solid var(--line);
  border-radius:99px;padding:.1rem .5rem;vertical-align:middle;margin-left:.3rem;white-space:nowrap}
.chip{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;
  color:var(--accent-dk);border:1px solid rgba(15,118,110,.28);background:rgba(15,118,110,.06);
  border-radius:99px;padding:.08rem .45rem;margin-right:.3rem}
.chips{margin:.2rem 0 .5rem}
.artlist{display:grid;gap:.8rem;margin:1.4rem 0}
a.art{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.15rem;box-shadow:var(--shadow);color:var(--fg)}
a.art:hover{border-color:var(--accent);text-decoration:none}
a.art b{display:block;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:.15rem}
a.art .art-date{display:block;font-family:var(--mono);font-size:.68rem;color:var(--dim2);margin-bottom:.45rem}
a.art .art-sum{display:block;color:var(--dim);font-size:.9rem;line-height:1.6}
a.art .chips{display:block;margin-top:.55rem}

/* ---------- the sgit.ai network ---------- */
.netlist{display:grid;gap:1.5rem;margin:1.6rem 0 2.4rem}
.netcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
a.net-main{display:block;color:var(--fg)}
a.net-main:hover{text-decoration:none}
a.net-main:hover b{color:var(--accent-dk)}
a.net-main b{display:block;font-family:var(--mono);font-size:1.02rem;letter-spacing:-.01em}
a.net-main .net-tag{display:block;font-size:.95rem;color:var(--fg);margin:.3rem 0 .4rem;font-weight:600}
a.net-main .net-sum{display:block;color:var(--dim);font-size:.9rem;line-height:1.6}
.netcard figure.shot{margin:.9rem 0 .6rem}
/* A card is a summary, so its screenshot is a thumbnail: cropped from the top,
   which is where a site says what it is. The detail page shows the whole thing. */
.netcard figure.shot img{border-radius:8px;max-height:260px;object-fit:cover;
  object-position:top center}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;
  padding:.5rem 1rem;font-weight:600;font-size:.9rem}
.btn:hover{background:var(--accent-dk);text-decoration:none;color:#fff}

/* The network chooser — question-led entry into nineteen sibling sites. A reader
   arriving at the directory wants sending somewhere, not a list to read; each row is
   a question they might actually have, with the answer's address underneath it. */
.chooser{display:grid;gap:.5rem;margin:1.1rem 0 1.8rem}
.ask{display:grid;gap:.15rem;padding:.7rem .85rem;border:1px solid var(--line);
     border-radius:8px;text-decoration:none;background:var(--card);transition:border-color .12s,transform .12s}
.ask:hover{border-color:var(--accent);transform:translateX(2px)}
.ask-q{font-weight:600;color:var(--fg)}
.ask-q::before{content:"\201C";opacity:.45;margin-right:.15rem}
.ask-q::after{content:"\201D";opacity:.45;margin-left:.15rem}
.ask-a{font-size:.88rem;color:var(--dim)}
.ask-a b{color:var(--accent);font-family:var(--mono,ui-monospace,monospace);font-size:.86rem}
@media (max-width:640px){.ask{padding:.6rem .7rem}.ask-a{font-size:.82rem}}
@media print{.ask{break-inside:avoid}}

/* Homepage network band — five doors into the family, by area rather than by name,
   because a reader who does not yet know the sites cannot pick one from a list of domains. */
/* Constrained like .eco above it — the homepage bands carry their own max-width
   rather than relying on a wrapper, and this one shipped without it and ran the full
   viewport width. */
.netpick{max-width:1100px;margin:1.1rem auto 0;padding:0 1.1rem;display:grid;
         grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:.6rem}
.bandlede{max-width:760px;margin:0 auto;padding:0 1.1rem;text-align:center;color:var(--dim);font-size:.95rem}
.bandcta{max-width:1100px;margin:1rem auto 0;padding:0 1.1rem;text-align:center}
.netpick a{display:grid;gap:.2rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;
           background:var(--card);text-decoration:none;transition:border-color .12s,transform .12s}
.netpick a:hover{border-color:var(--accent);transform:translateY(-1px)}
.netpick b{color:var(--fg)}
.netpick span{font-size:.84rem;color:var(--dim);line-height:1.45}

/* Homepage articles band. Same 1100px measure as .eco and .netpick — the bands here
   carry their own width rather than relying on a wrapper. */
.artcards{max-width:1100px;margin:1.2rem auto 0;padding:0 1.1rem;display:grid;
          grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem}
.artcard{display:grid;gap:.3rem;align-content:start;padding:1rem 1.15rem;border:1px solid var(--line);
         border-radius:12px;background:var(--panel);text-decoration:none;box-shadow:var(--shadow);
         transition:border-color .12s,transform .12s}
.artcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.artcard-date{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--yellow)}
.artcard b{font-family:var(--serif);font-size:1.06rem;color:#101114;line-height:1.3}
.artcard-sum{font-size:.82rem;color:var(--dim);line-height:1.55}
.artcard-go{font-size:.8rem;color:var(--accent);font-weight:600;margin-top:.2rem}

/* ---- network chat: "which of these is mine?" ------------------------------
   Default tier is a local matcher, so this must look usable with no key at all.
   The key panel is deliberately not pretty — it is a trust decision, not a feature. */
.netchat{max-width:var(--measure);margin:1.4rem auto 2rem;border:1px solid var(--line);
         border-radius:12px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.nc-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;padding:.7rem .95rem;
         border-bottom:1px solid var(--line);background:var(--panel2)}
.nc-head b{font-size:.95rem;color:var(--fg)}
.nc-mode{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
         border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem}
.nc-mode.on{color:var(--accent);border-color:var(--accent)}
.nc-log{max-height:340px;overflow-y:auto;padding:.9rem .95rem;display:grid;gap:.75rem}
.nc-msg p{margin:0 0 .4rem;font-size:.88rem;line-height:1.6}
.nc-msg p:last-child{margin-bottom:0}
.nc-you{justify-self:end;max-width:85%;background:var(--panel2);border:1px solid var(--line);
        border-radius:10px 10px 2px 10px;padding:.45rem .7rem}
.nc-you p{font-weight:600}
.nc-bot{max-width:95%}
.nc-egs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.nc-eg{font:inherit;font-size:.78rem;color:var(--accent);background:transparent;cursor:pointer;
       border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem}
.nc-eg:hover{border-color:var(--accent)}
.nc-hits{display:grid;gap:.4rem;margin-top:.5rem}
.nc-hit{display:grid;gap:.12rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;
        text-decoration:none;background:var(--panel2)}
.nc-hit:hover{border-color:var(--accent)}
.nc-hit b{font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;color:var(--accent)}
.nc-hit-thesis{font-size:.82rem;color:var(--fg);line-height:1.45}
.nc-hit-why{font-size:.7rem;color:var(--dim)}
.nc-err{color:var(--yellow)}
.nc-form{display:flex;gap:.5rem;padding:.7rem .95rem;border-top:1px solid var(--line)}
.nc-input{flex:1;font:inherit;font-size:.88rem;padding:.45rem .65rem;border:1px solid var(--line);
          border-radius:8px;background:var(--bg);color:var(--fg)}
.nc-input:focus{outline:none;border-color:var(--accent)}
.nc-send{font:inherit;font-size:.85rem;font-weight:600;padding:.45rem 1rem;border-radius:8px;
         border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.nc-foot{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.15rem .95rem .8rem}
.nc-keytoggle{font:inherit;font-size:.78rem;color:var(--accent);background:transparent;
              border:0;padding:0;cursor:pointer;text-decoration:underline}
.nc-keypanel{padding:.2rem .95rem .95rem;border-top:1px dashed var(--line)}
.nc-keypanel p{margin:.6rem 0}
.nc-keyrow{display:flex;gap:.5rem;flex-wrap:wrap}
.nc-key{flex:1;min-width:200px;font:inherit;font-size:.85rem;padding:.4rem .6rem;
        border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.nc-keysave{font:inherit;font-size:.8rem;padding:.4rem .8rem;border-radius:8px;
            border:1px solid var(--line2);background:var(--panel2);color:var(--fg);cursor:pointer}
@media print{.netchat{display:none}}

/* "Open the vault in a new tab" — these vault apps are full applications and have far
   more room in their own tab than in the embedded frame, so the button is repeated at
   the points where a reader is deciding: the top, the embed, and the end. */
.openrow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
/* a screenshot that opens the real thing: the figure is wrapped in a link to the vault (v0.6.13) */
figure.shot a.shot-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
figure.shot a.shot-link img{transition:box-shadow .2s ease,border-color .2s ease}
figure.shot a.shot-link:hover img,figure.shot a.shot-link:focus-visible img{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}
figure.shot[data-href] figcaption b{color:var(--accent-dk)}
.btn-open{font-size:.95rem;font-weight:600;padding:.6rem 1.15rem}

/* ---------- published-vaults table (generated from admin/content/vaults.json) ---------- */
/* .vt-orient is the one orientation line above the table. It replaced four stacked .note
   boxes that pushed the table (the thing a visitor came for) 919px down at 1280 wide and
   2000px down at 390. A note box costs a border, 1.7rem of padding and its own margin;
   one wrapping row costs a single line of text at desktop width and still reads as a
   sentence plus two links on a phone. The three process notes moved to /lessons/. */
.vt-orient{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .9rem;
  margin:.1rem 0 1rem;padding:.5rem .8rem;font-size:.84rem;line-height:1.5;color:var(--dim);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.vt-orient span:not(.hv-sep){flex:1 1 20rem;min-width:0}
.vt-orient b{color:#101114}
.vt-orient a{white-space:nowrap;font-weight:600}
.vt-count{margin:.2rem 0 .9rem;font-size:.86rem;color:var(--dim)}
.vt{font-size:.83rem}
.vt td{vertical-align:top}
.vt-n{width:2.2rem;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.vt-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vt-id{margin-top:.15rem}
.vt-id code{font-size:.7rem;color:var(--dim);background:none;border:0;padding:0}
.vt-cat{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:600;
  padding:.12rem .5rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--dim)}
th.vt-sortable{cursor:pointer;user-select:none;position:relative}
th.vt-sortable:hover{color:#101114}
th.vt-sortable::after{content:'';opacity:.35;font-size:.7rem;margin-left:.3rem}
th.vt-sortable[data-dir="asc"]::after{content:'\2191';opacity:1}
th.vt-sortable[data-dir="desc"]::after{content:'\2193';opacity:1}
@media (max-width:720px){
  .vt{font-size:.79rem}
  .vt td:nth-child(3),.vt th:nth-child(3){display:none}   /* 'what it is' — the page has it */
}

/* ---------- sibling-site card (!site directive) ---------- */
/* Points at a page on another *.sgit.ai site and says so. The whole card is the link:
   the title anchor's ::after covers the card, so the markup stays a plain <a> for the
   markdown twin and screen readers while the pointer target is the full box. */
.sib{position:relative;display:block;margin:1.2rem 0;padding:.95rem 1.1rem .85rem;
  border:1px solid var(--line);border-left:4px solid #2f6fed;border-radius:10px;
  background:var(--panel);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.sib:hover{border-color:#2f6fed;transform:translateY(-1px)}
.sib-host{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-family:var(--mono);
  font-size:.74rem;color:#2f6fed;letter-spacing:.01em}
.sib-cat{font-family:inherit;font-size:.68rem;font-weight:600;color:var(--dim);
  padding:.08rem .45rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.sib-title{display:block;margin:.3rem 0 .15rem;font-size:1.02rem;font-weight:700;
  color:#101114;text-decoration:none;line-height:1.35}
.sib-title::after{content:'';position:absolute;inset:0}
.sib-title:hover{text-decoration:underline}
.sib-desc{display:block;font-size:.9rem;color:#2a2c33;line-height:1.5}
.sib-thesis{display:block;margin-top:.45rem;font-size:.84rem;font-style:italic;color:var(--dim)}
.sib-net{display:block;margin-top:.55rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--dim)}
.sib-net::before{content:'\21D7  ';color:#2f6fed}
.sib-sep{display:none}

/* ---------- homepage: proof before mechanism ---------- */
/* hero vaults: four real artefacts under the headline, each a screenshot and an open link */
.hv{max-width:1160px;margin:1.6rem auto 0;padding:0 1.1rem;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hv-card{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:.3rem;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s;color:var(--fg)}
.hv-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.hv-card figure{margin:0;aspect-ratio:16/10;background:#0f1218;overflow:hidden;border-bottom:1px solid var(--line)}
.hv-card figure img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.hv-card .hv-cat,.hv-card b,.hv-card .hv-what,.hv-card .hv-go{padding:0 .95rem}
.hv-card .hv-cat{margin-top:.75rem;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}
.hv-card b{font-size:.98rem;color:#101114;line-height:1.3}
.hv-card .hv-what{font-size:.8rem;color:var(--dim);line-height:1.5}
.hv-card .hv-go{margin:.5rem 0 .9rem;font-size:.78rem;font-weight:600;color:var(--accent-dk)}
.hv-note{max-width:760px;margin:.9rem auto 0;padding:0 1.1rem;text-align:center;font-size:.84rem;color:var(--dim)}

/* what people actually ship: six vaults chosen by job */
/* minmax(min(Npx,100%),1fr), never minmax(Npx,1fr). A bare floor wider than the
   available width does not shrink, it overflows: at 320px (iPhone SE) the content box
   is ~285px, so a 330px floor pushed the page 28px sideways with no way back. min()
   lets the column collapse to the container below that width and changes nothing
   above it. Same fix applied to .netpick, which had a 310px floor. */
.jobs{max-width:1160px;margin:1.2rem auto 0;padding:0 1.1rem;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.job{display:grid;grid-template-columns:120px 1fr;gap:.9rem;align-items:start;text-decoration:none;color:var(--fg);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem;box-shadow:var(--shadow);
  transition:border-color .15s,transform .15s}
.job:hover{border-color:var(--accent);transform:translateY(-2px)}
.job figure{margin:0;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#0f1218;border:1px solid var(--line)}
.job figure img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.job .job-verb{display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}
.job b{display:block;margin:.2rem 0 .3rem;font-size:.95rem;color:#101114;line-height:1.3}
.job .job-why{display:block;font-size:.8rem;color:var(--dim);line-height:1.5}
.job .job-vault{display:block;margin-top:.4rem;font-size:.72rem;color:var(--accent-dk);font-weight:600}
@media (max-width:480px){.job{grid-template-columns:1fr}.job figure{aspect-ratio:16/9}}

/* one human, a team of agents */
.team{max-width:1100px;margin:1.2rem auto 0;padding:0 1.1rem;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.team .t{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.team .t .num{display:block;font-family:var(--serif);font-size:2.1rem;line-height:1;color:#101114}
.team .t .lbl{display:block;margin-top:.3rem;font-size:.8rem;color:var(--dim);line-height:1.45}
.team-story{max-width:820px;margin:1.3rem auto 0;padding:0 1.1rem;display:grid;gap:.6rem}
.team-story .beat{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;font-size:.92rem;line-height:1.55}
.team-story .beat .k{font-family:var(--serif);font-size:1.3rem;color:var(--accent-dk);line-height:1.1}
/* card thumbnails: the runtime-filled figure, but flush and cropped rather than framed */
.hv-card figure.shot.hv-fig,.job figure.shot.hv-fig{margin:0}
.hv-card figure.shot.hv-fig img,.job figure.shot.hv-fig img{border:0;border-radius:0;box-shadow:none;
  width:100%;height:100%;object-fit:cover;object-position:top left}
.job figure.shot.hv-fig img{border-radius:7px}
.hv-card figure.shot.hv-fig figcaption,.job figure.shot.hv-fig figcaption{display:none}
.hv-sep{display:none}   /* text separators for the .md twin / screen readers; the grid does the spacing */

/* ---------- team section ---------- */
.roles{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:1.2rem 0}
.rolecard{display:grid;gap:.25rem;align-content:start;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none;color:var(--fg);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.rolecard:hover{border-color:var(--accent);transform:translateY(-2px)}
.rolecard .role-n{font-family:var(--mono);font-size:.7rem;color:var(--dim)}
.rolecard b{font-family:var(--serif);font-size:1.15rem;color:#101114}
.rolecard .role-mission{font-size:.86rem;color:#2a2c33;line-height:1.5}
.rolecard .role-owns{font-size:.78rem;color:var(--dim);line-height:1.45;margin-top:.2rem}
table.ident th{width:11rem;text-align:left;vertical-align:top;color:var(--dim);font-weight:600}
.prompt{position:relative;margin:1.1rem 0 1.6rem;padding:1rem 1.15rem;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:10px;background:var(--panel);font-size:.9rem;line-height:1.6;white-space:pre-wrap;font-family:var(--sans)}
.prompt-role{display:inline-block;margin:0 0 .4rem;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}

/* the board: five columns, a card is a file */
.kanban{display:grid;gap:.8rem;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;margin:1rem 0 2rem}
.kcol{background:#f1efe9;border:1px solid var(--line);border-radius:12px;padding:.7rem;min-height:6rem}
.kcol h3{margin:.2rem .2rem .7rem;font-size:.82rem;font-family:var(--sans);letter-spacing:.02em;color:#2a2c33;display:flex;justify-content:space-between;align-items:center}
.kcount{font-family:var(--mono);font-size:.7rem;color:var(--dim);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.05rem .45rem}
.kcol-needs{background:#fbf3e6}.kcol-done{background:#eef4ef}
.kcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;padding:.65rem .75rem;margin:0 0 .6rem;box-shadow:var(--shadow);font-size:.82rem}
.kcard.pr-high{border-left-color:#c8503a}.kcard.pr-medium{border-left-color:#d79a2b}.kcard.pr-low{border-left-color:#9aa3ad}
.kcard .kid{font-family:var(--mono);font-size:.68rem;color:var(--dim)}
.kcard b{display:block;margin:.15rem 0 .25rem;font-size:.86rem;color:#101114;line-height:1.35}
.kcard .kmeta{display:block;font-size:.7rem;color:var(--dim);margin-bottom:.35rem}
.kcard .kbody p{margin:.2rem 0;font-size:.78rem;color:#2a2c33;line-height:1.5}
.kcard:target{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kanban{grid-template-columns:1fr}}

/* investors */
.inv-nums .t .lbl b{color:#101114;display:block;margin-bottom:.15rem}
.inv-ask{border:2px dashed var(--warm);border-radius:12px;padding:1rem 1.2rem;background:#fff9f1;margin:1.2rem 0}
.inv-ask b.tag{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--warm);margin-bottom:.35rem}
@media print{.inv-ask{border-style:solid}.kanban{grid-template-columns:repeat(5,1fr)}}

/* ---------- the site chat pane (assets/site-chat.js) ---------- */
.sc-launch{position:fixed;right:18px;bottom:18px;z-index:60;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  padding:.6rem 1rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.18)}
.sc-launch:hover{filter:brightness(1.05)}
.sc-launch::before{content:'\2726  '}
.sc-open .sc-launch{display:none}
.sc-pane{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100vw);display:flex;flex-direction:column;
  background:var(--bg,#faf9f6);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.12)}
.sc-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--panel)}
.sc-head b{font-size:.95rem;margin-right:auto}
.sc-close{font:inherit;font-size:1.3rem;line-height:1;background:none;border:0;color:var(--dim);cursor:pointer;padding:0 .2rem}
.sc-keypanel{padding:.7rem .9rem;border-bottom:1px solid var(--line);display:grid;gap:.4rem;background:#fff9f1}
.sc-keypanel input{font:inherit;font-size:.82rem;padding:.4rem .55rem;border:1px solid var(--line);border-radius:6px;width:100%}
.sc-log{flex:1;max-height:none;overflow-y:auto;padding:.9rem;display:grid;gap:.75rem;align-content:start}
.sc-form{display:flex;gap:.4rem;padding:.7rem .9rem;border-top:1px solid var(--line);background:var(--panel)}
.sc-input{flex:1;font:inherit;font-size:.9rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px}
.sc-send{font:inherit;font-weight:700;padding:.55rem .9rem;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.sc-foot{padding:.4rem .9rem .6rem;font-size:.68rem;border-top:1px solid var(--line)}
.sc-trace{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin:.15rem 0}
.sc-trace summary{cursor:default;list-style:none}
.sc-pre{font-size:.74rem;line-height:1.5;white-space:pre-wrap;max-height:260px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;margin:.3rem 0}
.sc-answer p{font-size:.9rem;line-height:1.6;margin:0 0 .5rem}
.sc-answer p:last-child{margin-bottom:0}
@media (max-width:600px){.sc-pane{width:100vw}.sc-launch{bottom:14px;right:14px;font-size:.78rem}}
@media print{.sc-launch,.sc-pane{display:none}}
/* author display rules would otherwise beat the UA's [hidden]{display:none} — the pane showed on load */
.sc-pane[hidden],.sc-keypanel[hidden]{display:none}

/* ---------- vertical shorts: a portrait player beside its notes ---------- */
.shorts{display:grid;gap:1.6rem;margin:1.4rem 0}
.short{display:grid;grid-template-columns:260px 1fr;gap:1.4rem;align-items:start;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.short:first-child{border-top:0;padding-top:0}
.short-player{position:relative;width:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:#0f1218;border:1px solid var(--line);box-shadow:var(--shadow)}
.short-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.short-n{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warm)}
.short h3{margin:.25rem 0 .5rem;font-size:1.08rem;line-height:1.3;color:#101114}
.short-body p{font-size:.9rem;line-height:1.6;margin:0 0 .6rem}
.short-body ul{margin:.2rem 0 .7rem;padding-left:1.1rem}
.short-body li{font-size:.86rem;line-height:1.55;margin:.25rem 0;color:#2a2c33}
.short-maps{font-size:.82rem;color:var(--dim);line-height:1.5;border-left:3px solid var(--accent);
  padding:.1rem 0 .1rem .7rem;margin:.6rem 0 0}
@media (max-width:720px){.short{grid-template-columns:1fr}
  .short-player{max-width:280px;margin:0 auto}}
@media print{.short-player{display:none}.short{grid-template-columns:1fr}}

/* ---- vault decks (assets/vault-deck.js): site-owned chrome around two sandboxed frames */
.vdk{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card,#fff);margin:1.4rem 0}
.vdk-boot{padding:1.2rem;color:var(--dim);font-size:.92rem}
.vdk-boot.bad{color:var(--stop,#a8321f)}
.vdk-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:var(--ink,#1c1b18)}
.vdk-tab{font:600 12.5px/1 inherit;color:rgba(255,255,255,.72);background:none;border:0;border-radius:6px;
  padding:7px 11px;cursor:pointer;display:flex;align-items:center;gap:6px}
.vdk-tab:hover{background:rgba(255,255,255,.12);color:#fff}
.vdk-tab.on{background:rgba(255,255,255,.2);color:#fff}
.vdk-lv{font-size:10px;opacity:.7;font-family:var(--mono,monospace)}
.vdk-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  background:var(--bg,#f6f4ee);font-size:.86rem;flex-wrap:wrap}
.vdk-title{font-weight:700}
.vdk-count{color:var(--dim);font-family:var(--mono,monospace);font-size:.8rem}
.vdk-sp{flex:1}
.vdk-b{font:600 12.5px/1 inherit;color:var(--ink,#1c1b18);background:var(--card,#fff);border:1px solid var(--line);
  border-radius:7px;padding:8px 11px;cursor:pointer;white-space:nowrap}
.vdk-b:hover{border-color:var(--ink,#1c1b18)}
.vdk-b.on,.vdk-pdf{background:var(--ink,#1c1b18);color:var(--bg,#f6f4ee);border-color:var(--ink,#1c1b18)}
.vdk-body{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:0}
.vdk-list{border-right:1px solid var(--line);max-height:520px;overflow:auto;padding:6px;background:var(--bg,#f6f4ee)}
.vdk-it{display:flex;gap:8px;align-items:center;width:100%;text-align:left;font:inherit;font-size:.82rem;
  color:var(--dim);background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer}
.vdk-it:hover{background:rgba(0,0,0,.05);color:var(--fg)}
.vdk-it.on{background:var(--ink,#1c1b18);color:var(--bg,#f6f4ee)}
.vdk-n{font-family:var(--mono,monospace);font-size:10px;opacity:.7}
.vdk-stagewrap{overflow:hidden;background:#fff}
.vdk-scaler{position:relative;overflow:hidden}
.vdk-notes{padding:.9rem 1.1rem;border-top:1px solid var(--line);background:var(--bg,#f6f4ee);
  font-size:.88rem;line-height:1.55;color:var(--fg)}
.vdk-status{margin:0;padding:.55rem 1.1rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--dim)}
.vdk-status.bad{color:var(--stop,#a8321f)}
@media (max-width:760px){.vdk-body{grid-template-columns:1fr}.vdk-list{max-height:150px;border-right:0;border-bottom:1px solid var(--line)}}
.vdk{position:relative}
.vdk:focus-visible,.vdk-b:focus-visible,.vdk-it:focus-visible,.vdk-tab:focus-visible{outline:3px solid var(--accent,#2f6fed);outline-offset:2px}
.vdk.focus .vdk-body{grid-template-columns:minmax(0,1fr)}
.vdk.focus .vdk-list{display:none}
.vdk-tabs[hidden]{display:none}
.surface{margin:0 0 .4rem;font-size:.8rem;color:var(--dim);letter-spacing:.01em}
.surface b{color:var(--fg)}

/* ---- the llms.txt chip: one object, not three loose fragments.
   Renders on every page, so weight is the whole constraint — it must be findable without
   ever competing with the headline under it. The long explanation is a title tooltip. */
.llmschip{max-width:var(--wide);margin:.9rem auto .1rem;padding:0 var(--pad)}
.llmschip a{display:inline-flex;align-items:stretch;border:1px solid var(--line2);border-radius:7px;
  overflow:hidden;background:var(--panel);box-shadow:0 1px 2px rgba(28,29,33,.04);
  text-decoration:none;color:inherit;transition:border-color .12s ease,box-shadow .12s ease}
.llmschip a:hover{border-color:var(--dim2);box-shadow:0 1px 3px rgba(28,29,33,.08)}
.llmschip-k{display:flex;align-items:center;gap:.4rem;padding:.34rem .6rem;
  background:var(--panel2);border-right:1px solid var(--line);
  font:700 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.llmschip-k svg{width:12px;height:12px;flex:none}
.llmschip-p{display:flex;align-items:center;padding:.34rem .6rem;
  font-family:var(--mono);font-size:.74rem;color:var(--fg)}
.llmschip a:hover .llmschip-p{color:var(--accent)}
.llmschip-m{display:flex;align-items:center;padding:.34rem .6rem;border-left:1px dashed var(--line);
  font-family:var(--mono);font-size:.68rem;color:var(--dim2);white-space:nowrap}
@media (max-width:640px){.llmschip-m{display:none}}

/* ---- summit sheets: A4 previews as cards */
.hv.sheets{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.2rem}
.sheet-card figure{aspect-ratio:210/297;background:var(--panel)}
.sheet-card figure img{object-fit:cover;object-position:top center}

/* ---------- articles: cards, filter, threads, graphs (v0.6.39) ----------
   The index was a wall of summaries. Now: one featured card, a topic filter, a grid of
   picture cards with one-sentence teasers, and the threads between articles. Pictures go
   through shots.js like every image here, so a card's figure is sized before it loads. */
.agrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:1.2rem 0 1.6rem}
.agrid.home{max-width:1100px;margin:1.2rem auto 0;padding:0 1.1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
a.acard{display:grid;gap:.35rem;align-content:start;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:0 0 1rem;box-shadow:var(--shadow);color:var(--fg);overflow:hidden;transition:border-color .12s,transform .12s}
a.acard:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
a.acard[hidden]{display:none}
.acard figure.cardshot{margin:0;aspect-ratio:720/378;background:var(--panel2);border-bottom:1px solid var(--line);opacity:1}
.acard figure.cardshot img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;box-shadow:none;background:var(--panel2)}
.acard figure.cardshot .shot-link{display:block;height:100%}
.acard figure.cardshot p{margin:.6rem .9rem}
.acard-meta{display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center;padding:.75rem 1rem 0;font-family:var(--mono);font-size:.66rem;color:var(--dim2)}
.acard-kicker{color:var(--yellow);letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.acard-threads{margin-left:auto}
a.acard > b{font-family:var(--serif);font-size:1.08rem;line-height:1.3;color:#101114;padding:0 1rem}
.acard-teaser{display:block;padding:0 1rem;color:var(--dim);font-size:.88rem;line-height:1.55}
.tchip{display:inline-block;font-family:var(--sans);font-size:.66rem;letter-spacing:.02em;color:var(--accent-dk);
  border:1px solid rgba(15,118,110,.28);background:rgba(15,118,110,.06);border-radius:99px;padding:.06rem .5rem}
/* the featured card: picture beside the text on wide screens */
a.afeat{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;margin:1.4rem 0 1.2rem;padding:0}
a.afeat figure.cardshot{aspect-ratio:auto;height:100%;min-height:240px;border-bottom:0;border-right:1px solid var(--line)}
a.afeat figure.cardshot img{height:100%;object-fit:contain;object-position:center;background:var(--panel2)}
.afeat-text{display:grid;gap:.5rem;align-content:center;padding:1.2rem 1.4rem 1.3rem}
.afeat-text .acard-meta{padding:0}
a.afeat .afeat-text b{font-family:var(--serif);font-size:1.45rem;line-height:1.25;color:#101114;padding:0}
.afeat-teaser{color:#34363c;font-size:1rem;line-height:1.55}
.afeat-idea{color:var(--dim);font-size:.9rem;line-height:1.55}
@media (max-width:720px){a.afeat{grid-template-columns:1fr}a.afeat figure.cardshot{aspect-ratio:720/378;min-height:0;border-right:0;border-bottom:1px solid var(--line)}}
/* the filter bar: buttons are a progressive enhancement, every card shows without JS */
.afilter{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.2rem 0 .2rem;padding:.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.achip{font:inherit;font-size:.8rem;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:.25rem .7rem;cursor:pointer}
.achip span{font-family:var(--mono);font-size:.68rem;color:var(--dim2);margin-left:.25rem}
.achip:hover{border-color:var(--accent)}
.achip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.achip[aria-pressed="true"] span{color:rgba(255,255,255,.8)}
.asearch{font:inherit;font-size:.85rem;margin-left:auto;min-width:220px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg)}
@media (max-width:640px){.asearch{margin-left:0;width:100%}}
.athreadlist{list-style:none;padding:0;margin:.8rem 0 1.6rem;display:grid;gap:.45rem}
.athreadlist li{font-size:.9rem;line-height:1.5;padding:.45rem .7rem;border-left:3px solid var(--line);background:var(--panel)}
.aalso{list-style:none;max-width:1100px;margin:.9rem auto 0;padding:0 1.1rem;display:grid;gap:.25rem .9rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));font-size:.88rem}
/* the threads block at the foot of every article */
.athreads{margin:2.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line)}
.athreads h2{margin-top:0}
.athreads-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem}
.athreads-cols{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:.6rem 0}
.athreads-cols h3{margin:.4rem 0 .3rem;font-size:.9rem;color:var(--dim)}
.athreads-cols ul{padding-left:1.1rem;margin:0}
.athreads-cols li{font-size:.92rem;line-height:1.5;margin:.3rem 0}
/* the graphs page */
.amap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem;margin:1rem 0 1.6rem}
.amap-svg,.agraph-svg{width:100%;height:auto;display:block;font-family:var(--sans)}
.amap-svg a:hover circle{fill:var(--yellow)}
.agraph{margin:2.2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.agraph h2{margin-top:0;font-size:1.25rem}
.agraph-idea{color:#34363c;font-size:1rem;font-style:italic}
.agraph-svg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.4rem;margin:.6rem 0}
.agraph-legend{display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.klegend i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.3rem;vertical-align:middle}
.agraph-nodes summary{cursor:pointer;color:var(--accent-dk);font-size:.9rem}
.agraph-nodes li{font-size:.9rem;margin:.25rem 0}
.agraph-quote{margin:.9rem 0;padding:.6rem 1rem;border-left:3px solid var(--accent);background:var(--panel);font-size:.95rem;color:#34363c}
/* the updates contents list */
.updtoc{margin:1rem 0 1.6rem;padding:.6rem .9rem;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.updtoc summary{cursor:pointer;font-size:.9rem;color:var(--accent-dk)}
.updtoc ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.2rem .9rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));font-size:.84rem;line-height:1.5}
.updtoc li span{font-family:var(--mono);font-size:.7rem;margin-right:.3rem}

/* ---------- the articles front (v0.6.85) ----------
   A broadsheet vocabulary, borrowed from pt.newsroom.sgit.ai and kept to system fonts: a
   dateline between hairlines, a serif masthead over a double rule, an italic kicker over
   every headline, rules between things rather than boxes around them, and a date on every
   card. Which article sits in which slot is admin/content/newsroom/front.json, never CSS. */
main.front{max-width:var(--wide);margin:0 auto;padding:1.4rem 1.4rem 3.5rem}
.fmast{text-align:center;margin-bottom:1.4rem}
.fdateline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.3rem 1rem;margin:0;padding:.4rem 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);font-family:var(--serif);font-style:italic;
  font-size:.85rem;color:var(--dim)}
.fmast h1{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.8rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;margin:.9rem 0 .35rem;color:#101114}
.fmast-sub{max-width:720px;margin:0 auto .8rem;color:var(--dim);font-size:.98rem}
.fsub{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.3rem;padding:.55rem 0;
  border-top:1px solid var(--fg);border-bottom:3px double var(--fg);font-size:.86rem}
.fsub a{color:var(--fg)}
.fsub a[aria-current]{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.fkick{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--warm);letter-spacing:0;text-transform:none;font-weight:400}
.fnote{max-width:860px;margin:0 auto 1.6rem;text-align:center;color:#34363c;font-size:.95rem;line-height:1.6}
.fnote .fkick{display:block;margin-bottom:.15rem}
h2.fsect,h3.fsect{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);margin:0 0 .9rem;padding-top:.5rem;border-top:2px solid var(--fg);display:flex;justify-content:space-between;gap:1rem}
h2.fsect a,h3.fsect a{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:.8rem}
.fband{margin-top:2.6rem;scroll-margin-top:70px}
/* the top: lead on the left, the Latest rail on the right */
.ftop{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:2rem;align-items:start}
a.flead{display:grid;gap:.9rem;color:inherit}
a.flead:hover{text-decoration:none}
a.flead:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.flead figure.cardshot{margin:0;aspect-ratio:720/378;background:var(--panel2);border:1px solid var(--line);opacity:1}
a.flead figure.cardshot img,a.fhigh figure.cardshot img,.ctile figure.cardshot img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;box-shadow:none}
a.flead figure.cardshot .shot-link,a.fhigh figure.cardshot .shot-link{display:block;height:100%}
.flead-text{display:grid;gap:.5rem}
.flead-text .acard-meta,.fhigh .acard-meta{padding:0}
a.flead b{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.15;letter-spacing:-.02em;color:#101114;font-weight:600}
.flead-teaser{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:#34363c}
.flead-why{font-size:.88rem;color:var(--dim);border-left:2px solid var(--warm);padding-left:.7rem}
a.flead .flead-why b{font-family:var(--sans);font-size:inherit;line-height:inherit;letter-spacing:0;color:var(--fg);font-weight:600}
.frail{border-left:1px solid var(--line2);padding-left:1.4rem}
.frail ol{list-style:none;margin:0;padding:0}
.frail li{display:grid;gap:.1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.frail li:first-child{padding-top:0}
.frail li a{font-family:var(--serif);font-size:1rem;line-height:1.3;color:#101114}
.frail .acard-date,.dnote .acard-date,.drange-date{font-family:var(--mono);font-size:.66rem;color:var(--dim2)}
.frail-more{display:inline-block;margin-top:.7rem;font-size:.85rem;font-weight:600}
.frail .dnote{margin-top:1rem}
/* highlights: four across, a top hairline instead of a box */
.fhighs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.fhighs.home{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem}
a.fhigh{display:grid;gap:.45rem;align-content:start;color:inherit;border-top:1px solid var(--line2);padding-top:.9rem}
a.fhigh:hover{text-decoration:none}
a.fhigh:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.fhigh figure.cardshot{margin:0 0 .3rem;aspect-ratio:720/378;background:var(--panel2);border:1px solid var(--line);opacity:1}
a.fhigh b{font-family:var(--serif);font-size:1.12rem;line-height:1.28;color:#101114;font-weight:600}
.fhigh-why{font-size:.88rem;color:var(--dim);line-height:1.5}
/* desk notes */
.dnotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem}
a.dnote{display:grid;gap:.4rem;align-content:start;color:inherit;border-top:1px solid var(--line2);padding-top:.9rem}
a.dnote:hover{text-decoration:none}
a.dnote:hover b{text-decoration:underline;text-underline-offset:3px}
.dnote-meta{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.dnote-by{font-size:.72rem;color:var(--dim2)}
a.dnote b{font-family:var(--serif);font-size:1.05rem;line-height:1.3;color:#101114;font-weight:600}
.dnote-q{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.45;color:#101114;border-left:3px solid var(--warm);padding-left:.75rem}
.dnote-q::before{content:"\201C"}.dnote-q::after{content:"\201D"}
.dnote-sum{font-size:.9rem;color:var(--dim);line-height:1.5}
/* collections */
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.ctiles.wide{margin-top:1.6rem}
a.ctile{display:grid;gap:.45rem;align-content:start;color:inherit;border-top:1px solid var(--line2);padding-top:.9rem}
a.ctile:hover{text-decoration:none}
a.ctile:hover b{text-decoration:underline;text-underline-offset:3px}
.ctile-thumbs{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;aspect-ratio:2/1;margin-bottom:.3rem}
.ctile-thumbs figure.cardshot{margin:0;background:var(--panel2);overflow:hidden;opacity:1;min-height:0}
.ctile-thumbs figure.cardshot:first-child{grid-row:1 / span 2}
.ctile-thumbs figure.cardshot p{display:none}
a.ctile b{font-family:var(--serif);font-size:1.15rem;line-height:1.28;color:#101114;font-weight:600}
.ctile-dek{font-size:.9rem;color:var(--dim);line-height:1.5}
/* the archive cards: clamp long titles and teasers so the grid reads as a grid */
#agrid a.acard > b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#agrid .acard-teaser{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.9rem}
/* desk directives inside a note or a collection */
blockquote.dquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--warm);background:none}
blockquote.dquote p{font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:#101114;margin:0 0 .4rem;font-style:italic}
blockquote.dquote cite{display:block;font-style:normal;font-size:.82rem;color:var(--dim)}
.dquote-why{display:block;font-size:.82rem;color:var(--dim2);margin-top:.2rem}
.drange{border-top:2px solid var(--fg);padding-top:.6rem;margin:1.2rem 0 1.6rem}
.drange-head{font-size:.9rem;color:var(--dim)}
.drange ol{padding-left:1.4rem}
.drange li{margin:.45rem 0}
.drange li a{font-family:var(--serif);font-weight:600}
.agrid.dcard{grid-template-columns:minmax(0,420px)}
/* the homepage band */
.front-band .fband-head{text-align:center;margin-bottom:1.6rem}
.front-band .fband-head h2{margin-top:0}
.front-band .ftop{max-width:1180px;margin:0 auto}
.front-band .fhighs.home{max-width:1180px;margin-left:auto;margin-right:auto}
/* the newsroom pages */
.nsub{justify-content:flex-start;margin:1.2rem 0 1.4rem;border-top-width:1px}
.nflow{counter-reset:none;padding-left:1.4rem}
.nflow li{margin:.55rem 0}
.nroles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1rem 0}
a.nrole{display:grid;gap:.35rem;align-content:start;padding:.9rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit}
a.nrole:hover{border-color:var(--accent);text-decoration:none}
a.nrole b{font-family:var(--serif);font-size:1.1rem;color:#101114}
a.nrole span{font-size:.86rem;color:#34363c;line-height:1.5}
a.nrole .nrole-claim{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:.84rem}
ul.nhealth{list-style:none;padding:0}
ul.nhealth li{padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.nh-tag{display:inline-block;min-width:3.6rem;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}
.nh-warn .nh-tag{color:#b42318}.nh-todo .nh-tag{color:var(--warm)}.nh-info .nh-tag{color:var(--dim2)}
.nhealth-ok{color:var(--accent-dk)}
.nboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.ncol{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.7rem}
.ncol h3{margin:0 0 .6rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.ncard{display:grid;gap:.3rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;margin-bottom:.6rem;font-size:.86rem;line-height:1.4}
.nid{font-family:var(--mono);font-size:.7rem;color:var(--dim2)}
.nlog{border-top:1px solid var(--line2);padding-top:.6rem;margin-top:1.8rem}
.nlog h2{margin-top:.2rem}
table.poltable td.pol-y{color:var(--accent-dk);font-weight:600}
table.poltable td.pol-e{color:var(--warm)}
table.poltable td.pol-n{color:var(--dim2);text-align:center}
@media (max-width:980px){
  .ftop{grid-template-columns:1fr}
  .frail{border-left:0;padding-left:0;border-top:2px solid var(--fg);padding-top:.6rem}
  .fhighs,.fhighs.home{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nboard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  main.front{padding:1rem 1rem 3rem}
  .fdateline{justify-content:center;text-align:center}
  .fhighs,.fhighs.home{grid-template-columns:1fr}
  .nboard{grid-template-columns:1fr}
  .fsub{gap:.2rem .9rem}
}
/* ---------- the newsletter (v0.6.89) ---------- */
figure.nlbanner{margin:0 0 1.4rem;aspect-ratio:16/9;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;opacity:1}
figure.nlbanner img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;box-shadow:none}
.nlcopy{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.4rem 0 1.4rem}
.nlpage #issue-body{border-top:1px solid var(--line);padding-top:1rem}
article.nlissue{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:1.4rem;align-items:start;border-top:1px solid var(--line2);padding:1.1rem 0}
article.nlissue h2{font-family:var(--serif);font-size:1.35rem;margin:.2rem 0 .4rem;line-height:1.25}
article.nlissue h2 a{color:#101114}
article.nlissue figure.cardshot{margin:0;aspect-ratio:16/9;background:var(--panel2);border:1px solid var(--line);opacity:1}
article.nlissue figure.cardshot img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;box-shadow:none}
aside.lkit{margin:2rem 0 0;padding:.8rem 1rem;border:1px dashed var(--line2);border-radius:10px;font-size:.88rem;color:var(--dim);background:var(--panel)}
aside.lkit b{color:var(--fg)}
@media (max-width:720px){article.nlissue{grid-template-columns:1fr}}
p.dquote-src{margin:-.9rem 0 1.4rem 1.1rem;font-size:.82rem;color:var(--dim)}
ul.dlist{padding-left:1.2rem}
ul.dlist li{margin:.5rem 0;line-height:1.55}
p.subteaser{margin:1.6rem 0;padding:.9rem 1.1rem;border-top:2px solid var(--fg);border-bottom:1px solid var(--line2);font-size:.95rem;color:#34363c}
p.subteaser .cta2{white-space:nowrap}
/* Trails (v0.6.99): a row of cards that ties an article, its companions and a vault together, so each
   piece is one click from the others. Written as `!trail <name>` in markdown or <!-- trail:<name> --> in
   a page; the items live in admin/content/trails.json. */
.trail{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin:1.6rem 0;box-shadow:var(--shadow)}
.trail-h{font-family:var(--serif);font-size:1.15rem;margin:0 0 2px}
.trail-n{color:var(--dim);font-size:.86rem;margin:0 0 10px}
.trail-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.trail-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);color:var(--fg);text-decoration:none;position:relative}
.trail-c:hover{border-color:var(--accent);text-decoration:none}
.trail-img{display:block;width:100%;aspect-ratio:1200/630;background:var(--panel2) center top/cover no-repeat;border-bottom:1px solid var(--line)}
.trail-b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.trail-k{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk)}
.trail-t{font-weight:650;font-size:.92rem;line-height:1.3}
.trail-d{font-size:.8rem;color:var(--dim);line-height:1.4}
.trail-l{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.trail-l a{font-size:.78rem;font-weight:600;border:1px solid var(--line2);border-radius:999px;padding:2px 9px;background:var(--panel)}
.trail-c.here{border:2px solid var(--accent)}
.trail-here{position:absolute;top:6px;right:6px;font-size:.66rem;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px}
@media (max-width:860px){.trail-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trail-row{grid-template-columns:minmax(0,1fr)}}
figure.shot--collage{margin:1.6rem 0}
ol.lkit-imgs{margin:.5rem 0 0;padding-left:1.4rem}
ol.lkit-imgs li{margin:.2rem 0}

/* Five readers: the views extracted from an article, under its abstract. One closed <details> with a
   one-line summary of what is inside; opening it shows the five readers, each closed in turn. */
details.aviews{margin:1.2rem 0 2rem;padding:.2rem 1.1rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}
details.aviews>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:.15rem .8rem;align-items:baseline;padding:.75rem 0}
details.aviews>summary::-webkit-details-marker{display:none}
details.aviews>summary::before{content:"\25B8";color:var(--accent);flex:none}
details.aviews[open]>summary::before{content:"\25BE"}
.aviews-t{font-family:var(--sans);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dk);font-weight:700}
.aviews-s{font-size:.86rem;color:var(--dim)}
details.aviews>p{margin:0 0 .7rem}
.aviews-more{border-top:1px solid var(--line);padding:.6rem 0 .4rem}
.aviews-more p{margin:.2rem 0}.aviews-more ul{margin:.2rem 0 .5rem}
.aviews>p{margin:0 0 .7rem}
details.aview{border-top:1px solid var(--line)}
details.aview summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;padding:.65rem 0}
details.aview summary::-webkit-details-marker{display:none}
details.aview summary::before{content:"\25B8";color:var(--accent);flex:none}
details.aview[open] summary::before{content:"\25BE"}
.aview-t{font-weight:700;color:var(--fg)}
.aview-r{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dk);background:var(--panel2);border-radius:999px;padding:.08rem .5rem}
.aview-s{font-size:.84rem;color:var(--dim);flex-basis:100%;padding-left:1.1rem}
.aview-b{padding:0 0 .9rem 1.1rem;font-size:.94rem}
.aview-b p{margin:.45rem 0}
.vdeck{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 0 .6rem}
.vdeck figure.shot{flex:0 0 min(62%,300px);margin:0;scroll-snap-align:start}
.vdeck figure.shot figcaption{text-align:center}
details.vkind{margin:.25rem 0}
details.vkind summary{cursor:pointer;font-size:.88rem;font-weight:600}
details.vkind summary .vn{color:var(--accent-dk);font-weight:700;margin-left:.3rem}
details.vkind ul{margin:.3rem 0 .6rem;font-size:.86rem}
details.vkind li{margin:.18rem 0}
details.vflags summary{color:var(--warm)}
@media print{details.aview .aview-b{display:block}.vdeck{flex-wrap:wrap}}
/* ---------- the reading meter: <sg-meter> hosts (v0.7.26; the component styles itself in its shadow root) ---------- */
sg-meter{display:block}
sg-meter.meter-nav{display:inline-block;min-width:3.4rem}
/* on a phone the balance takes the version's place in the top bar; the version is still in the footer */
@media (max-width:520px){nav.site a.ver{display:none}}
sg-meter.fband{margin-top:0}