/* ============================================================
   MIST — styles
   palette pulled from the posters:
   maroon/aubergine darks (DON'T STOP), bone stencil (DON'T LOOK
   DOWN), signal red (the traffic light), cyan fringe (the
   chromatic aberration). not black-and-acid-green. on purpose.
   ============================================================ */
:root{
  --ink:      #150a11;   /* page background — maroon-black       */
  --panel:    #20101b;   /* raised surfaces                      */
  --panel-2:  #2b1424;   /* hover / active surfaces              */
  --line:     #3b1e30;   /* borders                              */
  --bone:     #e9e3d3;   /* primary text — concrete stencil      */
  --concrete: #a89f8d;   /* secondary text (lifted for contrast) */
  --magenta:  #c22a6c;   /* brand accent — borders, fills        */
  --magenta-t:#e0568f;   /* the same accent, light enough for
                            small TEXT (4.5:1 on ink)            */
  --magenta-d:#b02460;   /* darker fill — solid buttons pass 4.5
                            with bone text on top                */
  --signal:   #ff2e3f;   /* live / alerts only                   */
  --cyan:     #5df2ff;   /* interactive fringe / links           */
  --sysbar-h: 46px;
  --nav-h:    42px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --body:'Archivo',system-ui,sans-serif;
  --stencil:'Allerta Stencil','Archivo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--sysbar-h) + var(--nav-h) + 12px)}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.6;
  padding-top:calc(var(--sysbar-h) + var(--nav-h));
  overflow-x:hidden;
}
/* set while the lightbox is open — the page behind must not scroll */
body.no-scroll{overflow:hidden}
/* film grain + scanlines, very faint */
body::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.20;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.35) 3px 4px);
}
::selection{background:var(--magenta);color:var(--bone)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- cursor fringe — follows the pointer, never replaces it ---------- */
.cursor-fx{
  position:fixed;left:0;top:0;width:340px;height:340px;border-radius:50%;
  pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;
  transform:translate(-50%,-50%);transition:opacity .5s;
  background:radial-gradient(circle,
    rgba(93,242,255,.08) 0%, rgba(194,42,108,.06) 40%, transparent 68%);
}
.cursor-fx.live{opacity:1}
@media (hover:none){.cursor-fx{display:none}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- system bar ---------- */
.sysbar{
  position:fixed;top:0;left:0;right:0;height:var(--sysbar-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 20px;background:rgba(21,10,17,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--concrete);
}
.sys-left,.sys-right{display:flex;align-items:center;gap:14px;min-width:0}
.sys-name{color:var(--bone);font-weight:700}
/* pure decoration — the system's own heartbeat. discord/status
   things live in the bio card, the bot's in its project box. */
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sys-item{white-space:nowrap}
.audio{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);background:var(--panel)}
.audio button{
  background:none;border:none;color:var(--bone);cursor:pointer;
  font-family:var(--mono);font-size:11px;line-height:1;padding:2px 2px;
}
.audio button:hover{color:var(--cyan)}
.eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:3px;background:var(--magenta);height:30%;animation:eq 0.9s ease-in-out infinite;animation-play-state:paused}
.eq i:nth-child(2){animation-delay:.15s;height:80%}
.eq i:nth-child(3){animation-delay:.35s;height:55%}
.eq i:nth-child(4){animation-delay:.55s;height:95%}
.audio.playing .eq i{animation-play-state:running}
.audio.playing{border-color:var(--magenta)}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.audio-title{max-width:150px;overflow:hidden;white-space:nowrap}
.audio-title span{display:inline-block}
/* long track names crawl back and forth (js sets --shift when needed) */
.audio-title.scrolling span{animation:titledrift 9s linear infinite alternate}
@keyframes titledrift{
  0%,12%{transform:translateX(0)}
  88%,100%{transform:translateX(var(--shift,0))}
}
/* volume — a thin filled line with a square thumb, no browser chrome.
   --fill is kept in sync by app.js */
.audio input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:64px;height:12px;background:transparent;cursor:pointer;
}
.audio input[type=range]::-webkit-slider-runnable-track{
  height:2px;
  background:linear-gradient(90deg,var(--magenta) var(--fill,12%),var(--line) 0);
}
.audio input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:7px;height:12px;margin-top:-5px;border:none;border-radius:0;
  background:var(--bone);
}
.audio input[type=range]:hover::-webkit-slider-thumb{background:var(--cyan)}
.audio input[type=range]::-moz-range-track{height:2px;background:var(--line)}
.audio input[type=range]::-moz-range-progress{height:2px;background:var(--magenta)}
.audio input[type=range]::-moz-range-thumb{
  width:7px;height:12px;border:none;border-radius:0;background:var(--bone);
}
.audio input[type=range]:hover::-moz-range-thumb{background:var(--cyan)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:var(--sysbar-h);left:0;right:0;height:var(--nav-h);z-index:59;
  display:flex;align-items:stretch;gap:0;
  background:rgba(21,10,17,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
}
.nav a{
  display:flex;align-items:center;padding:0 22px;color:var(--concrete);
  border-right:1px solid var(--line);text-decoration:none;white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav a:hover{color:var(--bone);background:var(--panel);text-decoration:none}
.nav a.active{color:var(--bone);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--magenta)}
.nav .nav-note{
  margin-left:auto;display:block;line-height:var(--nav-h);padding:0 20px;
  color:var(--concrete);opacity:.6;border-right:none;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-links{display:flex;align-items:stretch}
.nav-burger{
  display:none;align-items:center;gap:10px;padding:0 20px;
  background:none;border:none;border-right:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--bone);
}
/* hover dropdown — the door to the full page */
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item > a{height:100%}
.nav-drop{
  position:absolute;top:100%;left:0;min-width:100%;
  background:rgba(21,10,17,.97);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-top:none;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;transform:none;pointer-events:auto}
.nav-drop a{border-right:none;padding:12px 22px;color:var(--concrete)}
.nav-drop a:hover{color:var(--cyan)}
/* invisible backdrop behind the open mobile menu — swallows the tap
   that closes it so nothing underneath gets clicked by accident */
.nav-scrim{display:none;position:fixed;inset:0;z-index:58;background:transparent}
.nav-scrim.show{display:block}
/* mobile: burger + cascading panel, closes on tap outside */
@media (max-width:700px){
  .nav-burger{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:rgba(21,10,17,.97);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - var(--sysbar-h) - var(--nav-h));overflow-y:auto;
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:15px 22px;border-right:none;border-bottom:1px solid var(--line)}
  .nav-item{flex-direction:column}
  .nav-item > a{height:auto}
  .nav-drop{
    position:static;opacity:1;transform:none;pointer-events:auto;
    border:none;background:transparent;transition:none;
  }
  .nav-drop a{padding-left:44px;color:var(--concrete)}
}

