/* =========================================================
   DITHER LAB — site theme
   1-bit contrast, hard borders, offset shadows, a cursor
   spotlight that x-rays the page. Shared by every page.
   ========================================================= */

:root{
  --bg:#0e100a;
  --bg-2:#161910;
  --fg:#e9e4d3;
  --fg-2:#9a9a86;
  --line:#2a2e1f;
  --hard:#e9e4d3;        /* the "ink" that draws borders */
  --acc:#a3c184;
  --gold:#d0a961;
  --shadow:#000;

  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --serif:"Newsreader",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* one vertical scale, used everywhere — s2 binds related things,
     s3/s4 separate them, s5 breaks ideas, s6 breaks sections */
  --s1:.5rem;
  --s2:.9rem;
  --s3:1.4rem;
  --s4:clamp(1.2rem,2.6vw,1.8rem);
  --s5:clamp(1.7rem,4vw,2.6rem);
  --s6:clamp(3.2rem,7.5vw,5.2rem);

  /* aliases so markup carried over from the old theme still resolves */
  --green:var(--acc);
  --green-deep:var(--acc);
  --muted:var(--fg-2);
  --sans:var(--disp);
}
:root[data-theme="light"]{
  --bg:#ebe7da; --bg-2:#e1dccb; --fg:#14150c; --fg-2:#585a48;
  --line:#c9c4b1; --hard:#14150c; --acc:#4a6a37; --gold:#9a7526; --shadow:#14150c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg-2);
  font-family:var(--disp);font-size:1rem;line-height:1.6;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--acc);color:var(--bg)}

/* horizontal only — the shorthand would zero the vertical padding of any
   <section class="wrap"> and collapse the whole page rhythm */
.wrap{width:100%;max-width:76rem;margin:0 auto;
  padding-left:clamp(1.1rem,4vw,2.8rem);padding-right:clamp(1.1rem,4vw,2.8rem)}
.narrow{max-width:48rem}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.dim{color:var(--fg-2)}

/* ── nav ───────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:2px solid var(--hard)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem}
.brand i{width:9px;height:9px;background:var(--acc);display:inline-block;animation:beat 2.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.nav-links{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.nav-links a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);text-decoration:none;padding:.28rem .6rem;border:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.nav-links a:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.nav-links a[aria-current="page"]{color:var(--acc);border-color:var(--line)}
.k-chip,.tt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:2px solid var(--hard);background:var(--bg);color:var(--fg);cursor:pointer;
  padding:.28rem .62rem;box-shadow:3px 3px 0 0 var(--shadow);
  transition:transform .12s,box-shadow .12s,background .2s,color .2s;
}
.k-chip:hover,.tt:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--acc)}
.k-chip:active,.tt:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--shadow)}

/* ── hero shell (home + interior page heads) ───────────── */
.hero{position:relative;overflow:hidden;padding:var(--s5) 0 var(--s6);
  border-bottom:2px solid var(--hard);cursor:crosshair}
.hero--page{padding-bottom:var(--s5)}
#cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5}

