/* ===========================================================
   Sistematik — Ghost theme
   Route 1, Institutional Precision.
   Light by default; a dark set follows the device's system setting.
   =========================================================== */

@font-face{font-family:'Maax';src:url('../fonts/maax-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Maax';src:url('../fonts/maax-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Maax';src:url('../fonts/maax-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Maax';src:url('../fonts/maax-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ============================================================
   SISTEMATIK — research / updates templates
   Tokens and patterns taken 1:1 from the one-pager.
   ============================================================ */
:root{
  --paper:#F6F5F1;
  --ink:#101214;
  --accent:#20474A;
  --amid:#3D6360;
  --tint:#EDF1F0;
  --tint2:#E2EAE8;
  --mute:#6B6B64;
  --faint:#9A9A92;
  --rule:#DFDED8;
  --surface:#FFFFFF;
  --scrim:rgba(16,18,20,.42);
  --err:#B8593F;
  --disp: var(--gh-font-heading, 'Maax'), 'Maax', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: var(--gh-font-body, 'Maax'), 'Maax', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* width of one underscore, so the hover underscore sits flush against the
     word with no gap. IBM Plex Mono advances .600em, Maax 300 .500em, 400
     .570em, 500 .604em — set per context where the font is not the mono. */
  --ulw:.6em;
  --pad:clamp(20px, 3.6vw, 52px);
  --w-page:1040px;
  --w-text:68ch;
  color-scheme:light;
}

/* ===========================================================
   DARK — follows the device's system setting, nothing to click.
   Same tokens, restated. Every rule below this point is shared,
   so the two schemes cannot drift apart.
   =========================================================== */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1011;
    --ink:#E8E7E1;
    --accent:#5FA8A4;
    --amid:#8FC3BD;
    --tint:#171B1C;
    --tint2:#1E2324;
    --mute:#94948C;
    --faint:#6E6E67;
    --rule:#272B2C;
    --surface:#15191A;
    --scrim:rgba(0,0,0,.62);
    --err:#E08A6E;
    color-scheme:dark;
  }
  /* covers and in-article images are usually light-ground charts; take the
     glare off without washing out photographs */
  .lead-img img,.thumb img,.rel-img img,.feature img,.prose img{filter:brightness(.92) contrast(1.02)}
  .lead:hover .lead-img img,.row:hover .thumb img,.rel:hover .rel-img img{filter:brightness(1) contrast(1.02)}
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.us{color:var(--accent)}
.wrap{max-width:var(--w-page);margin:0 auto}

/* underscore-on-hover link, the one-pager's signature interaction */
.ul{position:relative;padding-left:var(--ulw);text-decoration:none;transition:color .18s ease}
.ul::before{content:"_";position:absolute;left:0;top:0;color:var(--accent);opacity:0;transition:opacity .18s ease}
.ul:hover,.ul.on{color:var(--accent)}
.ul:hover::before,.ul.on::before{opacity:1}

/* ---------- SHELL ---------- */
.shell{min-height:100svh;display:flex;flex-direction:column;padding:var(--pad)}
main{flex:1;width:100%}

/* ---------- TOP NAV (identical to one-pager) ---------- */
.nav{position:sticky;top:0;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:20px;
  background:var(--paper);margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 14px;
  border-bottom:1px solid transparent;transition:transform .28s ease,border-color .28s ease}
.nav.hide{transform:translateY(calc(-100% - 4px))}
.nav.stuck{border-bottom-color:var(--rule)}
.navdrop{justify-self:end}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.mark{display:inline-flex;align-items:baseline;font-family:var(--disp);font-weight:300;font-size:26px;
  letter-spacing:-0.02em;line-height:1;text-decoration:none;color:var(--ink)}
.markbar{color:var(--accent);transition:color .18s ease}
.mark:hover .markbar{color:var(--amid)}
.navlinks{display:flex;align-items:baseline;gap:clamp(18px,2.4vw,32px)}
.navlinks a,.navlinks button{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:0 0 0 12px}

.navdrop{position:relative;display:flex;align-items:center;justify-self:end}
.menubtn::before{content:none!important}
.menubtn{background:none;border:0;padding:0;margin:0;line-height:0;cursor:pointer;color:var(--ink);
  -webkit-appearance:none;appearance:none;transition:color .18s ease}
.menubtn svg{width:22px;height:11px;display:block;overflow:visible}
.menubtn:hover,.menubtn[aria-expanded="true"]{color:var(--accent)}
.navmenu{position:absolute;top:calc(100% + 14px);right:0;z-index:60;background:var(--paper);border:1px solid var(--rule);
  padding:6px 0;min-width:160px;display:flex;flex-direction:column}
.navmenu[hidden]{display:none}
.navmenu a,.navmenu button{display:block;width:100%;text-align:left;padding:7px 18px 7px 18px;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.navmenu .ul{padding-left:calc(18px + var(--ulw))}
.navmenu .ul::before{left:18px;top:7px}
/* an item can hide itself — display:block above would otherwise beat [hidden] */
.navmenu a[hidden],.navmenu button[hidden]{display:none}

/* ---------- LABELS ---------- */
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--mute)}
.cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--accent);text-decoration:none}
.cat:hover{color:var(--amid)}

/* ---------- INDEX LISTS ---------- */
.lib-head{padding:clamp(56px,11vh,120px) 0 clamp(28px,4vh,44px)}
.lib-head h1,.pagetitle{font-family:var(--disp);font-weight:300;letter-spacing:-.03em;
  font-size:clamp(2.5rem,7vw,5rem);line-height:.95}
.lib-head h1 .us{margin-right:.04em}
.lib-head p{margin-top:clamp(16px,2.4vw,26px);max-width:46ch;font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:300;line-height:1.5}
.filters{display:flex;gap:6px 22px;flex-wrap:wrap;padding-bottom:14px;font-family:var(--mono);font-size:12px}
.filters a{color:var(--mute)}
.filters a.on{color:var(--accent)}

.list{list-style:none;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:96px 1fr 68px;gap:22px;padding:22px 4px;border-bottom:1px solid var(--rule);
  align-items:baseline;transition:background .18s ease}
.row:hover{background:var(--tint)}
.row .date,.row .rt{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.02em}
/* nowrap: on a narrow screen the date column shrinks to min-content, which
   would otherwise break "~7 min" across two lines */
.row .date{display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.rtime{color:var(--mute);opacity:.85}
.row .rt{text-align:right}
.row h2{font-family:var(--disp);font-size:1.1875rem;font-weight:400;letter-spacing:-.01em;line-height:1.3}
.row h2 a{text-decoration:none;transition:color .18s ease}
.row:hover h2 a{color:var(--accent)}
.row p{margin-top:6px;font-size:.9375rem;font-weight:300;line-height:1.55;color:var(--mute);max-width:62ch}
@media(max-width:760px){.row{grid-template-columns:auto 1fr;gap:4px 16px}.row > div{grid-column:1/-1;order:3}.row .rt{text-align:left}}

/* index thumbnails */
.thumb{display:block;width:150px;aspect-ratio:3/2;overflow:hidden;background:var(--tint);align-self:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease}
.row:hover .thumb img{opacity:.88}
.thumb-empty{background:none}
@media(max-width:760px){
  .row-2{grid-template-columns:auto 1fr}
  .thumb{grid-column:1/-1;order:2;width:100%;aspect-ratio:16/9;margin:4px 0 2px}
  .thumb-empty{display:none}
  .row > div{order:3}
}

.pager{display:flex;justify-content:space-between;padding:22px 4px 0;font-family:var(--mono);font-size:11px;color:var(--mute)}
.pager a{color:var(--ink)}

/* ---------- NEWSLETTER SIGNUP BLOCK ---------- */
.nl{margin-top:clamp(64px,10vh,110px);background:var(--tint);padding:clamp(24px,3vw,38px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.nl h3{margin:0;font-family:var(--disp);font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:400;letter-spacing:-.02em;line-height:1.25;max-width:26ch}
.nl p{margin-top:8px;font-size:.875rem;font-weight:300;line-height:1.6;color:var(--mute);max-width:48ch}
.nlmail{font-family:var(--disp);font-size:.9375rem;color:var(--ink);background:var(--surface);border:1px solid var(--rule);
  padding:12px 14px;border-radius:0;min-width:240px}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{font-family:var(--disp);font-size:.9375rem;color:var(--paper);background:var(--accent);border:1px solid var(--accent);
  padding:13px 28px;cursor:pointer;border-radius:0;transition:opacity .18s ease;text-decoration:none}
.btn:hover{opacity:.87}

/* ---------- ARTICLE ---------- */
.art-head{padding:clamp(48px,9vh,100px) 0 clamp(28px,4vh,44px);border-bottom:1px solid var(--rule)}
.post-offset .art-head .inner,.post-offset .related,.post-offset .nl{max-width:var(--w-text)}
.post-offset .art-head .inner,.post-offset .related,.post-offset .nl,.post-offset .art-grid{margin-left:calc(200px + clamp(32px,5vw,72px))}
@media(max-width:1000px){.post-offset .art-head .inner,.post-offset .related,.post-offset .nl,.post-offset .art-grid{margin-left:0;max-width:none}}
.crumbs{font-family:var(--mono);font-size:11px;color:var(--mute);margin-bottom:clamp(20px,3vh,34px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.art-head h1{font-family:var(--disp);font-weight:300;letter-spacing:-.025em;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;max-width:22ch}
.art-head .dek{margin-top:clamp(16px,2.4vw,24px);font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;line-height:1.5;max-width:50ch}
.byline{margin-top:clamp(24px,3.5vh,36px);display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--mute)}
.byline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.byline a:hover{color:var(--accent);border-color:var(--accent)}
.byline a.cat{color:var(--accent);border:0}

.art-grid{display:grid;grid-template-columns:minmax(0,var(--w-text));padding-top:clamp(36px,6vh,60px)}
.post-offset .art-grid{position:relative}
.toc[hidden]{display:none}
/* the contents list is set in the body face, whose underscore is narrower */
.toc{--ulw:.5em}
.toc{position:absolute;left:calc(-200px - clamp(32px,5vw,72px));top:clamp(36px,6vh,60px);bottom:0;width:200px}

@media(max-width:1000px){.art-grid{grid-template-columns:minmax(0,1fr)}}

.toc-sticky{position:sticky;top:96px}
.toc .label{display:block;margin-bottom:12px}
.toc ol{list-style:none}
.toc li a{display:block;position:relative;padding:5px 0 5px var(--ulw);font-size:.8125rem;font-weight:300;line-height:1.4;text-decoration:none;color:var(--mute);transition:color .18s ease}
.toc li a::before{content:"_";position:absolute;left:0;top:5px;color:var(--accent);opacity:0;transition:opacity .18s ease}
.toc li a:hover,.toc li a.on{color:var(--accent)}
.toc li a.on::before{opacity:1}
@media(max-width:1000px){.toc{position:static;width:auto;left:auto;bottom:auto;background:var(--tint);padding:16px 18px;margin-bottom:28px}}
.art-grid.no-toc .toc{display:none}

.prose{font-size:1.0625rem;font-weight:300;line-height:1.75}
.prose > * + *{margin-top:1.05em}
.prose strong{font-weight:500}
.prose h2{font-family:var(--disp);font-weight:400;font-size:1.5rem;letter-spacing:-.015em;line-height:1.25;
  margin-top:2.4em;padding-top:22px;border-top:1px solid var(--rule);scroll-margin-top:56px}
.prose h2 .n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--accent);margin-bottom:10px;font-weight:400}
.prose h3{font-family:var(--disp);font-weight:400;font-size:1.125rem;margin-top:1.9em;letter-spacing:-.01em}
.prose h3 + p{margin-top:.5em}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.prose a:hover{color:var(--accent);border-color:var(--accent)}
/* lists — the global reset strips indent and spacing, so both are set here */
.prose ul,.prose ol{padding-left:1.35em;max-width:62ch}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:.65em;padding-left:.35em;line-height:1.65}
.prose li:first-child{margin-top:0}
.prose li::marker{color:var(--mute)}
.prose ol > li::marker{font-family:var(--mono);font-size:.82em}
.prose li > ul,.prose li > ol{margin-top:.65em}
.prose li p{margin:0}
.prose li p + p{margin-top:.5em}
/* Anything can arrive from the Ghost editor: a long URL, a wallet address, a
   six-column table, a line of code. None of it may widen the page. */
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}
.prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;
  font-size:.875rem;font-weight:300;margin:clamp(24px,4vh,40px) 0}
