/* =========================================================================
   mikegeary.co — THE LEDGER
   A brutalist editorial type system. No images. Structure is the ornament.
   ========================================================================= */

/* ---- Fonts (self-hosted woff2) ---------------------------------------- */
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/space-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Design tokens ---------------------------------------------------- */
:root{
  /* type families */
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* modular type scale (1.25) — fluid via clamp */
  --t--1:clamp(.72rem,.69rem + .14vw,.8rem);
  --t-0 :clamp(.94rem,.9rem + .18vw,1.02rem);
  --t-1 :clamp(1.1rem,1.03rem + .35vw,1.3rem);
  --t-2 :clamp(1.35rem,1.2rem + .7vw,1.85rem);
  --t-3 :clamp(1.7rem,1.4rem + 1.4vw,2.7rem);
  --t-4 :clamp(2.1rem,1.5rem + 2.9vw,4rem);
  --t-5 :clamp(2.8rem,1.4rem + 6.6vw,6.5rem);
  --t-6 :clamp(3.4rem,.5rem + 13vw,11rem);

  /* spacing scale (4px base) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:192px;

  /* structure */
  --rule:1.5px;            /* hairline weight */
  --rule-bold:3px;
  --maxw:1320px;           /* outer frame */
  --measure:68ch;          /* reading measure */
  --gutter:clamp(16px,4vw,40px);
  --col:minmax(0,1fr);

  --dur:.22s; --dur-slow:.5s; --ease:cubic-bezier(.2,.7,.2,1);

  /* PAPER (default / light) */
  --bg:#f3efe4;
  --bg-2:#ece7d8;
  --fg:#16140d;
  --fg-dim:#454133;
  --muted:#5f5a4a;
  --line:#16140d;
  --line-soft:rgba(22,20,13,.16);
  /* vermilion — darkened to clear WCAG AA (4.79:1 on paper, 5.35:1 white-on-accent) */
  --accent:#c92a00;
  --accent-fg:#ffffff;
  --hi:#fff7cf;           /* highlight */
  --selection:#16140d;
  --selection-fg:#f3efe4;
  --shadow:6px 6px 0 var(--line);
  color-scheme:light;
}

[data-theme="ink"]{
  --bg:#0d0d0c;
  --bg-2:#161613;
  --fg:#ececdf;
  --fg-dim:#bdb9ab;
  --muted:#8f8b7d;
  --line:#ececdf;
  --line-soft:rgba(236,236,223,.16);
  --accent:#ff5a2a;
  --accent-fg:#0d0d0c;
  --hi:#3a3514;
  --selection:#ececdf;
  --selection-fg:#0d0d0c;
  --shadow:6px 6px 0 var(--line);
  color-scheme:dark;
}

/* ---- Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--serif);font-size:var(--t-1);line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  overflow-x:hidden;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
::selection{background:var(--selection);color:var(--selection-fg)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:var(--rule-bold) solid var(--accent);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ---- Exposed grid backdrop ------------------------------------------- */
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  opacity:.5}
.grid-lines::before{content:"";position:absolute;inset:0 var(--gutter);
  background-image:repeating-linear-gradient(to right,
    var(--line-soft) 0,var(--line-soft) var(--rule),
    transparent var(--rule),transparent calc(100%/6));
  background-position:left top}
@media (max-width:680px){.grid-lines{display:none}}

/* ---- Frame / layout --------------------------------------------------- */
.shell{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  border-inline:var(--rule) solid var(--line)}
@media (max-width:680px){.shell{border-inline:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-fg);padding:var(--s-3) var(--s-4);font-family:var(--mono);
  font-size:var(--t--1);text-transform:uppercase;letter-spacing:.08em}
.skip:focus{left:var(--gutter);top:var(--s-3)}

/* progress hairline */
.progress{position:fixed;top:0;left:0;height:var(--rule-bold);width:0;
  background:var(--accent);z-index:120;transition:width .08s linear}

/* ---- Masthead --------------------------------------------------------- */
.masthead{border-bottom:var(--rule-bold) solid var(--line);
  padding-block:var(--s-4) 0}
.masthead__bar{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);font-family:var(--mono);font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding-bottom:var(--s-3);border-bottom:var(--rule) solid var(--line-soft);
  flex-wrap:wrap}
