/* ============================================================
   shanedenom.me
   Editorial-industrial. Warm paper, ink rules, one hot accent.
   ============================================================ */

:root{
  --paper:      #F4F1E8;
  --paper-2:    #EBE6DA;
  --ink:        #17160F;
  --ink-2:      #4A473C;
  --ink-3:      #7C7868;
  --rule:       #17160F1F;
  --rule-hard:  #17160F;
  --accent:     #C24320;
  --accent-ink: #FFF6F1;
  --teal:       #2A6F63;
  --grain:      .045;
  --shadow:     0 1px 0 var(--rule), 0 18px 40px -28px #17160F55;

  --f-disp: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --max: 66rem;
  --col: 64rem;   /* article column */
  --read: 40rem;  /* prose measure inside it */
  color-scheme: light;
}

[data-theme="dark"]{
  --paper:     #131210;
  --paper-2:   #1B1A16;
  --ink:       #EDE8DB;
  --ink-2:     #B0AA9A;
  --ink-3:     #7E786A;
  --rule:      #EDE8DB24;
  --rule-hard: #EDE8DB;
  --accent:    #F0703F;
  --accent-ink:#17160F;
  --teal:      #57B8A6;
  --grain:     .07;
  --shadow:    0 1px 0 var(--rule), 0 18px 40px -28px #000;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Archivo Black has a single weight — never let the browser fake a bolder one. */
html{ font-synthesis:none; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

.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;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
  font-family:var(--f-mono); font-size:.75rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ── grain ─────────────────────────────────────────────── */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60; opacity:var(--grain);
  mix-blend-mode:multiply;
}
[data-theme="dark"] .grain{ mix-blend-mode:screen; }

/* ── top bar ───────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding:.85rem var(--pad);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule);
}
.mark{
  font-family:var(--f-disp); font-weight:800; font-size:.95rem;
  letter-spacing:.06em; text-decoration:none; color:var(--ink);
  border:1.5px solid var(--rule-hard); padding:.2rem .45rem .1rem;
  line-height:1.1; flex:none;
  transition:background .2s, color .2s;
}
.mark:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.topbar nav{ display:flex; gap:clamp(.75rem,2vw,1.75rem); margin-left:auto; }
.topbar nav a{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:.35rem 0;
  border-bottom:1.5px solid transparent;
  transition:color .18s, border-color .18s;
}
.topbar nav a:hover, .topbar nav a.on{ color:var(--ink); border-bottom-color:var(--accent); }
@media (max-width:640px){ .topbar nav a:nth-child(4){ display:none; } }
@media (max-width:460px){ .topbar nav a:nth-child(3){ display:none; } }
/* Nothing in the bar may force the page wider than the screen. */
.topbar nav{ min-width:0; }
@media (max-width:520px){
  .topbar{ gap:.6rem; padding-inline:1rem; }
  .topbar nav{ gap:.7rem; }
  .theme{ padding:.35rem .45rem; }
  .theme-txt{ display:none; }
}

.theme{
  display:flex; align-items:center; gap:.45rem; flex:none;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2);
  background:none; border:1px solid var(--rule); border-radius:99px;
  padding:.35rem .7rem; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.theme:hover{ border-color:var(--rule-hard); color:var(--ink); }
.theme-dot{
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ink); box-shadow:inset -.18rem -.05rem 0 0 var(--paper);
  transition:background .3s, box-shadow .3s;
}
[data-theme="dark"] .theme-dot{ background:var(--accent); box-shadow:none; }

/* ══ HERO ══════════════════════════════════════════════ */
.hero{
  position:relative;
  padding:clamp(3rem,9vh,7rem) var(--pad) 0;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 100%);
  background-size:clamp(3rem,7vw,6rem) 100%;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero-inner{ position:relative; max-width:var(--max); margin:0 auto; }

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:0 0 clamp(1rem,3vh,2rem);
}

.bigname{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(3rem, 14vw, 11rem);   /* Archivo Black runs ~18% wider than the old face */
  line-height:.82;
  letter-spacing:calc(-.045em + 2px);   /* 2px looser at every size */
  margin:0 0 clamp(1.75rem,5vh,3.25rem);
}
.bigname .ln{ display:block; }
.bigname .ln-2{ padding-left:clamp(0rem,3vw,2.5rem); }
.bigname .dot{ color:var(--accent); font-style:normal; }