.prose th{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--mute);text-align:left;
  letter-spacing:.02em;padding:0 14px 10px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.prose td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose pre{max-width:100%;overflow-x:auto;background:var(--tint);padding:16px 18px;
  margin:clamp(24px,4vh,40px) 0;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.prose pre code{white-space:pre;background:none;padding:0;font-size:inherit}
.prose code{font-family:var(--mono);font-size:.875em;background:var(--tint);padding:2px 5px}
.prose blockquote{font-family:var(--disp);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.4;letter-spacing:-.01em;
  margin:1.8em 0!important;padding-left:22px;border-left:1px solid var(--accent)}
.prose sup a{font-family:var(--mono);font-size:10px;color:var(--accent);border:0;padding:0 2px}

.callout{background:var(--tint);padding:16px 18px;font-size:.9375rem;line-height:1.65}
.callout .label{display:block;color:var(--amid);margin-bottom:6px}

figure{margin:2.2em 0!important}
.fig-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.fig-title{font-family:var(--disp);font-size:.9375rem;font-weight:400}
.fig-no{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
figcaption{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.02em;line-height:1.7}
figcaption .warn{color:var(--err)}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.chart text.val{fill:var(--ink)}
.dt{width:100%;border-collapse:collapse;font-size:.875rem;font-weight:300}
.dt th{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--mute);text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--rule);letter-spacing:.02em}
.dt td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.dt td:first-child{font-family:var(--mono);font-size:11.5px;color:var(--accent);white-space:nowrap}
.tscroll{overflow-x:auto}