/* ---------- boot overlay ---------- */
.boot{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:12vw;cursor:pointer;transition:opacity .4s;
}
.boot.done{opacity:0;pointer-events:none}
.boot .bootlog{font-family:var(--mono);font-size:14px;color:var(--concrete);line-height:1.9;white-space:pre-wrap}
.boot .bootlog b{color:var(--bone);font-weight:500}
.boot .boot-skip{position:absolute;bottom:24px;right:24px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--concrete);opacity:.5}

/* ---------- shared section furniture ---------- */
section{border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:lowercase;
  color:var(--magenta-t);margin-bottom:14px;
}
.section-head{padding:72px 0 36px}
.section-head h2{
  font-family:var(--stencil);font-size:clamp(36px,6vw,72px);line-height:.95;
  text-transform:uppercase;letter-spacing:.01em;
}
.section-head p{max-width:560px;color:var(--concrete);margin-top:16px}
/* clickable section headers — the whole word is the door */
.section-head h2 a{color:inherit;text-decoration:none}
.section-head h2 a::after{
  content:"->";font-family:var(--mono);font-size:.35em;vertical-align:middle;
  margin-left:.5em;color:var(--concrete);opacity:0;transition:opacity .15s,transform .15s;
  display:inline-block;
}
.section-head h2:hover a::after{opacity:1;transform:translateX(6px);color:var(--cyan)}
.chroma{transition:text-shadow .15s}
.chroma:hover{text-shadow:-2px 0 var(--signal),2px 0 var(--cyan)}
.section-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--concrete);margin:0 0 40px}