.masthead__bar b{color:var(--fg);font-weight:700}
.dateline time{font-variant-numeric:tabular-nums}

.nameplate{display:block;text-decoration:none;color:inherit;
  padding-block:var(--s-4) var(--s-3)}
.nameplate .plate{font-family:var(--sans);font-weight:700;
  font-size:var(--t-6);line-height:.85;
  letter-spacing:clamp(-.07em,-.04em - .25vw,-.045em);
  text-transform:uppercase;text-wrap:balance}
.nameplate .sub{font-family:var(--mono);font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.22em;color:var(--muted);
  margin-top:var(--s-3);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.nameplate .sub .dot{color:var(--accent)}

/* primary nav */
.topnav{display:flex;gap:0;flex-wrap:wrap;
  border-top:var(--rule) solid var(--line-soft);
  border-bottom:var(--rule-bold) solid var(--line)}
.topnav a{flex:1 1 auto;text-decoration:none;font-family:var(--mono);
  font-size:var(--t--1);text-transform:uppercase;letter-spacing:.12em;
  padding:var(--s-3) var(--s-4);border-right:var(--rule) solid var(--line-soft);
  display:flex;gap:var(--s-3);align-items:baseline;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.topnav a:last-child{border-right:none}
.topnav a .num{color:var(--accent);font-weight:700}
.topnav a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.topnav a[aria-current="page"] .num{color:var(--bg)}
.topnav a:hover,.topnav a:focus-visible{background:var(--accent);color:var(--accent-fg)}
.topnav a:hover .num,.topnav a:focus-visible .num{color:var(--accent-fg)}
.topnav .cmd{flex:0 0 auto;color:var(--muted)}

/* ---- Generic headings & prose ---------------------------------------- */
.kicker{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);display:inline-flex;gap:var(--s-2);
  align-items:center}
.kicker::before{content:"§";color:var(--muted)}

h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.08}

/* ---- Home: hero lede -------------------------------------------------- */
.lede{padding-block:var(--s-7) var(--s-7);
  border-bottom:var(--rule) solid var(--line)}
.lede .kicker{margin-bottom:var(--s-4)}
.lede__statement{font-family:var(--serif);font-size:var(--t-4);line-height:1.18;
  max-width:18ch;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.lede__statement .drop{color:var(--accent);font-style:italic}
.lede .meta{font-family:var(--mono);font-size:var(--t-0);color:var(--fg-dim);
  text-transform:uppercase;letter-spacing:.1em;margin-top:var(--s-6);
  max-width:52ch;line-height:1.75;
  padding-top:var(--s-5);border-top:var(--rule) solid var(--line-soft)}

/* section header row */
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding-block:var(--s-5);border-bottom:var(--rule-bold) solid var(--line);
  flex-wrap:wrap}
.section-head h2{font-size:var(--t-2);text-transform:uppercase}
.section-head .count{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);
  letter-spacing:.1em}
.count-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  font-weight:700}
.count-link:hover{text-decoration-thickness:2px}

/* ---- Index / Ledger table -------------------------------------------- */
.ledger{width:100%}
.ledger__head,.entry{display:grid;
  grid-template-columns:3.2rem 7.5rem 1fr 8rem 4rem 4.5rem;
  align-items:baseline;gap:var(--s-4)}
.ledger__head{font-family:var(--mono);font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding-block:var(--s-3);border-bottom:var(--rule) solid var(--line)}
.ledger__head button{font:inherit;text-transform:inherit;letter-spacing:inherit;
  color:inherit;display:inline-flex;gap:4px;align-items:center}
.ledger__head button[aria-sort="ascending"]::after{content:"↑";color:var(--accent)}
.ledger__head button[aria-sort="descending"]::after{content:"↓";color:var(--accent)}
.ledger__head button:hover{color:var(--fg)}

.entry{position:relative;text-decoration:none;color:inherit;
  padding-block:var(--s-4);border-bottom:var(--rule) solid var(--line-soft);
  transition:background var(--dur) var(--ease)}
.entry:hover,.entry:focus-visible,.entry.kbd-active{background:var(--bg-2);
  box-shadow:inset var(--rule-bold) 0 0 var(--accent)}
