/* praevidere — Ember palette, Instrument type. Source of truth: brand/tokens/*.css.
   The void is the canvas; the chrome measures. Archivo carries display and body by width,
   Newsreader italic is the one editorial interruption, Martian Mono labels every number. */
:root{
  /* type */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --it:"Newsreader","Iowan Old Style",Georgia,serif;
  --mono:"Martian Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* color — Ember: one accent that emits (signal), peach for every door (links, hovers, active) */
  --void:#0e0c0b; --paper:var(--void);
  --surface-glass:rgba(24,20,18,.74); --surface-math:rgba(24,20,18,.6);
  --ink:#f6efea; --ink-body:rgba(246,239,234,.74); --ink-label:rgba(246,239,234,.56); --ink-quiet:rgba(246,239,234,.44);
  --ink-lede:rgba(246,239,234,.82); --ink-standfirst:rgba(246,239,234,.66);
  --hairline:rgba(255,225,205,.09);
  --acc:#ff6a1a; --acc-text:#ff7d38; --acc2:#ffd7b0; --acc-active:var(--acc2);
  --acc-glow:rgba(255,106,26,.5);
  --chrome-glass:rgba(14,12,11,.74); --ask-band:rgba(255,215,176,.06);

  /* chrome — one place for header, footer and landing bar; a 345px viewport holds each bar on one row */
  --chrome-fs:clamp(8.5px,2.5vw,10px); --chrome-fs-dest:clamp(9.5px,2.8vw,11px); --chrome-track:.14em;
  --chrome-gap:clamp(10px,3vw,28px); --chrome-pad-x:clamp(16px,5vw,30px); --chrome-pad-y:clamp(16px,4vw,20px);
  --wm-size:clamp(13.5px,3.9vw,19px);

  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--void);color:var(--ink-body);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc);color:var(--void)}
strong{font-weight:500;color:var(--ink)}
#bg{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- landing chrome ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(180deg,rgba(14,12,11,0),rgba(14,12,11,.82) 40%,var(--void));
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;
  padding:40px var(--chrome-pad-x) calc(22px + env(safe-area-inset-bottom,0px));
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  pointer-events:none;
}
body.resolved .bar{opacity:1;transform:none}
.bar a,.bar .soc{pointer-events:auto}
/* #NOTE: the landing keeps the gradient fade over the field; subpage footers mirror the header — a glass plate so the sampling never reads through the legal line */
footer.bar{background:var(--chrome-glass);border-top:1px solid var(--hairline);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);align-items:center;gap:16px;padding:calc(var(--chrome-pad-y) - 4px) var(--chrome-pad-x) calc(var(--chrome-pad-y) - 4px + env(safe-area-inset-bottom,0px))}
.links{display:flex;flex-wrap:wrap;gap:10px var(--chrome-gap);align-items:center;min-width:0}
.links a{
  font-family:var(--mono);font-size:var(--chrome-fs-dest);letter-spacing:var(--chrome-track);font-weight:500;text-transform:uppercase;white-space:nowrap;color:var(--ink);
  text-decoration:none;display:flex;gap:10px;align-items:baseline;padding:6px 0;
  border-top:1px solid transparent;transition:color .3s,border-color .3s;
}
.links .n{font-size:9px;letter-spacing:.1em;color:var(--acc-text)}
.links a:hover{color:var(--acc2);border-top-color:var(--acc)}
.fine{display:flex;flex:none;justify-content:flex-end;gap:var(--chrome-gap);align-items:baseline;white-space:nowrap;font-family:var(--mono);font-size:var(--chrome-fs);letter-spacing:var(--chrome-track);font-weight:500;text-transform:uppercase;color:var(--ink-label)}
.fine a{color:var(--ink-label);text-decoration:none;transition:color .3s;padding:6px 0}
.fine a:hover,.fine a.here{color:var(--acc-active)}
.wm:focus-visible,.nav a:focus-visible,.links a:focus-visible,.fine a:focus-visible,.soc:focus-visible,.sec a:focus-visible,.cta .mail:focus-visible,.index a:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.soc-links{display:flex;gap:8px;align-items:center}
.soc{display:inline-flex;flex:none;align-items:center;justify-content:center;width:clamp(24px,6.5vw,26px);height:clamp(24px,6.5vw,26px);border:1px solid var(--hairline);color:var(--ink-quiet);transition:border-color .3s,color .3s}
.soc svg{width:12px;height:12px;display:block}
.soc:hover{border-color:var(--acc2);color:var(--acc2)}