/* ---------- hero ---------- */
.hero{position:relative;padding:13vh 0 9vh}
.bin{
  position:absolute;top:40px;bottom:40px;width:14px;overflow:hidden;
  font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--concrete);
  opacity:.35;pointer-events:none;user-select:none;
  writing-mode:vertical-rl;letter-spacing:.3em;
}
.bin-l{left:8px}.bin-r{right:8px;transform:rotate(180deg)}
.glitch{
  font-family:var(--stencil);font-size:clamp(72px,16vw,210px);line-height:.92;
  text-transform:uppercase;position:relative;display:inline-block;
  color:var(--bone);
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none;
}
.glitch.on::before{
  opacity:.8;color:var(--signal);transform:translate(-4px,-1px);
  clip-path:inset(15% 0 55% 0);animation:slice-a .35s steps(3) both;
}
.glitch.on::after{
  opacity:.8;color:var(--cyan);transform:translate(4px,1px);
  clip-path:inset(60% 0 10% 0);animation:slice-b .35s steps(3) both;
}
@keyframes slice-a{
  0%{clip-path:inset(15% 0 55% 0)}
  50%{clip-path:inset(45% 0 20% 0)}
  100%{clip-path:inset(5% 0 80% 0)}
}
@keyframes slice-b{
  0%{clip-path:inset(60% 0 10% 0)}
  50%{clip-path:inset(10% 0 70% 0)}
  100%{clip-path:inset(75% 0 2% 0)}
}
.lede{max-width:620px;color:var(--concrete);font-size:18px;margin:28px 0 36px}
.lede b{color:var(--bone);font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--line);color:var(--bone);
  background:transparent;transition:all .15s;text-decoration:none;cursor:pointer;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan);text-decoration:none;transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(93,242,255,.25)}
.btn-solid{background:var(--magenta-d);border-color:var(--magenta-d);color:var(--bone)}
.btn-solid:hover{background:var(--panel-2);color:var(--bone);border-color:var(--magenta);box-shadow:3px 3px 0 rgba(194,42,108,.35)}

/* ---------- availability strip (hero) — case renders as typed ---------- */
.avail{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.avail-item{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--concrete);
}
.avail-item em{font-style:normal;opacity:.5;margin:0 4px}
.avail-item.tone-go{color:var(--cyan)}
.avail-item.tone-go::before,.avail-item.tone-off::before,.avail-item.tone-warn::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;
  background:var(--concrete);opacity:.5;vertical-align:1px;
}
.avail-item.tone-go::before{background:var(--cyan);opacity:1;animation:pulse 2s infinite}
.avail-item.tone-warn{color:var(--signal)}
.avail-item.tone-warn::before{background:var(--signal);opacity:1}

/* ---------- hero id — pfp + the name ---------- */
.hero-id{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.pfp{
  width:104px;height:104px;flex:none;border:1px solid var(--line);
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .15s,transform .15s;
}
.pfp:hover{border-color:var(--magenta);transform:translate(-2px,-2px);box-shadow:3px 3px 0 rgba(194,42,108,.3)}
.pfp img{width:100%;height:100%;object-fit:cover;display:block}
/* file not there yet — pending stencil instead of a broken image */
.pfp.empty img{display:none}
.pfp.empty::after{
  content:"pfp //\a pending";white-space:pre;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--concrete);opacity:.7;
}

/* ---------- subpage breadcrumb ---------- */
.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  margin-bottom:22px;color:var(--concrete);
  display:flex;gap:14px;flex-wrap:wrap;
}
.crumb a{color:var(--concrete);border:1px solid var(--line);padding:5px 10px}
.crumb a:hover{color:var(--cyan);border-color:var(--cyan);text-decoration:none}
.crumb span{align-self:center;opacity:.6}

/* ---------- bio "currently" block — prose beside the stack grid ---------- */
.bio-now{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;
  padding:8px 0 48px;margin-bottom:48px;border-bottom:1px solid var(--line);
}
.bio-now-copy p{color:var(--concrete);max-width:520px;margin-bottom:16px}
.bio-now-copy p b{color:var(--bone);font-weight:500}
.bio-now-copy .eyebrow,.bio-now .eyebrow{margin-bottom:18px}