.entry .no{font-family:var(--mono);color:var(--accent);font-weight:700;font-size:var(--t-0)}
.entry .date{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.entry .title{font-family:var(--sans);font-weight:500;font-size:var(--t-1);
  letter-spacing:-.01em;line-height:1.15}
.entry .title .excerpt{display:block;font-family:var(--serif);font-weight:400;
  font-size:var(--t-0);color:var(--fg-dim);letter-spacing:0;margin-top:6px;
  max-width:60ch}
.entry .topic{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.08em;color:var(--fg-dim)}
.entry .words,.entry .read{font-family:var(--mono);font-size:var(--t--1);
  color:var(--muted);display:grid;grid-template-columns:1fr auto;column-gap:.5ch;align-items:baseline}
.entry .words .fig,.entry .read .fig{text-align:right;font-variant-numeric:tabular-nums}
.entry .words .unit,.entry .read .unit{text-align:left;color:var(--muted);opacity:.7}
.entry .arrow{position:absolute;right:0;top:var(--s-4);color:var(--accent);
  opacity:0;transform:translateX(-6px);transition:all var(--dur) var(--ease);font-family:var(--mono)}
.entry:hover .arrow,.entry:focus-visible .arrow{opacity:1;transform:translateX(0)}
.entry[hidden]{display:none}

@media (max-width:820px){
  .ledger__head{display:none}
  /* title on row 1; full ledger metadata (date · topic · words · read) on row 2 */
  .entry{display:grid;grid-template-columns:2.6rem auto auto auto 1fr;
    justify-content:start;column-gap:var(--s-3);row-gap:6px;align-items:baseline}
  .entry .no{grid-column:1;grid-row:1/3;align-self:start;padding-top:2px}
  .entry .title{grid-column:2/-1;grid-row:1;font-size:var(--t-1)}
  .entry .date{grid-column:2;grid-row:2;white-space:nowrap}
  .entry .topic{grid-column:3;grid-row:2;color:var(--accent);position:relative;padding-left:var(--s-3)}
  .entry .words{grid-column:4;grid-row:2;position:relative;padding-left:var(--s-3)}
  .entry .read{grid-column:5;grid-row:2;position:relative;padding-left:var(--s-3)}
  .entry .topic::before,.entry .words::before,.entry .read::before{
    content:"·";position:absolute;left:2px;color:var(--line-soft)}
  .entry .words,.entry .read{display:inline-flex;gap:.4ch;color:var(--muted)}
  .entry .words .unit,.entry .read .unit{opacity:.7}
  .entry .arrow{display:none}
}
@media (max-width:520px){
  /* drop the per-word/read columns on very small screens; keep date · topic */
  .entry{grid-template-columns:2.4rem auto auto;row-gap:4px}
  .entry .words,.entry .read{display:none}
}

/* ---- Filter / toolbar ------------------------------------------------- */
.toolbar{display:flex;gap:var(--s-3);align-items:stretch;flex-wrap:wrap;
  padding-block:var(--s-4);border-bottom:var(--rule) solid var(--line)}
.field{display:flex;align-items:center;border:var(--rule) solid var(--line);
  background:var(--bg);flex:1 1 220px;min-width:0}
.field span{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);padding:0 var(--s-3);
  border-right:var(--rule) solid var(--line-soft);align-self:stretch;display:flex;align-items:center}
.field input{flex:1;border:none;background:none;font:inherit;font-family:var(--mono);
  font-size:var(--t-0);padding:var(--s-3);color:var(--fg);min-width:0}
.field input::placeholder{color:var(--muted)}
.chips{display:flex;gap:0;flex-wrap:wrap;border:var(--rule) solid var(--line)}
.chip{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.08em;padding:var(--s-2) var(--s-3);
  border-right:var(--rule) solid var(--line-soft);transition:all var(--dur) var(--ease)}
.chip:last-child{border-right:none}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.chip:hover{background:var(--accent);color:var(--accent-fg)}
.empty-row{padding:var(--s-7) 0;font-family:var(--mono);color:var(--muted);
  text-align:center;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t--1)}
.empty-row[hidden]{display:none}

