/* SALT AND SIN — shared shell.
   Ported from the v4 "Sinner's Abode" JanitorAI profile CSS so the site and the
   profile read as one brand. Every page loads this; page-specific CSS lives in
   that page's own <style>.
   void #060606  ink #0d0b0b  coal #151212  line #2b2525
   bone #f1ece4  smoke #9b928a  blood #c3131f  deep #6b0710  ember #ff3b47
   Hard edges everywhere: border-radius is 0 on purpose. */

:root{
  --void:#060606; --ink:#0d0b0b; --coal:#151212; --line:#2b2525;
  --bone:#f1ece4; --smoke:#9b928a; --blood:#c3131f; --deep:#6b0710; --ember:#ff3b47;
  --dust:#5f5854;
  --display:'Grenze Gotisch','Pirata One',serif;
  --label:'Roboto Condensed',system-ui,sans-serif;
  --voice:'Fraunces',Georgia,serif;
  --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--label); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
body.locked{overflow:hidden;}
::selection{background:var(--blood);color:var(--bone);}
a{color:inherit;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}

/* the room: red glow top and bottom, fine grain over everything */
.room{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -12%,rgba(195,19,31,.30),transparent 62%),
    radial-gradient(ellipse 60% 40% at 50% 112%,rgba(195,19,31,.14),transparent 60%),
    radial-gradient(rgba(241,236,228,.05) 1px,transparent 1.3px) 0 0/5px 5px;}
.page{position:relative;z-index:1;}

/* the split bone/red rule that runs across the brand */
.split{height:2px;border:0;margin:0;
  background:linear-gradient(90deg,var(--bone) 0%,var(--bone) 50%,var(--blood) 50%,var(--blood) 100%);}

.kicker{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--blood);margin:0 0 16px;}

/* ---------- buttons ---------- */
.btn{font-family:var(--label);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--blood);background:transparent;color:var(--bone);
  cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;}
.btn:hover{background:var(--blood);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--deep);}
.btn.ghost{border-color:var(--line);color:var(--smoke);}
.btn.ghost:hover{background:transparent;border-color:var(--smoke);color:var(--bone);box-shadow:none;}
.btn.big{font-size:.86rem;padding:17px 30px;}

/* ---------- age gate (markup injected by shell.js) ---------- */
#gate{position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:var(--gut);background:var(--void);}
body.locked #gate{display:flex;}
.gate-box{width:min(460px,100%);border:1px solid var(--line);background:var(--ink);
  box-shadow:10px 10px 0 var(--blood);padding:clamp(24px,6vw,40px);text-align:center;}
.gate-box .emblem{width:74px;margin:0 auto 18px;}
.gate-box h1{font-family:var(--display);font-weight:700;margin:0 0 6px;
  font-size:clamp(2rem,9vw,2.9rem);line-height:1;letter-spacing:.01em;
  text-shadow:3px 3px 0 var(--blood);}
.gate-box p.kicker{margin:0 0 20px;font-family:var(--label);font-style:normal;font-size:.7rem;color:var(--blood);}
.gate-box p{font-family:var(--voice);font-style:italic;color:var(--smoke);font-size:1rem;margin:0 0 24px;}
.gate-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.gate-box p.gate-fine{margin:22px 0 0;font-family:var(--label);font-style:normal;font-size:.72rem;
  letter-spacing:.04em;color:var(--dust);line-height:1.6;}

/* ---------- top bar ---------- */
header.bar{position:sticky;top:0;z-index:40;background:rgba(6,6,6,.92);backdrop-filter:blur(8px);}
.bar-in{display:flex;align-items:center;gap:10px 14px;padding:12px var(--gut);flex-wrap:wrap;}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;}
.mark .emblem{width:30px;flex:0 0 30px;}
.mark b{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:.01em;
  white-space:nowrap;text-shadow:2px 2px 0 var(--blood);}
.bar-links{display:flex;gap:8px;flex-wrap:wrap;}
.bar-links a{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);padding:9px 14px;border:1px solid var(--line);transition:.15s;
  white-space:nowrap;}
.bar-links a:hover{border-color:var(--blood);background:rgba(195,19,31,.16);}
.bar-links a.solid{border-color:var(--blood);}
.bar-links a.solid:hover{background:var(--blood);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ink);}
.foot-in{max-width:1180px;margin:0 auto;padding:44px var(--gut) 54px;
  display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{flex:1 1 260px;}
.foot-brand .emblem{width:44px;margin-bottom:14px;}
.foot-brand b{display:block;font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1;
  text-shadow:2px 2px 0 var(--blood);}
.foot-brand p{font-family:var(--voice);font-style:italic;color:var(--smoke);margin:10px 0 0;font-size:.95rem;}
.foot-links{flex:0 1 auto;display:flex;flex-direction:column;gap:9px;}
.foot-links a{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);transition:color .15s;}
.foot-links a:hover{color:var(--blood);}
.fine{max-width:min(1180px,74ch);margin:0 auto;padding:0 var(--gut) 44px;
  font-size:.7rem;line-height:1.75;color:var(--dust);}
.fine strong{color:var(--smoke);font-weight:700;}

@media (max-width:640px){
  .mark b{font-size:1.2rem;}
  .bar-links a{padding:8px 10px;letter-spacing:.1em;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}