/* the stack — b&w icon tiles, hover pops + label */
.stack-grid{display:flex;flex-wrap:wrap;gap:6px;align-content:start;padding-bottom:30px}
.tool{
  position:relative;width:52px;height:52px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel);
  transition:transform .18s cubic-bezier(.2,1.4,.4,1),border-color .18s,background .18s;
}
.tool img{
  width:26px;height:26px;object-fit:contain;
  filter:grayscale(1) brightness(1.15);opacity:.65;
  transition:filter .18s,opacity .18s,transform .18s cubic-bezier(.2,1.4,.4,1);
}
.tool:hover{
  transform:translateY(-6px) scale(1.18);border-color:var(--magenta);
  background:var(--panel-2);z-index:2;
}
.tool:hover img{filter:none;opacity:1;transform:scale(1.08)}
.tool-label{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  white-space:nowrap;pointer-events:none;opacity:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);border:1px solid var(--line);padding:4px 8px;color:var(--bone);
  transition:opacity .15s,transform .15s;text-align:center;
}
.tool-label i{display:block;font-style:normal;color:var(--concrete);margin-top:2px}
.tool:hover .tool-label{opacity:1;transform:translateX(-50%) translateY(0)}
/* no icon (yet) — the chip carries the name itself */
.tool.noicon{width:auto;padding:0 12px}
.tool.noicon::before{
  content:attr(aria-label);font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--concrete);
}
.tool.noicon:hover::before{color:var(--bone)}
.tool.noicon .tool-label{display:none}

/* ---------- about — one grid from the very top ----------
   left: hero + about copy. right: the latest transmission, sticky, so
   it rides beside everything until the section ends. */
.about-section{position:relative}
.about-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;padding-bottom:80px}
.hero-block{padding:12vh 0 8vh}
/* padding matches .hero-block so the panel top-aligns with the
   eyebrow text instead of floating above it */
.about-side{min-width:0;padding-top:12vh}
.about-copy blockquote{
  font-family:var(--mono);font-size:14px;color:var(--bone);
  border-left:2px solid var(--magenta);padding:6px 0 6px 18px;margin:0 0 26px;
}
.about-copy blockquote span{color:var(--concrete);display:block;margin-top:4px;font-size:11px;letter-spacing:.12em}
.about-copy p{color:var(--concrete);margin-bottom:18px;max-width:560px}
.about-copy p b{color:var(--bone);font-weight:500}
/* latest transmission — the newest piece, riding shotgun */
.latest{
  border:1px solid var(--line);background:var(--panel);
  position:sticky;top:calc(var(--sysbar-h) + var(--nav-h) + 20px);
}
.latest-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--concrete);
}
.latest-head b{color:var(--magenta-t);font-weight:400}
.latest-frame{
  display:block;width:100%;padding:0;border:none;background:var(--panel-2);
  cursor:pointer;overflow:hidden;aspect-ratio:4/3;
}
.latest-frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.latest-frame:hover img{transform:scale(1.03)}
.latest-meta{padding:16px 18px 18px;border-top:1px solid var(--line)}
.latest-meta .latest-title{
  font-family:var(--stencil);font-size:22px;text-transform:uppercase;
  line-height:1.05;font-weight:400;color:var(--bone);
}
.latest-meta p{font-size:13px;color:var(--concrete);margin:8px 0 12px}
.latest-more{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- links ---------- */
/* flex, not grid: rows always fill the full width, so an odd count
   just stretches its last row instead of leaving a lonely stub */
.links-grid{
  display:flex;flex-wrap:wrap;
  gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 80px;
}
.links-grid .social{flex:1 1 310px;min-width:0}
.social{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--ink);padding:20px 22px;color:var(--bone);text-decoration:none;transition:background .15s;
}
.social:hover{background:var(--panel-2);text-decoration:none}
.social:hover .social-name{text-shadow:-1px 0 var(--signal),1px 0 var(--cyan)}
.social-name{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.social-sub{font-size:12px;color:var(--concrete)}
.social .go{font-family:var(--mono);color:var(--concrete);transition:all .15s}
.social:hover .go{color:var(--cyan);transform:translateX(4px)}

/* ---------- art ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);background:transparent;color:var(--concrete);
  padding:8px 16px;cursor:pointer;transition:all .15s;
}
.chip:hover{color:var(--bone);border-color:var(--concrete)}
.chip.active{color:var(--bone);border-color:var(--magenta);background:var(--panel-2)}
.art-search{
  display:block;width:min(100%,420px);margin-top:16px;padding:10px 14px;
  background:var(--panel);border:1px solid var(--line);color:var(--bone);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
}
.art-search:focus{outline:none;border-color:var(--magenta)}
.art-search::placeholder{color:var(--concrete)}

/* justified gallery — rows packed to full width, native aspect ratios,
   no crops, no bars, no holes. tile sizes are set inline by app.js. */
.jgrid{padding:32px 0 40px;min-height:120px}
/* desktop rows carry no fixed gap — space-evenly distributes ALL the
   leftover width, so edge padding == inner padding (mobile's justified
   layout re-adds its gap in the media query) */
.jrow{display:flex;margin-bottom:14px}
.tile{
  position:relative;flex:none;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);
  transition:transform .15s,border-color .15s;
}
.tile:hover{transform:translate(-2px,-2px);border-color:var(--magenta);box-shadow:4px 4px 0 rgba(194,42,108,.3)}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tile:hover img,.tile:hover video{transform:scale(1.02)}
.tile .tile-tag{
  position:absolute;top:10px;left:10px;z-index:1;font-family:var(--mono);font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;background:rgba(21,10,17,.85);
  border:1px solid var(--line);padding:3px 7px;color:var(--concrete);
}
.tile .tile-count{
  position:absolute;top:10px;right:10px;z-index:1;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;background:rgba(21,10,17,.85);
  border:1px solid var(--magenta);padding:3px 7px;color:var(--magenta-t);
}
.tile .tile-title{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:left;
  background:linear-gradient(transparent,rgba(13,5,10,.88));
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);opacity:0;transition:opacity .2s;
}
.tile:hover .tile-title{opacity:1}
/* stencil placeholder while the image file doesn't exist yet.
   .openable = the cover died but extra frames exist, so it still clicks */