.hero-cols{
  display:grid; gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start;
  padding-top:clamp(1rem,3vh,2rem);
  border-top:1.5px solid var(--rule-hard);
}
@media (max-width:820px){ .hero-cols{ grid-template-columns:1fr; } }

.lede{
  margin:0; font-size:clamp(1.15rem,1rem + .85vw,1.6rem);
  line-height:1.48; text-wrap:pretty;
}
.lede strong{ font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; }
.lede-b{ display:block; margin-top:.9em; color:var(--ink-2); font-size:.86em; }

.spec{ margin:0; font-family:var(--f-mono); font-size:.72rem; line-height:1.55; }
.spec > div{
  display:grid; grid-template-columns:4.5rem 1fr; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--rule);
}
.spec dt{ color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; }
.spec dd{ margin:0; color:var(--ink); }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin:clamp(2rem,5vh,3rem) 0 clamp(2.5rem,6vh,4rem); }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:1.5px solid var(--rule-hard);
  padding:.8rem 1.4rem; background:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s, color .18s, box-shadow .18s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--rule-hard); }
.btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:4px 4px 0 var(--rule-hard); }
.btn-meta{ color:var(--ink-3); font-size:.85em; }
.btn-solid .btn-meta{ color:inherit; opacity:.6; }

/* ── ticker ─────────────────────────────────────────── */
.ticker{
  position:relative; overflow:hidden;
  border-top:1.5px solid var(--rule-hard); border-bottom:1.5px solid var(--rule-hard);
  margin:0 calc(var(--pad) * -1);
  padding:.9rem 0; background:var(--paper-2);
}
.ticker-track{
  display:flex; gap:2.5rem; width:max-content;
  animation:slide 46s linear infinite;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em;
  color:var(--ink-2); white-space:nowrap; padding-left:2.5rem;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.ticker-track i{ color:var(--ink-3); font-style:normal; font-size:.6rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ══ BANDS ═════════════════════════════════════════════ */
.band{ padding:clamp(4rem,10vh,8rem) var(--pad); }
.band-alt{ background:var(--paper-2); border-block:1px solid var(--rule); }
.band-end{ padding-bottom:0; }
.band > *{ max-width:var(--max); margin-inline:auto; }

.secthead{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:clamp(2rem,5vh,3.5rem);
}
.secthead .num{
  font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; color:var(--accent); flex:none;
}
.secthead h2{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3.4rem);
  letter-spacing:-.03em; line-height:1; margin:0; flex:none;
}
.secthead .rule{ flex:1; height:1.5px; background:var(--rule-hard); opacity:.85; min-width:1rem; }
.secthead .note{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); flex:none;
}
@media (max-width:700px){ .secthead .note{ display:none; } }

.band-intro{
  max-width:var(--read); font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  color:var(--ink-2); margin-inline:auto; padding-bottom:clamp(2rem,4vh,3rem);
}

/* ══ WORK MANIFEST ═════════════════════════════════════ */
.manifest{ list-style:none; margin-inline:auto; padding:0; max-width:53rem; }
.job{
  display:grid; grid-template-columns:9rem 1fr; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.75rem,4vh,2.75rem) 0;
  border-top:1px solid var(--rule);
  position:relative;
}
.job:last-child{ border-bottom:1px solid var(--rule); }
.job::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--accent); transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.job:hover::before{ width:100%; }
@media (max-width:760px){ .job{ grid-template-columns:1fr; gap:.75rem; } }

.job-when{ font-family:var(--f-mono); line-height:1.3; padding-top:.35rem; }
.job-when .yr{
  display:block; font-size:1.5rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
}
.job-when .to{ display:block; font-size:.7rem; color:var(--ink-3); letter-spacing:.08em; }
@media (max-width:760px){
  .job-when{ display:flex; align-items:baseline; gap:.5rem; padding-top:0; }
  .job-when .yr{ font-size:1.05rem; }
}

.job-body h3{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.4rem,1.1rem + 1vw,2.1rem);
  letter-spacing:-.025em; margin:0 0 .6rem; line-height:1.05;
}
.roles{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.role{
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule); padding:.25rem .55rem;
}
.role-now{ border-color:var(--accent); color:var(--accent); }

