/* the production faces, self-hosted the way cade.market does it */
@font-face{font-family:"Futura PT Cond";src:url("assets/fonts/futura/futura-condensed-pt-medium-589e44ed1e3a5.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT Cond";src:url("assets/fonts/futura/futura-condensed-pt-medium-oblique-589e4507d391c.otf") format("opentype");font-weight:500;font-style:oblique;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/fonts/futura/futura-pt-book-589a6dec272c3.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/fonts/futura/futura-pt-medium-589e45b956de4.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/fonts/futura/futura-pt-demibold-589e43b852117.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url("assets/fonts/futura/futura-pt-bold-589e44b6aacd3.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* ═══════════════════════════════════════════════════════════════════
   PUMPCADE DESIGN SYSTEM, the site itself drawn in the system.

   Dark stage, torn comic plates, hard offset shadows, halftone dots,
   Barlow Condensed italic chrome and JetBrains Mono data, the same
   language as /battle and /qualifier, applied to the documentation.

   Comic rules enforced here:
   · shadows are hard offsets, never blurred
   · nothing rotates, nothing springs
   · white display type carries an ink understroke
   · digits that move are tabular
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* three roles, three faces, analysis/TYPOGRAPHY.md is the authority */
  --font-display:"Futura PT Cond","Futura PT Cond","Barlow Condensed",sans-serif;
  --font-body:"Futura PT","Futura PT","Inter",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --dsp:var(--font-display);
  --ui:var(--font-body);
  --mono:var(--font-mono);
  --display:var(--dsp);
  /* G26, the ink outline on white display type: ~1px per 30px of type */
  --display-stroke:clamp(1px,.0333em,2px);

  --page:#0E0D0C;
  --ink:#141414;
  --panel:#161514;
  --panel-2:#1D1B19;
  --line:#3A3A3A;
  --line-soft:#2A2825;
  --paper:#EFE9D8;
  --fg:#EFE9D8;
  --dim:#A1A1A1;
  --faint:#6B6B6B;

  --or:#FFA800;
  --ord:#FF7A00;
  --orr:#D95F00;
  --yel:#FAF424;
  --vi:#9652EF;
  --vid:#6330D3;
  --red:#EA2A46;
  --blue:#419FE5;
  --lime:#D1FF4D;
  --olive:#91BB4F;

  --bg:var(--page);

  /* torn silhouettes, one per size class */
  --tear-wide:polygon(1.72% 94.26%,0% 82.61%,1.51% 65.76%,0% 48.22%,3.4% 34.16%,0% 18.81%,1.72% 4.83%,8.89% 4.83%,29.46% 10.84%,27.97% 4.83%,67.58% 4.83%,66.38% 0%,89.41% 4.83%,98.55% 4.84%,97.73% 23.96%,100% 50%,97.66% 72.81%,98.55% 94.26%,75.52% 87.53%,77.19% 94.26%,49.31% 94.26%,50.74% 100%,31.08% 94.26%); /* their panelTornB */
  --tear-chip:polygon(7.48% 100%,7.48% 71.21%,0% 48.12%,11.08% 22.93%,8.04% 0%,97.6% 0%,87.16% 26.66%,93.69% 42.12%,85.66% 61.82%,100% 100%); /* their tab */
  --notch:polygon(3% 3%,97% 0,100% 27%,98% 46%,100% 64%,97% 100%,3% 97%,5% 60%,0 42%,4% 24%);

  --shadow-1:4px 4px 0 #000;
  --shadow-2:6px 6px 0 #000;
  --shadow-3:8px 8px 0 #000;
  --ease-emph:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(0,0,.2,1);
}

/* ── base ─────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--fg);
  font-family:var(--ui);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* the page halftone, the stage the plates sit on */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 1px 1px,#1E1C19 1.2px,transparent 1.6px) 0 0/26px 26px,
    radial-gradient(circle at 1px 1px,#171512 1px,transparent 1.4px) 13px 13px/26px 26px;
  opacity:.5;
  mask-image:linear-gradient(180deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
}
main,.chrome,.foot{position:relative;z-index:1}
img{max-width:100%}
a{color:var(--or)}
code{font-family:var(--mono);font-size:.85em;background:#000;border:1px solid #333;border-radius:2px;padding:1px 5px;color:var(--paper)}
::selection{background:var(--or);color:#000}

h1,h2,h3,h4{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;line-height:1.04;margin:0}
h2.rule,h3.sub,.grp,[id^="sec-"],[id^="grp-"]{scroll-margin-top:118px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* ── topbar ───────────────────────────────────────────────── */
.chrome{position:sticky;top:0;z-index:60}
.topbar{
  display:flex;align-items:center;gap:26px;
  background:var(--ink);
  border-bottom:3px solid #000;
  box-shadow:0 4px 0 #000;
  padding:10px 26px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-logo{height:40px;width:auto}
.brand-text{font-family:var(--dsp);font-weight:800;font-style:italic;text-transform:uppercase;
  color:var(--paper);font-size:15px;letter-spacing:.06em}
.brand-text em{color:var(--or);font-style:italic}
.topnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.topnav::-webkit-scrollbar{display:none}
.topnav a{
  font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  font-size:17px;letter-spacing:.08em;color:var(--or);
  text-decoration:none;padding:8px 14px;white-space:nowrap;position:relative;
  isolation:isolate;
}
.topnav a:hover{color:var(--yel)}
.topnav a.on{color:#000}
.topnav a.on::before{
  content:"";position:absolute;inset:2px 0;
  background:var(--paper);clip-path:var(--notch);z-index:-1;
}
.topnav a.mm-pages{color:var(--lime)}
.topnav a.mm-pages.on{color:#000}
.topbar-right{display:flex;gap:10px;flex:none}

/* the viewport switch, desktop | mobile */
.vp-toggle{
  display:flex;border:2.5px solid #000;background:#000;gap:2.5px;
  box-shadow:var(--shadow-1);
}
.vp-toggle button{
  font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:13.5px;border:0;padding:7px 13px;cursor:pointer;
  background:var(--panel);color:var(--dim);
}
.vp-toggle button.on{background:var(--or);color:#000;font-weight:800;font-style:italic}
.vp-toggle button:focus-visible{outline:3px solid var(--yel);outline-offset:-3px}
.mode-toggle{
  font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:13.5px;display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--panel);color:var(--paper);border:2.5px solid #000;
  box-shadow:var(--shadow-1);padding:7px 13px;
}
.mode-toggle:hover{color:var(--yel)}
.mode-toggle .dot{width:10px;height:10px;background:var(--or);border:2px solid #000}
body.production .mode-toggle .dot{background:var(--blue)}

/* ── subbar ───────────────────────────────────────────────── */
.subbar{background:#0E0D0C;border-bottom:2px solid #000}
.subbar-inner{max-width:1280px;margin:0 auto;padding:6px 32px;display:flex;gap:18px;align-items:center}
.subbar-here{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:14px;color:var(--faint);letter-spacing:.1em;flex:none}
.subnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:14px;
  letter-spacing:.06em;color:var(--dim);text-decoration:none;padding:5px 11px;white-space:nowrap}
.subnav a:hover{color:var(--paper)}
.subnav a.on{color:var(--yel)}

/* ── views ────────────────────────────────────────────────── */
.view{display:none}
.view.active{display:block;animation:viewIn .3s var(--ease-emph)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding:44px 32px 10px}
.hero-panel{
  max-width:1280px;margin:0 auto;position:relative;
  filter:drop-shadow(10px 10px 0 #000);
}
.hero-in{
  clip-path:var(--tear-wide);
  background:
    repeating-conic-gradient(from 168deg at 82% 30%,rgba(255,255,255,.09) 0 7deg,transparent 7deg 24deg),
    radial-gradient(circle at 3px 3px,rgba(0,0,0,.18) 2px,transparent 3px) 0 0/30px 30px,
    linear-gradient(126deg,#7A48D8 0%,#6330D3 46%,#4B1FA8 100%);
  padding:74px 64px 66px;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center;
}
.hero .eyebrow{
  display:inline-block;font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:15px;color:var(--lime);margin-bottom:14px;
}
.hero h1{
  font-size:clamp(44px,6.2vw,84px);color:#fff;
  -webkit-text-stroke:2.5px #000;paint-order:stroke fill;
  text-shadow:5px 5px 0 #000;
  margin:0 0 18px;
}
.hero h1 .h1-hit{color:var(--or)}
.hero .lede{max-width:560px;color:#EDE6FF;font-size:16.5px;margin:0 0 26px}
.hero .lede b{color:#fff}
.stat-row{display:flex;gap:14px;flex-wrap:wrap}
.stat{
  background:var(--ink);border:3px solid #000;box-shadow:5px 5px 0 #000;
  padding:12px 20px 10px;min-width:104px;
}
.stat b{display:block;font-family:var(--mono);font-weight:800;font-size:30px;color:var(--yel);
  font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:12.5px;
  letter-spacing:.14em;color:var(--dim)}

/* the proof: live components running in the hero */
.hero-logo{position:relative;display:grid;place-items:center;min-width:0;min-height:340px}
.hero-logo .hlogo-stage{position:absolute;inset:0;margin:auto;width:min(480px,92%);height:auto}
.hero-logo .hlogo-burst{transform-box:fill-box;transform-origin:center;animation:hlogoBeat 4.2s ease-in-out 1.2s infinite}
.hero-logo .sp{transform-box:fill-box;transform-origin:center;animation:hlogoTw 2.4s ease-in-out infinite alternate}
.hero-logo .sp.s2{animation-delay:.8s}.hero-logo .sp.s3{animation-delay:1.5s}
.hero-logo .hlogo-img{position:relative;width:min(400px,78%);
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.92));
  animation:hlogoPop .6s cubic-bezier(.16,1,.3,1) both,hlogoBob 3.8s ease-in-out 1s infinite alternate}
@keyframes hlogoPop{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes hlogoBob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
@keyframes hlogoBeat{0%,100%{transform:scale(1)}4%{transform:scale(1.035)}9%{transform:scale(1)}}
@keyframes hlogoTw{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-logo .hlogo-img,.hero-logo .hlogo-burst,.hero-logo .sp{animation:none}}
.hero-live{display:flex;flex-direction:column;gap:18px;align-items:stretch;min-width:0}
.hero-live .hl-bar{width:100%}
.hero-live .hl-row{display:flex;gap:16px;align-items:center;justify-content:space-between}
.hero-live .hl-row>div{flex:1;min-width:0}
.hero-live .hl-cap{
  font-family:var(--dsp);font-weight:600;font-style:italic;text-transform:uppercase;
  letter-spacing:.16em;font-size:12.5px;color:#CBB8F5;text-align:right;
}
.hero-live .hl-cap b{color:var(--yel)}

/* marquee of live parts under the hero */
.strip{margin:34px 0 8px;border-top:3px solid #000;border-bottom:3px solid #000;background:#0E0D0C;overflow:hidden}
.strip-inner{display:flex;gap:34px;align-items:center;padding:18px 32px;overflow-x:auto;scrollbar-width:thin}
.strip-inner>div{flex:none}
.strip-inner img{height:64px;width:auto}

/* ── section furniture ────────────────────────────────────── */
.sec{padding:44px 0 70px}
h2.rule{
  position:relative;display:inline-block;
  font-size:34px;color:#000;
  background:var(--paper);
  clip-path:var(--tear-chip);
  padding:10px 44px 12px 36px;
  margin:44px 0 14px;
  filter:drop-shadow(6px 6px 0 #000);
}
h2.rule:first-child{margin-top:0}
h3.sub{
  font-size:21px;color:var(--or);margin:36px 0 10px;letter-spacing:.03em;
}
h3.sub em{color:var(--faint);font-weight:600;font-size:15px}
h3.sub b{color:var(--yel);font-family:var(--mono);font-size:16px;font-style:normal;margin-left:6px}
.note{color:var(--dim);max-width:860px}
.note b,.note strong{color:var(--paper)}
.note.intro{font-size:15.5px}
.note.tiny{font-size:13px;color:var(--faint);max-width:760px}
.note.tiny b{color:var(--dim)}
.empty{color:var(--dim);padding:40px 0}
.linkish{background:none;border:0;color:var(--or);cursor:pointer;font:inherit;text-decoration:underline}

/* ── jump cards ───────────────────────────────────────────── */
.jump{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:26px 0}
.jcard{
  position:relative;display:block;text-decoration:none;
  background:var(--panel);border:3px solid #000;box-shadow:var(--shadow-2);
  outline:1px solid var(--line-soft);
  padding:22px 24px;color:var(--fg);
  transition:transform .16s var(--ease-emph),box-shadow .16s var(--ease-emph);
}
.jcard:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #000;outline-color:var(--or)}
.jcard:active{transform:translate(0,0);box-shadow:var(--shadow-2)}
.jcard:focus-visible{outline:3px solid var(--yel)}
.jcard b{
  display:block;font-family:var(--mono);font-weight:800;font-size:34px;color:var(--or);
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.jcard span{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:19px;color:var(--paper)}
.jcard p{color:var(--dim);font-size:13.5px;margin:10px 0 14px}
.jcard i{font-family:var(--dsp);font-weight:600;font-style:italic;text-transform:uppercase;
  font-size:14px;letter-spacing:.08em;color:var(--yel)}

/* ── tokens: swatches ─────────────────────────────────────── */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:16px 0}
.sw{
  display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer;
  background:var(--panel);border:2.5px solid #000;box-shadow:var(--shadow-1);
  outline:1px solid var(--line-soft);
  padding:10px;color:var(--fg);
  transition:transform .14s var(--ease-emph);
}
.sw:hover{transform:translate(-2px,-2px);outline-color:var(--or)}
.sw:focus-visible{outline:3px solid var(--yel)}
.sw .chip{width:44px;height:44px;flex:none;border:2.5px solid #000;box-shadow:3px 3px 0 #000}
.sw .nm{font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:13.5px;color:var(--paper);line-height:1.2}
.sw .hx{font-family:var(--mono);font-size:12px;color:var(--dim)}
.sw .al{font-size:11px;color:var(--faint)}
.sw .flag{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:10px;
  background:var(--red);color:#fff;padding:1px 6px;border:1.5px solid #000}

/* type roles */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:18px 0}
.role{background:var(--panel);border:3px solid #000;box-shadow:var(--shadow-2);outline:1px solid var(--line-soft);padding:22px}
.role .rspec{margin:0 0 14px;line-height:1.1;color:var(--paper)}
.r-dsp .rspec{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:44px;color:var(--or)}
.r-ui .rspec{font-family:var(--ui);font-weight:600;font-size:23px}
.r-mono .rspec{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--lime);font-variant-numeric:tabular-nums}
.role h4{font-size:19px;color:var(--paper);margin-bottom:8px}
.role h4 em{color:var(--faint);font-weight:600}
.role .rstack{margin:2px 0;font-size:13px;color:var(--dim)}
.role .rstack i{color:var(--faint);font-size:12px;margin-left:6px}
.role .ruse{margin:10px 0 0;font-size:13.5px;color:var(--dim)}

.trules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:16px 0}
.trules .tr{background:var(--panel-2);border:2.5px solid #000;box-shadow:var(--shadow-1);padding:16px 18px}
.trules .tr b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:16.5px;color:var(--or)}
.trules .tr p{margin:6px 0 0;font-size:13px;color:var(--dim)}

.type-list{margin:14px 0;border:3px solid #000;box-shadow:var(--shadow-2);background:var(--panel)}
.ty{display:grid;grid-template-columns:minmax(0,1fr) 170px 110px minmax(0,220px);gap:16px;
  align-items:center;padding:14px 20px;border-bottom:2px solid #000}
.ty:last-child{border-bottom:0}
.ty .sample{color:var(--paper);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ty .nm{font-family:var(--mono);font-size:12.5px;color:var(--or)}
.ty .sz{font-family:var(--mono);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.ty .nt{font-size:12px;color:var(--faint)}

.effects{display:flex;gap:26px;flex-wrap:wrap;margin:20px 0}
.ef{text-align:center}
.ef .box{width:86px;height:64px;background:var(--paper);border:3px solid #000;margin:0 auto 12px}
.ef .nm{font-family:var(--mono);font-size:12px;color:var(--dim)}

.table-wrap{overflow-x:auto;margin:14px 0;border:3px solid #000;box-shadow:var(--shadow-2)}
table.data{border-collapse:collapse;width:100%;background:var(--panel);font-size:13.5px}
table.data th{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:14.5px;letter-spacing:.06em;text-align:left;color:#000;background:var(--or);
  border-bottom:3px solid #000;padding:9px 16px}
table.data td{padding:9px 16px;border-bottom:1.5px solid var(--line-soft);color:var(--dim);
  font-variant-numeric:tabular-nums}
table.data td b{color:var(--paper)}
table.data tr:last-child td{border-bottom:0}
table.data .dim{color:var(--faint)}

.spaces{display:flex;flex-direction:column;gap:9px;margin:16px 0}
.sp{display:flex;align-items:center;gap:14px}
.sp i{height:16px;background:var(--or);border:2px solid #000;flex:none}
.sp b{font-family:var(--mono);width:34px;color:var(--paper);font-variant-numeric:tabular-nums}
.sp span{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:13px;
  letter-spacing:.06em;color:var(--or);width:64px}
.sp em{font-size:12.5px;color:var(--faint);font-style:normal}

/* ── the grid, live ───────────────────────────────────────── */
.grid-demos{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:26px;margin:20px 0;align-items:start}
.gdemo{background:var(--panel);border:3px solid #000;box-shadow:var(--shadow-2);outline:1px solid var(--line-soft)}
.gdemo-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:3px solid #000;background:var(--panel-2)}
.gdemo-bar b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:16px;color:var(--paper);flex:1}
.gdemo-bar .gd-meta{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.gdemo-stage{position:relative;background:#0C0B0A;padding:16px;overflow:hidden}
.gdemo-frame{position:relative;margin:0 auto;background:#111;outline:2px solid var(--line-soft)}
.gdemo-frame .gf-block{position:absolute;background:var(--panel-2);border:2px solid #000}
.gdemo-frame .gf-hero{background:linear-gradient(126deg,#7A48D8,#4B1FA8)}
.gdemo-frame .gf-band{background:linear-gradient(90deg,#FFD34D,#FF8A00)}
.gdemo-cols{position:absolute;inset:0;display:flex;pointer-events:none;opacity:0;transition:opacity .2s}
.gdemo.gridon .gdemo-cols{opacity:1}
.gdemo-cols i{flex:1;background:rgba(255,168,0,.13);border-inline:1px solid rgba(255,168,0,.34)}
.gdemo-cols i+i{margin-left:var(--gutter,0px)}
.gdemo-margin{position:absolute;top:0;bottom:0;border-inline:1.5px dashed rgba(250,244,36,.5);pointer-events:none;opacity:0;transition:opacity .2s}
.gdemo.gridon .gdemo-margin{opacity:1}

/* ── components browse ────────────────────────────────────── */
.browse{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;margin-top:24px}
.rail-stick{position:sticky;top:96px}
#search{
  width:100%;background:#000;color:var(--paper);
  border:2.5px solid var(--line);box-shadow:var(--shadow-1);
  font-family:var(--mono);font-size:13px;padding:10px 12px;margin-bottom:14px;
}
#search:focus{outline:none;border-color:var(--or)}
#search::placeholder{color:var(--faint)}
.rail-nav{display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 210px);overflow:auto;
  scrollbar-width:thin;padding-right:4px}
.rail-all,.rail-lv{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:none;border:0;border-left:3px solid transparent;
  color:var(--dim);cursor:pointer;text-align:left;
  font-family:var(--dsp);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.05em;padding:6px 10px;
}
.rail-all{color:var(--paper);font-style:italic;font-weight:800}
.rail-all:hover,.rail-lv:hover{color:var(--paper);border-left-color:var(--line)}
.rail-all.on,.rail-lv.on{color:var(--or);border-left-color:var(--or);background:rgba(255,168,0,.06)}
.rail-lv b{font-family:var(--mono);font-weight:700;font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.rail-lv.on b{color:var(--or)}
.browse-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px}
#resultCount{margin:0;font-size:13.5px}
#resultCount b{font-family:var(--mono);color:var(--or)}

.chip-btn{
  font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:13.5px;background:var(--panel);color:var(--dim);
  border:2.5px solid #000;box-shadow:3px 3px 0 #000;
  outline:1px solid var(--line-soft);
  padding:6px 13px;cursor:pointer;
  transition:transform .12s var(--ease-emph);
}
.chip-btn:hover{color:var(--paper);transform:translate(-1.5px,-1.5px)}
.chip-btn.on{background:var(--or);color:#000;font-weight:800;font-style:italic;outline-color:#000}
.chip-btn:focus-visible{outline:3px solid var(--yel)}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}

/* group headers inside the grid */
.grp{margin-bottom:44px}
.grp-head{
  display:flex;align-items:baseline;gap:14px;margin:34px 0 16px;
  border-bottom:3px solid var(--line-soft);padding-bottom:8px;
}
.grp-head .lv{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:25px;color:var(--paper)}
.grp-head b{font-family:var(--mono);font-size:14px;color:var(--or);font-variant-numeric:tabular-nums}
.grp-head .grp-note{font-size:12.5px;color:var(--faint);flex:1;min-width:200px}
.dom-head{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.dom-head span{font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:13.5px;color:var(--or)}
.dom-head i{flex:1;border-top:1.5px dashed var(--line-soft)}
.dom-head b{font-family:var(--mono);font-size:11.5px;color:var(--faint)}

.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px}
.comp{
  padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--fg);
  filter:drop-shadow(5px 5px 0 #000);
  transition:transform .16s var(--ease-emph),filter .16s var(--ease-emph);
}
.comp:hover{transform:translate(-3px,-3px);filter:drop-shadow(8px 8px 0 #000)}
.comp:active{transform:translate(0,0);filter:drop-shadow(5px 5px 0 #000)}
.comp:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.comp-in{
  display:block;background:var(--panel);
  border:2.5px solid #000;outline:1.5px solid var(--line-soft);outline-offset:-4px;
  clip-path:polygon(0 3%,3% 0,97% 1%,100% 4%,99% 96%,96% 100%,3% 99%,0 97%);
}
.comp:hover .comp-in{outline-color:var(--or)}
.comp .prev{
  height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;border-bottom:2.5px solid #000;padding:12px;
}
/* the corner badges float over the stage; give the specimen the room instead
   of letting LIVE/SHAPE sit on its face (triage: Toast badge-overlap) */
.comp .prev:has(.marks){padding-top:34px}
.comp .prev[data-surface="paper"]{background:
  radial-gradient(circle at 1px 1px,#DDD5BF 1px,transparent 1.5px) 0 0/18px 18px,var(--paper)}
.comp .prev[data-surface="dark"]{background:
  radial-gradient(circle at 1px 1px,#211F1C 1px,transparent 1.5px) 0 0/18px 18px,#131211}
.comp .prev img{max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;object-fit:contain}
.comp .prev .prev-icon{width:56px;height:56px}
.comp .prev .ph{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:21px;color:var(--faint)}
.comp .prev .pl-mount{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.comp .prev .pl-mount svg{max-width:100%;max-height:126px}
.marks{position:absolute;top:8px;right:8px;display:flex;gap:5px}
.mk{font-family:var(--dsp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:10.5px;
  padding:2px 7px;border:2px solid #000;box-shadow:2px 2px 0 #000;letter-spacing:.04em}
.mk-live{background:var(--yel);color:#000}
.mk-shape{background:var(--vi);color:#fff}
.mk-svg{background:var(--blue);color:#fff}
.mk-todo{background:#444;color:#ddd}
.mk-dep{background:var(--red);color:#fff}
.comp .body{padding:13px 15px 15px}
.comp .lv{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.14em;color:var(--or)}
.comp .nm{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:19px;color:var(--paper);line-height:1.05;margin:3px 0 6px}
.comp .ds{font-size:12px;color:var(--faint);margin:0 0 9px;line-height:1.45}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:10px;color:var(--dim);background:#000;
  border:1px solid var(--line-soft);padding:1.5px 6px}

/* ── icons view ───────────────────────────────────────────── */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px;margin:22px 0}
.icon-tile{
  background:var(--panel);border:2.5px solid #000;box-shadow:var(--shadow-1);
  outline:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px 10px;cursor:pointer;color:var(--fg);
  transition:transform .13s var(--ease-emph);
}
.icon-tile:hover{transform:translate(-2px,-2px);outline-color:var(--or)}
.icon-tile:active{transform:translate(0,0)}
.icon-tile:focus-visible{outline:3px solid var(--yel)}
.icon-tile img{width:34px;height:34px;
  filter:invert(92%) sepia(8%) saturate(600%) hue-rotate(354deg) brightness(103%)}
.icon-tile span{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:center;
  word-break:break-all;line-height:1.3}
.icon-tools{display:flex;gap:9px;margin:4px 0 0}

/* ── component sheet ──────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.78);overflow:auto;padding:38px 18px}
.sheet-inner{
  position:relative;max-width:1000px;margin:0 auto;
  background:var(--panel);border:3.5px solid #000;box-shadow:10px 10px 0 #000;
  outline:1.5px solid var(--line);
  padding:38px 42px 46px;
}
.sheet-close{
  position:absolute;top:-16px;right:-16px;width:44px;height:44px;
  background:var(--red);color:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;
  font-size:24px;line-height:1;cursor:pointer;font-weight:700;
}
.sheet-close:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.sheet-close:focus-visible{outline:3px solid var(--yel)}
#sheetBody h2{font-size:38px;color:var(--paper);margin:0}
#sheetBody .path{font-family:var(--mono);font-size:12.5px;color:var(--or);margin:4px 0 20px}
#sheetBody .stage{
  border:3px solid #000;box-shadow:var(--shadow-2);margin:0 0 24px;
  display:flex;align-items:center;justify-content:center;min-height:170px;
  padding:26px;overflow:auto;position:relative;
}
#sheetBody .stage[data-surface="paper"]{background:
  radial-gradient(circle at 1px 1px,#DDD5BF 1px,transparent 1.5px) 0 0/18px 18px,var(--paper)}
#sheetBody .stage[data-surface="dark"]{background:
  radial-gradient(circle at 1px 1px,#211F1C 1px,transparent 1.5px) 0 0/18px 18px,#131211}
#sheetBody .stage .pl-mount{width:min(560px,100%);margin:0 auto}
.stage-tools{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:2}
#sheetBody .lead{color:var(--dim);font-size:14px}
#sheetBody .lead-k{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  color:var(--or);margin-right:8px;font-size:15px}
.specs{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.spec{background:#000;border:2.5px solid var(--line-soft);padding:9px 16px;min-width:82px}
.spec b{display:block;font-family:var(--mono);font-size:19px;color:var(--yel);font-variant-numeric:tabular-nums}
.spec span{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.1em;color:var(--faint)}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin:22px 0 8px}
.btn{
  display:inline-block;font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:16px;letter-spacing:.05em;text-decoration:none;text-align:center;cursor:pointer;
  background:var(--ord);color:#000;border:3px solid #000;box-shadow:4px 4px 0 #000;
  padding:9px 20px;
  transition:transform .13s var(--ease-emph),box-shadow .13s var(--ease-emph);
}
.btn:hover{transform:translate(-2.5px,-2.5px);box-shadow:6.5px 6.5px 0 #000}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 #000}
.btn:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.btn.ghost{background:var(--panel);color:var(--paper);outline:1px solid var(--line-soft)}
.btn.ghost:hover{color:var(--yel)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0}
pre.code{
  background:#000;border:3px solid #000;outline:1.5px solid var(--line-soft);
  box-shadow:var(--shadow-2);
  color:#D8D2C0;font-family:var(--mono);font-size:12px;line-height:1.55;
  padding:20px 22px;overflow:auto;max-height:440px;margin:14px 0 0;
  tab-size:2;white-space:pre;
}
.guide{border:3px solid #000;box-shadow:var(--shadow-1);background:var(--panel-2);
  padding:18px 22px;margin:0 0 22px}
.guide.none{background:#191512;color:var(--dim)}
.guide.none b{color:var(--or);font-family:var(--dsp);font-style:italic;text-transform:uppercase}
.guide.none p{margin:6px 0 0;font-size:13px}
.g-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:7px 0}
.g-row b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:15px;color:var(--or)}
.g-not b{color:var(--red)}
.g-pairs b{color:var(--blue)}
.g-row p{margin:0;color:var(--dim);font-size:13.5px}
.g-instead{color:var(--paper)}
.g-flag{margin:10px 0 0;font-size:12px;color:var(--faint)}
.xref{background:#000;border:1.5px solid var(--line);color:var(--or);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:2px 8px}
.xref:hover{border-color:var(--or)}
.xref.dead{color:var(--faint);cursor:default}
.xref.strong{color:var(--yel)}
.vgroup{font-size:16px;color:var(--dim);margin:18px 0 8px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:10px 0}
.vcell{margin:0;background:var(--panel-2);border:2.5px solid #000;box-shadow:var(--shadow-1);padding:10px}
.vcell .vshot{height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.vcell[data-surface="paper"] .vshot{background:var(--paper)}
.vcell[data-surface="dark"] .vshot{background:#131211}
.vcell .vshot img{max-width:100%;max-height:100%}
.vcell.novec .vshot{display:none}
.vcell figcaption{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:12px;
  color:var(--paper);letter-spacing:.04em}
.vact{display:flex;gap:5px;margin-top:7px}
.vbtn{font-family:var(--mono);font-size:10.5px;background:#000;color:var(--dim);
  border:1.5px solid var(--line-soft);padding:2px 7px;cursor:pointer;text-decoration:none}
.vbtn:hover{color:var(--or);border-color:var(--or)}

/* ── scenes ───────────────────────────────────────────────── */
.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;margin:20px 0}
.scene{padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--fg);
  transition:transform .15s var(--ease-emph)}
.scene:hover{transform:translate(-3px,-3px)}
.scene .shot{box-shadow:var(--shadow-1)}
.scene:hover .shot{box-shadow:8px 8px 0 #000}
.scene:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.scene .shot{display:block;height:190px;overflow:hidden;background:#131211;
  border:2.5px solid #000;outline:1.5px solid var(--line-soft);outline-offset:-4px}
.scene:hover .shot{outline-color:var(--or)}
.scene.mob .shot img{object-fit:contain}
.scene .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.scene .cap{display:block;padding:10px 4px}
.scene .cap b{display:block;font-family:var(--dsp);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:17.5px;color:var(--paper);line-height:1.1}
.scene .dims{font-family:var(--mono);font-size:11px;color:var(--faint)}
.scene .pc{font-family:var(--dsp);font-weight:600;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.06em;color:var(--lime);margin-left:10px}
.scene .pc.none{color:var(--faint)}

/* page viewer */
.pageview{position:fixed;inset:0;z-index:90;background:#050505;display:flex;flex-direction:column}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--ink);border-bottom:3px solid #000;padding:10px 20px}
.pv-id b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:19px;color:var(--paper)}
.pv-id span{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:12px}
.pv-tools{display:flex;gap:8px}
.pv-btn{font-family:var(--dsp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;background:var(--panel);color:var(--dim);border:2.5px solid #000;
  box-shadow:3px 3px 0 #000;padding:6px 13px;cursor:pointer;text-decoration:none}
.pv-btn:hover{color:var(--paper)}
.pv-btn.on{background:var(--or);color:#000;font-weight:800;font-style:italic}
.pv-btn.close{background:var(--red);color:#fff}
.pv-body{flex:1;display:flex;min-height:0}
.pv-stage{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px}
.pv-stage.actual{display:block;text-align:center}
.pv-page{position:relative;margin:0 auto}
.pv-page img{width:100%;display:block;border:3px solid #000;box-shadow:var(--shadow-3)}
.pv-page .hot{position:absolute;border:2px dashed rgba(250,244,36,.65);cursor:pointer;
  transition:background .12s}
.pv-page .hot:hover,.pv-page .hot.lit{background:rgba(250,244,36,.14);border-style:solid}
.pv-page .hot i{position:absolute;top:-1px;left:-1px;transform:translateY(-100%);
  font-family:var(--dsp);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:11px;background:var(--yel);color:#000;border:2px solid #000;
  padding:1px 7px;opacity:0;white-space:nowrap;pointer-events:none}
.pv-page .hot:hover i,.pv-page .hot.lit i{opacity:1}
.pv-page.noanat .hot{display:none}
.pv-side{width:280px;flex:none;overflow:auto;background:var(--panel);
  border-left:3px solid #000;padding:18px}
.pv-side h4{font-size:18px;color:var(--paper);margin-bottom:8px}
.pv-note{font-size:12.5px;color:var(--faint)}
.pv-part{display:flex;align-items:center;gap:9px;width:100%;background:none;text-align:left;
  border:0;border-bottom:1.5px solid var(--line-soft);color:var(--fg);cursor:pointer;padding:8px 2px}
.pv-part:hover{background:rgba(255,168,0,.06)}
.pv-part .lv{font-family:var(--dsp);font-weight:600;font-size:10px;text-transform:uppercase;
  color:#000;background:var(--or);border:1.5px solid #000;padding:1px 5px;flex:none}
.pv-part b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:14px;color:var(--paper)}
.pv-part em{font-size:11px;color:var(--faint);font-style:normal;margin-left:auto}

/* ── brand ────────────────────────────────────────────────── */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin:14px 0 30px}
.bk{background:var(--panel);border:2.5px solid #000;box-shadow:var(--shadow-1);
  outline:1px solid var(--line-soft);padding:12px}
.bk:hover{outline-color:var(--or)}
.bk-art{height:92px;display:flex;align-items:center;justify-content:center;background:#131211;
  border:2px solid #000;margin-bottom:9px;padding:10px}
.bk-art[data-ground="light"]{background:var(--paper)}
.bk-art img{max-height:100%;max-width:100%}
.bk-meta b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:15px;color:var(--paper)}
.bk-meta span{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:8px}
.bk-ways{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.bk-w{font-family:var(--mono);font-size:10.5px;color:var(--dim);background:#000;
  border:1.5px solid var(--line-soft);padding:2px 8px;text-decoration:none}
.bk-w:hover{color:var(--or);border-color:var(--or)}

/* ── MM pages ─────────────────────────────────────────────── */
.sec-title{font-size:34px;color:#000;background:var(--lime);clip-path:var(--tear-chip);
  display:inline-block;padding:10px 44px 12px 36px;margin:44px 0 14px;
  filter:drop-shadow(6px 6px 0 #000)}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;margin:24px 0 10px}
.mm-card{transition:transform .16s var(--ease-emph)}
.mm-card:hover{transform:translate(-3px,-3px)}
.mm-shot{display:block;border:3px solid #000;outline:1.5px solid var(--line-soft);outline-offset:-4px;
  overflow:hidden;height:180px;background:#0E0D0C;box-shadow:var(--shadow-2)}
.mm-card:hover .mm-shot{box-shadow:9px 9px 0 #000}
.mm-card:hover .mm-shot{outline-color:var(--lime)}
.mm-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.mm-foot p{font-family:var(--dsp);font-style:italic;font-weight:800;font-size:18px;
  text-transform:uppercase;margin:0;color:var(--paper)}
.mm-foot .btn{font-size:13px;padding:7px 14px;white-space:nowrap;text-decoration:none}

/* ── footer ───────────────────────────────────────────────── */
/* the footer used to float mid-screen on short views (Pages, Icons) because
   nothing pushed it down, body is a column now and main takes the slack. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
.foot{flex-shrink:0}

.foot{border-top:3px solid #000;background:var(--ink);margin-top:72px;padding:40px 0 22px;
  box-shadow:0 -4px 0 #000}
.foot a{color:var(--or);text-decoration:none}
.foot a:hover{color:var(--yel)}

.foot-top{display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(140px,.8fr));
  gap:40px 32px;padding-bottom:30px}
.foot-logo{display:block;margin:0 0 14px}
.foot-blurb{color:var(--faint);font-size:12.5px;margin:0;max-width:44ch}
.foot-counts{color:var(--muted,#8A8378);font-size:11.5px;margin:12px 0 0;
  font-family:var(--mono);font-variant-numeric:tabular-nums}

.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:14px;color:var(--paper);margin:0 0 4px}
.foot-col a{font-size:12.5px;color:var(--faint);width:fit-content}
.foot-col a:hover{color:var(--yel)}

.foot-bar{border-top:1px solid #2A2622;padding-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--faint);font-size:11.5px}
.foot-by b{color:var(--paper)}

@media (max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .foot-top{grid-template-columns:1fr}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:6px}
}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;
  font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:16px;background:var(--yel);color:#000;border:3px solid #000;
  box-shadow:5px 5px 0 #000;padding:10px 24px;animation:toastIn .2s var(--ease-emph)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}}

/* ── the live specimen layer (pl-*) ───────────────────────── */
.pl-mount{display:flex;align-items:center;justify-content:center}
.pl-stage{width:100%;height:auto;display:block;overflow:visible}
.pl-stage text{user-select:none}
.pl-disp{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase}
.pl-disp-sb{font-family:var(--dsp);font-weight:600;text-transform:uppercase}
.pl-disp-sbi{font-family:var(--dsp);font-style:italic;font-weight:600;text-transform:uppercase}
.pl-mono{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums}
.pl-lift *{pointer-events:none}
.pl-lift .pl-hit{pointer-events:all;cursor:pointer}
.pl-lift>g{transition:transform .16s var(--ease-emph)}
.pl-lift:hover>g{transform:translate(-4px,-4px)}
.pl-lift:active>g{transform:translate(0,0)}
.pl-punch{transform-box:fill-box;transform-origin:center;animation:plPunch .18s var(--ease-emph)}
@keyframes plPunch{50%{transform:scale(1.16)}}
.pl-beat{transform-box:fill-box;transform-origin:center;animation:plBeat 3.2s ease-in-out 1s infinite}
@keyframes plBeat{0%,100%{transform:scale(1)}5%{transform:scale(1.03)}10%{transform:scale(1)}}
.pl-punchable:hover{animation:plPunch .18s var(--ease-emph)}

/* reveal on scroll, restrained */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-emph)}
.rv.on{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;padding:52px 40px 48px}
  .grid-demos{grid-template-columns:1fr}
}
@media (max-width:900px){
  .browse{grid-template-columns:1fr}
  .rail-stick{position:static}
  .rail-nav{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:8px}
  .rail-all,.rail-lv{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;flex:none}
  .rail-all.on,.rail-lv.on{border-left:0;border-bottom-color:var(--or)}
  .ty{grid-template-columns:minmax(0,1fr) 110px;row-gap:2px}
  .ty .sz{text-align:right}
  .ty .nt{grid-column:1/-1}
  .pv-side{display:none}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .hero{padding:22px 14px 6px}
  .hero-in{padding:40px 26px 38px}
  .topbar{gap:14px;padding:8px 14px;flex-wrap:wrap}
  .brand-text{display:none}
  .topbar-right{margin-left:auto}
  .subbar-inner{padding:6px 18px}
  .sheet{padding:20px 8px}
  .sheet-inner{padding:26px 18px 34px}
  .sheet-close{top:-12px;right:-6px}
  h2.rule{font-size:26px;padding:8px 28px 10px 18px}
  .g-row{grid-template-columns:1fr;gap:2px}
  .strip-inner{gap:20px;padding:14px 18px}
}

/* motion stops entirely for those who ask it to */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ── Meme Madness component showcase (Pages view) ── */
.mm-sub{font-family:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:26px;letter-spacing:.5px;margin:52px 0 6px;color:var(--paper)}
.mmc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:20px 0 8px}
.mmc-tile{display:flex;flex-direction:column;gap:0;padding:0;text-align:left;cursor:pointer;
  background:#141312;border:2px solid #000;outline:1.5px solid var(--line-soft);outline-offset:-3px;
  transition:transform .16s var(--ease-emph),box-shadow .16s var(--ease-emph),outline-color .16s}
.mmc-tile:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #000;outline-color:var(--lime)}
/* mid-tone plate: some battle components are near-black (VoteCard, TicketPlate)
   and vanished on the page ground, while others are paper, this reads for both */
.mmc-art{display:grid;place-items:center;height:104px;padding:12px;background:#332F2B;
  background-image:radial-gradient(#433E39 1px,transparent 1px);background-size:9px 9px}
.mmc-art img{max-width:100%;max-height:80px;object-fit:contain}
.mmc-name{font-family:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:14px;color:var(--paper);padding:9px 11px 0}
.mmc-grp{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:#8C857B;padding:2px 11px 10px}
@media(max-width:640px){.mmc-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}

/* ── Cade brand kit (Brand view) ── */
.cd-h{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:20px;letter-spacing:.5px;margin:34px 0 4px;color:var(--or)}
.cd-grid{display:grid;gap:18px;margin:16px 0 8px}
.cd-grid--pfp{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cd-grid--ban{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cd-mark{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;margin:16px 0 8px}
.cd-tile{display:block;border:2px solid #000;outline:1.5px solid var(--line-soft);outline-offset:-3px;
  background:#141312;text-decoration:none;
  transition:transform .16s var(--ease-emph),box-shadow .16s var(--ease-emph),outline-color .16s}
.cd-tile:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #000;outline-color:var(--lime)}
.cd-art{display:grid;place-items:center;background:#0E0D0C;overflow:hidden}
.cd-art img{width:100%;height:100%;object-fit:cover;display:block}
.cd-art--wide{aspect-ratio:3/1}
.cd-grid--pfp .cd-art{aspect-ratio:1/1}
/* the mark is a tall glyph, letterbox it rather than filling the tile */
.cd-tile--mark .cd-art{aspect-ratio:1/1;background:#FFA800 url(assets/cade/c-mark.svg) center/auto 72% no-repeat}
.cd-meta{display:block;padding:9px 12px 11px}
.cd-meta b{font-family:var(--dsp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:14px;color:var(--paper)}
.cd-meta span{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:8px}
.cd-dl{display:flex;gap:5px;margin:8px 0 0 0}
.cd-dl a{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim);
  background:#000;border:1px solid var(--line-soft);padding:2px 7px;text-decoration:none;
  transition:color .12s,border-color .12s}
.cd-dl a:hover{color:var(--or);border-color:var(--or)}
.cd-note{margin-top:2px}
@media(max-width:720px){.cd-mark{grid-template-columns:1fr}}

/* ── icon tile downloads ── */
.icon-tile .icon-hit{display:grid;place-items:center;width:100%;padding:0;margin:0;
  background:none;border:0;cursor:pointer}
.icon-dl{display:flex;gap:4px;justify-content:center;margin-top:7px}
.icon-dl button{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim);
  background:#000;border:1px solid var(--line-soft);padding:2px 6px;cursor:pointer;
  transition:color .12s,border-color .12s}
.icon-dl button:hover{color:var(--or);border-color:var(--or)}