/* ============================================================
   SYANIDE & SABOTAGE — "CHAOS IS FOREVER"
   tattoo flash × military grit × glitch punk × premium dark
   ============================================================ */
:root{
  --ink:#070708;
  --ink2:#0e0e10;
  --ink3:#141416;
  --bone:#ece7dc;
  --bone-dim:#b9b3a6;
  --blood:#e01b24;
  --blood-dark:#8f0f15;
  --nvg:#4dff57;
  --olive:#6b7042;
  --steel:#43464b;
  --line:rgba(236,231,220,.14);
  --font-mil:'Black Ops One',system-ui,sans-serif;
  --font-type:'Special Elite',monospace;
  --font-tat:'Permanent Marker',cursive;
  --font-body:'Barlow Condensed',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blood);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink2)}
::-webkit-scrollbar-thumb{background:var(--blood-dark);border:2px solid var(--ink2)}
::-webkit-scrollbar-thumb:hover{background:var(--blood)}

/* ---------- atmosphere overlays ---------- */
.fx-grain{position:fixed;inset:-100px;pointer-events:none;z-index:2000;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(20px,-35px)}60%{transform:translate(-25px,-10px)}80%{transform:translate(30px,25px)}100%{transform:translate(0,0)}}
.fx-scan{position:fixed;inset:0;pointer-events:none;z-index:1999;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 4px)}
.fx-vhs{position:fixed;left:0;right:0;height:110px;top:-140px;pointer-events:none;z-index:2001;
  background:linear-gradient(180deg,transparent,rgba(224,27,36,.05) 35%,rgba(77,255,87,.06) 55%,transparent);
  mix-blend-mode:screen;animation:vhs 9s linear infinite}
@keyframes vhs{0%{top:-140px}100%{top:110vh}}