.job-sum{ margin:0 0 1rem; color:var(--ink-2); }

.bullets{ margin:0; padding:0; list-style:none; }
.bullets li{
  position:relative; padding-left:1.4rem; margin-bottom:.7rem;
  color:var(--ink-2); text-wrap:pretty;
}
.bullets li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:.5rem; height:1.5px; background:var(--accent);
}
.bullets b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.bullets em{ font-style:italic; color:var(--ink); }
.is-lead .bullets li{ color:var(--ink); }

/* ══ GAMES — featured ══════════════════════════════════ */
.featured{
  display:grid; gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:clamp(3.5rem,8vh,6rem);
}
@media (max-width:760px){ .featured{ grid-template-columns:1fr; } }

/* A playable embed gets its own full-width row — a 1920x1080 build is
   unplayable squeezed into a third of the grid. */
.gcard.is-embed{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);
}
@media (max-width:820px){ .gcard.is-embed{ grid-template-columns:1fr; } }
.gcard.is-embed .gcard-media{
  aspect-ratio:16/9; border-bottom:0; border-right:1.5px solid var(--rule-hard);
}
@media (max-width:820px){
  .gcard.is-embed .gcard-media{ border-right:0; border-bottom:1.5px solid var(--rule-hard); }
}
.gcard.is-embed .gcard-body{ justify-content:center; }
.gcard.is-embed .gcard-desc{ flex:none; }
a.gcard-go{ text-decoration:none; align-self:start; }
a.gcard-go:hover{ border-bottom:1.5px solid var(--accent); }
a.gcard-go:hover::after{ transform:translateX(.3rem); }
.gcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1.5px solid var(--rule-hard);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.gcard:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--rule-hard); }
.gcard.is-embed:hover{ transform:none; box-shadow:none; }

.gcard-media{
  position:relative; aspect-ratio:5/4; overflow:hidden;
  background:var(--paper-2); border-bottom:1.5px solid var(--rule-hard);
}
.gcard-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s;
  filter:saturate(.88) contrast(1.04);
}
.gcard:hover .gcard-media img{ transform:scale(1.045); filter:saturate(1) contrast(1.06); }
.gcard-media iframe{ width:100%; height:100%; border:0; display:block; }