/* ---------- subpage chrome ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:var(--chrome-pad-y) var(--chrome-pad-x);background:var(--chrome-glass);border-bottom:1px solid var(--hairline);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.wm{display:inline-flex;align-items:center;font-family:var(--display);font-stretch:125%;font-weight:350;font-size:var(--wm-size);letter-spacing:.01em;line-height:1.2;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .3s}
/* #NOTE: the spacing sits on the mark, not as flex gap; a gap would also land between "Præ", the dot and "videre", which are anonymous flex items */
.wm-mark{width:1.3em;height:1.3em;display:block;margin-right:.1em}
/* #NOTE: Archivo's interpunct carries ~.3em of side bearing in the expanded cut; measured at 120px, -.05em leaves ~.15em of ink gap to æ and to v */
.wm span{color:var(--acc);font-weight:600;margin:0 -.05em}
.wm:hover{color:var(--acc-active)}
.nav{display:flex;flex:none;gap:var(--chrome-gap)}
.nav a{font-family:var(--mono);font-size:var(--chrome-fs);letter-spacing:var(--chrome-track);font-weight:500;text-transform:uppercase;white-space:nowrap;color:var(--ink-label);text-decoration:none;transition:color .3s;padding:8px 0}
.nav a:hover,.nav a.here{color:var(--acc-active)}

/* ---------- reading column ---------- */
main{
  position:relative;z-index:1;max-width:720px;margin:0 auto;padding:15vh 30px 14vh;
  background:
    radial-gradient(ellipse 130% 100% at 50% 42%, rgba(14,12,11,.97) 0%, rgba(14,12,11,.84) 55%, rgba(14,12,11,.42) 100%),
    linear-gradient(180deg, rgba(14,12,11,.5) 0%, rgba(14,12,11,0) 28%, rgba(14,12,11,0) 58%, rgba(14,12,11,.72) 100%);
}
.kicker{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.36em;font-weight:500;text-transform:uppercase;color:var(--acc-text);margin-bottom:4vh}
.kicker::before{content:"";flex:none;width:44px;height:1px;background:var(--hairline)}
h1{font-family:var(--display);font-stretch:125%;font-weight:280;font-size:clamp(34px,4.3vw,58px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
h1.h-flow{font-size:clamp(30px,3.7vw,48px);line-height:1.08}
h1 em{font-family:var(--it);font-style:italic;font-weight:400;font-stretch:100%;font-size:1.08em;letter-spacing:-.01em;color:var(--acc);text-shadow:0 0 22px var(--acc-glow)}
.lede{margin-top:3.5vh;font-family:var(--sans);font-stretch:108%;font-weight:350;font-size:17.5px;line-height:1.66;color:var(--ink-lede)}
.status{display:inline-flex;gap:14px;align-items:center;margin-top:4vh;font-family:var(--mono);font-size:10px;letter-spacing:.26em;font-weight:500;text-transform:uppercase;color:var(--ink-label)}
.status i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px 1px var(--acc-glow);display:block}

/* ---------- specimen ---------- */
.spec{margin:10vh 0;background:var(--surface-glass);border:1px solid var(--hairline);padding:34px 4.5% 26px;border-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.spec-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.24em;font-weight:500;text-transform:uppercase;color:var(--ink-label)}
.spec-head{padding-bottom:18px;border-bottom:1px solid var(--hairline)}
.spec-head b{font-weight:500;color:var(--acc-text)}
.spec-q{font-family:var(--sans);font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:var(--ink);margin:3vh 0 2vh}
.spec-q .pct{font-family:var(--it);font-style:italic;font-size:1.08em;color:var(--acc);text-shadow:0 0 18px var(--acc-glow)}
.spec-note{font-size:16px;line-height:1.7;margin-top:2vh}
.spec-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--hairline)}
.q-kinds{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;font-weight:500;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:12px}
.film{position:relative;border:1px solid var(--hairline);background:var(--void);border-radius:4px;overflow:hidden}
.film video{display:block;width:100%;height:auto;cursor:pointer;border-radius:4px}
.film video:fullscreen,.film video:-webkit-full-screen{background:var(--void)}
.film-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:40px 14px 10px;background:linear-gradient(180deg,rgba(14,12,11,0),rgba(14,12,11,.9) 60%);opacity:0;transition:opacity .35s var(--ease)}
.film:hover .film-bar,.film:focus-within .film-bar{opacity:1}
@media (hover:none){.film-bar{opacity:1}}
.film-btn{appearance:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--acc);opacity:.85;transition:opacity .3s,transform .3s;display:inline-flex;align-items:center;justify-content:center}
.film-btn:hover{opacity:1;transform:scale(1.08);color:var(--ink)}
.film-btn svg{width:16px;height:16px;display:block;fill:currentColor}
.film-btn svg[hidden]{display:none}
.film-btn:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.film-btn:disabled{color:var(--ink-quiet);cursor:default}
/* #NOTE: seek track is a 2px hairline filled in signal up to the playhead (--p, set by the page), with the film's own 3px progress tick as the handle */
.film-seek{flex:1;min-width:0;height:24px;margin:0 6px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--p:0%}
.film-seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--acc) var(--p),rgba(246,239,234,.22) var(--p))}
.film-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:3px;height:14px;margin-top:-6px;border:0;border-radius:0;background:var(--acc);box-shadow:0 0 10px var(--acc-glow);transition:transform .3s var(--ease)}
.film-seek::-moz-range-track{height:2px;background:rgba(246,239,234,.22)}
.film-seek::-moz-range-progress{height:2px;background:var(--acc)}
.film-seek::-moz-range-thumb{width:3px;height:14px;border:0;border-radius:0;background:var(--acc);box-shadow:0 0 10px var(--acc-glow)}
.film-seek:hover::-webkit-slider-thumb,.film-seek:active::-webkit-slider-thumb{transform:scaleY(1.3)}
.film-seek:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.film-seek:disabled{cursor:default;opacity:.4}
.film-time{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;font-weight:500;color:var(--ink-label);white-space:nowrap}
.film-fail{padding:18vh 24px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;font-weight:500;color:var(--ink-label)}