.notes{margin-top:3em!important;padding-top:20px;border-top:1px solid var(--rule);font-size:.8125rem;line-height:1.65;color:var(--mute)}
.notes ol{padding-left:20px}
.notes li + li{margin-top:.6em}
.notes li::marker{font-family:var(--mono);font-size:10.5px}
.notes a{border:0;color:var(--accent)}

.share{margin-top:2.4em!important;display:flex;gap:6px 22px;flex-wrap:wrap;align-items:baseline;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.share a{border:0;color:var(--ink)}
.share a:hover{color:var(--accent)}
.share button{margin:0;padding:0 0 0 var(--ulw);background:none;border:0;font:inherit;line-height:inherit;
  color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.share button:hover{color:var(--accent)}
.disc{margin-top:1.6em!important;font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--mute);letter-spacing:.01em}

.related{margin-top:clamp(64px,10vh,110px)}
.related .label{display:block;padding-bottom:12px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.rel{display:block;padding:20px 22px 24px 4px;text-decoration:none;border-bottom:1px solid var(--rule);transition:background .18s ease}
/* cover thumbnail on a card; the empty variant holds the space so titles line up */
.rel-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--tint);margin-bottom:4px}
.rel-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease}
.rel:hover .rel-img img{opacity:.88}
.rel-img-empty{background:none}
.rel:hover{background:var(--tint)}
.rel h3{margin-top:10px;font-family:var(--disp);font-size:1.0625rem;font-weight:400;line-height:1.35;letter-spacing:-.01em;transition:color .18s ease}
.rel:hover h4{color:var(--accent)}
.rel .date{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr}}