/* Click-to-load poster. A Unity build is ~40MB; autoloading it stalls phones. */
.playbtn{
  position:relative; display:block; width:100%; height:100%;
  padding:0; border:0; cursor:pointer; background:var(--ink); overflow:hidden;
}
.playbtn img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.62);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.playbtn:hover img, .playbtn:focus-visible img{ transform:scale(1.04); filter:saturate(1) brightness(.75); }
.play-ui{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1rem;
}
.play-icon{
  display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-size:1.1rem;
  padding-left:.2rem; transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.playbtn:hover .play-icon, .playbtn:focus-visible .play-icon{ transform:scale(1.1); }
.play-txt{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.play-sub{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; color:#ffffffa8; }

.gcard-glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(4rem,16vw,7rem); line-height:1;
  color:var(--rule-hard); opacity:.22; letter-spacing:-.06em;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, var(--rule) 9px 11px);
}

.gcard-stat{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font-family:var(--f-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:.3rem .55rem;
}
.gcard-stat.play{ background:var(--accent); color:var(--accent-ink); }

.gcard-body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.55rem; }
.gcard-body h4{
  font-family:var(--f-disp); font-weight:700; font-size:1.45rem;
  letter-spacing:-.025em; margin:0; line-height:1.05;
}
.gcard-meta{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.gcard-desc{ margin:0; font-size:.95rem; line-height:1.5; color:var(--ink-2); flex:1; }
.gcard-go{
  font-family:var(--f-mono); font-size:.65rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.3rem;
}
.gcard-go::after{ content:"→"; transition:transform .25s; }
.gcard:hover .gcard-go::after{ transform:translateX(.3rem); }
.gcard-go.muted{ color:var(--ink-3); }
.gcard-go.muted::after{ content:""; }

/* ══ GAMES — ledger ════════════════════════════════════ */
.ledger-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.5rem;
  padding-bottom:1rem; margin-bottom:.25rem;
  border-bottom:1.5px solid var(--rule-hard);
}
.ledger-head h3{
  font-family:var(--f-disp); font-weight:700; font-size:1.5rem;
  letter-spacing:-.025em; margin:0;
}
.filters{ display:flex; flex-wrap:wrap; gap:.4rem; margin-left:auto; }
.chip{
  font-family:var(--f-mono); font-size:.65rem; font-weight:500;
  letter-spacing:.1em; color:var(--ink-2); background:none;
  border:1px solid var(--rule); padding:.3rem .6rem; cursor:pointer;
  transition:all .18s;
}
.chip:hover{ border-color:var(--rule-hard); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

.ledger-wrap{ overflow-x:auto; position:relative; }
/* Fade the final visible row so it reads as cut off, not as the end. */
.ledger-wrap.is-clipped::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4.5rem;
  background:linear-gradient(to bottom, transparent, var(--paper-2));
  pointer-events:none;
}
.ledger{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:34rem; }
.ledger thead th{
  font-family:var(--f-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:.9rem .75rem; font-weight:500;
  border-bottom:1px solid var(--rule);
}
.ledger tbody tr{ border-bottom:1px solid var(--rule); transition:background .2s; }
.ledger tbody tr:hover{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
.ledger td{ padding:.8rem .75rem; vertical-align:baseline; }
.ledger .c-yr{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-3); width:4.5rem; }
.ledger .c-name{ font-weight:400; color:var(--ink); }
.ledger .c-name a{ color:inherit; text-decoration:none; border-bottom:1.5px solid var(--accent); }
.ledger .c-name a:hover{ color:var(--accent); }
.ledger .c-jam{ color:var(--ink-2); font-size:.88rem; }
.ledger .c-eng{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.ledger tr.hide{ display:none; }

.more{
  display:block; margin:1.25rem auto 0;
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:none; border:1.5px solid var(--rule-hard);
  padding:.7rem 1.4rem; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s, color .18s, box-shadow .18s;
}
.more:hover{
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--rule-hard);
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.more[hidden]{ display:none; }

.ledger-foot{
  font-family:var(--f-mono); font-size:.68rem; line-height:1.7;
  color:var(--ink-3); max-width:var(--read); margin:1.5rem auto 0;
}

/* ══ HARDWARE ══════════════════════════════════════════ */
.rig{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1.5rem,4vw,4rem);
  border-top:1.5px solid var(--rule-hard); padding-top:clamp(1.5rem,4vh,2.5rem);
}
@media (max-width:820px){ .rig{ grid-template-columns:1fr; } }

.rig-title h3{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(2rem,1.4rem + 2vw,3.2rem);
  letter-spacing:-.035em; margin:0 0 .5rem; line-height:.95;
}
.rig-sub{
  font-family:var(--f-mono); font-size:.72rem; line-height:1.7;
  color:var(--accent); margin:0; letter-spacing:.02em;
}
.rig-body > p{ margin:0 0 1.5rem; max-width:62ch; color:var(--ink-2); }

.schematic{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0; align-items:stretch; margin:0 0 1.75rem;
}
@media (max-width:700px){
  .schematic{ grid-template-columns:1fr; }
  .schematic .wire{ height:1.75rem; width:100%; }
  .schematic .wire span{ width:1.5px !important; height:100% !important; margin:0 auto; }
}
.node{
  border:1.5px solid var(--rule-hard); padding:.9rem 1rem 1.1rem;
  background:var(--paper);
}
.node-label{
  display:block; font-family:var(--f-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.6rem;
}
.node ul{ margin:0; padding:0; list-style:none; font-family:var(--f-mono); font-size:.7rem; line-height:1.85; color:var(--ink-2); }
.node-brain{ background:var(--ink); border-color:var(--ink); }
.node-brain .node-label{ color:var(--paper); }
.node-brain ul{ color:color-mix(in srgb, var(--paper) 78%, transparent); }

.wire{ display:grid; place-items:center; width:clamp(1.25rem,4vw,3rem); }
.wire span{
  display:block; width:100%; height:1.5px;
  background:repeating-linear-gradient(to right, var(--rule-hard) 0 5px, transparent 5px 9px);
}

.rig-note{
  border-left:2px solid var(--accent); padding-left:1.1rem;
  font-style:italic; color:var(--ink-2); max-width:58ch;
}
.rig-links{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.75rem 0 0; }
.tag{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule); padding:.28rem .6rem;
}

/* ══ WORKSHOP SHELF ════════════════════════════════════ */
.shelf{
  display:grid; gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
}
.shelf-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1.5px solid var(--rule-hard); background:var(--paper); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.shelf-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--rule-hard); }
.shelf-media{
  aspect-ratio:16/10; overflow:hidden; background:var(--paper-2);
  border-bottom:1.5px solid var(--rule-hard);
}
.shelf-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.shelf-card:hover .shelf-media img{ transform:scale(1.045); }