/* ---------- closing call ---------- */
.cta{margin:12vh 0 9vh}
.cta h2{font-family:var(--display);font-stretch:125%;font-weight:280;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.cta h2 em{font-family:var(--it);font-style:italic;font-weight:400;font-stretch:100%;font-size:1.1em;letter-spacing:-.01em}
.cta p{margin-top:2.5vh;max-width:540px}
.cta .mail{font-family:var(--sans);font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--acc2);padding-bottom:1px;transition:color .35s,border-color .35s}
.cta .mail:hover{color:var(--acc-active)}

/* ---------- book a call ---------- */
/* #NOTE: one door to the scheduler in three places — the header (desktop), the landing bar, and the reading column (.book-row). Outlined in signal everywhere; .solid fills it for the page's closing ask. Links carry the Calendly URL, assets/book.js turns them into an overlay */
.book{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 18px;border:1px solid var(--acc);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;font-weight:500;text-transform:uppercase;white-space:nowrap;color:var(--ink);text-decoration:none;transition:color .3s,border-color .3s,background-color .3s}
.book:hover{color:var(--acc2);border-color:var(--acc2)}
.book.solid{background:var(--acc);color:var(--void)}
.book.solid:hover{background:var(--acc2);border-color:var(--acc2);color:var(--void)}
.book .arr{transition:transform .35s var(--ease)}
.book:hover .arr{transform:translateX(3px)}
.book[aria-busy="true"]{cursor:progress}
.book:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.book-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4vh}
.book-note{font-family:var(--mono);font-size:10px;letter-spacing:.2em;font-weight:500;text-transform:uppercase;color:var(--ink-label)}
/* #NOTE: the header has no room for a fourth item below 560px; phones reach the scheduler from the reading column and the landing bar instead */
.nav{align-items:center}
.nav a.book{display:none;min-height:30px;padding:0 12px;font-size:var(--chrome-fs);letter-spacing:var(--chrome-track);color:var(--ink)}
.nav a.book:hover{color:var(--acc2)}
/* #NOTE: a page's hero row stands in for the header door on phones only, so each viewport opens on exactly one booking ask */
@media (min-width:560px){.nav a.book{display:inline-flex}.book-hero{display:none}}
.links a.book{align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--acc);font-size:var(--chrome-fs-dest)}
.links a.book:hover{border-color:var(--acc2)}