/* ---------- announcement marquee ---------- */
.annc{position:relative;z-index:60;background:var(--blood);color:#fff;overflow:hidden;height:34px;
  border-bottom:1px solid #000}
.annc-track{display:flex;gap:0;white-space:nowrap;height:34px;align-items:center;width:max-content;
  animation:marq 30s linear infinite}
.annc span{font-family:var(--font-type);font-size:13px;letter-spacing:1px;padding:0 26px;text-transform:uppercase}
.annc span::after{content:"★";margin-left:26px;color:#000}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:26px;
  padding:14px 4vw;background:rgba(7,7,8,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-logo{font-family:var(--font-mil);font-size:clamp(18px,2.4vw,26px);letter-spacing:1px;line-height:1;
  color:var(--bone);position:relative;user-select:none}
.nav-logo .amp{color:var(--blood)}
.nav-logo small{display:block;font-family:var(--font-type);font-size:9px;letter-spacing:4px;color:var(--bone-dim);margin-top:3px}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{font-family:var(--font-body);font-weight:600;letter-spacing:2.5px;font-size:15px;
  text-transform:uppercase;color:var(--bone-dim);position:relative;padding:4px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blood);transition:width .25s}
.nav-links a:hover,.nav-links a.on{color:var(--bone)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-cart{background:none;border:1px solid var(--line);color:var(--bone);padding:8px 16px;
  font-family:var(--font-mil);font-size:13px;letter-spacing:1px;position:relative;transition:.2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nav-cart:hover{border-color:var(--blood);color:#fff;background:var(--blood-dark)}
.nav-cart .n{color:var(--nvg)}
.nav-burger{display:none;background:none;border:none;color:var(--bone);font-size:26px;line-height:1}
@media(max-width:840px){
  .nav{gap:14px}
  .nav-links{position:fixed;inset:0;top:0;background:rgba(7,7,8,.97);flex-direction:column;justify-content:center;
    gap:34px;transform:translateX(100%);transition:transform .3s;z-index:99;margin:0}
  .nav-links.open{transform:none}
  .nav-links a{font-size:26px}
  .nav-burger{display:block;margin-left:auto}
  .nav-cart{margin-left:0}
}

/* ---------- glitch text ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  clip-path:inset(0 0 0 0);opacity:.85}
.glitch::before{color:var(--blood);z-index:-1;animation:gl1 3.1s infinite steps(1)}
.glitch::after{color:var(--nvg);z-index:-2;animation:gl2 2.7s infinite steps(1)}
@keyframes gl1{0%,93%{transform:none;clip-path:inset(0 0 100% 0)}94%{transform:translate(-4px,2px);clip-path:inset(10% 0 55% 0)}96%{transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}98%{transform:translate(-2px,1px);clip-path:inset(30% 0 40% 0)}100%{transform:none;clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%,91%{transform:none;clip-path:inset(0 0 100% 0)}92%{transform:translate(4px,-2px);clip-path:inset(45% 0 30% 0)}95%{transform:translate(-3px,2px);clip-path:inset(15% 0 70% 0)}97%{transform:translate(2px,1px);clip-path:inset(70% 0 5% 0)}100%{transform:none;clip-path:inset(0 0 100% 0)}}
.chaos-mode .glitch::before{animation-duration:.6s}
.chaos-mode .glitch::after{animation-duration:.5s}

.flicker{animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}97%{opacity:.6}98%{opacity:1}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.55) contrast(1.15) brightness(.42);transform:scale(1.06);animation:heropan 26s ease-in-out infinite alternate}
@keyframes heropan{0%{transform:scale(1.06) translateY(0)}100%{transform:scale(1.14) translateY(-16px)}}
.hero-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(7,7,8,.92) 100%)}
.hero-in{position:relative;z-index:2;padding:40px 5vw}
.hero-tag{font-family:var(--font-type);letter-spacing:6px;color:var(--nvg);font-size:clamp(11px,1.4vw,15px);
  text-transform:uppercase;margin-bottom:18px}
.hero h1{font-family:var(--font-mil);font-size:clamp(42px,9vw,118px);line-height:.95;letter-spacing:2px;
  text-transform:uppercase;color:var(--bone)}
.hero h1 .r{color:var(--blood)}
.hero-sub{font-family:var(--font-tat);font-size:clamp(18px,3vw,30px);color:var(--bone-dim);margin:22px 0 34px;
  transform:rotate(-1.5deg)}
.hero-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-mil);font-size:15px;letter-spacing:2px;text-transform:uppercase;
  padding:15px 34px;border:none;position:relative;transition:.18s;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn-blood{background:var(--blood);color:#fff}
.btn-blood:hover{background:#ff2731;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--blood-dark)}
.btn-ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--bone-dim)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--nvg);color:var(--nvg)}
.btn-nvg{background:var(--nvg);color:#04140a}
.btn-nvg:hover{background:#7dff85}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- sections ---------- */
.sec{padding:90px 4vw;position:relative}
.sec-tight{padding:56px 4vw}
.sec-dark{background:var(--ink2)}
.sec-head{margin-bottom:44px}
.sec-kick{font-family:var(--font-type);color:var(--blood);letter-spacing:5px;font-size:13px;text-transform:uppercase}
.sec-head h2{font-family:var(--font-mil);font-size:clamp(30px,5vw,58px);text-transform:uppercase;letter-spacing:1px;line-height:1}
.sec-head p{color:var(--bone-dim);max-width:640px;margin-top:10px;font-size:19px}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* barbed wire divider */
.wire{height:26px;background-repeat:repeat-x;background-position:center;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 13 H120' stroke='%23b9b3a6' stroke-width='1.4'/%3E%3Cpath d='M18 13 l7 -8 M18 13 l7 8 M25 13 l-7 -8 M25 13 l-7 8 M78 13 l7 -8 M78 13 l7 8 M85 13 l-7 -8 M85 13 l-7 8' stroke='%23b9b3a6' stroke-width='1.2'/%3E%3C/svg%3E")}
/* ink splat */
.splat{position:absolute;width:190px;opacity:.10;pointer-events:none;z-index:0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv2.in{transition-delay:.12s}.rv3.in{transition-delay:.24s}

/* ---------- drop banners ---------- */
.drops{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:840px){.drops{grid-template-columns:1fr}}
.drop{position:relative;min-height:430px;display:flex;align-items:flex-end;overflow:hidden;
  border:1px solid var(--line);isolation:isolate}
.drop-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1);
  filter:contrast(1.08) saturate(1.05)}
.drop:hover .drop-bg{transform:scale(1.07)}
.drop::after{content:"";position:absolute;inset:0;background:linear-gradient(10deg,rgba(7,7,8,.92) 18%,rgba(7,7,8,.12) 62%);z-index:1}
.drop-in{position:relative;z-index:2;padding:30px}
.drop-in .k{font-family:var(--font-type);color:var(--nvg);letter-spacing:4px;font-size:12px;text-transform:uppercase}
.drop-in h3{font-family:var(--font-mil);font-size:clamp(26px,3.4vw,44px);text-transform:uppercase;line-height:1;margin:6px 0 10px}
.drop-in p{color:var(--bone-dim);max-width:420px;margin-bottom:16px}

/* ---------- product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{background:var(--ink3);border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .25s,border-color .25s;cursor:pointer}
.card:hover{transform:translateY(-6px);border-color:var(--blood)}
.card-img{position:relative;aspect-ratio:1;overflow:hidden;background:#101012}
.card-img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .5s}
.card-img img.alt{position:absolute;inset:0;opacity:0}
.card:hover .card-img img.alt{opacity:1}
.card:hover .card-img img.main{transform:scale(1.05)}
.card:hover .card-img::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(0deg,transparent 46%,rgba(224,27,36,.16) 47%,rgba(77,255,87,.14) 49%,transparent 50%);
  animation:cardglitch .5s steps(2) 2;mix-blend-mode:screen}
@keyframes cardglitch{0%{transform:translateY(-30%)}100%{transform:translateY(30%)}}
.card-body{padding:14px 16px 18px;position:relative}
.card-line{font-family:var(--font-type);font-size:10px;letter-spacing:3px;color:var(--nvg);text-transform:uppercase}
.card-t{font-family:var(--font-body);font-weight:700;font-size:19px;letter-spacing:.6px;text-transform:uppercase;
  margin:3px 0 2px;line-height:1.15}
.card-p{font-family:var(--font-mil);color:var(--blood);font-size:15px}
.card-p .was{color:var(--bone-dim);font-family:var(--font-body);font-weight:400;font-size:14px;margin-left:6px}
.badge-out{position:absolute;top:12px;left:-34px;transform:rotate(-35deg);background:var(--blood);color:#fff;
  font-family:var(--font-mil);font-size:11px;letter-spacing:2px;padding:5px 40px;z-index:4}
.badge-line{position:absolute;top:12px;right:12px;background:rgba(7,7,8,.8);border:1px solid var(--line);
  color:var(--bone);font-family:var(--font-type);font-size:10px;letter-spacing:2px;padding:4px 8px;z-index:4;text-transform:uppercase}

/* ---------- shop toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:none;border:1px solid var(--line);color:var(--bone-dim);padding:8px 16px;font-family:var(--font-body);
  font-weight:600;letter-spacing:1.5px;font-size:14px;text-transform:uppercase;transition:.15s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.chip:hover{color:var(--bone);border-color:var(--bone-dim)}
.chip.on{background:var(--blood);border-color:var(--blood);color:#fff}
.chip.on-nvg{background:var(--nvg);border-color:var(--nvg);color:#04140a}
.tool-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.search,select.sort{background:var(--ink3);border:1px solid var(--line);color:var(--bone);padding:10px 14px;
  font-family:var(--font-body);font-size:15px;letter-spacing:1px;outline:none;min-width:150px}
.search:focus{border-color:var(--nvg)}
.count-line{font-family:var(--font-type);font-size:12px;letter-spacing:2px;color:var(--bone-dim);margin-bottom:16px;text-transform:uppercase}

/* ---------- product modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-wrap.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(4,4,5,.86);backdrop-filter:blur(6px)}
.modal{position:relative;z-index:2;background:var(--ink2);border:1px solid var(--line);max-width:960px;width:100%;
  max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:760px){.modal{grid-template-columns:1fr;max-height:88vh}}
.modal-imgs{background:#101012;position:relative}
.modal-imgs img{width:100%;aspect-ratio:1;object-fit:cover}
.modal-thumbs{display:flex;gap:8px;padding:10px}
.modal-thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);cursor:pointer;opacity:.6}
.modal-thumbs img.on{opacity:1;border-color:var(--blood)}
.modal-info{padding:30px 28px 34px}
.modal-info .card-line{font-size:11px}
.modal-info h3{font-family:var(--font-mil);font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;line-height:1.05;margin:6px 0}
.modal-price{font-family:var(--font-mil);color:var(--blood);font-size:22px;margin-bottom:12px}
.modal-blurb{color:var(--bone-dim);font-size:18px;margin-bottom:20px;border-left:3px solid var(--blood);padding-left:12px}
.opt-name{font-family:var(--font-type);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--bone-dim);margin:14px 0 8px}
.opt-vals{display:flex;flex-wrap:wrap;gap:8px}
.opt-btn{background:var(--ink3);border:1px solid var(--line);color:var(--bone);padding:8px 14px;font-family:var(--font-body);
  font-weight:600;font-size:14px;letter-spacing:1px;transition:.15s}
.opt-btn:hover{border-color:var(--bone-dim)}
.opt-btn.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0}
.qty{display:flex;border:1px solid var(--line)}
.qty button{background:none;border:none;color:var(--bone);width:38px;height:42px;font-size:20px}
.qty button:hover{background:var(--ink3)}
.qty span{width:44px;display:grid;place-items:center;font-family:var(--font-mil);font-size:15px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.modal-note{font-family:var(--font-type);font-size:11px;letter-spacing:1.6px;color:var(--nvg);margin-top:16px;text-transform:uppercase}
.modal-x{position:absolute;top:10px;right:12px;z-index:5;background:var(--ink);border:1px solid var(--line);color:var(--bone);
  width:38px;height:38px;font-size:18px;font-family:var(--font-mil)}
.modal-x:hover{background:var(--blood);border-color:var(--blood)}
.unavail{color:var(--blood);font-family:var(--font-type);letter-spacing:2px;font-size:13px;text-transform:uppercase}

/* ---------- cart drawer ---------- */
.cart-wrap{position:fixed;inset:0;z-index:400;pointer-events:none}
.cart-bg{position:absolute;inset:0;background:rgba(4,4,5,.7);opacity:0;transition:opacity .3s}
.cart{position:absolute;top:0;right:0;height:100%;width:min(430px,94vw);background:var(--ink2);
  border-left:1px solid var(--line);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column}
.cart-wrap.open{pointer-events:auto}
.cart-wrap.open .cart-bg{opacity:1}
.cart-wrap.open .cart{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-head h3{font-family:var(--font-mil);letter-spacing:2px;font-size:19px;text-transform:uppercase}
.cart-head h3 span{color:var(--blood)}
.cart-items{flex:1;overflow:auto;padding:10px 22px}
.ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line)}
.ci img{width:74px;height:74px;object-fit:cover;border:1px solid var(--line)}
.ci-t{font-weight:700;font-size:16px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15}
.ci-v{font-family:var(--font-type);font-size:11px;color:var(--bone-dim);letter-spacing:1px;margin:3px 0 6px}
.ci-p{font-family:var(--font-mil);color:var(--blood);font-size:14px}
.ci-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ci-x{background:none;border:none;color:var(--bone-dim);font-size:16px}
.ci-x:hover{color:var(--blood)}
.ci-qty{display:flex;border:1px solid var(--line)}
.ci-qty button{background:none;border:none;color:var(--bone);width:26px;height:26px;font-size:15px}
.ci-qty span{width:30px;display:grid;place-items:center;font-size:14px;font-family:var(--font-mil);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--bone-dim)}
.cart-empty .skull{font-size:52px;display:block;margin-bottom:12px;filter:grayscale(1)}
.cart-empty p{font-family:var(--font-type);letter-spacing:2px;font-size:13px;text-transform:uppercase}
.cart-foot{border-top:1px solid var(--line);padding:18px 22px 24px}
.cart-total{display:flex;justify-content:space-between;font-family:var(--font-mil);font-size:18px;margin-bottom:6px}
.cart-total span:last-child{color:var(--nvg)}
.cart-promo{font-family:var(--font-type);font-size:11px;letter-spacing:1.6px;color:var(--bone-dim);margin-bottom:14px;text-transform:uppercase}
.cart-promo b{color:var(--nvg)}
.cart-foot .btn{width:100%;text-align:center}
.cart-sub{font-family:var(--font-type);font-size:10px;letter-spacing:1.4px;color:var(--bone-dim);text-align:center;margin-top:10px;text-transform:uppercase}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);z-index:500;background:var(--ink2);
  border:1px solid var(--blood);color:var(--bone);font-family:var(--font-mil);font-size:14px;letter-spacing:1.5px;
  padding:14px 26px;transition:transform .3s;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.toast.show{transform:translate(-50%,0)}

/* ---------- redacted easter eggs ---------- */
.redact{background:var(--bone);color:var(--bone);cursor:pointer;padding:0 6px;user-select:none;transition:.2s;
  box-decoration-break:clone}
.redact.open{background:transparent;color:var(--nvg)}
.redact::selection{color:var(--bone)}

/* ---------- reviews / field reports ---------- */
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.report{background:var(--ink3);border:1px solid var(--line);padding:26px 24px;position:relative}
.report::before{content:"FIELD REPORT";position:absolute;top:-9px;left:16px;background:var(--ink3);
  font-family:var(--font-type);font-size:10px;letter-spacing:3px;color:var(--blood);padding:0 8px}
.report p{color:var(--bone-dim);font-size:17px;font-style:italic}
.report .who{margin-top:14px;font-family:var(--font-tat);color:var(--bone);font-size:17px;transform:rotate(-1deg)}
.report .stars{color:var(--blood);letter-spacing:3px;margin-top:6px;font-size:13px}

/* ---------- lore ---------- */
.lore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.lore-card{position:relative;border:1px solid var(--line);overflow:hidden;min-height:330px;display:flex;align-items:flex-end;cursor:pointer}
.lore-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.4) brightness(.55);transition:.5s}
.lore-card:hover .lore-bg{transform:scale(1.06);filter:grayscale(0) brightness(.62)}
.lore-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,8,.94),transparent 60%)}
.lore-in{position:relative;z-index:2;padding:22px}
.lore-in .d{font-family:var(--font-type);font-size:11px;letter-spacing:2px;color:var(--nvg)}
.lore-in h3{font-family:var(--font-mil);text-transform:uppercase;font-size:23px;line-height:1.05;margin:6px 0}
.lore-in p{color:var(--bone-dim);font-size:16px}
.article{max-width:820px;margin:0 auto;padding:70px 5vw}
.article .d{font-family:var(--font-type);color:var(--nvg);letter-spacing:3px;font-size:12px;text-transform:uppercase}
.article h1{font-family:var(--font-mil);font-size:clamp(30px,5vw,52px);text-transform:uppercase;line-height:1;margin:8px 0 20px}
.article img.head{width:100%;max-height:440px;object-fit:cover;border:1px solid var(--line);margin-bottom:26px;
  filter:contrast(1.05)}