.tile.noimg{display:flex;align-items:center;justify-content:center;padding:16px;cursor:default}
.tile.noimg.openable{cursor:pointer}
.tile.noimg.openable:hover{border-color:var(--magenta)}
.tile.noimg::after{
  content:attr(data-title);font-family:var(--stencil);font-size:clamp(18px,2vw,28px);
  text-transform:uppercase;line-height:1.05;color:var(--bone);opacity:.85;
  text-align:center;text-shadow:-2px 0 rgba(255,46,63,.5),2px 0 rgba(93,242,255,.5);
}
.tile.noimg::before{
  content:"missing: " attr(data-src);position:absolute;bottom:8px;left:10px;right:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--concrete);opacity:.6;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;
  background:rgba(13,5,10,.72);backdrop-filter:blur(10px);
  display:none;align-items:stretch;justify-content:center;
  padding:calc(var(--sysbar-h) + 12px) 2.5vw 18px;
}
.lightbox.open{display:flex}
.lightbox figure{
  width:min(96vw,1400px);min-height:0;
  display:flex;flex-direction:column;gap:12px;
}
/* the header — meta/title/note stacked left, links right, starting on
   the same line as the close button. inset toward the center so it
   reads as part of the viewer, not screen furniture. */
.lb-head{
  flex:none;width:100%;text-align:left;
  padding:0 clamp(140px,13vw,220px) 0 clamp(48px,9vw,160px);
  display:flex;justify-content:space-between;align-items:center;gap:12px 28px;
}
.lb-head .lb-info{min-width:0}
.lb-head h3{
  font-family:var(--stencil);font-size:clamp(20px,2.4vw,30px);
  text-transform:uppercase;line-height:1;font-weight:400;
}
.lb-head .lb-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--magenta-t);margin-bottom:5px;white-space:nowrap;
}
.lb-head .lb-note{
  font-size:12px;color:var(--concrete);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.lb-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);white-space:nowrap;
}
/* the stack — as big as the screen allows. cover on top, extra frames
   scroll below it. margin:auto centers a short single image in the
   leftover space instead of stretching the panel around it. */