/* Stand-in until a photo exists. */
.ph{
  display:grid; place-items:center; width:100%; height:100%;
  background:repeating-linear-gradient(45deg, transparent 0 9px, var(--rule) 9px 11px);
}
.ph-txt{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.75rem,5vw,2.75rem); color:var(--rule-hard); opacity:.2;
}

.shelf-body{ padding:1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.shelf-body h3{
  font-family:var(--f-disp); font-weight:700; font-size:1.6rem;
  letter-spacing:-.03em; margin:0; line-height:1.05;
}
.shelf-meta{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.shelf-desc{ margin:0; font-size:.95rem; line-height:1.55; color:var(--ink-2); flex:1; }
.shelf-go{
  font-family:var(--f-mono); font-size:.65rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.3rem;
}
.shelf-go::after{ content:"→"; transition:transform .25s; }
.shelf-card:hover .shelf-go::after{ transform:translateX(.3rem); }

/* ══ PROJECT PAGES ═════════════════════════════════════ */
.back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
}
.back::before{ content:"←"; transition:transform .25s; }
.back:hover{ color:var(--accent); }
.back:hover::before{ transform:translateX(-.3rem); }

.phead{ padding:clamp(2.5rem,7vh,5rem) var(--pad) clamp(2rem,5vh,3.5rem); }
.phead-in{ max-width:var(--max); margin-inline:auto; }
.phead h1{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(2.6rem,1.6rem + 5vw,6rem);
  letter-spacing:-.04em; line-height:.92; margin:1.5rem 0 1rem;
}
.phead .sub{
  font-size:clamp(1.1rem,1rem + .7vw,1.5rem); line-height:1.45;
  color:var(--ink-2); max-width:44ch; margin:0 0 1.75rem; text-wrap:pretty;
}
.pfacts{
  display:grid; gap:0; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  border-top:1.5px solid var(--rule-hard);
}
.pfacts > div{ padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--rule); }
.pfacts dt{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem;
}
.pfacts dd{ margin:0; font-family:var(--f-mono); font-size:.78rem; color:var(--ink); line-height:1.4; }

.pbody{ padding:0 var(--pad) clamp(3rem,8vh,6rem); }
.pbody > *{ max-width:var(--col); margin-inline:auto; }
/* Prose sits in a narrower column, centred inside the same axis as the figures. */
.pbody p, .pbody > ul, .pbody h2, .pbody h3,
.pbody pre.code, .pbody .callout{ max-width:var(--read); margin-inline:auto; }
.pbody h2{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);
  letter-spacing:-.03em; line-height:1.1;
  margin:clamp(2.5rem,6vh,4rem) auto clamp(.85rem,2vh,1.25rem); width:100%;
  padding-top:clamp(1.25rem,3vh,2rem); border-top:1.5px solid var(--rule-hard);
}
.pbody h3{
  font-family:var(--f-disp); font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; margin:1.75rem auto .5rem;
}
.pbody p{ margin:0 auto 1.1rem; color:var(--ink-2); text-wrap:pretty; }
.pbody p strong{ color:var(--ink); font-weight:500; }
.pbody > ul{ margin:0 auto 1.25rem; padding:0; list-style:none; }
.pbody > ul li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--ink-2); }
.pbody > ul li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:.5rem; height:1.5px; background:var(--accent);
}