.article p{color:var(--bone-dim);font-size:19px;margin-bottom:18px;line-height:1.65}
.article h4{font-family:var(--font-mil);font-size:21px;text-transform:uppercase;letter-spacing:1px;margin:28px 0 10px;color:var(--bone)}
.article ul{margin:0 0 18px 22px;color:var(--bone-dim);font-size:18px}
.article ul li{margin-bottom:8px}
.article blockquote{font-family:var(--font-tat);font-size:24px;color:var(--bone);border-left:4px solid var(--blood);
  padding:6px 0 6px 18px;margin:26px 0;transform:rotate(-.5deg)}
.article .back{font-family:var(--font-type);letter-spacing:2px;font-size:13px;color:var(--nvg);text-transform:uppercase}

/* ---------- newsletter ---------- */
.newsletter{background:var(--blood);color:#fff;padding:80px 4vw;text-align:center;position:relative;overflow:hidden}
.newsletter h2{font-family:var(--font-mil);font-size:clamp(28px,4.6vw,52px);text-transform:uppercase;line-height:1}
.newsletter p{font-family:var(--font-type);letter-spacing:2px;font-size:14px;margin:14px auto 26px;max-width:560px;text-transform:uppercase}
.nl-form{display:flex;max-width:520px;margin:0 auto;border:2px solid #000}
.nl-form input{flex:1;background:#fff;border:none;padding:16px 18px;font-family:var(--font-body);font-size:17px;color:#111;outline:none;min-width:0}
.nl-form button{background:#000;color:#fff;border:none;padding:0 30px;font-family:var(--font-mil);letter-spacing:2px;font-size:14px;text-transform:uppercase}
.nl-form button:hover{background:var(--ink3);color:var(--nvg)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr}}
.cform label{display:block;font-family:var(--font-type);font-size:12px;letter-spacing:2.5px;color:var(--bone-dim);
  margin:18px 0 8px;text-transform:uppercase}
.cform input,.cform textarea{width:100%;background:var(--ink3);border:1px solid var(--line);color:var(--bone);
  padding:14px;font-family:var(--font-body);font-size:17px;outline:none;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--nvg)}
.cform .btn{margin-top:24px}
.intel{border:1px solid var(--line);padding:30px;background:var(--ink3)}
.intel h3{font-family:var(--font-mil);font-size:20px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;color:var(--bone)}
.intel h3 span{color:var(--blood)}
.intel p{color:var(--bone-dim);margin-bottom:22px;font-size:17px}
.intel .mono{font-family:var(--font-type);font-size:14px;letter-spacing:1px;color:var(--nvg)}

/* ---------- footer ---------- */
footer{background:#050506;border-top:1px solid var(--line);padding:70px 4vw 30px;position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--font-mil);font-size:16px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;color:var(--bone)}
footer h4 span{color:var(--blood)}
footer p,footer a.fl{display:block;color:var(--bone-dim);font-size:16px;margin-bottom:9px;line-height:1.5}
footer a.fl:hover{color:var(--nvg)}
.foot-note{font-family:var(--font-type);font-size:11px;letter-spacing:1.4px;color:var(--bone-dim)}
.foot-bottom{border-top:1px dashed var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.foot-bottom p{margin:0;font-family:var(--font-type);font-size:12px;letter-spacing:1.5px}
.socials{display:flex;gap:14px}
.socials a{border:1px solid var(--line);width:40px;height:40px;display:grid;place-items:center;transition:.2s}
.socials a:hover{border-color:var(--blood);background:var(--blood-dark)}
.socials svg{width:17px;height:17px;fill:var(--bone)}

/* skull rain (easter egg) */
.skullrain{position:fixed;top:-60px;z-index:3000;font-size:30px;pointer-events:none;animation:skfall linear forwards}
@keyframes skfall{to{transform:translateY(115vh) rotate(720deg)}}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stat{border:1px solid var(--line);padding:28px 24px;background:var(--ink3)}
.stat h3{font-family:var(--font-mil);font-size:20px;text-transform:uppercase;color:var(--bone);margin-bottom:8px}
.stat h3 em{color:var(--nvg);font-style:normal}
.stat p{color:var(--bone-dim);font-size:16px}

/* line strip (ammo etc) */
.lines-strip{display:flex;flex-wrap:wrap;gap:12px}
.line-pill{flex:1;min-width:150px;text-align:center;border:1px solid var(--line);padding:22px 10px;transition:.2s;position:relative;overflow:hidden}
.line-pill:hover{border-color:var(--nvg);transform:translateY(-4px)}
.line-pill .cal{font-family:var(--font-mil);font-size:26px;color:var(--bone)}
.line-pill .lbl{font-family:var(--font-type);font-size:10px;letter-spacing:3px;color:var(--bone-dim);text-transform:uppercase}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .fx-grain,.fx-vhs{display:none}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   V2 — lowercase blackletter identity + hard mobile pass
   ============================================================ */
:root{ --font-black:'Pirata One', 'UnifrakturMaguntia', cursive; }

/* display type → lowercase old english */
.nav-logo, .hero h1, .sec-head h2, .drop-in h3, .modal-info h3, .cart-head h3,
.newsletter h2, .article h1, .lore-in h3, .stat h3, .intel h3, footer h4, .line-pill .cal{
  font-family:var(--font-black);
  text-transform:lowercase;
  letter-spacing:.5px;
  font-weight:400;
}
.hero h1{font-size:clamp(46px,9.6vw,124px);line-height:.92}
.sec-head h2{font-size:clamp(34px,5.4vw,64px)}
.article h1{font-size:clamp(34px,5.4vw,58px)}
.nav-logo{font-size:clamp(20px,2.6vw,30px)}
.nav-logo small{letter-spacing:5px}

/* commerce UI → readable bold condensed (off the stencil) */
.btn, .nav-cart, .card-p, .badge-out, .modal-price, .modal-x, .qty span,
.ci-p, .ci-qty span, .cart-total, .toast, .nl-form button, .article h4{
  font-family:var(--font-body);
  font-weight:700;
}
.btn{font-size:17px;letter-spacing:2.5px}
.nav-cart{font-size:15px;letter-spacing:2px}
.card-p{font-size:17px}
.modal-price{font-size:24px}
.cart-total{font-size:19px}

/* ---------- mobile hard pass ---------- */
.hero{min-height:92svh}
@media(max-width:640px){
  body{font-size:17px}
  .sec{padding:60px 5vw}
  .sec-tight{padding:40px 5vw}
  .nav{padding:10px 4vw;gap:12px}
  .hero{min-height:84svh}
  .hero-sub{margin:16px 0 26px}
  .hero-cta{flex-direction:column;align-items:stretch;padding:0 6vw}
  .hero-cta .btn{width:100%;text-align:center}
  .btn{padding:16px 26px;min-height:48px}
  .chip{padding:10px 14px;font-size:13px;min-height:42px}
  .drops{gap:14px}
  .drop{min-height:330px}
  .drop-in{padding:20px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-body{padding:10px 10px 14px}
  .card-t{font-size:15px}
  .card-p{font-size:15px}
  .badge-line{display:none}
  .toolbar{gap:10px}
  .tool-right{margin-left:0;width:100%}
  .search{flex:1;min-width:0}
  select.sort{min-width:110px}
  .modal{grid-template-columns:1fr;max-height:90svh}
  .modal-imgs img{aspect-ratio:auto;max-height:42svh}
  .modal-info{padding:20px 18px 26px}
  .modal-actions .btn{flex:1;text-align:center}
  .reports{grid-template-columns:1fr}
  .lines-strip{gap:8px}
  .line-pill{min-width:calc(50% - 8px);padding:16px 8px}
  .line-pill .cal{font-size:22px}
  .stats{grid-template-columns:1fr}
  .article{padding:50px 6vw}
  .article p{font-size:18px}
  .newsletter{padding:60px 6vw}
  .nl-form{flex-direction:column;border:none;gap:10px}
  .nl-form input{border:2px solid #000;padding:15px 16px}
  .nl-form button{padding:15px;min-height:50px}
  .annc span{font-size:11px;padding:0 18px}
  .fx-vhs{display:none}
  .fx-grain{opacity:.05}
  .cart{width:100vw}
  .foot-grid{gap:26px}
}
/* tap targets everywhere */
@media(pointer:coarse){
  .opt-btn{min-height:44px;min-width:44px}
  .qty button,.ci-qty button{min-width:40px;min-height:40px}
  .nav-cart{min-height:42px}
}

/* safety: anything still on --font-mil degrades to bold condensed, not system default */
:root{ --font-mil:'Barlow Condensed',Arial,sans-serif; }

/* ---------- life is pain — statue feature ---------- */
.pain-hero{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:74vh;min-height:74svh;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pain-bg{position:absolute;inset:0;background-size:cover;background-position:center 22%;
  filter:contrast(1.1) brightness(.55);transform:scale(1.04);transition:transform 1.2s ease}
.pain-hero:hover .pain-bg{transform:scale(1.1)}
.pain-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(7,7,8,.15) 0%,rgba(7,7,8,.88) 100%)}
.pain-in{position:relative;z-index:2;padding:60px 6vw}
.pain-in h2{font-family:var(--font-black);text-transform:lowercase;font-weight:400;
  font-size:clamp(44px,8.4vw,104px);line-height:.92;color:var(--bone);letter-spacing:.5px;margin:10px 0 26px}
.pain-in h2 .pf{color:var(--blood)}
@media(max-width:640px){.pain-hero{min-height:60svh}}

/* ============================================================
   V3 — brand art integration + fire sale + slogan band
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* nav name-tape logo */
.logo-tape{height:34px;width:auto;display:block;image-rendering:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.nav-logo small{margin-top:4px}
@media(max-width:640px){.logo-tape{height:26px}}

/* FIRE SALE nav link burns */
.nav-links a.sale-link{color:var(--blood);font-weight:700}
.nav-links a.sale-link:hover,.nav-links a.sale-link.on{color:#ff4d55}
.nav-links a.sale-link::after{background:var(--nvg)}

/* hero — art-first mode (Bang Bus / Fire Sale art carries the branding) */
.hero-art{min-height:96svh;align-items:stretch}
.hero-bg.art{filter:contrast(1.06) brightness(.9) saturate(1.05);animation-duration:38s}
.hero-vig-art{background:linear-gradient(180deg,rgba(7,7,8,.55) 0%,transparent 22%,transparent 62%,rgba(7,7,8,.85) 100%)}
.hero-in-art{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;
  padding:26px 5vw 42px}
.hero-cta-art{margin-top:auto}
.sale-hero{min-height:78svh}
@media(max-width:640px){
  .hero-art{min-height:70svh}
  .sale-hero{min-height:56svh}
  .hero-in-art{padding-bottom:26px}
}

/* slogan band — beautiful scars & twisted drip */
.slogan-band{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:6px 22px;padding:44px 5vw 50px;background:var(--ink2);border-bottom:1px solid var(--line);overflow:hidden;
  text-align:center}
.slogan-band::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(ellipse at 20% 120%,rgba(224,27,36,.16),transparent 55%),
             radial-gradient(ellipse at 80% -20%,rgba(77,255,87,.10),transparent 55%)}
.sg-a{font-family:var(--font-black);font-size:clamp(34px,6.4vw,76px);color:var(--bone);
  text-transform:lowercase;transform:rotate(-1.2deg);text-shadow:3px 3px 0 rgba(224,27,36,.35)}
.sg-b{font-family:var(--font-tat);font-size:clamp(26px,4.4vw,54px);color:var(--blood);
  transform:rotate(-6deg) translateY(-4px);text-shadow:0 0 18px rgba(224,27,36,.5)}
.sg-c{font-family:var(--font-tat);font-size:clamp(30px,5.8vw,68px);color:var(--nvg);
  transform:rotate(1.4deg);position:relative;
  text-shadow:0 0 22px rgba(77,255,87,.35), 2px 2px 0 rgba(0,0,0,.8)}
.sg-c::after{content:"";position:absolute;left:6%;right:4%;bottom:-12px;height:14px;opacity:.9;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 8 Q60 2 150 9 T296 7' stroke='%234dff57' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M40 12 q2 6 1 9 M120 13 q3 7 2 10 M210 12 q2 5 1 8' stroke='%234dff57' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}

/* drop panel with contained art (dead tooth) */
.drop-bg.drop-contain{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#000}

/* fire sale badge */
.badge-sale{position:absolute;bottom:12px;left:12px;z-index:4;background:var(--blood);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:1.5px;padding:5px 10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}

/* life is pain — full art visible */
.pain-art{min-height:auto;padding:56px 4vw;background:#0a0a0b}
.pain-blur{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(34px) brightness(.35) saturate(1.1);transform:scale(1.2)}
.pain-bg.pain-contain{position:relative;inset:auto;width:min(920px,92vw);aspect-ratio:1;margin:0 auto;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:none;transform:none;transition:transform .8s}
.pain-art:hover .pain-bg.pain-contain{transform:scale(1.02)}
.pain-art::after{display:none}
.pain-art{display:block}
.pain-cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;text-align:center}
@media(max-width:640px){.pain-art{padding:34px 3vw}.pain-cta{margin-top:14px}}

/* dead tooth watermark (screen-blend line art) */
.wm{position:relative}
.wm::after{content:"";position:absolute;right:-60px;bottom:-40px;width:340px;height:340px;pointer-events:none;
  background-image:var(--wm-img,none);background-size:contain;background-repeat:no-repeat;
  mix-blend-mode:screen;opacity:.07;transform:rotate(12deg)}
@media(max-width:640px){.wm::after{width:220px;height:220px;right:-40px}}

/* ============================================================
   V4 — fever-dream layer: whole-art heroes, egg markers,
   marble seal doors, classified files
   ============================================================ */

/* heroes show the FULL artwork over a blurred echo */
.hero-blur{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.34) saturate(1.15);transform:scale(1.25)}
.hero-bg.hero-fit{background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:contrast(1.05) brightness(.98);animation:none;transform:none}
.hero-art{min-height:88svh}
.sale-hero{min-height:72svh}
@media(max-width:640px){
  .hero-art{min-height:58svh}
  .sale-hero{min-height:46svh}
}
.hero-vig-art{background:linear-gradient(180deg,rgba(7,7,8,.42) 0%,transparent 18%,transparent 72%,rgba(7,7,8,.72) 100%)}

/* the dead tooth = universal easter-egg marker */
.egg-tooth{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:8px;
  background-image:var(--tooth,url("img/dead-tooth.png"));background-size:cover;background-position:center;
  mix-blend-mode:screen;animation:toothpulse 2.2s ease-in-out infinite;cursor:pointer}
@keyframes toothpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.redact{position:relative}
.redact::after{content:"⊕";position:absolute;top:-9px;right:-14px;font-size:12px;color:var(--nvg);
  opacity:.85;animation:toothpulse 2.2s ease-in-out infinite}
.redact.open::after{content:"⊖";animation:none;opacity:.5}

/* classified line in product popups */
.modal-secret{margin:16px 0 4px;padding:12px 14px;border:1px dashed rgba(224,27,36,.5);background:rgba(224,27,36,.05);
  font-family:var(--font-type);font-size:13px;letter-spacing:.8px;line-height:1.6}
.modal-secret .redact{padding:1px 8px}
.secret-file{display:inline-block;margin-left:8px;font-family:var(--font-type);font-size:12px;letter-spacing:2px;
  color:var(--nvg);border-bottom:1px dashed var(--nvg)}
.secret-file:hover{color:#8dff96}

/* marble seal door (footer) */
.seal-egg{display:flex;justify-content:center;margin:0 0 34px}
.seal-egg img{width:92px;height:auto;mix-blend-mode:screen;opacity:.85;cursor:pointer;
  transition:transform .3s,opacity .3s;user-select:none;-webkit-user-drag:none}
.seal-egg img:hover{opacity:1;transform:rotate(-6deg) scale(1.08)}
.seal-egg img:active{transform:rotate(6deg) scale(.94)}

/* ---------- THE UNDERGROUND ---------- */
.ug{max-width:900px;margin:0 auto;padding:60px 5vw 90px}
.ug-stamp{display:inline-block;font-family:var(--font-type);font-size:12px;letter-spacing:4px;color:var(--blood);
  border:2px solid var(--blood);padding:6px 14px;transform:rotate(-3deg);margin-bottom:18px;text-transform:uppercase;
  animation:flick 5s infinite}
.ug h1{font-family:var(--font-black);text-transform:lowercase;font-size:clamp(44px,9vw,96px);line-height:.92;color:var(--bone)}
.ug h1 span{color:var(--blood)}
.ug-sub{font-family:var(--font-type);color:var(--nvg);letter-spacing:2px;font-size:14px;margin:16px 0 40px;text-transform:uppercase}
.ug-file{border:1px solid var(--line);background:var(--ink2);padding:34px 30px;margin-bottom:30px;position:relative;overflow:hidden}
.ug-file::before{content:"FILE // DECLASSIFIED";position:absolute;top:12px;right:14px;font-family:var(--font-type);
  font-size:10px;letter-spacing:3px;color:var(--bone-dim)}
.ug-file h2{font-family:var(--font-black);text-transform:lowercase;font-size:clamp(26px,4vw,42px);margin-bottom:14px;color:var(--bone)}
.ug-file h2 em{color:var(--blood);font-style:normal}
.ug-file p{color:var(--bone-dim);font-size:18px;margin-bottom:14px;line-height:1.65}
.ug-file blockquote{font-family:var(--font-type);font-size:16px;color:var(--bone);border-left:3px solid var(--nvg);
  padding:8px 0 8px 16px;margin:18px 0;letter-spacing:.5px}
.ug-file .src{font-family:var(--font-type);font-size:11px;letter-spacing:1.5px;color:var(--bone-dim)}
.ug-seal{width:130px;margin:0 auto 26px;display:block;mix-blend-mode:screen;animation:toothpulse 4s ease-in-out infinite}
.ug-code{margin:14px 0 6px;text-align:center}
.ug-code .redact{font-family:var(--font-mil);font-size:26px;letter-spacing:4px;padding:6px 18px}
.ug-links a{color:var(--nvg);border-bottom:1px dashed var(--nvg)}
.ug-links a:hover{color:#8dff96}
.ug-wall{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ug-wall img{width:110px;height:110px;object-fit:contain;mix-blend-mode:screen;opacity:.8;transition:.3s}
.ug-wall img:hover{opacity:1;transform:scale(1.1) rotate(-3deg)}
@media(max-width:640px){.ug-file{padding:24px 18px}}

/* ============================================================
   V5 — CTA strip, horror drips, redaction engine, sealed stubs
   ============================================================ */

/* CTAs below the hero art — never on top of the banner */
.cta-strip{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  padding:22px 5vw;background:var(--ink);border-bottom:1px solid var(--line)}
@media(max-width:640px){
  .cta-strip{flex-direction:column;padding:16px 6vw}
  .cta-strip .btn{width:100%;text-align:center}
}
/* hero keeps only the top tag now */
.hero-in-art{justify-content:flex-start}

/* ---- twisted drip: blood + ooze, live ---- */
.sg-c.drippy{color:var(--blood);position:relative;display:inline-block;
  text-shadow:0 0 18px rgba(224,27,36,.55), 2px 3px 0 rgba(0,0,0,.85);
  filter:drop-shadow(0 2px 1px rgba(143,15,21,.6))}
.sg-c.drippy .drips{position:absolute;left:0;right:0;top:68%;height:120px;pointer-events:none}
.sg-c.drippy .drips i{position:absolute;top:0;width:7px;height:26px;background:var(--blood);
  border-radius:2px 2px 10px 10px;transform-origin:top center;opacity:0;
  animation:dripfall 3.4s ease-in infinite;
  box-shadow:0 0 8px rgba(224,27,36,.5)}
.sg-c.drippy .drips i::before{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:11px;height:11px;background:inherit;border-radius:50%;box-shadow:inherit}
.sg-c.drippy .drips i:nth-child(1){left:8%;animation-delay:0s;height:34px}
.sg-c.drippy .drips i:nth-child(2){left:26%;animation-delay:1.1s;height:20px;width:5px}
.sg-c.drippy .drips i:nth-child(3){left:47%;animation-delay:.5s;height:42px;width:8px}
.sg-c.drippy .drips i:nth-child(4){left:66%;animation-delay:1.8s;height:24px;width:5px}
.sg-c.drippy .drips i:nth-child(5){left:88%;animation-delay:.9s;height:30px}
.sg-c.drippy .drips i.g{background:var(--nvg);box-shadow:0 0 10px rgba(77,255,87,.55)}
.sg-c.drippy .drips i:nth-child(6){left:37%;animation-delay:2.4s;height:18px;width:4px}
.sg-c.drippy .drips i:nth-child(7){left:76%;animation-delay:3s;height:22px;width:5px}
@keyframes dripfall{
  0%{transform:translateY(-6px) scaleY(.4);opacity:0}
  12%{opacity:.95;transform:translateY(0) scaleY(1)}
  70%{opacity:.9}
  100%{transform:translateY(95px) scaleY(1.25);opacity:0}
}
.slogan-band{padding-bottom:86px;overflow:visible}
@media (prefers-reduced-motion: reduce){
  .sg-c.drippy .drips i{animation:none;opacity:.7;transform:translateY(8px)}
}

/* ---- redaction bars (the engine paints these) ---- */
.rmini{background:var(--bone);color:transparent;border-radius:1px;cursor:pointer;
  padding:0 2px;margin:0 1px;user-select:none;transition:background .35s,color .35s;
  box-shadow:0 0 0 .5px rgba(0,0,0,.4)}
.rmini:hover{background:#fff}
.rmini.open{background:transparent;color:var(--nvg);box-shadow:none;cursor:default;user-select:auto}

/* ---- sealed dossier stubs ---- */
.ug-stubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:10px}
.ug-stub{border:1px dashed var(--line);background:var(--ink3);padding:22px 20px;position:relative;
  overflow:hidden;min-height:190px}
.ug-stub h3{font-family:var(--font-black);text-transform:lowercase;font-size:22px;color:var(--bone);margin-bottom:10px;
  padding-right:86px}
.ug-stub .stamp{position:absolute;top:14px;right:-24px;transform:rotate(24deg);background:var(--blood);color:#fff;
  font-family:var(--font-type);font-size:10px;letter-spacing:3px;padding:4px 30px}
.ug-stub p{font-family:var(--font-type);font-size:13px;line-height:1.7;color:var(--bone-dim);letter-spacing:.4px;margin-bottom:8px}
.ug-stub .whisper{color:var(--nvg);font-style:italic}
.ug-stub .bars{margin-top:10px}
.ug-stub .bars i{display:inline-block;height:11px;background:var(--bone);opacity:.9;border-radius:1px;margin:2px 3px 2px 0;vertical-align:middle}
.ug-stub .nokey{font-family:var(--font-type);font-size:10px;letter-spacing:2px;color:var(--bone-dim);margin-top:10px;text-transform:uppercase}
/* the evil one */
.ug-stub.demonic{border-color:rgba(224,27,36,.7);background:#120507;
  box-shadow:inset 0 0 40px rgba(224,27,36,.22), 0 0 22px rgba(224,27,36,.18);
  animation:flick 7s infinite}
.ug-stub.demonic h3{color:#ff3b44;text-shadow:0 0 14px rgba(224,27,36,.8)}
.ug-stub.demonic .stamp{background:#000;color:#ff3b44;border:1px solid #ff3b44}
.ug-stub.demonic .bars i{background:#3a0d10}
.ug-stub.demonic .whisper{color:#ff6b71}

/* ============================================================
   V6 — melted lettering, tooth doors, paragraph declassify
   ============================================================ */

/* melted "twisted drip" — SVG goo */
.sg-c.melted{display:block;width:min(680px,88vw);margin:-6px auto 0}
.drip-svg{width:100%;height:auto;overflow:visible}
.melt-word{font-family:var(--font-tat);font-size:112px;fill:var(--blood);
  paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:2px}
.melt-red{filter:url(#goo)}
.melt-red, .melt-red .mblob{fill:var(--blood)}
.mblob{transform-box:fill-box;transform-origin:center top;animation:meltdrip 4.6s ease-in infinite}
.m1{animation-delay:0s}.m2{animation-delay:1.3s}.m3{animation-delay:.6s}
.m4{animation-delay:2.2s}.m5{animation-delay:1.7s}.m6{animation-delay:3.1s}
@keyframes meltdrip{
  0%{transform:translateY(0) scaleY(1)}
  55%{transform:translateY(26px) scaleY(1.9)}
  78%{transform:translateY(78px) scaleY(1.15);opacity:.95}
  96%{transform:translateY(150px) scaleY(.8);opacity:0}
  100%{transform:translateY(0) scaleY(1);opacity:0}
}
.oblob{fill:var(--nvg);opacity:.9;transform-box:fill-box;transform-origin:center top;
  animation:oozefall 5.4s ease-in infinite;filter:drop-shadow(0 0 6px rgba(77,255,87,.6))}
.o1{animation-delay:.9s}.o2{animation-delay:3.4s}
@keyframes oozefall{
  0%{transform:translateY(0) scaleY(1);opacity:0}
  10%{opacity:.9}
  60%{transform:translateY(70px) scaleY(1.5)}
  95%{transform:translateY(140px) scaleY(.9);opacity:0}
  100%{transform:translateY(0);opacity:0}
}
.slogan-band{padding-bottom:44px}
@media (prefers-reduced-motion: reduce){
  .mblob,.oblob{animation:none;transform:translateY(14px) scaleY(1.4)}
}
@media(max-width:640px){.melt-word{font-size:118px}}

/* the tooth in the hero art is clickable */
.tooth-door{position:absolute;z-index:5;left:34%;width:32%;top:8%;height:44%;
  border-radius:18px;cursor:pointer}
.tooth-door:hover{box-shadow:0 0 0 2px rgba(77,255,87,.25), 0 0 44px rgba(77,255,87,.14) inset}
@media(max-width:640px){.tooth-door{left:30%;width:40%;top:16%;height:36%}}

/* whole-paragraph declassify feedback */
[data-redacted]{cursor:default}
[data-redacted]:not(.declassified) .rmini{cursor:pointer}
.declassified .rmini{background:transparent;color:inherit;box-shadow:none}
.declassified{animation:declassflash .6s ease}
@keyframes declassflash{0%{background:rgba(77,255,87,.14)}100%{background:transparent}}

/* ============================================================
   FINAL — centered slogan stack + classified images
   ============================================================ */

/* slogan: symmetric centered stack */
.slogan-band{flex-direction:column;align-items:center;gap:2px;padding:38px 5vw 40px;text-align:center}
.sg-row{display:flex;gap:20px;align-items:baseline;justify-content:center}
.sg-row .sg-a{transform:rotate(-1deg)}
.sg-row .sg-b{transform:rotate(-5deg) translateY(-2px)}
.sg-c.melted{margin:-10px auto 0}

/* classified images — covered until tapped */
.cimg{position:relative;display:inline-block;overflow:hidden;border:1px dashed rgba(224,27,36,.55)}
.cimg img{display:block;width:100%;height:auto}
.cimg .cimg-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;cursor:pointer;background:
    repeating-linear-gradient(0deg, #101012 0 12px, #1a1a1d 12px 15px);
  color:var(--bone-dim);font-family:var(--font-type);font-size:11px;letter-spacing:3px;text-transform:uppercase;
  text-align:center;transition:opacity .45s ease, visibility .45s}
.cimg .cimg-cover b{color:var(--nvg);font-weight:400;font-size:10px;letter-spacing:2px}
.cimg .cimg-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%)}
.cimg .cimg-cover:hover{color:var(--bone)}
.cimg.open .cimg-cover{opacity:0;visibility:hidden}
.cimg-tooth{width:26px;height:26px;margin:0;animation:toothpulse 2.2s ease-in-out infinite;pointer-events:none}

/* ============================================================
   FINAL2 — slogan doors + ampersand centered + stub evidence
   ============================================================ */
/* kill the old splat underline for good */
.sg-c::after{display:none !important;content:none !important}
/* stack: scars / & / melted drip — all centered, halves are links */
.slogan-band{gap:0;padding:34px 5vw 40px}
a.sg-a{display:block;transform:rotate(-1deg);transition:text-shadow .25s,transform .25s}
a.sg-a:hover{text-shadow:3px 3px 0 rgba(224,27,36,.6), 0 0 26px rgba(224,27,36,.35);transform:rotate(-1deg) scale(1.02)}
.slogan-band .sg-b{display:block;margin:2px 0 -4px;transform:rotate(-6deg);
  font-size:clamp(30px,5vw,60px);text-shadow:0 0 22px rgba(224,27,36,.55)}
a.sg-link{display:block;transition:filter .25s}
a.sg-link:hover{filter:drop-shadow(0 0 18px rgba(224,27,36,.5))}
a.sg-link .sg-c.melted{margin-top:-8px}

/* evidence thumbs inside sealed stubs */
.stub-cimg{display:block;width:100%;max-height:150px;margin:0 0 12px;border-color:var(--line)}
.stub-cimg img{width:100%;height:150px;object-fit:cover;filter:grayscale(.6) contrast(1.08)}
.cimg.open .stub-cimg img, .stub-cimg{overflow:hidden}
.ug-stub.demonic .stub-cimg{border-color:rgba(224,27,36,.7)}
.ug-stub.demonic .stub-cimg img{filter:grayscale(1) contrast(1.2) brightness(.85) sepia(.3) hue-rotate(-30deg) saturate(2.4)}

/* ============================================================
   FINAL3 — product-fit drop panels (whole product visible)
   ============================================================ */
.drop-bg.drop-product{background-color:#efece4;background-size:contain;background-repeat:no-repeat;background-position:center}
.drop-bg.drop-product + .drop-in{--_x:0}  /* text gradient already handles readability */
.drop:has(.drop-product)::after{background:linear-gradient(8deg,rgba(7,7,8,.94) 22%,rgba(7,7,8,.05) 60%)}


/* ============================================================
   V7 — DOSSIER ROOMS (expandable underground case files)
   ============================================================ */
.ug-dossier{max-width:980px}
.ug-dossier .ug-file{margin-bottom:22px}
.tier-key{display:grid;gap:8px;margin:18px 0;padding:14px 16px;border:1px dashed var(--line);background:var(--ink3);
  font-family:var(--font-type);font-size:13px;letter-spacing:.4px;color:var(--bone-dim);line-height:1.5}
.tier-key .t,.drw-tag.t0,.drw-tag.t1,.drw-tag.t2,.drw-tag.t3,.drw-tag.t4,
.bul .t,.dos-table .t{display:inline-block;font-family:var(--font-mil);font-size:11px;letter-spacing:1.5px;
  padding:2px 7px;border-radius:2px;margin-right:8px;vertical-align:1px;color:#0a0a0b;font-weight:700}
.t.t0{background:#d4c4a8}.t.t1{background:var(--nvg);color:#061208}.t.t2{background:#e0b34e}
.t.t3{background:#7aa2c7}.t.t4{background:#666;color:#ddd}
.dos-toc{margin:8px 0 0 18px;color:var(--bone-dim);font-size:17px;line-height:1.85}
.dos-toc a{color:var(--nvg);border-bottom:1px dashed rgba(77,255,87,.35)}
.dos-toc a:hover{color:#8dff96}

/* drawers */
.drw{border:1px solid var(--line);background:var(--ink2);margin-bottom:14px;overflow:hidden}
.drw-h{width:100%;text-align:left;background:transparent;border:0;color:var(--bone);cursor:pointer;
  padding:18px 20px;font-family:var(--font-black);text-transform:lowercase;font-size:clamp(20px,3.4vw,30px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.15}
.drw-h:hover{background:rgba(255,255,255,.02)}
.drw-h em{color:var(--blood);font-style:normal}
.drw-h .care{font-family:var(--font-mil);color:var(--nvg);width:1.1em}
.drw-tag{margin-left:auto;font-family:var(--font-type);font-size:11px;letter-spacing:2px;color:var(--bone-dim);
  text-transform:uppercase;border:1px solid var(--line);padding:3px 8px}
.drw-b{display:none;padding:4px 22px 24px;border-top:1px solid rgba(255,255,255,.04)}
.drw-b.open{display:block}
.drw-b p{color:var(--bone-dim);font-size:17px;margin-bottom:12px;line-height:1.65}
.drw-b .src{font-family:var(--font-type);font-size:11px;letter-spacing:1.5px;color:var(--bone-dim);margin-top:10px}
.drw-b blockquote{font-family:var(--font-type);font-size:15px;color:var(--bone);border-left:3px solid var(--nvg);
  padding:8px 0 8px 16px;margin:16px 0;letter-spacing:.4px}
.bul{margin:6px 0 12px 4px;padding-left:18px;color:var(--bone-dim);font-size:16px;line-height:1.7}
.bul li{margin-bottom:10px}
.dos-table{width:100%;border-collapse:collapse;margin:12px 0 16px;font-size:14px;color:var(--bone-dim)}
.dos-table th{font-family:var(--font-type);font-size:11px;letter-spacing:2px;text-align:left;color:var(--nvg);
  border-bottom:1px solid var(--line);padding:8px 8px;text-transform:uppercase}
.dos-table td{border-bottom:1px solid rgba(255,255,255,.05);padding:10px 8px;vertical-align:top;line-height:1.45}
.dos-table tr:hover td{background:rgba(77,255,87,.03)}
.ops-box{border:1px dashed rgba(77,255,87,.35);background:rgba(77,255,87,.04);padding:16px 18px;margin:14px 0 18px}
.ops-box h3{font-family:var(--font-type);font-size:12px;letter-spacing:2.5px;color:var(--nvg);text-transform:uppercase;margin:0 0 10px}
.ops-box p,.ops-box li{color:var(--bone-dim);font-size:15px;line-height:1.6}
.ops-box ol,.ops-box ul{margin:0 0 0 18px}
.ops-box li{margin-bottom:6px}
.lnk{border:1px solid rgba(255,255,255,.06);background:var(--ink3);margin:8px 0;padding:0}
.lnk summary{cursor:pointer;list-style:none;padding:12px 14px;font-family:var(--font-type);font-size:13px;
  letter-spacing:1.5px;color:var(--bone);text-transform:uppercase}
.lnk summary::-webkit-details-marker{display:none}
.lnk summary::before{content:"▸ ";color:var(--nvg)}
.lnk[open] summary::before{content:"▾ "}
.lnk ul{margin:0 14px 14px 28px;padding:0}
.lnk li{margin:8px 0;color:var(--bone-dim);font-size:15px;line-height:1.5}
.lnk a{color:var(--nvg);border-bottom:1px dashed rgba(77,255,87,.4);word-break:break-word}
.lnk a:hover{color:#8dff96}
.lnk code{font-family:var(--font-mil);font-size:12px;color:var(--bone)}
@media(max-width:640px){
  .drw-h{padding:14px 14px;font-size:20px}
  .drw-b{padding:4px 14px 18px}
  .drw-tag{margin-left:0;width:100%;text-align:center;margin-top:6px}
  .dos-table{font-size:12px;display:block;overflow-x:auto}
}

/* ============================================================
   V8 — FILE GATES (password seals on dossier rooms)
   ============================================================ */
/* sealed content uses [data-gate-open]/[data-gate-sealed] only */
body.is-sealed [data-gate-open],
body:not(.is-unlocked) [data-gate-open]{display:none !important}
body.is-unlocked [data-gate-sealed]{display:none !important}
/* if JS dies mid-load, default body.is-sealed on orem keeps drawers dark */
body.dossier-page:not(.is-unlocked) [data-gate-open]{display:none !important}

.gate-shell{max-width:520px;margin:10px auto 36px;padding:28px 24px 26px;border:1px solid var(--line);
  background:var(--ink2);position:relative;text-align:center}
.gate-shell::before{content:"SEALED FILE";position:absolute;top:12px;right:12px;font-family:var(--font-type);
  font-size:10px;letter-spacing:3px;color:var(--bone-dim)}
.gate-shell.gate-open{display:none}
.gate-tooth{width:42px;height:42px;margin:0 auto 12px;animation:toothpulse 2.2s ease-in-out infinite}
.gate-shell h2{font-family:var(--font-black);text-transform:lowercase;font-size:clamp(28px,5vw,40px);
  color:var(--bone);margin:4px 0 10px}
.gate-shell h2 em{color:var(--blood);font-style:normal}
.gate-shell .gate-blurb{color:var(--bone-dim);font-size:16px;line-height:1.55;margin-bottom:14px}
.gate-clue{font-family:var(--font-type);font-size:13px;letter-spacing:.6px;color:var(--nvg);
  border:1px dashed rgba(77,255,87,.4);padding:12px 14px;margin:0 0 16px;line-height:1.55;text-align:left}
.gate-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gate-form input{flex:1 1 180px;min-width:0;background:#0a0a0b;border:1px solid var(--line);color:var(--bone);
  font-family:var(--font-mil);font-size:16px;letter-spacing:2px;padding:12px 14px;text-transform:lowercase}
.gate-form input:focus{outline:1px solid var(--nvg);border-color:var(--nvg)}
.gate-form button{font-family:var(--font-type);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  background:var(--blood);color:#fff;border:0;padding:12px 18px;cursor:pointer}
.gate-form button:hover{filter:brightness(1.08)}
.gate-msg{min-height:1.3em;margin-top:12px;font-family:var(--font-type);font-size:12px;letter-spacing:2px;
  color:var(--bone-dim);text-transform:uppercase}
.gate-msg.ok{color:var(--nvg)}.gate-msg.bad{color:var(--blood)}.gate-msg.checking{color:#e0b34e}
.gate-shake{animation:gateShake .45s ease}
@keyframes gateShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.gate-hint{margin-top:18px;font-family:var(--font-type);font-size:11px;letter-spacing:1.5px;color:var(--bone-dim);line-height:1.6}
.gate-hint a{color:var(--nvg);border-bottom:1px dashed rgba(77,255,87,.35)}

/* stub inline key */
.stub-gate{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.06)}
.stub-gate .gate-clue{font-size:11px;margin-bottom:10px;padding:8px 10px}
.stub-gate .gate-form input{font-size:13px;padding:9px 10px;letter-spacing:1px}
.stub-gate .gate-form button{padding:9px 12px;font-size:11px}
.stub-gate .gate-msg{font-size:10px;margin-top:8px}
.ug-stub.is-unlocked-stub .stub-gate{display:none}
.ug-stub .secret-file.gate-locked{display:none}
.ug-stub.is-unlocked-stub .secret-file.gate-locked{display:inline-block}


/* tier-1+ stub is a whole-card door */
a.ug-stub-link{display:block;text-decoration:none;color:inherit;transition:border-color .2s, transform .15s}
a.ug-stub-link:hover{border-color:var(--nvg);transform:translateY(-2px)}
a.ug-stub-link .secret-file{border-bottom:none}
.stub-tier{display:inline-block;margin:0 0 8px 0;font-family:var(--font-type);font-size:10px;letter-spacing:2px;
  color:var(--nvg);border:1px solid rgba(77,255,87,.35);padding:2px 8px}
.ug-stub-link.is-unlocked-stub{border-color:rgba(77,255,87,.45)}
.ug-stub-link.is-unlocked-stub .stamp{color:var(--nvg)}


/* ---- KEY PLANTS (T1 — LOUD on purpose for low barrier) ---- */
b.key-plant, .key-plant{
  color: var(--nvg) !important;
  font-weight: 800;
  letter-spacing: .6px;
  text-shadow: 0 0 14px rgba(77,255,87,.55), 0 0 2px rgba(77,255,87,.9);
  border-bottom: 2px solid rgba(77,255,87,.85);
  padding: 0 3px;
  background: rgba(77,255,87,.08);
}
.ug-code.key-residue{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 8px;
  max-width: 360px;
  border: 1px solid rgba(77,255,87,.55) !important;
  color: var(--nvg) !important;
  background: rgba(77,255,87,.07) !important;
  padding: 14px 18px;
}
.ug-code.key-residue .key-plant-words{
  font-family: var(--font-mil), var(--font-type), monospace;
  font-size: clamp(20px, 4.6vw, 30px);
  letter-spacing: 5px;
  color: var(--nvg) !important;
  text-shadow: 0 0 16px rgba(77,255,87,.5);
  font-weight: 700;
}
.residue-note{
  display: block !important;
  color: var(--nvg) !important;
  opacity: .85;
  font-family: var(--font-type) !important;
  font-size: 11px !important;
  letter-spacing: 1.6px !important;
  margin: 0 0 18px !important;
  text-align: center;
}

/* HARD SEAL — dossier content never leaks without unlock class */
body.dossier-page.is-sealed .gate-shell{display:block}
body.dossier-page.is-sealed [data-gate-open],
body.dossier-page:not(.is-unlocked) [data-gate-open]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
body.dossier-page.is-unlocked [data-gate-sealed]{display:none !important}
body.dossier-page.is-unlocked [data-gate-open]{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  overflow:visible !important;
  pointer-events:auto !important;
}


/* stub photo: show face clearer for Live seal */
#stub-kirk .stub-cimg img,
a#stub-kirk .stub-cimg img{
  filter: grayscale(.15) contrast(1.05) brightness(1.02);
  object-position: center 20%;
}

/* T1 plant = inline only; big residue stamp retired for this room */
.ug-code.key-residue{display:none!important}


/* OPTION C nests — half-height residue under whole-number spine */
.ug-nests{margin-top:18px;display:flex;flex-direction:column;gap:10px;clear:both}
.ug-nest{
  border:1px dashed rgba(77,255,87,.28);
  background:rgba(0,0,0,.28);
  border-radius:2px;
  overflow:hidden;
}
.ug-nest > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  padding:12px 14px;
  font-family:var(--font-type);
  color:var(--bone-dim);
  letter-spacing:.8px;
  font-size:13px;
  user-select:none;
}
.ug-nest > summary::-webkit-details-marker{display:none}
.ug-nest > summary::before{
  content:"+";
  color:var(--nvg);
  font-weight:700;
  width:1em;
  display:inline-block;
}
.ug-nest[open] > summary::before{content:"–"}
.ug-nest > summary:hover{color:var(--bone);background:rgba(77,255,87,.04)}
.ug-nest .nest-tag{
  color:var(--nvg);
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  opacity:.9;
}
.ug-nest .nest-title{
  color:var(--bone);
  font-family:var(--font-black);
  text-transform:lowercase;
  font-size:18px;
  letter-spacing:.5px;
}
.ug-nest .nest-hint{
  opacity:.55;
  font-size:11px;
  letter-spacing:1.2px;
  margin-left:auto;
}
.ug-nest-body{
  padding:4px 16px 16px;
  border-top:1px solid rgba(77,255,87,.12);
}
.ug-nest-body p{font-size:16px!important;margin-bottom:12px}
.ug-nest-body .nest-meta{
  display:inline-block;
  opacity:.75;
  font-size:12px;
  letter-spacing:.5px;
  margin-top:2px;
}
.ug-nest-inline{margin:14px 0 18px}
@media(max-width:640px){
  .ug-nest .nest-hint{margin-left:0;width:100%}
  .ug-nest > summary{padding:10px 12px}
}

/* ===================== LOCK LADDER PLANTS (Tier ladder) ===================== */
/* T1 green retained for training doors only (.key-plant) */
/* T2 ASH — dashed bone underline, no glow. Trained eyes only. */
b.key-ash, .key-ash{
  color: var(--bone) !important;
  font-weight: 700;
  letter-spacing: .4px;
  border-bottom: 1px dashed rgba(232,220,200,.55);
  background: transparent;
  text-shadow: none;
  padding: 0 2px;
}
/* T2 GHOST — almost invisible until hover/selection */
b.key-ghost, .key-ghost{
  color: transparent !important;
  text-shadow: 0 0 0 transparent;
  background: rgba(232,220,200,.03);
  border-bottom: 1px solid rgba(232,220,200,.08);
  font-weight: 700;
  letter-spacing: 1px;
  caret-color: var(--bone);
}
b.key-ghost:hover, .key-ghost:hover,
b.key-ghost::selection, .key-ghost::selection{
  color: var(--bone-dim) !important;
  background: rgba(232,220,200,.12);
}
/* T2 CIPHER strip — monospace trash that contains the key in order if you filter noise */
.key-cipher{
  font-family: var(--font-type);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--bone-dim);
  opacity: .55;
  line-height: 1.9;
  word-break: break-all;
}
.key-cipher .ck{
  color: var(--bone);
  opacity: .95;
  font-weight: 700;
}
/* T2 MICROLBL — tiny stake under image */
.key-micro{
  display:block;
  text-align:center;
  font-family: var(--font-type);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--bone-dim);
  opacity: .4;
  margin-top: 4px;
  text-transform: uppercase;
}
.key-micro:hover{opacity:.85;color:var(--bone)}
/* T2 BLINK — evil/hot doors: one word fades like a bad camera */
b.key-blink, .key-blink{
  color: var(--bone);
  font-weight: 700;
  animation: keyblink 4.2s ease-in-out infinite;
}
@keyframes keyblink{
  0%, 78%, 100% { opacity: .92; text-shadow: none; }
  82% { opacity: .15; }
  88% { opacity: .05; color: transparent; }
  94% { opacity: .7; }
}
/* T3 EVIL plants */
b.key-evil, .key-evil{
  color: #ff6b71 !important;
  font-weight: 700;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(224,27,36,.45);
  text-shadow: 0 0 10px rgba(224,27,36,.35);
}
.key-evil-micro{
  display:block;
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: #ff6b71;
  opacity: .35;
  text-align: right;
  margin-top: -6px;
}
.key-evil-micro:hover{opacity:.9}
/* plant rail under sealed shelf */
.ug-residue-rail{
  margin: 8px 0 16px;
  padding: 10px 12px;
  border: 1px dashed rgba(232,220,200,.14);
  background: rgba(0,0,0,.2);
  font-family: var(--font-type);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--bone-dim);
  line-height: 1.7;
}
.ug-residue-rail .dim{opacity:.45}
/* stamp modes on gate shells */
.gate-shell.tier-ash .gate-tooth{filter:grayscale(1) brightness(.9)}
.gate-shell.tier-evil{border-color:rgba(224,27,36,.55);box-shadow:0 0 24px rgba(224,27,36,.15)}
.gate-shell.tier-evil h2{color:#ff3b44}
.gate-mode-pill{
  display:inline-block;
  font-family: var(--font-type);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--bone-dim);
  margin-left: 8px;
  vertical-align: middle;
}
.gate-mode-pill.ash{border-color:rgba(232,220,200,.4)}
.gate-mode-pill.ghost{border-color:rgba(232,220,200,.2);opacity:.7}
.gate-mode-pill.cipher{border-color:var(--nvg);color:var(--nvg)}
.gate-mode-pill.evil{border-color:#ff3b44;color:#ff6b71}
.gate-mode-pill.micro{border-color:rgba(232,220,200,.3)}
.gate-mode-pill.blink{border-color:rgba(77,255,87,.3);color:var(--bone)}