/* ---------- blog index ---------- */
.index{list-style:none;margin-top:7vh;border-top:2px solid var(--ink)}
.index li{border-bottom:1px solid var(--hairline)}
.index a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.4vw,24px);align-items:start;padding:3.4vh 4px;text-decoration:none;color:var(--ink)}
.index .dt{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;font-weight:500;color:var(--ink-label);margin-bottom:10px}
.index .pt{display:block;font-family:var(--display);font-stretch:125%;font-weight:350;font-size:clamp(18px,2.1vw,23px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance;transition:color .3s}
.index .pa{margin-top:8px;font-size:15.5px;line-height:1.65;max-width:62ch;color:var(--ink-body)}
.index a:hover .pt{color:var(--acc2)}

/* post glyphs — one seeded night sky per post, drawn by assets/glyph.js */
.gl{display:block}
.gl svg{display:block;width:100%;height:auto}
.index .gl{width:44px;margin-top:2px}
.gl-hero{width:88px;margin-bottom:4vh}

/* ---------- article ---------- */
article{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:16vh 24px 14vh;background:
  radial-gradient(ellipse 135% 105% at 50% 40%, rgba(14,12,11,.97) 0%, rgba(14,12,11,.86) 55%, rgba(14,12,11,.5) 100%),
  linear-gradient(180deg, rgba(14,12,11,.6) 0%, rgba(14,12,11,.35) 30%, rgba(14,12,11,.35) 55%, rgba(14,12,11,.9) 100%)}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.3em;font-weight:500;text-transform:uppercase;color:var(--acc-text);margin-bottom:3.5vh}
article h1{font-size:clamp(28px,3.6vw,42px);line-height:1.06}
.standfirst{margin:3vh 0 4vh;font-family:var(--it);font-style:italic;font-size:22px;line-height:1.45;color:var(--ink-standfirst)}
article h2{font-family:var(--display);font-stretch:125%;font-weight:350;font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:7vh 0 2vh;color:var(--ink)}
article p{margin-bottom:2.4vh;text-wrap:pretty}
.math{border-left:2px solid var(--acc);padding:14px 18px;margin:3vh 0;background:var(--surface-math);border-radius:0 4px 4px 0;overflow-x:auto;font-size:16px}
.math .katex{font-size:1.02em}
.math-fallback{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;line-height:2.2;color:var(--ink-label)}
.math-fallback b{font-weight:500;color:var(--acc-active)}
.foot-note{margin-top:8vh;padding-top:20px;border-top:1px solid var(--hairline);font-size:15px;color:var(--ink-quiet)}

/* ---------- sections ---------- */
.sec{margin-top:9vh}
.sec h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.36em;font-weight:500;text-transform:uppercase;color:var(--acc-text);margin-bottom:2.6vh}
.sec p{margin-bottom:2.2vh;max-width:640px}
.sec a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--acc2);padding-bottom:1px;transition:color .35s,border-color .35s}
.sec a:hover{color:var(--acc2);border-color:var(--acc2)}
.quote{font-family:var(--it);font-style:italic;font-size:clamp(20px,2.3vw,24px);line-height:1.4;color:var(--ink);border-left:2px solid var(--acc);padding-left:22px;margin:4vh 0}
.quote span{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.3em;font-weight:500;color:var(--acc-active)}

@media (max-width:760px){
  main{padding:14vh 20px 8vh}
  /* #NOTE: the fixed translucent scrim reads as broken when content scrolls beneath it on a phone — subpage footers become a solid block at the document end; the landing keeps its fixed bar over the canvas. position:relative (not static): #bg is a fixed z-index:0 layer that paints over normal-flow content, so the footer must stay positioned to keep its z-index */
  footer.bar{position:relative;z-index:1;background:var(--void);transform:none}
  .film-btn{padding:14px}
}

/* reduced motion — strip the bar's entrance translate, keep the opacity fade */
@media (prefers-reduced-motion: reduce){
  .bar{transform:none;transition:opacity .3s}
}