/* ===========================================================
   NEWSLETTER SIGNUP FORM (partials/signup-form.hbs)
   Reuses the modal's .field / .fgrid / .btn; everything below is the
   block frame, the consent row and the four states.
   =========================================================== */
.sform-wrap{margin-top:clamp(64px,10vh,110px);background:var(--tint);padding:clamp(24px,3vw,38px);max-width:var(--w-page)}
.sform-wrap > .label{display:block;margin-bottom:12px}
.sform-title{font-family:var(--disp);font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:400;
  letter-spacing:-.02em;line-height:1.25;max-width:26ch}
.sform-lede{margin-top:8px;font-size:.875rem;font-weight:300;line-height:1.6;color:var(--mute);max-width:52ch}
.sform{margin-top:18px;max-width:560px}
.sform .fgrid{margin-top:22px}
.sform .field select{appearance:none;-webkit-appearance:none;padding-right:34px;background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-size:5px 5px,5px 5px;background-position:right 17px top 50%,right 13px top 50%}
.sform .req{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--mute);margin-left:4px}
.sform .hint{margin-top:6px;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--mute)}
.sform [aria-invalid="true"]{border-color:var(--err);border-width:2px}

/* consent: checkbox and its wording on one row, the box never shrinking */
.sform .consent{margin-top:20px;display:flex;gap:10px;align-items:flex-start}
.sform .consent input{flex:none;width:16px;height:16px;margin-top:2px;accent-color:var(--accent)}
.sform .consent label{margin:0;font-family:var(--body);font-size:.8125rem;font-weight:300;
  line-height:1.6;color:var(--mute);letter-spacing:0;text-transform:none}
