/* ==========================================================================
   1HUSTLER — site.css
   Identity: hi-vis workwear x rave flyer x trading floor.
   Rules: no gradient identity, no aurora, no glass header, no pill buttons,
   no marquee, no scroll-reveal. Foil is earned (legendary only).
   ========================================================================== */

:root{
  /* canvas */
  --void:      #08080A;
  --panel:     #0F0F13;
  --panel-2:   #16161C;
  --panel-3:   #1E1E26;
  --chalk:     #F2F2EC;

  /* ink */
  --ink:       #F2F2EC;
  --ink-2:     #A6A6A0;
  --ink-3:     #6E6E74;
  --ink-4:     #43434B;

  /* hi-vis — 2026-08-11 (Eric): acid lime is gone, hot red-orange is the accent */
  --acid:      #FF3D00;
  --acid-dim:  #C22E00;
  --shock:     #FF2D6F;
  --volt:      #00E1FF;
  --rust:      #FF6B1A;

  /* rarity */
  --r-common:    #6E6E74;
  --r-uncommon:  #00E1FF;
  --r-rare:      #FF3D00;
  --r-epic:      #FF2D6F;
  --r-legendary: #FFB300;

  /* lines */
  --line:      rgba(242,242,236,.10);
  --line-2:    rgba(242,242,236,.18);
  --line-3:    rgba(242,242,236,.32);

  /* type */
  --display: 'Anybody', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Archivo', system-ui, -apple-system, sans-serif;
  --data:    'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* rhythm */
  --gut: clamp(1rem, 4vw, 2rem);
  --max: 1320px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; border-radius:2px }
::selection{ background:var(--acid); color:#000 }
hr{ border:0; border-top:1px solid var(--line); margin:0 }

/* ---------- type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'wdth' 78,'wght' 900;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.015em;
  margin:0;
}
.d-xl{ font-size:clamp(3.4rem, 13vw, 10.5rem) }
.d-lg{ font-size:clamp(2.6rem, 8vw, 5.6rem) }
.d-md{ font-size:clamp(1.9rem, 5vw, 3.2rem) }
.d-sm{ font-size:clamp(1.35rem, 3vw, 1.9rem) }

/* the one place we let type stretch wide — section eyebrows */
.wide{ font-variation-settings:'wdth' 118,'wght' 800 }

.mono{
  font-family:var(--data);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 500;
  line-height:1.4;
}
.mono-sm{ font-family:var(--data); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase }
.dim{ color:var(--ink-3) }
.dim-2{ color:var(--ink-2) }
.acid{ color:var(--acid) }
.shock{ color:var(--shock) }
.lede{ font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.5; color:var(--ink-2); max-width:56ch }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.band{ padding-block:clamp(3.5rem, 9vw, 7rem); position:relative }
.band-tight{ padding-block:clamp(2.2rem,5vw,3.5rem) }
.rule{ border-top:1px solid var(--line) }

/* section head: number + eyebrow + title, asymmetric (not centred stock) */
.shead{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.25rem; align-items:start; margin-bottom:2.5rem }
.shead .idx{
  font-family:var(--data); font-size:.62rem; letter-spacing:.14em;
  color:var(--void); background:var(--acid); padding:.35rem .5rem; align-self:start;
}
.shead .eyebrow{ font-family:var(--data); font-size:.62rem; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase }
.shead h2{ grid-column:2; margin:0 }
.shead .idx + .eyebrow{ padding-top:.3rem }

/* ---------- motif: hazard stripes ---------- */
.hazard{
  height:14px;
  background:repeating-linear-gradient(
    -45deg, var(--acid) 0 14px, var(--void) 14px 28px
  );
}
.hazard-thin{ height:6px }
.hazard-shock{
  background:repeating-linear-gradient(-45deg, var(--shock) 0 14px, var(--void) 14px 28px);
}

/* ---------- motif: halftone dot field ---------- */
.halftone{ position:relative }
.halftone::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle at center, rgba(242,242,236,.16) 1px, transparent 1.1px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 70%);
          mask-image:linear-gradient(to bottom, #000, transparent 70%);
}
.halftone > *{ position:relative; z-index:1 }