/* x-ray wash — only visible inside the cursor spotlight */
.xray{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(45deg,var(--acc) 25%,transparent 25% 75%,var(--acc) 75%),
    linear-gradient(45deg,var(--acc) 25%,transparent 25% 75%,var(--acc) 75%);
  background-size:4px 4px;background-position:0 0,2px 2px;
  opacity:.2;
  -webkit-mask-image:radial-gradient(circle 11rem at var(--mx,-999px) var(--my,-999px),#000 0 45%,transparent 76%);
          mask-image:radial-gradient(circle 11rem at var(--mx,-999px) var(--my,-999px),#000 0 45%,transparent 76%);
}
.hero .wrap{position:relative;z-index:3}
.xh{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.hero:hover .xh{opacity:1}
.xh i{position:absolute;background:var(--acc);opacity:.3}
.xh .h{left:0;right:0;height:1px}
.xh .v{top:0;bottom:0;width:1px}
@media(hover:none){.xh,.xray{display:none}}

.hero-top{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.kick{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0}

/* ── kinetic title + dither ghost ──────────────────────── */
.title{position:relative;margin:var(--s3) 0 0}
.title h1{
  font-family:var(--disp);font-weight:600;color:var(--fg);margin:0;
  font-size:clamp(2.8rem,11.5vw,7.4rem);line-height:.8;letter-spacing:-.062em;text-transform:uppercase;
}
.title .row{display:block;overflow:hidden}
.title .row.b{text-align:right}
.title .ch{display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .95s var(--ease),opacity .6s}
.ready .title .ch{transform:none;opacity:1}
.title .ghost{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask-image:radial-gradient(circle 11rem at var(--gx,-999px) var(--gy,-999px),#000 0 45%,transparent 76%);
          mask-image:radial-gradient(circle 11rem at var(--gx,-999px) var(--gy,-999px),#000 0 45%,transparent 76%);
}
.title .ghost h1{
  color:transparent;
  /* alternate accent against the page ground, not transparent — otherwise the
     solid letters underneath show through and the dither washes out */
  background-image:
    linear-gradient(45deg,var(--acc) 25%,var(--bg) 25% 75%,var(--acc) 75%),
    linear-gradient(45deg,var(--acc) 25%,var(--bg) 25% 75%,var(--acc) 75%);
  background-size:5px 5px;background-position:0 0,2.5px 2.5px;
  -webkit-background-clip:text;background-clip:text;
}
.title .ghost .ch{transform:none;opacity:1}
@media(hover:none){.title .ghost{display:none}}

/* smaller variant for interior pages */
.title--sm h1{font-size:clamp(2.2rem,7.6vw,4.6rem);line-height:.86;letter-spacing:-.05em}
.title--sm .row.b{text-align:left}

.statement{
  font-family:var(--serif);font-weight:300;color:var(--fg);
  font-size:clamp(1.5rem,4.2vw,2.9rem);line-height:1.14;letter-spacing:-.02em;
  margin:0;max-width:22ch;
}
.statement em{font-style:italic;color:var(--acc)}

.hero-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s5) clamp(1.6rem,4.5vw,3.4rem);align-items:end;margin-top:var(--s5)}
@media(max-width:860px){.hero-body{grid-template-columns:1fr}}
/* statement → lede is a tight pair; lede → buttons is a break */
.lede{font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.5;color:var(--fg-2);
  margin:var(--s3) 0 var(--s5);max-width:36rem}
.lede b{color:var(--fg);font-weight:500}
.lede.tight{margin-bottom:0}

/* ── buttons ───────────────────────────────────────────── */
.btns{display:flex;flex-wrap:wrap;gap:.7rem}
.mag{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--fg);background:var(--bg);border:2px solid var(--hard);
  padding:.72rem 1.25rem;box-shadow:5px 5px 0 0 var(--shadow);will-change:transform;
  transition:box-shadow .18s var(--ease),background .25s,color .25s,transform .22s ease-out;
}
.mag:hover{background:var(--fg);color:var(--bg);box-shadow:8px 8px 0 0 var(--acc)}
.mag.solid{background:var(--fg);color:var(--bg)}
.mag.solid:hover{background:var(--acc);border-color:var(--acc);color:var(--bg)}

/* ── portrait / figures ────────────────────────────────── */
.portrait{position:relative;border:2px solid var(--hard);box-shadow:8px 8px 0 0 var(--shadow);max-width:17rem}
.portrait img{aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.3);transition:filter .5s var(--ease)}
.portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:
    linear-gradient(45deg,var(--hard) 25%,transparent 25% 75%,var(--hard) 75%),
    linear-gradient(45deg,var(--hard) 25%,transparent 25% 75%,var(--hard) 75%);
  background-size:3px 3px;background-position:0 0,1.5px 1.5px;transition:opacity .5s var(--ease);
}
.portrait:hover::after{opacity:0}
.portrait:hover img{filter:none}
.portrait figcaption{position:absolute;left:-2px;bottom:-2px;background:var(--hard);color:var(--bg);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;padding:.3rem .55rem}
.portrait--wide{max-width:none;aspect-ratio:auto}
.portrait--wide img{aspect-ratio:16/10}

/* ── marquee ───────────────────────────────────────────── */
.band{background:var(--hard);color:var(--bg);border-top:2px solid var(--hard);border-bottom:2px solid var(--hard);
  overflow:hidden;white-space:nowrap;padding:.55rem 0;transform:rotate(-1deg) scale(1.03)}
.band-track{display:inline-flex;gap:2.4rem;animation:run 36s linear infinite;will-change:transform}
.band:hover .band-track{animation-play-state:paused}
.band-track span{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.16em}
.band-track span::after{content:" ◆";color:var(--acc)}
@keyframes run{to{transform:translateX(-50%)}}

/* ── sections ──────────────────────────────────────────── */
section{padding:var(--s6) 0;scroll-margin-top:4.5rem}
.sec-head{display:flex;align-items:center;gap:1rem;margin-bottom:var(--s5);flex-wrap:wrap}
.sec-head .no{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--acc)}
.sec-head h2{font-family:var(--disp);font-weight:600;color:var(--fg);margin:0;
  font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:-.03em;text-transform:uppercase}