.sform .consent label a{color:var(--ink);border-bottom:1px solid var(--rule)}
.sform .consent label a:hover{color:var(--accent);border-color:var(--accent)}

.sform-note{margin-top:16px;font-family:var(--mono);font-size:10px;line-height:1.75;color:var(--mute);max-width:62ch}
.sform-note a{color:var(--mute);border-bottom:1px solid var(--rule)}
.sform .consent + .consent{margin-top:14px}
.sform-submit{margin-top:22px}
.sform-submit[disabled]{opacity:.6;cursor:default}

/* error: text, a mark and a border change — never colour on its own */
.sform-error{margin-top:14px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--err)}
.sform-error:empty{display:none}
.sform-error.on::before{content:"! ";font-weight:700}
.sform-done{margin-top:20px;padding:18px 20px;background:var(--surface);border:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--accent)}
@media(max-width:480px){
  .sform{max-width:none}
  .sform .consent label{font-size:.875rem}
}

/* ---------- AUTHOR ---------- */
.auth-head{padding:clamp(56px,11vh,120px) 0 clamp(28px,4vh,44px);max-width:60ch}
.auth-head .role{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--mute)}
.auth-head p{margin-top:18px;font-size:clamp(1rem,1.4vw,1.125rem);font-weight:300;line-height:1.6}
.auth-head .links{margin-top:18px;display:flex;gap:20px;font-family:var(--mono);font-size:12px}

/* ---------- STATIC PAGE (matches one-pager .doc) ---------- */
.pg{max-width:74ch;margin:clamp(40px,7vh,84px) auto 0}
.pg h1{font-family:var(--disp);font-weight:300;letter-spacing:-.02em;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.1}
.pg .updated{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.pg .body{margin-top:clamp(24px,4vh,40px);font-size:.9375rem;font-weight:300;line-height:1.7}
.pg .body h2{margin:clamp(34px,5vh,54px) 0 12px;font-family:var(--disp);font-weight:400;font-size:1.25rem;letter-spacing:-.01em;padding-top:20px;border-top:1px solid var(--rule)}
.pg .body p{margin:0 0 14px}
.imprint{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(20px,2.4vw,32px)}
.ientry dt{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.02em}
.ientry dd{margin:6px 0 0;font-size:.875rem;font-weight:300;line-height:1.6}
.todo{color:var(--err)}

/* ---------- 404 ---------- */
.nf{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.nf .code{font-family:var(--disp);font-weight:300;font-size:clamp(3rem,12.5vw,10.5rem);letter-spacing:-.03em;line-height:.95}
.nf .code .us{margin-right:.04em}
.nf p{margin-top:clamp(20px,2.8vw,34px);font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;line-height:1.5;max-width:40ch}
.nf .ul{margin-top:clamp(28px,5vh,56px);font-family:var(--mono);font-size:13px}

/* ---------- FOOTER BAR (identical to one-pager) ---------- */
.bar{margin-top:clamp(64px,10vh,110px);padding-top:14px;border-top:1px solid var(--rule);display:grid;
  grid-template-columns:1fr auto 1fr;gap:10px 24px;align-items:baseline;text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--mute)}
.bar nav{display:flex;gap:20px;flex-wrap:wrap;justify-self:start;text-align:left}
.bar > span:last-child{justify-self:end;text-align:right}
@media(max-width:620px){.bar{grid-template-columns:1fr;text-align:center;justify-items:center;gap:8px}
  .bar nav,.bar > span:last-child{justify-self:center;text-align:center}
  .bar nav{justify-content:center}}
.bar nav button{background:none;border:0;padding:0 0 0 var(--ulw);font:inherit;color:inherit;cursor:pointer}
.bar a{text-decoration:none;transition:color .18s ease}
.bar a:hover{color:var(--accent)}

/* ---------- NEWSLETTER MODAL ---------- */
.scrim{position:fixed;inset:0;z-index:100;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,4vh,48px) 16px;overflow-y:auto}
.scrim[hidden]{display:none}
.modal{position:relative;background:var(--paper);border:1px solid var(--rule);width:100%;margin:auto}
.modal-wide{max-width:620px}
.mclose{position:absolute;top:10px;right:12px;z-index:2;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:18px;line-height:1;color:var(--mute);padding:6px 8px}
.mclose:hover{color:var(--accent)}