/* ---------- motif: die-cut sticker ---------- */
.sticker{
  display:inline-block;
  font-family:var(--data); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .6rem;
  border:1px dashed var(--line-3);
  background:var(--panel-2);
  color:var(--ink-2);
  transform:rotate(-1.6deg);
}
.sticker-acid{ background:var(--acid); color:#000; border-color:#000; border-style:solid; transform:rotate(1.4deg); font-weight:700 }
.sticker-shock{ background:var(--shock); color:#fff; border-color:#000; border-style:solid; transform:rotate(-2deg); font-weight:700 }

/* ---------- buttons: hard-edged, offset shadow. never pills ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--data); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:1rem 1.35rem;
  border:1px solid #000;
  background:var(--acid); color:#000;
  box-shadow:4px 4px 0 rgba(255,61,0,.28);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
  cursor:pointer;
  border-radius:0;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(255,61,0,.35) }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(255,61,0,.3) }
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line-2); box-shadow:none;
}
.btn-ghost:hover{ border-color:var(--acid); color:var(--acid); box-shadow:none; transform:translate(-2px,-2px) }
.btn-shock{ background:var(--shock); color:#fff; box-shadow:4px 4px 0 rgba(255,45,111,.3) }
.btn-shock:hover{ box-shadow:7px 7px 0 rgba(255,45,111,.38) }
.btn-sm{ padding:.6rem .85rem; font-size:.6rem }
.btn[disabled],.btn.is-off{ background:var(--panel-3); color:var(--ink-3); box-shadow:none; cursor:not-allowed; border-color:var(--line) }
.btn[disabled]:hover{ transform:none; box-shadow:none }

/* ---------- header ---------- */
.topstrip{
  background:var(--acid); color:#000;
  font-family:var(--data); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:.45rem 0;
}
.topstrip .wrap{ display:flex; gap:1.25rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
.topstrip .dot{ width:7px; height:7px; background:#000; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:.4rem }
.topstrip .live .dot{ background:#000; animation:blip 1.6s steps(1,end) infinite }
@keyframes blip{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }

.masthead{
  position:sticky; top:0; z-index:60;
  background:var(--void);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{ display:flex; align-items:center; gap:1.25rem; height:66px }
.brand{ display:flex; align-items:center; gap:.55rem; margin-right:auto }
.brand .mk{
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--acid); color:#000;
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 70,'wght' 900;
  font-size:1.2rem; line-height:1;
}
.brand .wm{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 76,'wght' 900;
  font-size:1.32rem; text-transform:uppercase; letter-spacing:-.01em;
}
.nav{ display:flex; gap:1.4rem; align-items:center }
.nav a{
  font-family:var(--data); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); padding:.4rem 0; border-bottom:2px solid transparent;
  transition:color .12s var(--ease), border-color .12s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--acid); border-bottom-color:var(--acid) }
.burger{ display:none; background:none; border:1px solid var(--line-2); padding:.5rem .6rem; cursor:pointer }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px 0 }

@media (max-width:900px){
  .nav{
    position:fixed; inset:66px 0 auto 0; background:var(--void);
    flex-direction:column; align-items:stretch; gap:0;
    border-bottom:1px solid var(--line); padding:.5rem var(--gut) 1.25rem;
    display:none;
  }
  .nav.open{ display:flex }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--line) }
  .burger{ display:block }
  .masthead .cta-head{ display:none }
}

/* ---------- hero ---------- */
.hero{ padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,7vw,5rem); position:relative; overflow:hidden }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:center }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:2.5rem } }

