/* ═══════════════════════════════════════════════════════════════════════
   EVANIUM · Lab Notes — the shared article system
   One sheet, linked by every article. Load it AFTER an article's own
   <style> block so its :root wins.

   The blog is the same brand as evanium.com, inverted: the site is cream
   type on ink, the blog is ink type on cream. Identical five values —
   ink #0A0A0A, cream #FDF0D5, sand #E9C46A, teal #249D8F, clay #E76F51 —
   used the other way up. On ink, the accents are text. On paper they are
   FILLS, and small accent text uses their darkened cousins, because sand
   on cream is 1.4:1 and unreadable.

   Montserrat Black uppercase heads and hard square corners are unchanged:
   the ground is the difference, not the vocabulary.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground ─────────────────────────────────────────────────────── */
  --paper:        #FDF0D5;   /* the page */
  --paper-sunk:   rgba(10,10,10,.035);  /* recessed panels */
  --paper-raised: #FFF8E6;   /* the one lifted surface */

  /* ── type ───────────────────────────────────────────────────────── */
  --ink:      #0A0A0A;   /* headlines */
  --ink-body: #2A2A2E;   /* body copy — 12.6:1 */
  --ink-mut:  #5C5A55;   /* secondary —  6.0:1 */
  --ink-dim:  #7A776F;   /* labels, captions — 4.6:1 */

  /* ── accents as fills (ink or cream sits on top) ─────────────────── */
  --sand: #E9C46A;   /* ink on sand — 11.3:1 */
  --teal: #14655C;   /* cream on deep teal — 5.9:1 */
  --clay: #E76F51;   /* ink on clay — 7.6:1 */

  /* ── accents as text on paper (darkened; all clear 4.5:1) ────────── */
  --sand-ink: #7A5C14;
  --teal-ink: #14655C;
  --clay-ink: #A33F26;

  /* ── rules. Ink at low alpha, never gray, never a border colour ──── */
  --rule-hair:   rgba(10,10,10,.12);
  --rule:        rgba(10,10,10,.20);
  --rule-strong: rgba(10,10,10,.34);
  --grid-line:   rgba(10,10,10,.055);   /* the ruled paper in hero blocks */

  /* ── type stacks — unchanged from the brand ──────────────────────── */
  --disp: "Montserrat", sans-serif;
  --body: "Montserrat", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── measure & rhythm ───────────────────────────────────────────── */
  --measure: 66ch;
  --wrap: 960px;
  --header-h: 72px;

  --ease: cubic-bezier(.22,1,.36,1);

  /* ══ legacy mapping ══════════════════════════════════════════════
     The published articles are var-driven, so redefining their own
     token names flips them wholesale with no per-rule surgery. */
  --bg:     var(--paper);
  --panel:  var(--paper-raised);
  --panel2: var(--paper-sunk);
  --edge:   var(--rule-hair);
  --mut:    var(--ink-mut);
  --dim:    var(--ink-dim);
  --plasma: var(--clay-ink);   /* was magenta — now the warm text accent */
  --cosmic: var(--teal-ink);   /* was violet — now the cool text accent */
  --amber:     var(--sand-ink);
  --amber-dim: var(--sand);
  --cyan:      var(--teal-ink);
  --cyan-dim:  #A8D8D1;
  --good: #1F7A4C;
  --bad:  var(--clay-ink);
  --analog:  var(--sand-ink);
  --digital: var(--teal-ink);
  --surface: var(--paper-raised);
  --line:      var(--rule);
  --line-soft: var(--rule-hair);
  --ink-2: var(--ink-body);
  --ink-3: var(--ink-mut);
  --chip-bg: var(--paper-sunk);

  /* Two Paths' per-act colours, re-cut for paper */
  --act1:#B08A0E; --act2:#A33F26; --act3:#4B2E8F; --act4:#2A2A2E;
  --on1:#FDF0D5; --on2:#FDF0D5; --on3:#FDF0D5; --on4:#FDF0D5;
}

/* ── base ─────────────────────────────────────────────────────────── */
html{overflow-x:hidden}
body{
  background:var(--paper);
  color:var(--ink-body);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-image:none;
}
::selection{background:var(--sand); color:var(--ink)}