/* the form drops its tinted frame when it sits inside the modal */
.sform-wrap.in-modal{margin-top:0;background:none;padding:clamp(24px,3vw,34px);max-width:none}
.sform-wrap.in-modal .sform{max-width:none}
.nlcta{margin-top:clamp(28px,4vh,40px)}

/* ---------- FORM FIELDS (shared by the signup form) ---------- */
.fgrid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1 / -1}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.02em;margin-bottom:5px}
.field input,.field select{width:100%;font-family:var(--disp);font-size:.9375rem;color:var(--ink);background:var(--surface);border:1px solid var(--rule);padding:11px 12px;border-radius:0}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}

.kind{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.02em;text-align:right}
.sechead{padding:clamp(48px,8vh,96px) 0 clamp(20px,3vh,32px)}
.sechead h2{font-family:var(--disp);font-weight:300;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1}
.sechead p{margin-top:12px;max-width:52ch;font-size:.9375rem;font-weight:300;line-height:1.6;color:var(--mute)}
.embed{aspect-ratio:16/9;background:var(--tint2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.02em}
.readbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--paper);border-top:1px solid var(--rule);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.readbar.in{transform:none}
.readbar .in-wrap{max-width:var(--w-page);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.readbar p{font-size:.875rem;font-weight:300;line-height:1.4;flex:1;min-width:220px}
.readbar .btn{padding:10px 22px;font-size:.875rem}
.readbar .x{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:15px;color:var(--mute);padding:2px 4px;line-height:1}
.readbar .x:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.readbar{transition:none}}

/* ===========================================================
   HOMEPAGE (the one-pager) — hero, icons, contact modal
   =========================================================== */
.page{min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-family:var(--mono);font-size:12px;z-index:100}
.skip:focus{left:var(--pad)}

.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(24px,4vh,56px) 0 0}
.wordmark{font-size:clamp(2.7rem, 11.25vw, 9.45rem);font-weight:300;letter-spacing:-0.03em;line-height:.95;white-space:nowrap}
.cur{color:var(--accent);margin-left:.0775em}
.claim{margin-top:clamp(20px,2.8vw,34px);text-wrap:balance;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;line-height:1.5;max-width:46ch}
.cbr{display:inline}
@media(max-width:560px){.cbr{display:none}}

.iconrow{position:relative;margin-top:clamp(24px,3.2vw,38px);display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,2.8vw,34px)}
.ico{position:relative;display:block;padding:4px;color:var(--ink);background:none;border:none;cursor:pointer;transition:color .18s ease}
.ico:hover,.ico:focus-visible{color:var(--accent)}
.ico svg{display:block;width:20px;height:20px;fill:currentColor;vertical-align:middle;overflow:visible}
.ilab{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--accent);white-space:nowrap;
  opacity:0;transition:opacity .18s ease;pointer-events:none}
.ico:hover .ilab,.ico:focus-visible .ilab{opacity:1}

.herolinks{position:absolute;left:0;right:0;top:calc(100% + clamp(30px,4.5vh,52px));
  display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,40px)}
.herolinks a,.herolinks button{position:relative;padding:4px 0 4px var(--ulw);background:none;border:none;cursor:pointer;
  text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--ink);transition:color .18s ease}
.herolinks a::before,.herolinks button::before{content:"_";position:absolute;left:0;top:4px;color:var(--accent);opacity:0;transition:opacity .18s ease}
.herolinks a:hover,.herolinks a:focus-visible,.herolinks button:hover,.herolinks button:focus-visible{color:var(--accent)}
.herolinks a:hover::before,.herolinks a:focus-visible::before,
.herolinks button:hover::before,.herolinks button:focus-visible::before{opacity:1}