.hero h1{ margin:0 0 1.25rem }
.hero h1 .ln{ display:block }
.hero h1 em{
  font-style:normal; color:var(--acid);
  /* knockout bar behind the accent word — flyer, not gradient */
  background:var(--acid); color:#000; padding:0 .12em; margin-left:-.06em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero-kick{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.5rem }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem }

/* countdown — the dominant element, ledger-boxed */
.count{ display:flex; gap:.4rem; margin-top:2rem; flex-wrap:wrap }
.count .seg{
  background:var(--panel); border:1px solid var(--line-2);
  padding:.7rem .85rem; min-width:74px; text-align:center;
}
.count .seg b{
  display:block; font-family:var(--display); font-weight:900;
  font-variation-settings:'wdth' 72,'wght' 900;
  font-size:clamp(1.9rem,4.5vw,2.9rem); line-height:1; color:var(--acid);
  font-variant-numeric:tabular-nums;
}
.count .seg i{ font-style:normal; font-family:var(--data); font-size:.52rem; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase }
.count.is-live .seg b{ color:var(--shock) }

/* ---------- pasted posters (hero art) ----------
   The art is sprayed/pasted work now, so the hero reads as wheatpasted sheets
   on a wall — flat offsets, taped corners — never a fanned hand of cards. */
.deck{ position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100% }
.deck .card{
  position:absolute; inset:0; background:var(--panel);
  transition:transform .35s var(--ease);
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.deck .card img{ width:100%; height:100%; object-fit:cover; display:block }
.deck .c1{ transform:rotate(-1.6deg) translate(-5%,-4%) scale(.97) }
.deck .c2{ transform:rotate(1.2deg) translate(5%,3%) scale(.98) }
.deck .c3{ transform:rotate(-.4deg) }
.deck:hover .c1{ transform:rotate(-2.1deg) translate(-6%,-4.5%) scale(.97) }
.deck:hover .c2{ transform:rotate(1.7deg) translate(6%,3.5%) scale(.98) }
/* tape holding the front sheet up — top corners, hazard amber */
.deck .c3::before,.deck .c3::after{
  content:""; position:absolute; top:-12px; width:84px; height:26px;
  background:repeating-linear-gradient(-45deg, var(--acid) 0 12px, #0A0A0C 12px 24px);
  opacity:.85; z-index:4;
}
.deck .c3::before{ left:-18px; transform:rotate(-8deg) }
.deck .c3::after{ right:-18px; transform:rotate(7deg) }
/* Sits just below the front sheet, not on top of the art. */
.deck .tag{
  position:absolute; left:-8px; bottom:-14px; z-index:5;
}

/* ---------- GRIND / HUSTLE / LUCK strip (piece page) ---------- */
.statset{ display:flex; gap:.75rem; margin-top:1.25rem }
.statset .stat{
  flex:1; background:var(--panel); border:1px solid var(--line-2); padding:.8rem .9rem;
}
.statset .sk{ display:block; font-family:var(--data); font-size:.56rem; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase }
.statset b{
  display:block; font-family:var(--display); font-weight:900;
  font-variation-settings:'wdth' 76,'wght' 900; font-size:1.9rem; line-height:1.15;
  color:var(--acid); font-variant-numeric:tabular-nums;
}
.statset .sbar{ display:block; height:6px; background:var(--line-2); margin-top:.45rem }
.statset .sbar i{ display:block; height:100%; background:var(--acid) }
@media (max-width:560px){ .statset{ flex-direction:column } }

/* ---------- ledger strip (receipt stats, not 4 stat cards) ---------- */
.ledger{ border:1px solid var(--line-2); background:var(--panel); padding:1.5rem clamp(1rem,3vw,2rem) }
.ledger .lrow{
  display:flex; align-items:baseline; gap:.75rem; padding:.62rem 0;
  border-bottom:1px dotted var(--line-2);
}
.ledger .lrow:last-child{ border-bottom:0 }
.ledger .lk{ font-family:var(--data); font-size:.62rem; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; white-space:nowrap }
.ledger .leader{ flex:1; border-bottom:1px dotted var(--ink-4); transform:translateY(-4px) }
.ledger .lv{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 80,'wght' 900;
  font-size:1.5rem; line-height:1; white-space:nowrap;
}
.ledger .lv.hot{ color:var(--acid) }

/* ---------- ticket stub (the drop) ---------- */
.stub{
  position:relative; background:var(--panel); border:1px solid var(--line-2);
  display:grid; grid-template-columns:1fr 260px;
}
@media (max-width:820px){ .stub{ grid-template-columns:1fr } }
.stub .body{ padding:clamp(1.5rem,4vw,2.5rem) }
.stub .tear{
  border-left:2px dashed var(--line-3); padding:clamp(1.5rem,4vw,2.5rem);
  display:flex; flex-direction:column; justify-content:center; gap:.9rem;
  background:var(--panel-2);
}
@media (max-width:820px){ .stub .tear{ border-left:0; border-top:2px dashed var(--line-3) } }
/* perforation notches */
.stub::before,.stub::after{
  content:''; position:absolute; width:20px; height:20px; border-radius:50%;
  background:var(--void); border:1px solid var(--line-2);
}
.stub::before{ top:-11px; right:249px }
.stub::after{ bottom:-11px; right:249px }
@media (max-width:820px){ .stub::before,.stub::after{ display:none } }

.phase{ display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--line) }
.phase:last-child{ border-bottom:0 }
.phase .pn{ font-family:var(--data); font-size:.58rem; color:var(--ink-3); letter-spacing:.14em; min-width:74px }
.phase .pt{ font-family:var(--data); font-size:.68rem; letter-spacing:.06em; flex:1 }
.phase .pp{ font-family:var(--data); font-size:.68rem; color:var(--acid) }
.phase.done .pt,.phase.done .pp{ color:var(--ink-4); text-decoration:line-through }
.phase.now{ background:rgba(255,61,0,.06); margin-inline:-.5rem; padding-inline:.5rem }

/* progress — hi-vis bar, chunked */
.prog{ height:22px; border:1px solid var(--line-2); background:var(--panel-2); position:relative; overflow:hidden }
.prog i{
  display:block; height:100%;
  background:repeating-linear-gradient(-45deg, var(--acid) 0 8px, var(--acid-dim) 8px 16px);
}
/* The label sits over BOTH the dark track and the acid fill, so it cannot take a
   single flat colour. mix-blend-mode:difference with black text composites to
   "unchanged backdrop" — i.e. invisible. A shadowed light label reads on both. */
.prog span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--data); font-size:.58rem; letter-spacing:.14em;
  color:var(--ink); text-shadow:0 0 5px rgba(8,8,10,.95), 0 0 2px rgba(8,8,10,.9);
}

