/* ============================================================
   REALITY BEAST // V2 — sections
   ============================================================ */

/* ---------- HUD STRIP + NAV ---------- */
.hud{ border-bottom:1px solid var(--line-2); background:#070608; }
.hud-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:38px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.hud .grp{ display:flex; align-items:center; gap:18px; color:var(--ink-dim); }
.hud .rec{ display:flex; align-items:center; gap:8px; color:var(--fire); }
.hud .rec b{ width:9px; height:9px; background:var(--fire); border-radius:50%; animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
@media(max-width:820px){ .hud .hud-hide{ display:none; } }

.nav{ position:sticky; top:0; z-index:80; background:#070608; border-bottom:1px solid var(--line-2); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ font-family:var(--display); font-size:26px; letter-spacing:.04em; display:flex; align-items:center; gap:4px; text-transform:uppercase; }
.brand .b{ color:var(--acid); }
.brand .slash{ color:var(--fire); }
.nav-links{ display:flex; gap:8px; }
.nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 12px; border:1px solid transparent; transition:.18s; color:var(--ink-dim); }
.nav-links a:hover{ color:#000; background:var(--acid); }
.nav-links a::before{ content:"["; opacity:0; }
.nav-links a::after{ content:"]"; opacity:0; }
.nav-links a:hover::before, .nav-links a:hover::after{ opacity:1; }
@media(max-width:860px){ .nav-links{ display:none; } }

/* ---------- HERO ---------- */
.hero{ position:relative; padding-block:clamp(40px,7vw,90px) 0; overflow:hidden; }
.hero-ember{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ember{ position:absolute; bottom:-10px; width:3px; height:3px; background:var(--amber); border-radius:50%; box-shadow:0 0 6px 1px var(--fire); animation:rise linear infinite; }
@keyframes rise{ 0%{ transform:translateY(0) scale(1); opacity:0; } 10%{ opacity:1; } 100%{ transform:translateY(-90vh) translateX(var(--drift,20px)) scale(.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .ember{ display:none; } }

.hero-grid{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.hero-side{ writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-dim); display:flex; gap:24px; align-self:stretch; }
.hero-side b{ color:var(--acid); font-weight:400; }
@media(max-width:760px){ .hero-side{ display:none; } }

.hero-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:26px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.hero-meta .tag{ border:1px solid var(--line-2); padding:6px 12px; }
.hero-meta .tag.live{ color:var(--acid); border-color:var(--acid); }

.hero-h{ font-family:var(--display); text-transform:uppercase; line-height:.8; letter-spacing:.004em;
  font-size:clamp(62px, 15.5vw, 290px); }
.hero-h .row1{ color:var(--ink); }
.hero-h .row2{ position:relative; display:inline-block;
  background:linear-gradient(180deg, #FFE08A 0%, var(--amber) 38%, var(--fire) 72%, #B81E00 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,59,13,.45)); }
.hero-h .row3{ color:var(--ink); display:flex; align-items:baseline; gap:.28em; flex-wrap:wrap; }
.hero-h .redact{ position:relative; color:var(--bg); background:var(--ink); padding:0 .12em; }
.hero-h .redact::after{ content:""; position:absolute; left:6%; right:6%; top:48%; height:.09em; background:var(--fire); }
.hero-h .b1{ color:var(--acid); }

.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding-block:clamp(28px,4vw,56px); }
.hero-cta .note{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); max-width:30ch; }

/* ---------- DUAL MARQUEES ---------- */
.mq{ overflow:hidden; border-block:2px solid var(--ink); white-space:nowrap; }
.mq--acid{ background:var(--acid); color:#000; }
.mq--fire{ background:#000; border-color:var(--fire); }
.mq-track{ display:inline-flex; width:max-content; }
.mq--acid .mq-track{ animation:mq-l 24s linear infinite; }
.mq--fire .mq-track{ animation:mq-r 30s linear infinite; }
.mq:hover .mq-track{ animation-play-state:paused; }
.mq-item{ font-family:var(--display); text-transform:uppercase; font-size:clamp(24px,4vw,52px); padding:12px 26px; display:inline-flex; align-items:center; gap:26px; letter-spacing:.02em; }
.mq--acid .mq-item::after{ content:"◆"; font-size:.5em; }
.mq--fire .mq-item{ color:var(--ink); }
.mq--fire .mq-item b{ color:var(--fire); font-weight:400; }
.mq--fire .mq-item::after{ content:"/"; color:var(--fire); }

/* ---------- STATS READOUT ---------- */
.stats{ padding-block:clamp(40px,6vw,80px); border-bottom:1px solid var(--line-2); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.stat{ background:var(--bg); padding:clamp(20px,2.6vw,34px); position:relative; min-height:200px; display:flex; flex-direction:column; justify-content:space-between; }
.stat .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); display:flex; justify-content:space-between; }
.stat .tag i{ color:var(--acid); font-style:normal; }
.stat .num{ font-family:var(--display); font-size:clamp(46px,6vw,92px); line-height:.85; color:var(--ink); }
.stat .num em{ font-style:normal; color:var(--fire); }
.stat .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.stat::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg, var(--acid), var(--fire)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.stat.on::after, .stats-grid.on .stat::after{ transform:scaleX(1); }
@media(max-width:820px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- PROTOCOL (process) ---------- */
.proto{ padding-block:clamp(60px,8vw,120px); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,56px); }
.sec-head h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(44px,8vw,140px); line-height:.82; margin-top:14px; }
.sec-head .sub{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); max-width:32ch; letter-spacing:.06em; }
.proto-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:760px){ .proto-grid{ grid-template-columns:1fr; } }
.term{ border:1.5px solid var(--line-2); background:var(--bg-2); position:relative; transition:border-color .2s, transform .2s; }
.term:hover{ border-color:var(--acid); transform:translate(-3px,-3px); }
.term-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-2); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.term-bar .dots{ display:flex; gap:6px; }
.term-bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.term-bar .dots i:nth-child(1){ background:var(--fire); }
.term-bar .dots i:nth-child(2){ background:var(--amber); }
.term-bar .dots i:nth-child(3){ background:var(--acid); }
.term-bar .file{ margin-left:auto; }
.term-body{ padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; min-height:230px; }
.term-body .idx{ font-family:var(--mono); font-size:12px; color:var(--acid); letter-spacing:.2em; }
.term-body .ttl{ font-family:var(--display); text-transform:uppercase; font-size:clamp(34px,4.6vw,68px); line-height:.85; }
.term-body .desc{ color:var(--ink-dim); font-size:14px; max-width:44ch; margin-top:auto; }
.term-body .ln{ display:flex; gap:10px; color:var(--ink-dim); font-size:12px; }
.term-body .ln::before{ content:">"; color:var(--fire); }

/* ---------- ARCHIVE (portfolio) ---------- */
.archive{ padding-block:clamp(60px,8vw,120px); border-top:1px solid var(--line-2); }
.arch-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.arch{ position:relative; display:block; border:1.5px solid var(--line-2); background:#000; overflow:hidden; }
.arch.lg{ grid-column:span 7; } .arch.sm{ grid-column:span 5; } .arch.full{ grid-column:span 12; }
@media(max-width:820px){ .arch.lg,.arch.sm,.arch.full{ grid-column:span 12; } }
.arch-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.arch.full .arch-media{ aspect-ratio:21/8; }
.arch-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05); transition:transform .6s var(--ease), filter .3s; }
.arch:hover .arch-media img{ transform:scale(1.05); filter:none; }
.arch-media::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.22) 3px 4px); opacity:.5; }
/* RGB split on hover */
.arch-media::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .2s;
  background:linear-gradient(90deg, rgba(0,240,255,.35), transparent 40%, transparent 60%, rgba(255,30,111,.35)); }