/* ---- Mobile refinements (tap targets, chip strip, nameplate) --------- */
@media (max-width:680px){
  /* 44px tap targets for masthead utility buttons */
  .tools .tbtn{min-height:40px;padding:var(--s-2) var(--s-3)}
  /* topic chips become a single horizontally-scrollable strip */
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;min-height:40px;display:flex;align-items:center}
  /* primary nav links get a comfortable tap height */
  .topnav a{min-height:44px;align-items:center}
}
@media (max-width:480px){
  /* keep the nameplate bold but give content room above the fold */
  .nameplate{padding-block:var(--s-3) var(--s-2)}
  .nameplate .plate{font-size:clamp(2.6rem,1rem + 11vw,3.4rem)}
  .masthead{padding-block:var(--s-3) 0}
}

/* ---- Article ---------------------------------------------------------- */
.article{padding-block:var(--s-7) var(--s-9)}
.article__head{border-bottom:var(--rule-bold) solid var(--line);
  padding-bottom:var(--s-6);margin-bottom:var(--s-7)}
.article__rule{display:flex;gap:var(--s-4);font-family:var(--mono);font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  padding-bottom:var(--s-4);flex-wrap:wrap}
.article__rule .accent{color:var(--accent);font-weight:700}
.article h1{font-family:var(--sans);font-weight:700;font-size:var(--t-5);
  line-height:.94;letter-spacing:-.035em;margin-block:var(--s-4) var(--s-5);text-wrap:balance}
.article__standfirst{font-family:var(--serif);font-size:var(--t-2);line-height:1.4;
  font-weight:500;color:var(--fg-dim);max-width:42ch;font-style:italic}
.article__byline{display:flex;gap:var(--s-4);font-family:var(--mono);font-size:var(--t--1);
  color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:var(--s-5);flex-wrap:wrap}

/* layout: prose + margin rail */
.article__body{display:grid;grid-template-columns:minmax(0,var(--measure)) 1fr;
  gap:var(--s-9);align-items:start}
@media (max-width:1024px){.article__body{grid-template-columns:1fr;gap:var(--s-6)}}

.prose{font-family:var(--serif);font-size:var(--t-1);line-height:1.7;max-width:var(--measure)}
.prose>*+*{margin-top:var(--s-5)}
.prose h2{font-size:var(--t-2);margin-top:var(--s-8);padding-top:var(--s-4);
  border-top:var(--rule) solid var(--line);text-transform:none;position:relative}
.prose h2::before{counter-increment:h2;content:counter(h2,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t--1);color:var(--accent);
  position:absolute;top:var(--s-4);left:0;transform:translateY(-100%)}
.prose{counter-reset:h2}
.prose h3{font-size:var(--t-1);margin-top:var(--s-6);font-family:var(--sans)}
.prose p{text-wrap:pretty}
.prose>p:first-of-type::first-letter{font-family:var(--sans);font-weight:700;
  font-size:3.4em;line-height:.74;float:left;margin:6px var(--s-3) 0 0;color:var(--accent)}
.prose a{color:var(--fg);text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% var(--rule);background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease)}
.prose a:hover{background-size:100% 100%;color:var(--accent-fg)}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--bg-2);
  padding:.1em .35em;border:var(--rule) solid var(--line-soft)}
.prose pre{font-family:var(--mono);font-size:var(--t-0);background:var(--bg-2);
  border:var(--rule) solid var(--line);padding:var(--s-5);overflow-x:auto;line-height:1.55}
.prose pre code{background:none;border:none;padding:0}
.prose blockquote{border-left:var(--rule-bold) solid var(--accent);
  padding-left:var(--s-5);font-style:italic;font-size:var(--t-2);line-height:1.4;color:var(--fg-dim)}
.prose ul,.prose ol{padding-left:var(--s-6)}
.prose li{margin-top:var(--s-2)}
.prose li::marker{color:var(--accent);font-family:var(--mono)}
.prose hr{border:none;border-top:var(--rule) solid var(--line);margin-block:var(--s-7);
  position:relative;text-align:center}
.prose hr::after{content:"❡";position:absolute;top:-.7em;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 var(--s-4);color:var(--accent);font-family:var(--serif)}
.prose mark{background:var(--hi);color:inherit;padding:0 .15em}