/* ---------- contact sheet (collection grid) ---------- */
.sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:clamp(.75rem,2vw,1.25rem) }
.piece{
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .14s var(--ease), transform .14s var(--ease);
  position:relative; display:block;
}
.piece:hover{ border-color:var(--acid); transform:translateY(-3px) }
.piece .art{ aspect-ratio:1/1; overflow:hidden; background:var(--panel-2); position:relative }
.piece .art img{ width:100%; height:100%; object-fit:cover }
.piece .meta{ padding:.7rem .75rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; border-top:1px solid var(--line) }
.piece .sn{ font-family:var(--data); font-size:.6rem; letter-spacing:.1em; color:var(--ink-2) }
.piece .pr{ font-family:var(--data); font-size:.6rem; color:var(--acid) }
.piece .rank{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  font-family:var(--data); font-size:.52rem; letter-spacing:.1em;
  background:rgba(8,8,10,.82); border:1px solid var(--line-2); padding:.2rem .38rem; color:var(--ink-2);
}
.piece.sold .art::after{
  content:'SOLD'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--data); font-size:.9rem; letter-spacing:.3em; color:#fff;
  background:rgba(8,8,10,.62);
}

/* rarity chips */
.rar{ font-family:var(--data); font-size:.52rem; letter-spacing:.12em; padding:.2rem .4rem; border:1px solid currentColor; text-transform:uppercase }
.rar-common{ color:var(--r-common) }
.rar-uncommon{ color:var(--r-uncommon) }
.rar-rare{ color:var(--r-rare) }
.rar-epic{ color:var(--r-epic) }
.rar-legendary{
  color:#000; border-color:#000;
  background:conic-gradient(from 210deg,#FFB300,#FF2D6F,#00E1FF,#FF3D00,#FFB300);
  font-weight:700;
}

/* ---------- trait ledger (rarity distribution) ---------- */
.traits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem 2.5rem }
.tgroup h4{ font-family:var(--data); font-size:.62rem; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; margin:0 0 .75rem; padding-bottom:.5rem; border-bottom:1px solid var(--line) }
.trow{ display:grid; grid-template-columns:1fr auto; gap:.4rem .75rem; align-items:center; padding:.35rem 0 }
.trow .tn{ font-size:.85rem }
.trow .tp{ font-family:var(--data); font-size:.58rem; color:var(--ink-3) }
.trow .tbar{ grid-column:1/-1; height:4px; background:var(--panel-3) }
.trow .tbar i{ display:block; height:100%; background:var(--acid) }