.sec-head::after{content:"";flex:1;height:2px;background:var(--line);min-width:2rem}
.sec-note{margin:calc(-1 * var(--s3)) 0 var(--s5);font-size:.95rem;color:var(--fg-2)}

/* ── capability panels — describe the work, don't score it ─ */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s4)}
.panel{border:2px solid var(--hard);background:var(--bg-2);padding:var(--s4) var(--s4) calc(var(--s4) - .3rem)}
.panel h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);margin:0 0 var(--s3);font-weight:500}
.caplist{list-style:none;margin:0;padding:0}
.caplist li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .8rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.caplist li:first-child{padding-top:0}
.caplist li:last-child{border-bottom:0;padding-bottom:0}
.caplist li::before{
  content:"";width:7px;height:7px;background:var(--line);transform:rotate(45deg);
  transition:background .3s,transform .35s var(--ease);
}
.caplist li:hover{padding-left:.5rem}
.caplist li:hover::before{background:var(--acc);transform:rotate(45deg) scale(1.45)}
.caplist b{color:var(--fg);font-weight:400;font-size:.95rem;line-height:1.4}
.caplist span{grid-column:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-2);opacity:.72;line-height:1.7}
.caplist a{color:var(--fg);text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--acc);
  transition:box-shadow .3s var(--ease),color .3s}
.caplist a:hover{box-shadow:inset 0 -1.05em 0 0 var(--acc);color:var(--bg)}

/* ── project cards ─────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--s4)}
.card{position:relative;display:block;text-decoration:none;color:inherit;
  border:2px solid var(--hard);background:var(--bg-2);padding:var(--s4);
  box-shadow:6px 6px 0 0 var(--shadow);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 0 var(--acc)}
.card .no{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--acc)}
.card h3{font-family:var(--disp);font-weight:600;color:var(--fg);margin:var(--s1) 0 var(--s2);
  font-size:1.28rem;letter-spacing:-.022em;text-transform:uppercase;line-height:1.06}
.card p{margin:0;font-size:.9rem;color:var(--fg-2)}
.card .spark{width:100%;height:26px;margin-top:var(--s2);overflow:visible}
.card .spark .base{stroke:var(--line);stroke-width:2;fill:none}
.card .spark .fit{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.05s var(--ease),stroke .35s}
.card:hover .spark .fit{stroke-dashoffset:0;stroke:var(--gold)}
.card .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--s2)}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--fg);
  border:1px solid var(--line);padding:.12rem .45rem}
.card .go{position:absolute;right:1rem;top:1rem;font-family:var(--mono);font-size:1rem;color:var(--acc);
  opacity:0;transform:translate(-6px,6px);transition:.3s var(--ease)}
/* small app-icon in a card corner — grayscale like every image, colour on hover */
.card .applogo{float:right;width:48px;height:48px;margin:0 0 .5rem .9rem;
  border:2px solid var(--hard);box-shadow:3px 3px 0 0 var(--shadow);
  filter:grayscale(1) contrast(1.15);transition:filter .4s var(--ease)}
.card:hover .applogo{filter:none}
.card:hover .go{opacity:1;transform:none}
.card.soon{opacity:.55}
.card.soon:hover{opacity:1}