a{color:var(--sand-ink); text-decoration:none; border-bottom:1px solid var(--sand); transition:color .25s var(--ease), border-color .25s var(--ease)}
a:hover{color:var(--ink); border-bottom-color:var(--ink); opacity:1}

h1,h2,h3,h4{color:var(--ink); font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:1.02; text-wrap:balance}
h1{font-size:clamp(42px,8vw,104px); letter-spacing:-.05em; line-height:.92; max-width:16ch}
h2{font-size:clamp(30px,5vw,58px); letter-spacing:-.04em; max-width:18ch}
h3{font-size:clamp(18px,1.7vw,22px); letter-spacing:-.015em}

p,ul,ol,li{color:var(--ink-body); max-width:var(--measure); text-wrap:pretty}
p{font-size:17px; line-height:1.72}
strong,b,p strong{color:var(--ink); font-weight:600}
em{font-style:italic}
code,kbd{font-family:var(--mono); font-size:.9em; color:var(--teal-ink); background:var(--paper-sunk); padding:1px 5px}
hr{border:0; border-top:1px solid var(--rule-hair)}

/* ── the sticky bar ───────────────────────────────────────────────── */
.site-header{position:fixed; top:0; left:0; right:0; z-index:60}
header.bar{position:sticky; top:0; z-index:60}
.site-header,header.bar{
  min-height:var(--header-h); height:var(--header-h); padding:10px 24px; gap:18px; flex-wrap:nowrap;
  display:flex; align-items:center; justify-content:flex-start;
  background:rgba(253,240,213,.82);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--rule);
}
.site-header .title,header.bar .title{font-family:var(--disp); font-size:13px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto}
.site-header .sub,header.bar .sub{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim)}
.site-nav,header.bar nav{display:flex; gap:16px; margin-left:auto; flex-wrap:nowrap; flex-shrink:0; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.site-nav a,header.bar nav a{color:var(--ink-mut); border-bottom:0}
.site-nav a:hover,header.bar nav a:hover{color:var(--sand-ink)}
.site-nav a.here{background:var(--sand); color:var(--ink); font-weight:700; padding:5px 9px; line-height:1; margin:-5px -2px; border-radius:0}
body:has(.site-header){padding-top:var(--header-h)}   /* only the fixed bar needs clearance */

/* scroll progress + jump bar */
.progress{position:fixed; left:0; top:0; height:2px; background:var(--sand-ink); z-index:70}
.jumpbar{
  position:sticky; top:0; z-index:20;
  background:rgba(253,240,213,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-hair);
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.jumpbar::-webkit-scrollbar{height:6px}
.jumpbar::-webkit-scrollbar-track{background:transparent}
.jumpbar::-webkit-scrollbar-thumb{background:var(--rule); border-radius:999px}
body:has(.site-header) .jumpbar{top:var(--header-h)}
.jumpbar a{
  font:600 11px var(--mono); letter-spacing:.04em; color:var(--ink-mut);
  border:1px solid var(--rule); background:transparent; border-radius:999px; padding:7px 11px;
}
.jumpbar a:hover{border-color:var(--sand-ink); color:var(--sand-ink); background:var(--sand)}

/* ── hero: ruled paper ────────────────────────────────────────────── */
header.hero,.hero{
  padding:110px 0 84px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 80px;
}
.hero h1{margin:24px 0 30px}
.hero h1 em,h1 em{font-style:normal; color:var(--clay-ink)}
.hero h1 .stroke,.stroke{color:transparent; -webkit-text-stroke:2px var(--ink)}
.lede{font-size:clamp(19px,2vw,25px); line-height:1.42; max-width:54ch; color:var(--ink); font-weight:400}
.deck{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mut); max-width:52ch; margin:-14px 0 22px}
header[style*="text-align:center"] .deck,header.hero .deck{margin-inline:auto}
.hero-bg{display:none}   /* the starfield belongs to the ink pages, not to paper */

/* ── section rhythm ───────────────────────────────────────────────── */
main,.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px 96px}
section{padding:92px 0 84px; border-top:1px solid var(--rule-hair); border-bottom:0; margin:0}
section section{padding:72px 0 0}