.lb-stack{
  width:fit-content;max-width:100%;min-height:0;overflow-y:auto;
  margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:20px;background:rgba(32,16,27,.72);backdrop-filter:blur(4px);
  border:1px solid var(--magenta);
  box-shadow:0 0 0 1px rgba(194,42,108,.15),0 24px 60px rgba(0,0,0,.45);
  scrollbar-width:thin;scrollbar-color:var(--magenta) var(--panel);
}
.lb-item{position:relative;flex:none;max-width:100%;display:flex;justify-content:center}
.lb-item img,.lb-item video{
  /* viewport minus sysbar, the header row and the chrome — the image
     is the point, give it the room */
  max-width:100%;max-height:calc(100vh - var(--sysbar-h) - 130px);
  width:auto;height:auto;object-fit:contain;border:1px solid var(--line);display:block;
}
/* per-frame chip — "final", "wireframe", "iteration"… from data.js */
.lb-tag{
  position:absolute;top:10px;left:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(21,10,17,.9);border:1px solid var(--magenta);
  padding:4px 8px;color:var(--magenta-t);
}
.lb-raw{
  position:absolute;right:0;bottom:0;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(21,10,17,.9);border:1px solid var(--line);
  padding:5px 9px;color:var(--concrete);
}
.lb-raw:hover{color:var(--cyan);border-color:var(--cyan);text-decoration:none}
.lightbox .close{
  position:absolute;top:calc(var(--sysbar-h) + 10px);right:2.5vw;background:var(--ink);border:1px solid var(--line);
  color:var(--bone);font-family:var(--mono);font-size:12px;padding:7px 13px;cursor:pointer;z-index:2;
}
.lightbox .close:hover{border-color:var(--signal);color:var(--signal)}
.lightbox .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:1px solid var(--line);color:var(--bone);
  font-family:var(--mono);font-size:16px;padding:12px 16px;cursor:pointer;
}
.lightbox .lb-nav:hover{border-color:var(--cyan);color:var(--cyan)}
.lightbox .lb-prev{left:18px}
.lightbox .lb-next{right:18px}

/* ---------- sys ---------- */
.featured-proj{
  border:1px solid var(--line);background:var(--panel);padding:36px;margin:12px 0 0;
  display:grid;grid-template-columns:1.3fr .7fr;gap:36px;
}
.featured-proj h3{font-family:var(--stencil);font-size:clamp(26px,3.4vw,42px);text-transform:uppercase;line-height:1}
.featured-proj .desc{color:var(--concrete);margin:16px 0 24px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);padding:5px 10px;color:var(--concrete);
}
.pill.hot{border-color:var(--magenta);color:var(--magenta-t)}
.mini-stats{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);align-self:start}
.mini-stat{background:var(--ink);padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.mini-stat b{font-family:var(--stencil);font-size:24px;font-weight:400}
/* sparkline inside a stat — chart left, latest value beside it */
.mini-stat b:has(.spark),.stat b:has(.spark){display:flex;align-items:center;gap:10px}
.spark{flex:none;display:block}
.mini-stat span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete)}

.numbers{padding:56px 0 0}
.numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink);padding:26px 22px}
.stat b{
  display:block;font-family:var(--stencil);font-size:clamp(30px,3.4vw,46px);
  line-height:1;color:var(--bone);font-weight:400;min-height:1em;
}
.stat b.live-err{color:var(--concrete);opacity:.5}
.stat span{display:block;margin-top:10px;font-size:13px;color:var(--concrete)}
.stat i{
  display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;margin-top:6px;color:var(--magenta-t);opacity:.9;
}
.stat i.off{color:var(--concrete);opacity:.5}

/* non-flagship project cards */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;padding:24px 0 0}
.proj{border:1px solid var(--line);background:var(--panel);padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px}
.proj h3{font-family:var(--stencil);font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;line-height:1.05;font-weight:400}
.proj p{font-size:14px;color:var(--concrete);flex:1}
.proj .pills{margin-bottom:0}
.proj .mini-stats.proj-stats{align-self:stretch}
.proj .hero-cta{margin-top:4px}

/* a year of commits — ghchart svg in a panel frame */
.heatmap{
  border:1px solid var(--line);background:var(--panel);
  padding:22px 22px 16px;margin:36px 0 8px;overflow-x:auto;
}
.heatmap .eyebrow{margin-bottom:14px}
.heatmap img{min-width:640px;width:100%;max-width:760px;margin:0 auto;display:block;opacity:.92}

.repo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:16px 0 80px}
.repo{border:1px solid var(--line);background:var(--panel);padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;color:var(--bone);text-decoration:none;transition:all .15s}
.repo:hover{border-color:var(--cyan);transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(93,242,255,.2);text-decoration:none}
.repo h3{font-family:var(--mono);font-size:14px;letter-spacing:.06em;font-weight:700}
.repo p{font-size:13px;color:var(--concrete);flex:1}
.repo .repo-foot{display:flex;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete)}
.repo .lang::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--magenta);margin-right:6px}