/* footnotes */
.prose sup a{font-family:var(--mono);font-size:.7em;color:var(--accent);
  text-decoration:none;background:none;padding:0 1px;font-weight:700}
.footnotes{margin-top:var(--s-9);padding-top:var(--s-5);border-top:var(--rule) solid var(--line);
  font-size:var(--t-0);color:var(--fg-dim);font-family:var(--serif)}
.footnotes ol{padding-left:var(--s-6)}
.footnotes li{margin-top:var(--s-3)}
.footnotes li::marker{font-family:var(--mono);color:var(--accent);font-size:.8em}

/* TOC rail */
.rail{position:sticky;top:var(--s-6);font-family:var(--mono);font-size:var(--t--1)}
@media (max-width:1024px){.rail{position:static}}
.rail h2{font-size:var(--t--1);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);padding-bottom:var(--s-3);border-bottom:var(--rule) solid var(--line);margin-bottom:var(--s-3)}
.rail ol{list-style:none;counter-reset:toc}
.rail li{counter-increment:toc;margin-bottom:var(--s-1)}
.rail a{display:flex;gap:var(--s-3);text-decoration:none;color:var(--muted);
  padding:var(--s-2) 0;line-height:1.3;transition:color var(--dur) var(--ease)}
.rail a::before{content:counter(toc,decimal-leading-zero);color:var(--accent);flex:0 0 auto}
.rail a:hover,.rail a.active{color:var(--fg)}
.rail a.active::before{content:"▸ "counter(toc,decimal-leading-zero)}

/* article footer / prev-next */
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:var(--rule) solid var(--line);margin-top:var(--s-9)}
.postnav a{text-decoration:none;padding:var(--s-5);transition:background var(--dur) var(--ease)}
.postnav a:first-child{border-right:var(--rule) solid var(--line)}
.postnav a:hover{background:var(--bg-2)}
.postnav .lbl{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:var(--s-3)}
.postnav .t{font-family:var(--sans);font-weight:500;font-size:var(--t-1);letter-spacing:-.01em}
.postnav .next{text-align:right}
.postnav .empty{color:var(--muted);pointer-events:none}
@media (max-width:680px){.postnav{grid-template-columns:1fr}
  .postnav a:first-child{border-right:none;border-bottom:var(--rule) solid var(--line)}
  .postnav .next{text-align:left}}