.arch:hover .arch-media::after{ opacity:1; }
.arch-hud{ position:absolute; inset:0; z-index:4; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:14px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.arch-hud .top{ display:flex; justify-content:space-between; color:var(--acid); }
.arch-hud .corner{ width:16px; height:16px; border:1.5px solid var(--acid); }
.arch-info{ padding:18px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:flex-end; gap:14px; }
.arch-info .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fire); }
.arch-info .name{ font-family:var(--display); text-transform:uppercase; font-size:clamp(26px,3vw,46px); line-height:.9; margin-top:6px; }
.arch-info .id{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); white-space:nowrap; }
.arch:hover .arch-info .cat{ color:var(--acid); }

/* ---------- INVENTORY (shop) ---------- */
.inv{ padding-block:clamp(60px,8vw,120px); border-top:1px solid var(--line-2); }
.inv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.prod{ border:1.5px solid var(--line-2); background:var(--bg-2); display:block; transition:border-color .2s, transform .2s; }
.prod:hover{ border-color:var(--acid); transform:translate(-3px,-3px); }
.prod-media{ position:relative; aspect-ratio:1; overflow:hidden; background:#000; border-bottom:1.5px solid var(--line-2); }
.prod-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.prod:hover .prod-media img{ transform:scale(1.06); }
.prod-media .badge{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; background:var(--acid); color:#000; }
.prod-media .badge.soon{ background:var(--bg); color:var(--ink-dim); border:1px solid var(--line-2); }
.prod-body{ padding:18px; }
.prod-body .pt{ font-family:var(--display); text-transform:uppercase; font-size:24px; line-height:1; }
.prod-body .ps{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px; }
.prod-body .prow{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; border-top:1px solid var(--line-2); padding-top:14px; }
.prod-body .price{ font-family:var(--display); font-size:28px; color:var(--acid); }
.prod-body .acq{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fire); }
.prod:hover .acq{ color:var(--acid); }

/* ---------- TRANSMIT (newsletter) ---------- */
.transmit{ padding-block:clamp(56px,7vw,110px); border-top:1px solid var(--line-2); background:var(--bg-2); }
.tx-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:end; }
.tx-grid h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(40px,6vw,108px); line-height:.82; }
.tx-grid h3 em{ font-style:normal; color:var(--fire); }
.tx-grid p{ color:var(--ink-dim); margin-top:14px; max-width:38ch; font-size:14px; }
.tx-form{ border:1.5px solid var(--line-2); background:var(--bg); display:flex; align-items:center; gap:10px; padding:6px 6px 6px 16px; }
.tx-form .pmt{ color:var(--acid); font-family:var(--mono); }
.tx-form input{ flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--mono); font-size:15px; padding:14px 0; }
.tx-form input::placeholder{ color:var(--ink-dim); }
.tx-form .cur{ width:9px; height:18px; background:var(--acid); animation:blink 1s steps(2) infinite; }
.tx-form button{ background:var(--acid); color:#000; font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; padding:14px 20px; transition:.18s; }
.tx-form button:hover{ background:var(--fire); }
@media(max-width:760px){ .tx-grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.foot{ padding-block:clamp(50px,6vw,90px) 26px; border-top:2px solid var(--ink); overflow:hidden; }
.foot-big{ font-family:var(--display); text-transform:uppercase; font-size:clamp(64px,19vw,320px); line-height:.74; letter-spacing:.01em; color:var(--ink); }
.foot-big .b{ color:var(--acid); } .foot-big .f{ color:var(--fire); }
.foot-cols{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-block:clamp(30px,4vw,54px); font-family:var(--mono); font-size:12px; }
.foot-cols h5{ color:var(--acid); letter-spacing:.2em; text-transform:uppercase; margin-bottom:12px; font-weight:700; }
.foot-cols a{ display:block; color:var(--ink-dim); padding:5px 0; transition:.18s; }
.foot-cols a:hover{ color:var(--ink); }
.foot-base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-2); padding-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- LIVE TYPE SPECIMEN (Beasty font tiles) ---------- */
@font-face{
  font-family:"Beasty";
  src:url("../assets/beasty.otf") format("opentype");
  font-display:swap;
}
@font-face{
  font-family:"Beasty2";
  src:url("../assets/beasty2.otf") format("opentype");
  font-display:swap;
}
.type-spec{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2em; background:var(--bg-2); transition:transform .6s var(--ease); }
.arch:hover .type-spec, .prod:hover .type-spec{ transform:scale(1.05); }
.type-spec .big{ font-family:"Beasty2", var(--display); font-size:clamp(56px,9vw,150px); line-height:1; color:var(--ink); }
.type-spec .mid{ font-family:"Beasty2", var(--display); font-size:clamp(24px,3.4vw,54px); color:var(--acid); }
.type-spec .row{ font-family:"Beasty2", var(--display); font-size:clamp(16px,2vw,30px); color:var(--fire); letter-spacing:.08em; }
.type-spec .cap{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); margin-top:1.2em; }