/* ---------- crew (artists) ---------- */
/* auto-FILL, not auto-fit: with a single crew member auto-fit collapses the track
   and stretches one portrait across the whole page. */
.crew{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem }
.mug{ border:1px solid var(--line); background:var(--panel); transition:border-color .14s var(--ease) }
.mug:hover{ border-color:var(--acid) }
.mug .ph{ aspect-ratio:4/5; overflow:hidden; background:var(--panel-2) }
.mug .ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) }
.mug:hover .ph img{ filter:none }
.mug .nm{ padding:.85rem .9rem }
.mug .nm b{ font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 82,'wght' 900; text-transform:uppercase; font-size:1.05rem; display:block }
.mug .nm span{ font-family:var(--data); font-size:.56rem; letter-spacing:.14em; color:var(--ink-3) }

/* ---------- clippings (journal) ---------- */
.clips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem }
.clip{ border:1px solid var(--line); background:var(--panel); padding:1.25rem; display:flex; flex-direction:column; gap:.6rem; transition:border-color .14s var(--ease) }
.clip:hover{ border-color:var(--acid) }
.clip .kd{ font-family:var(--data); font-size:.56rem; letter-spacing:.14em; color:var(--ink-3) }
.clip h3{ margin:0; font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 84,'wght' 900; text-transform:uppercase; font-size:1.3rem; line-height:1.02 }
.clip p{ margin:0; color:var(--ink-2); font-size:.92rem }