/* ---- Static page (about/colophon) ------------------------------------ */
.page{padding-block:var(--s-7) var(--s-9)}
.page__head{border-bottom:var(--rule-bold) solid var(--line);padding-bottom:var(--s-5);margin-bottom:var(--s-7)}
.page__head h1{font-family:var(--sans);font-weight:700;font-size:var(--t-5);
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.specimen{border:var(--rule) solid var(--line);margin-top:var(--s-7)}
.specimen__row{display:grid;grid-template-columns:9rem 1fr;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:var(--rule) solid var(--line-soft);align-items:baseline}
.specimen__row:last-child{border-bottom:none}
.specimen__row .k{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.specimen__row .v{font-size:var(--t-1)}
.swatches{display:flex;gap:var(--s-3);flex-wrap:wrap}
.swatch{width:var(--s-7);height:var(--s-7);border:var(--rule) solid var(--line)}

/* ---- Contact ---------------------------------------------------------- */
.contact{border:var(--rule) solid var(--line);margin-top:var(--s-7)}
.contact__addr{display:block;text-decoration:none;color:inherit;
  padding:var(--s-6) var(--s-5);border-bottom:var(--rule-bold) solid var(--line);
  transition:background var(--dur) var(--ease)}
.contact__addr:hover,.contact__addr:focus-visible{background:var(--bg-2)}
.contact__lbl{display:block;font-family:var(--mono);font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:var(--s-3)}
.contact__email{display:block;font-family:var(--sans);font-weight:700;
  font-size:var(--t-4);line-height:1;letter-spacing:-.03em;word-break:break-word}
.contact__addr:hover .contact__email{color:var(--accent)}
.contact__rows{display:grid}
.contact__row{display:grid;grid-template-columns:9rem 1fr;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:var(--rule) solid var(--line-soft);align-items:baseline}
.contact__row:last-child{border-bottom:none}
.contact__row .k{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.contact__row .v{font-size:var(--t-0)}
.contact__row .v a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--accent)}
.contact__row .v a:hover{color:var(--accent)}
@media (max-width:560px){.contact__row{grid-template-columns:1fr;gap:2px}}

/* social link buttons inside the contact card */
.contact .socials{border-top:var(--rule-bold) solid var(--line)}

/* ---- Social link buttons --------------------------------------------- */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sociallink{position:relative;display:flex;align-items:baseline;gap:var(--s-3);
  text-decoration:none;color:inherit;padding:var(--s-4) var(--s-5);
  border-right:var(--rule) solid var(--line-soft);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sociallink:last-child{border-right:none}
.sociallink__net{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);flex:0 0 auto}
.sociallink__handle{font-family:var(--sans);font-weight:500;font-size:var(--t-1);
  letter-spacing:-.01em;word-break:break-word}
.sociallink__arrow{position:absolute;right:var(--s-5);top:var(--s-4);
  font-family:var(--mono);color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:all var(--dur) var(--ease)}
.sociallink:hover,.sociallink:focus-visible{background:var(--accent);color:var(--accent-fg)}
.sociallink:hover .sociallink__net,.sociallink:focus-visible .sociallink__net,
.sociallink:hover .sociallink__arrow,.sociallink:focus-visible .sociallink__arrow{color:var(--accent-fg)}
.sociallink:hover .sociallink__arrow,.sociallink:focus-visible .sociallink__arrow{opacity:1;transform:translateX(0)}
@media (max-width:560px){
  .socials{grid-template-columns:1fr}
  .sociallink{border-right:none;border-bottom:var(--rule) solid var(--line-soft)}
  .sociallink:last-child{border-bottom:none}
}

/* ---- Footer ----------------------------------------------------------- */
.colophon{border-top:var(--rule-bold) solid var(--line);
  padding-block:var(--s-7) var(--s-8);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);
  font-family:var(--mono);font-size:var(--t--1)}
@media (max-width:820px){.colophon{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.colophon{grid-template-columns:1fr}}
.colophon h3{font-family:var(--mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:var(--t--1);color:var(--muted);margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);border-bottom:var(--rule) solid var(--line-soft)}
.colophon ul{list-style:none}
.colophon li{margin-bottom:var(--s-2)}
.colophon a{text-decoration:none;color:var(--fg-dim);transition:color var(--dur) var(--ease);
  display:inline-flex;gap:var(--s-2)}
.colophon a:hover{color:var(--accent)}
.colophon .socials{grid-column:1/-1;border-top:var(--rule) solid var(--line-soft);
  border-bottom:var(--rule) solid var(--line-soft)}
.colophon .big{grid-column:1/-1;font-family:var(--sans);font-weight:700;
  font-size:var(--t-4);letter-spacing:-.03em;text-transform:uppercase;line-height:.9;
  border-top:var(--rule) solid var(--line-soft);padding-top:var(--s-5);margin-top:var(--s-4);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s-4)}
.colophon .big small{font-family:var(--mono);font-size:var(--t--1);font-weight:400;
  color:var(--muted);letter-spacing:.1em}

/* ---- Command palette -------------------------------------------------- */
.palette{position:fixed;inset:0;z-index:300;display:none;
  align-items:flex-start;justify-content:center;padding:clamp(40px,12vh,140px) var(--gutter) 0}
.palette[open],.palette.open{display:flex}
.palette__scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(3px)}
.palette__box{position:relative;width:min(640px,100%);background:var(--bg);
  border:var(--rule-bold) solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;max-height:70vh}
.palette__in{display:flex;align-items:center;border-bottom:var(--rule) solid var(--line)}
.palette__in span{font-family:var(--mono);color:var(--accent);font-weight:700;
  padding:0 var(--s-4);font-size:var(--t-1)}
.palette__in input{flex:1;border:none;background:none;font-family:var(--mono);
  font-size:var(--t-1);padding:var(--s-4) var(--s-4) var(--s-4) 0;color:var(--fg);min-width:0}