/* ---------- display-only inventory (nothing for sale) ---------- */
.prod-body .nfs{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- PROTOCOL v2.1 — live terminals ---------- */
.term-body{ gap:12px; }
.term-body .trow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.term-body .wk{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(255,138,0,.35); padding:4px 9px; white-space:nowrap; }
.term-body .tcur{ display:inline-block; width:8px; height:13px; background:var(--acid); margin-left:3px; vertical-align:text-bottom; animation:blink 1s steps(2) infinite; }
.term-body .tcur.off{ display:none; }
.term-body .tout{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); letter-spacing:.03em; }
.term-body .tout li{ opacity:0; transform:translateX(-6px); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.term-body .tout li::before{ content:"├─ "; color:var(--line-2); }
.term-body .tout li:last-child::before{ content:"└─ "; }
.term-body .tout li.show{ opacity:1; transform:none; }
.term-body .tok{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--acid); margin-top:auto; opacity:0; transition:opacity .3s var(--ease); }
.term-body .tok.show{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .term-body .tcur{ animation:none; }
  .term-body .tout li, .term-body .tok{ transition:none; }
}

/* ---------- hero: fix gradient clipping on row2 ---------- */
.hero-h .row2{
  /* extend the background-clip box so glyphs are not sliced on any side */
  padding:.18em .12em;
  margin:-.18em -.12em;
}

/* ---------- Beasty2 section headers ---------- */
.sec-head h2, .intake-head h2{ font-family:"Beasty2", var(--display); font-size:clamp(38px,6.5vw,110px); line-height:.94; letter-spacing:.01em; }
.intake-head h2 em{ color:var(--fire); font-style:normal; }

/* ---------- footer wordmark: fit on screen ---------- */
.foot-big{ font-size:clamp(40px,11.5vw,190px); line-height:.8; }

/* ---------- nav wordmark image ---------- */
.brand-img{ height:46px; width:auto; display:block; }
@media(max-width:560px){ .brand-img{ height:38px; } }

/* ---------- hero: keep the period attached to BETTER ---------- */
.hero-h .row3 .dot{ color:var(--ink); }