.home-template .bar{margin-top:clamp(26px,3.5vh,44px)}

/* members form states, driven by Ghost Portal */
#ghost-portal-root .gh-portal-triggerbtn-iframe{display:none !important}

/* entrance sequence, homepage only */
@media(prefers-reduced-motion:no-preference){
  .seq{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .s1{animation-delay:.05s} .s2{animation-delay:.22s} .s3{animation-delay:.38s}
  .s4{animation-delay:.52s} .s5{animation-delay:.64s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ===========================================================
   KOENIG EDITOR CARDS — what the Ghost editor outputs
   =========================================================== */
.prose :is(.kg-width-wide,.kg-width-full){max-width:none}
.prose .kg-width-wide{width:min(100%,900px);margin-left:50%;transform:translateX(-50%)}
.prose .kg-card,.prose figure{margin:clamp(24px,4vh,40px) 0}
.prose .kg-card img,.prose figure img{width:100%;height:auto;display:block}
.prose figcaption{text-align:left}
.prose .kg-embed-card,.prose .kg-video-card{display:block}
.prose .kg-embed-card iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.prose .kg-bookmark-card a{display:block;border:1px solid var(--rule);padding:18px 20px;text-decoration:none;background:var(--surface)}
.prose .kg-bookmark-title{font-family:var(--disp);font-size:1rem}
.prose .kg-bookmark-description{font-size:.875rem;color:var(--mute);margin-top:6px}
.prose blockquote.kg-blockquote-alt{font-size:1.0625rem}
.prose .kg-callout-card{background:var(--tint);padding:20px 22px;display:flex;gap:12px}
.prose .kg-toggle-card{border-top:1px solid var(--rule);padding-top:14px}

/* feature image on an article */
.feature{margin:clamp(26px,4vh,40px) 0 0;padding:0}
.feature img{width:100%;height:auto;display:block;background:var(--tint)}
.feature figcaption{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--mute);line-height:1.7}

/* the index row with a thumbnail column. Scoped to the wide layout on purpose:
   unscoped it either loses to .row above it or beats the narrow override below
   it, depending where it sits, and one of those is always wrong. */
@media(min-width:761px){.row-2{grid-template-columns:104px 150px minmax(0,1fr)}}

/* index rows keep the listing readable when an excerpt is missing */
.row-2 p:empty{display:none}
/* a post that is not offset still keeps a comfortable measure */
.prose{max-width:var(--w-text)}

/* the brand S in front of a section heading, set as a small cap */
.sc{font-variant:small-caps;font-variant-caps:small-caps}

/* lowercase display, used where the brand sets a word in small type */
.lc{text-transform:lowercase}
.page-feature{width:100%;height:auto;display:block;margin:clamp(20px,3vh,32px) 0}

/* gallery + product cards from the Ghost editor */
.kg-gallery-container{display:flex;flex-direction:column;gap:8px}
.kg-gallery-row{display:flex;flex-direction:row;justify-content:center;gap:8px}
.kg-gallery-image img{display:block;width:100%;height:100%;margin:0}
.kg-product-card{border:1px solid var(--rule);padding:clamp(18px,2.5vw,28px);background:var(--surface)}
.kg-product-card-container{display:flex;flex-direction:column;gap:10px}
.kg-product-card-image{width:100%;height:auto;display:block}
.kg-product-card-title-container{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.kg-product-card-title{font-family:var(--disp);font-size:1.0625rem;font-weight:400;margin:0}
.kg-product-card-description{font-size:.9375rem;font-weight:300;color:var(--mute);line-height:1.6}
.kg-product-card-rating{display:flex;gap:2px;color:var(--rule)}
.kg-product-card-rating-active{color:var(--accent)}
.kg-product-card-rating-star{width:16px;height:16px;fill:currentColor}
.kg-product-card-button,.kg-product-card-btn-accent{display:inline-block;font-family:var(--disp);font-size:.9375rem;
  padding:12px 24px;border:1px solid var(--accent);text-decoration:none}
.kg-product-card-btn-accent{background:var(--accent);color:var(--paper)}