/* ── split + stamps ────────────────────────────────────── */
.off{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,5vw,3.4rem);align-items:center}
@media(max-width:820px){.off{grid-template-columns:1fr}}
.off p{margin:0;font-size:clamp(1rem,1.9vw,1.2rem)}
.off p a{color:var(--fg);text-decoration:none;box-shadow:inset 0 -2px 0 0 var(--acc);
  transition:box-shadow .3s var(--ease),color .3s}
.off p a:hover{box-shadow:inset 0 -1.1em 0 0 var(--acc);color:var(--bg)}
.stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.stamps--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){.stamps,.stamps--4{grid-template-columns:repeat(2,1fr)}}
.stamp{border:2px solid var(--hard);background:var(--bg-2);padding:var(--s4) .6rem;text-align:center;
  box-shadow:4px 4px 0 0 var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stamp:hover{transform:rotate(-3deg) translateY(-3px);box-shadow:7px 7px 0 0 var(--acc)}
.stamp b{display:block;font-family:var(--disp);font-weight:700;color:var(--fg);
  font-size:clamp(1.6rem,4.4vw,2.5rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stamp span{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);display:block;margin-top:.55rem;line-height:1.6}

/* ── link list (hikes, etc.) ───────────────────────────── */
.linklist{list-style:none;margin:0;padding:0}
.linklist li{padding:.7rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease)}
.linklist li:first-child{padding-top:0}
.linklist li:last-child{border-bottom:0}
.linklist li:hover{padding-left:.5rem}
.linklist a{color:var(--fg);text-decoration:none;font-size:.98rem;
  box-shadow:inset 0 -1px 0 0 var(--line);transition:box-shadow .3s var(--ease),color .3s}
.linklist li:hover a{box-shadow:inset 0 -1px 0 0 var(--acc);color:var(--acc)}
.linklist .where{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);opacity:.75;margin-top:.15rem}

/* ── shelves ───────────────────────────────────────────── */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s2)}
.book{display:block;border:2px solid var(--hard);background:var(--bg-2);
  box-shadow:4px 4px 0 0 var(--shadow);position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.book img{width:100%;aspect-ratio:2/3;object-fit:cover;filter:grayscale(1) contrast(1.15);
  transition:filter .4s var(--ease)}
.book:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 0 var(--acc)}
.book:hover img{filter:none}

.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--s2)}
.game{margin:0;position:relative;border:2px solid var(--hard);background:var(--bg-2);
  box-shadow:3px 3px 0 0 var(--shadow);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.game img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.2);
  transition:filter .4s var(--ease)}
.game:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 0 var(--acc)}
.game:hover img{filter:none}
.game figcaption{
  position:absolute;inset:auto 0 0 0;margin:0;padding:.3rem .35rem;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.04em;line-height:1.25;text-align:center;
  color:var(--bg);background:var(--acc);
  transform:translateY(101%);transition:transform .28s var(--ease);
}
.game:hover figcaption,.game:focus-within figcaption{transform:none}

/* ── long-form article (project write-ups) ─────────────── */
.article{max-width:46rem}
.article h2{font-family:var(--disp);font-weight:600;color:var(--fg);
  font-size:clamp(1.25rem,3vw,1.7rem);letter-spacing:-.025em;text-transform:uppercase;
  margin:var(--s6) 0 var(--s3);padding-top:var(--s3);border-top:2px solid var(--line)}
.article p{margin:0 0 var(--s3);font-size:1.02rem;line-height:1.68}
.article strong{color:var(--fg);font-weight:500}
.article a{color:var(--fg);text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--acc);
  transition:box-shadow .3s var(--ease),color .3s}
.article a:hover{box-shadow:inset 0 -1.05em 0 0 var(--acc);color:var(--bg)}
.post-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);margin:0 0 var(--s5);padding-bottom:var(--s3);border-bottom:2px solid var(--line)}
.article figure{margin:var(--s5) 0}
.article figure img{border:2px solid var(--hard);box-shadow:6px 6px 0 0 var(--shadow)}
.article figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--fg-2);margin-top:var(--s2);text-align:center}

code{font-family:var(--mono);font-size:.86em;color:var(--acc);
  background:var(--bg-2);border:1px solid var(--line);padding:.06em .35em}
