/* ==========================================================================
   INFERNO — base.css · tokens, zone palettes, typography, shared UI atoms
   Cell-shaded system: ink outlines, flat stepped fills, halftone texture.
   ========================================================================== */
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-italic-var.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --ink:#17110d;
  --ink-soft:#2a211a;
  --paper:#ece0c6;
  --paper-2:#e2d3b2;
  --paper-deep:#cdb98e;
  --vermilion:#b23a24;
  --gold:#d9a544;
  --f-display:'Cinzel',ui-serif,Georgia,'Times New Roman',serif;
  --f-text:'EB Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --dur:.45s;
  --ease:cubic-bezier(.22,.9,.28,1);
}

/* ---- zone palettes: applied to body[data-zone] ------------------------ */
body[data-zone="selva"]{--bg0:#0c0f13;--bg1:#131a21;--deep:#1b2530;--mid:#2c3b48;--hi:#50647a;--accent:#a9bbc7;--glow:#e8e2cf;--paper-tint:214 226 232}
body[data-zone="porta"]{--bg0:#110f13;--bg1:#191519;--deep:#241c22;--mid:#3a2c33;--hi:#5f4852;--accent:#d96b3a;--glow:#ffb46b;--paper-tint:232 214 199}
body[data-zone="antinferno"]{--bg0:#141218;--bg1:#1c1a22;--deep:#282431;--mid:#413a4c;--hi:#6a5f7c;--accent:#b0452f;--glow:#d9c9b8;--paper-tint:225 219 232}
body[data-zone="acheron"]{--bg0:#150f11;--bg1:#20151a;--deep:#2e1b21;--mid:#4d2a31;--hi:#7c4547;--accent:#c0392b;--glow:#ff9d6b;--paper-tint:232 207 199}
body[data-zone="c1"]{--bg0:#0e1414;--bg1:#142021;--deep:#1c2e2f;--mid:#2f4a4a;--hi:#537570;--accent:#c9a86a;--glow:#e8e2cf;--paper-tint:211 226 218}
body[data-zone="c2"]{--bg0:#141220;--bg1:#1e1a30;--deep:#292341;--mid:#453a63;--hi:#6f5e8f;--accent:#b5486d;--glow:#e9a8c0;--paper-tint:224 214 232}
body[data-zone="c3"]{--bg0:#14110c;--bg1:#1f1a11;--deep:#302815;--mid:#4d3f1e;--hi:#7a6430;--accent:#9a8b3f;--glow:#d9c874;--paper-tint:226 218 197}
body[data-zone="c4"]{--bg0:#131008;--bg1:#1d1809;--deep:#2b230e;--mid:#463a15;--hi:#6f5c1c;--accent:#d4a63f;--glow:#ffd76b;--paper-tint:228 218 189}
body[data-zone="c5"]{--bg0:#0d1411;--bg1:#12201a;--deep:#183024;--mid:#2a4d3a;--hi:#477557;--accent:#8e2f2f;--glow:#b8763f;--paper-tint:206 222 213}
body[data-zone="mura"]{--bg0:#170f10;--bg1:#221517;--deep:#331d1f;--mid:#542e2c;--hi:#814a3d;--accent:#e0602a;--glow:#ff9a4d;--paper-tint:229 208 199}
body[data-zone="c6"]{--bg0:#170e0e;--bg1:#241414;--deep:#381d1a;--mid:#5c2e24;--hi:#8a4b32;--accent:#d96b3a;--glow:#ffb46b;--paper-tint:230 203 189}
body[data-zone="c7r1"]{--bg0:#190b0b;--bg1:#26100f;--deep:#3a1513;--mid:#62211c;--hi:#963b28;--accent:#c23b2b;--glow:#ff8a5f;--paper-tint:229 196 189}
body[data-zone="c7r2"]{--bg0:#120e0a;--bg1:#1b1510;--deep:#2a2014;--mid:#43351e;--hi:#655236;--accent:#6f8f4f;--glow:#a8c47a;--paper-tint:213 219 200}
body[data-zone="c7r3"]{--bg0:#190f08;--bg1:#261609;--deep:#3a200b;--mid:#60320f;--hi:#944d17;--accent:#ff9a3d;--glow:#ffcf7a;--paper-tint:231 209 187}
body[data-zone="gerione"]{--bg0:#130b13;--bg1:#1c111c;--deep:#2a1630;--mid:#452345;--hi:#6e3a66;--accent:#cf5a72;--glow:#ffb0a8;--paper-tint:224 208 220}
body[data-zone="c8"]{--bg0:#160b12;--bg1:#210f1b;--deep:#331528;--mid:#552038;--hi:#82324b;--accent:#cf5a72;--glow:#ff9a8a;--paper-tint:226 206 214}
body[data-zone="pozzo"]{--bg0:#0c1119;--bg1:#101724;--deep:#16202f;--mid:#24344a;--hi:#3c5473;--accent:#8fb8d4;--glow:#c4e4f4;--paper-tint:206 216 229}
body[data-zone="c9"]{--bg0:#0a1220;--bg1:#0e1a2c;--deep:#13253c;--mid:#1d3a58;--hi:#31577e;--accent:#9fd4e8;--glow:#d4ecf8;--paper-tint:203 216 233}
body[data-zone="lucifero"]{--bg0:#081020;--bg1:#0b1628;--deep:#0f1f38;--mid:#16304f;--hi:#1f4670;--accent:#bcdff2;--glow:#e8f6ff;--paper-tint:200 214 234}
body[data-zone="uscita"]{--bg0:#0a0d1a;--bg1:#0f1426;--deep:#161d38;--mid:#232d55;--hi:#37466f;--accent:#e8d9a0;--glow:#f4ecce;--paper-tint:213 218 234}

html{scroll-behavior:auto}
html,body{margin:0;padding:0}
body{
  background:var(--bg0);
  color:var(--paper);
  font-family:var(--f-text);
  font-size:19px;
  line-height:1.62;
  overflow-x:hidden;
  transition:background-color 1.1s ease;
}
::selection{background:var(--accent);color:var(--bg0)}
a{color:var(--glow)}
p{margin:.35em 0 1em}

.noscript{position:fixed;inset:auto 12px 12px 12px;z-index:99;background:var(--paper);color:var(--ink);padding:14px 18px;border:3px solid var(--ink);font-size:17px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border:3px solid var(--ink)}
.skip:focus{left:12px;top:12px}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.14;margin:.2em 0 .5em;color:var(--glow)}
.caps{letter-spacing:.14em}

kbd{
  font-family:var(--f-display);font-size:.72em;font-weight:700;
  border:2px solid currentColor;border-bottom-width:4px;border-radius:5px;
  padding:.08em .5em;margin:0 .1em;letter-spacing:.06em;
}

.btn{
  font-family:var(--f-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.82rem;line-height:1;padding:15px 22px 14px;cursor:pointer;
  border:3px solid var(--ink);border-radius:4px;
  color:var(--ink);background:var(--paper-2);
  box-shadow:4px 4px 0 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .2s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn-primary{background:var(--gold)}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:4px 4px 0 0 rgba(0,0,0,.55);border-color:var(--paper-deep)}
.btn-ghost:hover{box-shadow:6px 6px 0 0 rgba(0,0,0,.55)}
.btn:focus-visible,.chip:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--glow);outline-offset:3px}

.chip{
  font-family:var(--f-display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:.72rem;cursor:pointer;color:var(--paper);
  background:rgba(12,9,7,.72);border:2px solid var(--paper-deep);border-radius:3px;
  padding:9px 13px 8px;display:inline-flex;gap:.5em;align-items:center;
  transition:border-color .2s,background-color .2s,color .2s;
}
.chip:hover{border-color:var(--glow);color:var(--glow)}

/* ---- shared halftone / ink utilities ---------------------------------- */
.ht-dots{background-image:radial-gradient(currentColor 1.1px,transparent 1.3px);background-size:6px 6px}
.paper{
  color:var(--ink);
  background:
    radial-gradient(rgba(23,17,13,.055) 1px,transparent 1.4px),
    linear-gradient(178deg,#efe4cb 0%,var(--paper) 42%,var(--paper-2) 100%);
  background-size:5px 5px,100% 100%;
  border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--ink),7px 8px 0 0 rgba(10,7,5,.5);
  border-radius:3px;
}
.paper .rule{height:4px;background:var(--ink);margin:.2rem 0}
.kicker{
  font-family:var(--f-display);font-weight:700;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vermilion);
}
.kicker .kdot{display:inline-block;width:.5em;height:.5em;background:var(--vermilion);border-radius:50%;margin-right:.55em;vertical-align:.06em}
.dropcap::first-letter{
  font-family:var(--f-display);font-weight:700;float:left;
  font-size:3.05em;line-height:.82;padding:.06em .12em 0 0;color:var(--vermilion);
}
.quote-it{font-style:italic;font-size:1.06em;line-height:1.5}
.quote-en{font-size:.95em;opacity:.88;font-style:normal}
.citref{
  font-family:var(--f-display);font-weight:700;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vermilion);white-space:nowrap;
}
.linerange{
  font-family:var(--f-display);font-weight:700;font-size:.6rem;
  border:1.5px solid var(--vermilion);color:var(--vermilion);border-radius:3px;
  padding:.02em .34em;margin-left:.4em;cursor:help;
  opacity:0;transform:translateY(2px);transition:opacity .18s,transform .18s;
}
.qline:hover .linerange,.qline:focus-visible .linerange,.quote-it:hover .linerange{opacity:1;transform:none}