/* kicker — sand strip, dark-ochre label */
.kicker,.eyebrow,.num,.band .tag{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sand-ink); background:none; padding:0; border-radius:0;
}
.band{margin-bottom:20px}
.kicker::before,.band .tag::before{content:""; display:block; width:48px; height:5px; background:var(--sand); margin-bottom:13px}
.band .tag.d{color:var(--teal-ink)}
.band .tag.d::before{background:var(--teal)}

/* ── panels, cards, tools ─────────────────────────────────────────── */
.panel,.tool,.card,.conv,.myth,.mental,.checkitem,.stat,.usecases,.chainstage,.scope,.lineup,.tblwrap,.scroll,.act-card{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:0;
  box-shadow:none;
}
.usecases,.chainstage,.stat,.node,.meter{background:var(--paper-sunk)}
.caption,.uk,.cap,figcaption,.note,.readout .k,.cellgrid .k,.ctl label,.field label,.level small{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
}
.note{border-left:2px solid var(--sand); padding:2px 0 2px 16px; text-transform:none; letter-spacing:.02em; font-size:14px; color:var(--ink-mut)}
.formula{font-family:var(--mono); background:var(--paper-sunk); border:1px solid var(--rule); border-radius:0; padding:13px 17px; color:var(--sand-ink); font-size:15px}
.formula .c{color:var(--teal-ink)} .formula .m{color:var(--ink-dim)}
.card.analog{box-shadow:inset 0 3px 0 var(--sand)}
.card.digital{box-shadow:inset 0 3px 0 var(--teal)}

/* ── callouts ─────────────────────────────────────────────────────── */
.callout,.analogy{
  background:var(--paper-raised); border:1px solid var(--rule);
  border-top:2px solid var(--sand); border-radius:0; color:var(--ink-body);
}
.callout .k,.analogy .label{display:block; margin-bottom:5px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-ink)}
.callout.d{border-top-color:var(--teal)} .callout.d .k{color:var(--teal-ink)}
.callout.warn{border-top-color:var(--clay)} .callout.warn .k{color:var(--clay-ink)}
/* the one filled block — sand paper, ink type */
.callout.sand{background:var(--sand); border-color:var(--sand); color:var(--ink)}
.callout.sand .k{color:var(--ink); opacity:.62}
.callout.sand strong{color:var(--ink)}

/* ── tables ───────────────────────────────────────────────────────── */
table{border-collapse:collapse; width:100%; font-size:14px}
th{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
   color:var(--ink-dim); background:var(--paper-sunk); text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule)}
td{padding:10px 14px; color:var(--ink-body); border-bottom:1px solid var(--rule-hair); vertical-align:top}
td:first-child{color:var(--ink); font-weight:600}
tr:last-child td{border-bottom:none}
tr.hl td{background:rgba(233,196,106,.24); color:var(--ink)}

/* ── chips, tags, verdicts ────────────────────────────────────────── */
.chip,.tag,.ev-blog-tag{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mut); background:transparent; border:1px solid var(--rule); border-radius:999px; padding:5px 11px}
.verdict{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:4px 11px}
.verdict.ok{background:var(--teal); color:var(--paper)}
.verdict.lossy{background:var(--sand); color:var(--ink)}
.verdict.box{background:var(--paper-sunk); color:var(--ink-body); border:1px solid var(--rule)}
.verdict.no{background:transparent; color:var(--ink-dim); border:1px solid var(--rule); text-decoration:line-through}
.status-yes{color:var(--teal-ink)} .status-limited{color:var(--sand-ink)} .status-no{color:var(--ink-dim)}
.t-master{color:#1F7A4C} .t-arch{color:var(--teal-ink)} .t-play{color:var(--sand-ink)} .t-bad{color:var(--clay-ink)}

/* ── controls ─────────────────────────────────────────────────────── */
button,.btn,button.seg{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--rule); border-radius:0; padding:9px 14px; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
button:hover,.btn:hover,button.seg:hover{border-color:var(--ink); background:var(--paper-sunk); filter:none}
button:active{transform:scale(.97)}
button:focus-visible{outline:2px solid var(--sand-ink); outline-offset:2px}
button.ghost{background:transparent}
button.small{padding:7px 11px; font-size:10px}
/* Single-line controls only — multi-line buttons like the timbre cards wrap.
   !important because styles.css is a third-party sheet we don't control and
   its button rules load in an order we can't rely on. */
.btnrow button,.hero-cta button,.ivBtns button,.mixchips button,.jumpbar a,.btn,button.seg{white-space:nowrap}
#timGrid .tim,#timGrid .tim *,.checkitem,.myth,.mental{white-space:normal!important; overflow-wrap:break-word}
#timGrid .tim{overflow:hidden}
#timGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
#timGrid .tim{display:block; text-align:left; padding:13px 15px; text-transform:none; letter-spacing:0; font-weight:400}
#timGrid .tim b{display:block; font-family:var(--disp); font-size:15px; font-weight:900; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ink); margin-bottom:5px}
#timGrid .tim span{display:block; font-family:var(--mono); font-size:10.5px; line-height:1.5;
  letter-spacing:0; text-transform:none; color:var(--ink-mut); white-space:normal; overflow-wrap:anywhere}