.palette__in input:focus{outline:none}
.palette__in kbd{margin-right:var(--s-3)}
.palette__list{overflow-y:auto;list-style:none}
.palette__list li a,.palette__list li button{display:flex;width:100%;text-align:left;
  gap:var(--s-4);align-items:baseline;text-decoration:none;
  padding:var(--s-3) var(--s-4);border-bottom:var(--rule) solid var(--line-soft);
  font-family:var(--mono);font-size:var(--t-0)}
.palette__list li[aria-selected="true"] a,.palette__list li[aria-selected="true"] button{
  background:var(--accent);color:var(--accent-fg)}
.palette__list .pk{color:var(--accent);font-weight:700;flex:0 0 1.4rem}
.palette__list li[aria-selected="true"] .pk{color:var(--accent-fg)}
.palette__list .pt{flex:1;color:inherit}
.palette__list .pm{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t--1)}
.palette__list li[aria-selected="true"] .pm{color:var(--accent-fg)}
.palette__list li[hidden]{display:none}
.palette__list .palette-empty{display:flex;gap:var(--s-4);align-items:baseline;
  padding:var(--s-4);font-family:var(--mono);font-size:var(--t-0);color:var(--muted)}
.palette__list .palette-empty .pk{color:var(--accent);flex:0 0 1.4rem}
.palette__foot{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);
  padding:var(--s-3) var(--s-4);border-top:var(--rule) solid var(--line);
  display:flex;gap:var(--s-4);flex-wrap:wrap}

kbd{font-family:var(--mono);font-size:.82em;border:var(--rule) solid var(--line-soft);
  border-bottom-width:2px;padding:1px 6px;background:var(--bg-2);white-space:nowrap}

/* ---- Help overlay ----------------------------------------------------- */
.help{position:fixed;inset:0;z-index:290;display:none;align-items:center;justify-content:center;padding:var(--gutter)}
.help.open{display:flex}
.help__scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px)}
.help__box{position:relative;width:min(560px,100%);background:var(--bg);
  border:var(--rule-bold) solid var(--line);box-shadow:var(--shadow);padding:var(--s-6)}
.help__box{position:relative}
.help__close{position:absolute;top:var(--s-4);right:var(--s-4);
  font-family:var(--sans);font-size:var(--t-2);line-height:1;width:36px;height:36px;
  border:var(--rule) solid var(--line-soft);color:var(--fg);
  transition:all var(--dur) var(--ease)}
.help__close:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.help__box h2{font-family:var(--sans);text-transform:uppercase;font-size:var(--t-2);
  margin-bottom:var(--s-5);letter-spacing:-.02em}
.help__box dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) var(--s-5);
  font-family:var(--mono);font-size:var(--t-0);align-items:baseline}
.help__box dt{display:flex;gap:var(--s-2)}
.help__box dd{color:var(--fg-dim)}

/* ---- Theme + tools toggle (in masthead bar) -------------------------- */
.tools{display:flex;gap:var(--s-2);align-items:center}
.tbtn{font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;border:var(--rule) solid var(--line-soft);
  padding:4px var(--s-3);transition:all var(--dur) var(--ease);color:var(--fg);
  display:inline-flex;gap:var(--s-2);align-items:center}
.tbtn:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.tbtn b{color:var(--accent)}
.tbtn:hover b{color:var(--accent-fg)}

/* ---- Ticker / marquee ------------------------------------------------- */
.ticker{overflow:hidden;border-bottom:var(--rule) solid var(--line);
  font-family:var(--mono);font-size:var(--t--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--fg-dim);white-space:nowrap;padding-block:var(--s-3)}
.ticker__track{display:inline-block;will-change:transform;animation:marq 38s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker b{color:var(--accent)}
.ticker span{padding-inline:var(--s-4)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* When motion is reduced, stop the scroll and hide the duplicate copy so the line
   reads once, clipped to the viewport, instead of showing doubled content. */
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;transform:none}
  .ticker{text-overflow:ellipsis}
  .ticker__track>:nth-child(n+13){display:none}
}

/* ---- Reveal on scroll ------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.no-js .reveal{opacity:1;transform:none}

/* ---- Utilities -------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}