/* ---------- inverting band: LITERAL colour pair (never var swaps) ---------- */
.invert{ background:var(--chalk); color:#08080A }
.invert .dim,.invert .dim-2{ color:#55554F }
.invert .mono{ color:#3A3A36 }
.invert .btn-ghost{ color:#08080A; border-color:rgba(8,8,10,.28) }
.invert .btn-ghost:hover{ border-color:#08080A; color:#08080A }
.invert .ledger{ background:#E8E8E0; border-color:rgba(8,8,10,.18) }
.invert .ledger .lk{ color:#55554F }
.invert .ledger .lv{ color:#08080A }
.invert .shead .eyebrow{ color:#55554F }
.invert hr,.invert .rule{ border-color:rgba(8,8,10,.16) }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem }
.field label{ font-family:var(--data); font-size:.58rem; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase }
.input,select.input,textarea.input{
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
  padding:.8rem .85rem; border-radius:0; width:100%;
  transition:border-color .12s var(--ease);
}
.input:focus{ border-color:var(--acid); outline:none }
.input::placeholder{ color:var(--ink-4) }
.inline-form{ display:flex; gap:.5rem; flex-wrap:wrap; max-width:520px }
.inline-form .input{ flex:1; min-width:200px }

/* ---------- closer ---------- */
.closer{ background:var(--acid); color:#000; padding-block:clamp(3rem,8vw,6rem) }
.closer h2{ color:#000 }
/* Red-orange is a MID-luma band (lime was light): the soft black alphas that
   passed on lime fall under 4.5:1 here, so they run stronger. */
.closer .lede{ color:rgba(8,8,10,.88) }
.closer .input{ background:rgba(8,8,10,.06); border-color:rgba(8,8,10,.4); color:#000 }
.closer .input::placeholder{ color:rgba(8,8,10,.58) }
.closer .btn{ background:#08080A; color:var(--acid); box-shadow:4px 4px 0 rgba(8,8,10,.25) }
.closer .field label{ color:rgba(8,8,10,.8) }
/* The flash lives inside the acid band, and .flash is acid-on-dark — which paints
   acid on acid and makes "You are on the list." invisible at the exact moment the
   visitor needs to see it. Inverting bands need their own literal colour pair. */
.closer .flash{ border-color:#08080A; background:rgba(8,8,10,.09); color:#08080A }
.closer .flash.bad{ border-color:#7A0030; background:rgba(122,0,48,.10); color:#5C0022 }

/* ---------- footer ---------- */
.foot{ background:var(--void); border-top:1px solid var(--line); padding-block:3rem 2rem }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr } }
.foot h5{ font-family:var(--data); font-size:.58rem; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; margin:0 0 .9rem }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem }
.foot a{ color:var(--ink-2); font-size:.9rem }
.foot a:hover{ color:var(--acid) }
.foot-btm{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line) }

/* ---------- flash / toast ---------- */
.flash{
  border:1px solid var(--acid); background:rgba(255,61,0,.08); color:var(--acid);
  padding:.85rem 1rem; font-family:var(--data); font-size:.64rem; letter-spacing:.1em; margin-bottom:1.5rem;
}
.flash.bad{ border-color:var(--shock); background:rgba(255,45,111,.08); color:var(--shock) }

/* ---------- item detail ---------- */
.item-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(1.5rem,4vw,3rem); align-items:start }
@media (max-width:980px){ .item-grid{ grid-template-columns:1fr } }
.item-art{ border:1px solid var(--line-2); background:var(--panel); aspect-ratio:1/1; overflow:hidden; position:relative }
.item-art img{ width:100%; height:100%; object-fit:cover }
.attr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem }
.attr{ border:1px solid var(--line); background:var(--panel-2); padding:.7rem .75rem }
.attr .an{ font-family:var(--data); font-size:.52rem; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; display:block; margin-bottom:.3rem }
.attr .av{ font-size:.95rem; display:block; line-height:1.2 }
.attr .ar{ font-family:var(--data); font-size:.52rem; color:var(--acid); margin-top:.35rem; display:block }

/* ---------- filters ---------- */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line) }
.chip{
  font-family:var(--data); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem .7rem; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer;
  transition:all .12s var(--ease);
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink) }
.chip.on{ background:var(--acid); color:#000; border-color:var(--acid); font-weight:700 }

/* ---------- pagination ---------- */
.pager{ display:flex; gap:.4rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap }
.pager a,.pager span{
  font-family:var(--data); font-size:.6rem; letter-spacing:.1em;
  padding:.55rem .8rem; border:1px solid var(--line-2); color:var(--ink-2);
}
.pager a:hover{ border-color:var(--acid); color:var(--acid) }
.pager .on{ background:var(--acid); color:#000; border-color:var(--acid); font-weight:700 }

/* ---------- prose (journal article) ---------- */
.prose{ max-width:68ch; font-size:1.06rem; line-height:1.68; color:var(--ink-2) }
.prose h2,.prose h3{ color:var(--ink); font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1; margin:2.25rem 0 .9rem }
.prose h2{ font-variation-settings:'wdth' 82,'wght' 900; font-size:1.9rem }
.prose h3{ font-variation-settings:'wdth' 88,'wght' 800; font-size:1.35rem }
.prose p{ margin:0 0 1.15rem }
.prose a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px }
.prose ul,.prose ol{ margin:0 0 1.15rem; padding-left:1.25rem }
.prose li{ margin-bottom:.45rem }
.prose blockquote{
  margin:1.75rem 0; padding:1rem 0 1rem 1.25rem; border-left:3px solid var(--acid);
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 90,'wght' 800;
  font-size:1.35rem; line-height:1.15; color:var(--ink); text-transform:none;
}
.prose code{ font-family:var(--data); font-size:.82em; background:var(--panel-2); padding:.15em .35em; border:1px solid var(--line) }
.prose img{ border:1px solid var(--line-2); margin:1.5rem 0 }

/* ---------- utility ---------- */
.stack-sm > * + *{ margin-top:.75rem }
.stack > * + *{ margin-top:1.25rem }
.stack-lg > * + *{ margin-top:2.5rem }
.row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.between{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
.center{ text-align:center }
.hide{ display:none !important }
@media (max-width:760px){ .hide-sm{ display:none } }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .deck .card{ transition:none }
}

/* ── FOR SALE banner ─────────────────────────────────────────────────────────
   Sitewide sale notice (2026-09-03). Sits above .topstrip, which is already
   var(--acid) #FF3D00 — two reds butted together read as one block, so this
   band is a deeper true red, separated by hard black rules and set much larger
   than the ticker. Flat fills + hard edges to match the stencil art direction. */
.forsale{
  background:#D40000;
  color:#fff;
  border-top:3px solid #000;
  border-bottom:4px solid #000;
  padding:.9rem 0;
}
.forsale .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem 1.15rem;
  flex-wrap:wrap;
  text-align:center;
}
.forsale p{ margin:0 }
.forsale-lead{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'wdth' 70,'wght' 900;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.04;
  font-size:clamp(1.25rem, 4.2vw, 2.25rem);
}
.forsale-tag{
  display:inline-block;
  background:#000;
  color:#fff;
  padding:.1em .4em;
  margin-right:.4em;
}
.forsale-cta{
  font-family:var(--data);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(.62rem, 1.7vw, .82rem);
  white-space:nowrap;
}
.forsale-cta a{
  display:inline-block;
  margin-left:.35em;
  padding:.5em .8em;
  background:#000;
  color:#fff;
  border:2px solid #fff;
  text-decoration:none;
  transition:background .12s linear, color .12s linear;
}
.forsale-cta a:hover,
.forsale-cta a:focus-visible{ background:#fff; color:#000 }

/* Narrow phones: stack the two lines and let the email wrap rather than
   overflow the 320px floor. */
@media (max-width:430px){
  .forsale{ padding:.75rem 0 }
  .forsale .wrap{ flex-direction:column; gap:.55rem }
  .forsale-cta{ white-space:normal }
}

/* ==========================================================================
   SITE FOR SALE — entry dialog (2026-09-10)
   Take the listing down by removing this block and the markup at the top of
   page_header() in inc/view.php.
   The full-site grey-out layer that sat here was removed 2026-10-01 so the
   site shows its real colours while it is still listed.
   ========================================================================== */

/* ---------- entry dialog ---------- */
.fsm{
  position:fixed; inset:0; z-index:9995;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem,3vw,2rem);
  overflow-y:auto; overscroll-behavior:contain;
}
.fsm[hidden]{ display:none }
.fsm-back{ position:absolute; inset:0; background:rgba(4,4,6,.88) }
.fsm-card{
  position:relative;
  width:min(540px,100%);
  background:var(--void,#08080A);
  color:#fff;
  border:3px solid #fff;
  box-shadow:0 0 0 7px #D40000;
  padding:clamp(1.4rem,5vw,2.4rem);
  text-align:center;
}
.fsm-tag{
  display:inline-block; margin:0 0 1rem;
  background:#D40000; color:#fff;
  font-family:var(--data,ui-monospace,monospace);
  font-weight:700; font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.5em .9em;
}
.fsm-dom{
  margin:0;
  font-family:var(--display,system-ui,sans-serif);
  font-weight:900; font-variation-settings:'wdth' 70,'wght' 900;
  text-transform:uppercase; line-height:1;
  letter-spacing:-.01em;
  font-size:clamp(1.7rem,8vw,3rem);
  /* The domain is one long unbreakable token at 320px. */
  overflow-wrap:anywhere;
}
.fsm-copy{
  margin:1rem auto 1.6rem; max-width:36ch;
  font-size:.95rem; line-height:1.55;
  color:rgba(255,255,255,.78);
}
.fsm-mail{
  display:block;
  background:#D40000; color:#fff;
  border:2px solid #fff;
  text-decoration:none;
  font-family:var(--data,ui-monospace,monospace);
  font-weight:700; font-size:clamp(.8rem,3.4vw,1rem);
  letter-spacing:.06em;
  padding:.95em .8em;
  overflow-wrap:anywhere;
  transition:background .12s linear, color .12s linear;
}
.fsm-mail:hover,.fsm-mail:focus-visible{ background:#fff; color:#000 }
.fsm-mail small{
  display:block; margin-bottom:.35em;
  font-weight:400; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.8;
}
.fsm-go{
  display:block; width:100%; margin-top:1rem;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.62);
  font-family:var(--data,ui-monospace,monospace);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.85em .5em;
  text-decoration:underline; text-underline-offset:.3em;
}
.fsm-go:hover,.fsm-go:focus-visible{ color:#fff }