figure{ margin:clamp(1.5rem,4vh,2.5rem) 0; }
figure img{
  display:block; width:auto; max-width:100%;
  max-height:min(78vh, 42rem);
  margin-inline:auto;
  border:1.5px solid var(--rule-hard); background:var(--paper-2);
}
figcaption{
  font-family:var(--f-mono); font-size:.66rem; line-height:1.6;
  color:var(--ink-3); margin:.6rem auto 0; max-width:var(--read);
}
/* Flex, not grid: a grid leaves the last row's orphans pinned left. */
.gallery{
  --gg: clamp(.75rem,2vw,1.25rem);
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gg);
  margin:clamp(1.5rem,4vh,2.5rem) auto;
}
.gallery > figure{ width:calc((100% - 2 * var(--gg)) / 3); }
@media (max-width:820px){ .gallery > figure{ width:calc((100% - var(--gg)) / 2); } }
@media (max-width:520px){ .gallery > figure{ width:100%; } }
.gallery figure{ margin:0; }
/* Uniform tiles: a mixed portrait/landscape set at natural size reads as broken. */
.gallery figure img{
  width:100%; max-width:none; height:auto; aspect-ratio:4/5;
  object-fit:cover; max-height:none;
}
.gallery figcaption{ max-width:none; }
.gallery .ph{ aspect-ratio:4/5; }
.wide{ grid-column:1 / -1; }

pre.code{
  overflow-x:auto; border:1.5px solid var(--rule-hard); background:var(--paper-2);
  padding:1.1rem 1.25rem; font-family:var(--f-mono); font-size:.72rem;
  line-height:1.7; margin:1.5rem 0; color:var(--ink);
}
pre.code .c{ color:var(--ink-3); }
pre.code .k{ color:var(--accent); }

.callout{
  border-left:2px solid var(--accent); padding:.25rem 0 .25rem 1.1rem;
  font-style:italic; color:var(--ink-2); margin:1.5rem auto;
}

/* ══ METHOD ════════════════════════════════════════════ */
.essay{ max-width:var(--max); }
.pull{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.9rem);
  line-height:1.14; letter-spacing:-.03em;
  margin:0 auto clamp(2rem,5vh,3rem); max-width:var(--read); text-wrap:balance;
}
.essay-cols{ columns:2; column-gap:clamp(2rem,5vw,4.5rem); max-width:68rem; }
@media (max-width:760px){ .essay-cols{ columns:1; } }
.essay-cols p{ margin:0 0 1.2rem; break-inside:avoid; color:var(--ink-2); }
.essay-cols p:first-child::first-letter{
  float:left; font-family:var(--f-disp); font-weight:800;
  font-size:3.6em; line-height:.78; padding:.05em .1em 0 0; color:var(--accent);
}
.toolrow{
  display:flex; flex-wrap:wrap; gap:.4rem; list-style:none;
  margin:clamp(2rem,5vh,3rem) 0 0; padding:clamp(1.5rem,3vh,2rem) 0 0;
  border-top:1.5px solid var(--rule-hard);
}
.toolrow li{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--ink-2); border:1px solid var(--rule); padding:.4rem .75rem;
  transition:border-color .2s, color .2s;
}
.toolrow li:hover{ border-color:var(--accent); color:var(--accent); }

/* ══ CONTACT ═══════════════════════════════════════════ */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
  padding-bottom:clamp(3rem,8vh,6rem);
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-lede{
  margin:0; font-size:clamp(1.2rem,1rem + 1vw,1.75rem);
  line-height:1.4; text-wrap:pretty;
}
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.contact-list li:first-child{ border-top:1px solid var(--rule); }
.ck{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.cv{
  font-family:var(--f-mono); font-size:.85rem; color:var(--ink);
  text-decoration:none; border-bottom:1.5px solid var(--rule);
  transition:border-color .2s, color .2s; word-break:break-word;
  background:none; border-left:0; border-right:0; border-top:0; cursor:pointer; padding:0;
}
.cv:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.foot{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding:1.25rem 0; border-top:1.5px solid var(--rule-hard);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.foot-mid{ color:var(--ink-3); }

/* ══ REVEAL ════════════════════════════════════════════ */
/* Hidden only when JS is present to reveal them again. */
.js .reveal{
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--d, 0ms);
}
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .gcard:hover, .btn:hover{ transform:none; }
}

@media print{
  .topbar,.ticker,.grain,.theme,.hero-grid{ display:none; }
  body{ background:#fff; color:#000; }
  .band{ padding:1rem 0; break-inside:avoid; }
}