/* ---------- log — the bio, as written ---------- */
.log-grid{display:grid;grid-template-columns:minmax(0,720px) auto;gap:48px;padding:8px 0 80px;align-items:start}
.log-prose p{color:var(--concrete);margin-bottom:22px}
.log-prose p b{color:var(--bone);font-weight:500}
.log-prose p i{color:var(--bone)}
.log-prose p:first-child::first-letter{
  font-family:var(--stencil);font-size:3.2em;line-height:.8;float:left;
  padding:6px 12px 0 0;color:var(--bone);
  text-shadow:-2px 0 rgba(255,46,63,.5),2px 0 rgba(93,242,255,.5);
}
.log-aside{
  position:sticky;top:calc(var(--sysbar-h) + var(--nav-h) + 24px);
  display:flex;flex-direction:column;gap:14px;
}

/* the little discord bio — live status card beside the bio */
.log-aside .eyebrow{margin-bottom:0}
.dcard{
  border:1px solid var(--line);background:var(--panel);
  padding:16px 18px;width:236px;max-width:100%;
  display:flex;flex-direction:column;gap:11px;font-family:var(--mono);
}
.dcard-id{display:flex;align-items:center;gap:12px}
.dcard-pfp{position:relative;width:44px;height:44px;flex:none}
.dcard-pfp img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:var(--panel-2);border:1px solid var(--line);
}
.dcard-dot{
  position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;
  background:#80848e;border:3px solid var(--panel);
}
.dcard-names b{display:block;font-size:14px;letter-spacing:.04em;color:var(--bone)}
.dcard-names span{font-size:11px;color:var(--concrete)}
.dcard-status{font-size:11px;letter-spacing:.1em;text-transform:lowercase;color:var(--concrete)}
.dcard-act{font-size:11px;letter-spacing:.05em;color:var(--bone);line-height:1.5}
.dcard-act:empty{display:none}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;border-bottom:1px solid var(--line);padding:16px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--concrete);white-space:nowrap;user-select:none;
}
.marquee-track{display:inline-block;white-space:nowrap;animation:marquee 60s linear infinite}
.marquee-track em{font-style:normal;color:var(--magenta-t);margin:0 1.5em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
footer{padding:44px 0 60px;color:var(--concrete)}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot-grid .sig{font-family:var(--stencil);font-size:22px;text-transform:uppercase;color:var(--bone)}
.foot-grid p{font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.foot-grid a{color:var(--concrete)}
.foot-grid a:hover{color:var(--cyan)}
/* 88x31 badge row — rendered only when BADGES has entries */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.badges img{width:88px;height:31px;image-rendering:pixelated;border:1px solid var(--line);display:block}
.badges a:hover img{border-color:var(--cyan)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about-layout,.featured-proj,.log-grid,.bio-now{grid-template-columns:1fr}
  .about-side{padding-top:0}
  .about-side .latest{position:static}
  .bio-now{gap:32px}
  .log-aside{position:static;gap:12px}
  .bin{display:none}
  .sys-item#visits{display:none}
  .audio-title{display:none}
  .lightbox .lb-nav{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .sys-item#epoch{display:none}
  .audio input[type=range]{display:none}
  .section-head{padding:52px 0 28px}
  .hero{padding:9vh 0 7vh}
  .hero-block{padding:8vh 0 6vh}
  .lede{font-size:16px}
  .hero-cta{gap:10px}
  .btn{padding:12px 16px;font-size:11px}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .stat{padding:20px 16px}
  .featured-proj{padding:24px 18px;gap:24px}
  .proj{padding:22px 18px}
  .repo-grid,.projects-grid{grid-template-columns:1fr}
  .hero-id{gap:20px}
  .pfp{width:72px;height:72px}
  .jrow{gap:10px;margin-bottom:10px}
  /* lightbox becomes a column: close row on top, framed stack in the
     middle, caption in the flow below — nothing overlaps anything */
  .lightbox{padding:0;align-items:stretch;justify-content:flex-start}
  .lightbox figure{
    gap:10px;
    width:100%;height:100%;padding:48px 12px 12px;
  }
  .lb-head{flex-direction:column;align-items:flex-start;gap:8px;padding:0 70px 0 4px}
  .lb-head h3{font-size:19px}
  .lb-head .lb-note{font-size:11px;white-space:normal}
  .lb-links{flex-direction:row;align-items:flex-start;gap:12px}
  .lb-links a{font-size:10px}
  .lb-stack{padding:10px;gap:12px}
  .lb-item img,.lb-item video{max-height:70vh}
  .lightbox .close{top:8px;right:10px;padding:6px 10px;background:var(--ink);z-index:2}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .boot,.cursor-fx{display:none}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}