pre{font-family:var(--mono);font-size:.8rem;line-height:1.65;
  background:var(--bg-2);color:var(--fg);border:2px solid var(--hard);
  box-shadow:6px 6px 0 0 var(--shadow);padding:var(--s4);overflow-x:auto;margin:0 0 var(--s5)}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

.callout{border:2px solid var(--hard);border-left-width:8px;background:var(--bg-2);
  padding:var(--s4);margin:0 0 var(--s5);font-size:.95rem}
.callout p{margin:0}
.callout p + p{margin-top:var(--s2)}

.chart{width:100%;height:auto;background:var(--bg-2);border:2px solid var(--hard);
  box-shadow:6px 6px 0 0 var(--shadow);padding:.6rem}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .grid text{fill:var(--fg-2)}

/* ── puzzle zone bridge ────────────────────────────────── */
/* puzzles.css owns the 1-bit box itself; this only frames it. */
.pz-frame{box-shadow:10px 10px 0 0 var(--shadow)}
.pz-frame .puzzle-zone{border-width:2px}

/* ── floating instrument readout ───────────────────────── */
.inst{
  position:fixed;left:clamp(.8rem,2.5vw,1.6rem);bottom:clamp(.8rem,2.5vw,1.6rem);z-index:55;
  border:2px solid var(--hard);background:var(--bg);box-shadow:4px 4px 0 0 var(--shadow);
  padding:.6rem .75rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  color:var(--fg-2);min-width:11rem;
  transition:opacity .4s,transform .4s var(--ease);
}
.inst.hide{opacity:0;transform:translateY(8px);pointer-events:none}
.inst .ih{display:flex;justify-content:space-between;gap:1rem;color:var(--acc);
  text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.35rem;margin-bottom:.35rem}
.inst dl{display:grid;grid-template-columns:auto 1fr;gap:.14rem .8rem;margin:0}
.inst dt{color:var(--fg-2);opacity:.75}
.inst dd{margin:0;text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
@media(max-width:700px){.inst{display:none}}

/* ── footer ────────────────────────────────────────────── */
footer{border-top:2px solid var(--hard);padding:var(--s6) 0 4.4rem}
.mail{display:inline-block;font-family:var(--disp);font-weight:600;color:var(--fg);text-decoration:none;
  font-size:clamp(1.3rem,5.6vw,3.8rem);letter-spacing:-.04em;text-transform:uppercase;line-height:1}
.mail .ch{display:inline-block;transition:transform .3s var(--ease),color .3s}
.mail:hover .ch{color:var(--acc)}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:var(--s5);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-links a{text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;
  transition:border-color .25s,color .25s}
.foot-links a:hover{color:var(--fg);border-color:var(--acc)}

/* ── command palette ───────────────────────────────────── */
.pal{position:fixed;inset:0;z-index:100;display:none;padding-top:13vh;
  background:color-mix(in srgb,var(--bg) 76%,transparent)}
.pal.open{display:block;animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.pal-box{width:min(33rem,92vw);margin:0 auto;background:var(--bg);border:2px solid var(--hard);
  box-shadow:10px 10px 0 0 var(--acc);animation:pop .2s var(--ease)}
@keyframes pop{from{transform:translate(4px,-8px);opacity:0}}
.pal-in{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:2px solid var(--hard)}
.pal-in span{font-family:var(--mono);color:var(--acc);font-size:.9rem}
.pal-in input{flex:1;background:none;border:0;outline:none;color:var(--fg);
  font-family:var(--disp);font-weight:300;font-size:1rem;caret-color:var(--acc)}
.pal ul{list-style:none;margin:0;padding:.35rem;max-height:44vh;overflow:auto}
.pal li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem .7rem;cursor:pointer;font-size:.9rem;color:var(--fg-2)}
.pal li em{font-style:normal;color:var(--fg)}
.pal li small{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.pal li.sel{background:var(--acc)}
.pal li.sel em,.pal li.sel small{color:var(--bg)}
.pal-foot{border-top:2px solid var(--hard);padding:.45rem 1rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}

/* ── reveal ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .title .ch{transform:none;opacity:1}
  .band{transform:none}
  html{scroll-behavior:auto}
}