/* ==========================================================================
   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 */
  --acid:      #C7F400;
  --acid-dim:  #9BBE00;
  --shock:     #FF2D6F;
  --volt:      #00E1FF;
  --rust:      #FF6B1A;

  /* rarity */
  --r-common:    #6E6E74;
  --r-uncommon:  #00E1FF;
  --r-rare:      #C7F400;
  --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(199,244,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(199,244,0,.35) }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(199,244,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) }

/* ---------- the fanned deck (hero art) ---------- */
.deck{ position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100% }
.deck .card{
  position:absolute; inset:0; border:1px solid var(--line-2); background:var(--panel);
  transition:transform .35s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
}
.deck .card img{ width:100%; height:100%; object-fit:cover }
.deck .c1{ transform:rotate(-7deg) translate(-7%,3%) scale(.9) }
.deck .c2{ transform:rotate(5deg) translate(7%,-2%) scale(.93) }
.deck .c3{ transform:rotate(-1deg) }
.deck:hover .c1{ transform:rotate(-11deg) translate(-13%,4%) scale(.9) }
.deck:hover .c2{ transform:rotate(9deg) translate(13%,-4%) scale(.93) }
/* Sits just below the card, not on top of its stat row. */
.deck .tag{
  position:absolute; left:-8px; bottom:-14px; z-index:5;
}

/* ---------- 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(199,244,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,#C7F400,#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 }
.closer .lede{ color:rgba(8,8,10,.7) }
.closer .input{ background:rgba(8,8,10,.06); border-color:rgba(8,8,10,.32); color:#000 }
.closer .input::placeholder{ color:rgba(8,8,10,.42) }
.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,.6) }
/* 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(199,244,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 }
}