#timGrid .tim.sel{border-color:var(--sand-ink); background:rgba(233,196,106,.22)}
#timGrid .tim.sel b{color:var(--sand-ink)}
.btn.active,button.seg[aria-pressed="true"],button.cy,.ivBtns button.sel{background:var(--sand); border-color:var(--sand); color:var(--ink)}
button.play{background:var(--teal); border-color:var(--teal); color:var(--paper)}
select,input,textarea,.slInput{background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:0;
  padding:10px 12px; font-family:var(--body); font-size:14px}
select,.readout,.ctl .val{font-family:var(--mono)}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--sand-ink)}
input[type=range]{accent-color:var(--sand-ink); background:transparent; border:0; padding:0}
.result{background:rgba(20,101,92,.10); border:1px solid var(--rule); border-top:2px solid var(--teal); border-radius:0; color:var(--ink-body)}
.readout .v,.cellgrid .v,#ivResult .v{font-family:var(--mono); color:var(--sand-ink)}

/* ── media: dark plates on paper, the one place ink survives ──────── */
canvas,canvas.viz{background:var(--ink); border:1px solid var(--rule); border-radius:0}
.photo img,.photo.shot img,figure img{border:1px solid var(--rule); border-radius:0}
.diagram,.tblwrap,.lineup,.scroll,.scrollx{scrollbar-width:thin; scrollbar-color:var(--rule) transparent}
.diagram::-webkit-scrollbar,.tblwrap::-webkit-scrollbar,.lineup::-webkit-scrollbar,.scroll::-webkit-scrollbar{height:6px}
.diagram::-webkit-scrollbar-thumb,.tblwrap::-webkit-scrollbar-thumb,.lineup::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb{background:var(--rule); border-radius:999px}
.pinlabel{fill:var(--ink-dim)} .pinlabel.on{fill:var(--ink)}

/* ── glossary terms ───────────────────────────────────────────────── */
.term{color:var(--ink); border-bottom:1px dashed var(--sand-ink); cursor:help}
.term:hover,.term:focus-visible,.term.open{color:var(--sand-ink)}
.term > .def{background:var(--paper-raised); border:1px solid var(--rule); border-top:2px solid var(--sand);
  border-radius:0; color:var(--ink-body); box-shadow:0 18px 44px rgba(10,10,10,.14)}
.term > .def b{color:var(--sand-ink)}

/* Logos: paper pages use assets/logo/evanium-wordmark-ink.svg — an ink fill,
   not a filtered white one, so it survives components that outrank this sheet. */

/* ── the signal ladder ────────────────────────────────────────────────
   On ink these bars were a faint tint with gold type. On paper that is
   two pale things on a third: the fill becomes solid sand with ink type,
   and the row gloss drops out of caps so it reads as a phrase. */
.ladder{display:grid; gap:8px; margin-top:22px}
.level{display:grid; grid-template-columns:168px 1fr; gap:16px; align-items:center}
.level small{display:flex; flex-direction:column; gap:3px;
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink)}
.level small em{font-family:var(--body); font-size:12px; font-style:normal; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:1.35; color:var(--ink-mut)}
.meter{height:36px; background:var(--paper-sunk); border:1px solid var(--rule); border-radius:0; overflow:hidden}
.meter span{display:flex; align-items:center; height:100%; padding-left:12px;
  background:var(--sand); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em}
@media(max-width:600px){ .level{grid-template-columns:110px 1fr; gap:12px} }

/* ── ticker ───────────────────────────────────────────────────────── */
.ticker{border-block:1px solid var(--rule)}
.ticker div{color:var(--ink)}

/* ── Two Paths: act cards ─────────────────────────────────────────── */
.act-card{background:var(--paper-raised)!important; border:1px solid var(--rule)!important}
.act-band i{background:var(--c,var(--sand))}
.act-band span{color:var(--ink-mut)}
.keynum b{color:var(--c,var(--sand-ink))}
.keynum span{color:var(--ink-body)}

/* ── piano (styles.css) ───────────────────────────────────────────── */
.piano .wk{background:linear-gradient(180deg,#FFFBF0,#EFE4C8); border:1px solid var(--rule-strong)}
.piano .bk{background:linear-gradient(180deg,#2A2A2E,#0A0A0A); border:1px solid var(--ink)}
.piano .wk.on{background:var(--sand)} .piano .bk.on{background:var(--sand-ink)}
.piano .wk.mark{box-shadow:inset 0 -14px 0 var(--teal)} .piano .bk.mark{box-shadow:inset 0 -10px 0 var(--teal)}
.piano .wk span{color:var(--ink-dim)}

/* ── motion: the site's rise, at the article's shorter distance ───── */
.reveal,[data-rise],section.in{transition-timing-function:var(--ease)}
[data-rise]{opacity:0; transform:translateY(12px);
  transition:opacity 900ms var(--ease) var(--rise-delay,0ms), transform 900ms var(--ease) var(--rise-delay,0ms)}
[data-rise="in"]{opacity:1; transform:none}
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity 900ms var(--ease) var(--d,0ms), transform 900ms var(--ease) var(--d,0ms)}
.reveal.isVisible{opacity:1; transform:none}
.card.reveal:nth-of-type(odd),.card.reveal:nth-of-type(even){transform:translateY(24px)}
.card.reveal.isVisible{transform:none}
.card{transition:border-color .3s var(--ease), transform .6s var(--ease), box-shadow .5s var(--ease)}
.card.isVisible:hover{border-color:var(--sand-ink); transform:translateY(-4px); box-shadow:0 18px 44px rgba(10,10,10,.12)}
.photo img{clip-path:circle(0% at 50% 50%); transition:clip-path 1.3s var(--ease)}
.isVisible .photo img,.photo.isVisible img{clip-path:circle(75% at 50% 50%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.isVisible,[data-rise],[data-rise="in"],section,section.in{opacity:1!important; transform:none!important; transition:none!important}
  .photo img{clip-path:none!important; transition:none}
  .progress{display:none}
}

/* ── footer ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule); color:var(--ink-mut); margin-top:96px; padding:40px 0 70px}

@media(max-width:820px){
  .wrap,main{padding:0 20px 72px}
  section{padding:64px 0 56px}
  .site-header,header.bar{padding:10px 16px; gap:10px}
  .site-nav,header.bar nav{gap:10px}
  table{display:block; overflow-x:auto; max-width:100%}
  img,svg,canvas,video{max-width:100%; height:auto}
  button{max-width:100%; white-space:normal}
}
@media(max-width:620px){
  .site-header .sub,header.bar .sub{display:none}
  .site-nav a:not(.here){display:none}
}

/* ── print: it is already paper ───────────────────────────────────── */
@media print{
  .site-header,header.bar,.jumpbar,.progress,.ticker,.btn,button,.searchrow,.demo-controls{display:none!important}
  body{padding-top:0; font-size:11pt; background:#fff}
  section{padding:24px 0; break-inside:avoid}
  .panel,.card,.tool,.callout,.myth,.tblwrap{break-inside:avoid}
  .term{border-bottom:0}
}