/* Folletbenand — brut.css — brutalist zine catalog */
@import url("./fonts.css");

:root{
  --paper:#eae7df;
  --ink:#0c0c0c;
  --red:#ff3b1f;
  --line:#0c0c0c;
  --muted:#5b584f;
  --box:#f4f2ec;
  --acid:#c9f24a;
  --bw:3px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --halftone:radial-gradient(var(--ink) 1.1px, transparent 1.4px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--red);color:#fff}

/* faint riso paper grain over the whole page */
body::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

.mono{font-family:var(--mono)}
.wrap{max-width:1220px;margin:0 auto;padding:0 1.25rem}

/* ---------- CENTERED PAGE SHELL (caps at 1440, balanced on ultra-wide) ---------- */
.b-page{max-width:90rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)}
.b-page .wrap{max-width:none;padding-inline:0}

/* ---------- SKIP ---------- */
.b-skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;font-family:var(--mono);z-index:200}
.b-skip:focus{left:0}

/* ---------- MASTHEAD ---------- */
.b-mast{
  border-bottom:var(--bw) solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:100;
}
.b-mast__in{display:flex;align-items:stretch;justify-content:space-between;gap:1rem}
.b-brand{
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 0;text-decoration:none;
}
.b-brand__mk{
  width:38px;height:38px;border:var(--bw) solid var(--ink);
  display:grid;place-items:center;background:var(--ink);flex:0 0 auto;
}
.b-brand__mk span{color:var(--red);font-family:var(--mono);font-weight:800;font-size:1.1rem;line-height:1}
.b-brand__tx{font-family:var(--mono);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.b-brand__tx small{display:block;font-weight:400;font-size:.6rem;letter-spacing:.32em;color:var(--muted);text-transform:uppercase}

.b-nav{display:flex;align-items:stretch}
.b-nav a{
  display:flex;align-items:center;padding:0 1.05rem;
  font-family:var(--mono);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;text-decoration:none;
  border-left:var(--bw) solid var(--line);
}
.b-nav a:hover,.b-nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.b-nav a[aria-current="page"]{color:var(--red)}

.b-burger{
  display:none;align-items:center;gap:.5rem;
  font-family:var(--mono);font-weight:700;font-size:.8rem;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:none;
  padding:0 1.1rem;cursor:pointer;border-left:var(--bw) solid var(--line);
}
.b-burger b{display:block;width:20px;height:var(--bw);background:var(--paper);box-shadow:0 6px 0 var(--paper),0 -6px 0 var(--paper)}
.b-mob{display:none;border-top:var(--bw) solid var(--line)}
.b-mob a{
  display:block;padding:.85rem 1.25rem;text-decoration:none;
  font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:.9rem;
  border-bottom:var(--bw) solid var(--line);
}
.b-mob a:last-child{border-bottom:none}
.b-mob a:hover,.b-mob a[aria-current="page"]{background:var(--red);color:#fff}
.b-mob.open{display:block}

/* ---------- LAYOUT: sidebar + content ---------- */
.b-shell{display:grid;grid-template-columns:236px 1fr;gap:0;border-bottom:var(--bw) solid var(--line)}
.b-side{
  border-right:var(--bw) solid var(--line);
  padding:1.4rem 0;
  position:sticky;top:70px;align-self:start;height:calc(100vh - 70px);overflow:auto;
}
.b-side__h{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);padding:0 1.25rem;margin-bottom:.6rem}
.b-side__h+.b-side__h{margin-top:1.4rem}
.b-idx{list-style:none}
.b-idx a{
  display:flex;justify-content:space-between;gap:.5rem;
  padding:.5rem 1.25rem;text-decoration:none;
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  border-top:2px solid transparent;border-bottom:2px solid transparent;
}
.b-idx a:hover{background:var(--ink);color:var(--paper)}
.b-idx a i{font-style:normal;color:var(--red)}
.b-idx a:hover i{color:var(--paper)}
.b-side__meta{padding:1.4rem 1.25rem 0;font-family:var(--mono);font-size:.7rem;color:var(--muted);line-height:1.7}
.b-side__meta b{color:var(--ink)}

.b-main{min-width:0;padding:0}

/* ---------- SECTION SHELL ---------- */
.b-sec{border-bottom:var(--bw) solid var(--line);padding:2.6rem 1.6rem}
.b-sec:last-child{border-bottom:none}
.b-tag{
  display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:.28rem .6rem;margin-bottom:1rem;
}
.b-sec h2{font-family:var(--mono);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.1rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:.6rem}
.b-sec h2 span{color:var(--red)}
.b-lede{max-width:64ch;color:var(--muted);margin-bottom:1.6rem;font-size:1.02rem}

/* ---------- HERO: TERMINAL + FEATURE SPLIT + DATA STRIP ---------- */
.b-hero{border-bottom:var(--bw) solid var(--line);padding:0;background:var(--box);position:relative}
.b-hero__bar{
  display:flex;align-items:center;gap:.55rem;
  background:var(--ink);color:var(--paper);
  padding:.5rem 1rem;border-bottom:var(--bw) solid var(--line);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;
}
.b-hero__dot{width:12px;height:12px;border:2px solid var(--paper);flex:0 0 auto}
.b-hero__dot--red{background:var(--red);border-color:var(--red)}
.b-hero__path{color:#cfccc2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.4rem}
.b-hero__path b{color:var(--red);font-weight:700}
.b-hero__blink{margin-left:auto;color:var(--red);font-weight:800;line-height:1;animation:bcur 1.05s steps(1) infinite}
@keyframes bcur{50%{opacity:0}}

.b-hero__grid{display:grid;grid-template-columns:1.12fr .88fr}
.b-hero__body{padding:2.7rem 1.8rem 2.4rem;position:relative}
.b-hero__kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.b-hero h1{font-family:var(--mono);font-weight:800;font-size:clamp(2rem,5.4vw,3.5rem);line-height:.98;letter-spacing:-.03em;margin-bottom:1.1rem;max-width:20ch}
.b-hero h1 mark{background:var(--red);color:#fff;padding:0 .1em}
.b-hero__sub{max-width:52ch;font-size:1.06rem;margin-bottom:1.6rem}
.b-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.b-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.02em;
  padding:.8rem 1.2rem;text-decoration:none;cursor:pointer;
  border:var(--bw) solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);transition:transform .06s,box-shadow .06s;
}
.b-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.b-btn--red{background:var(--red);color:#fff;border-color:var(--ink)}

/* hand-drawn asterisk accent */
.b-scrawl{font-family:var(--mono);font-weight:800;color:var(--red);display:inline-block;transform:rotate(-8deg)}

/* HERO ART PANEL (risograph duotone) */
.b-hero__art{position:relative;border-left:var(--bw) solid var(--line);overflow:hidden;background:var(--ink);min-height:300px;isolation:isolate}
.b-hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(1.08)}
.b-hero__art::before{/* red riso wash */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(255,59,31,.42),transparent 55%),linear-gradient(0deg,rgba(12,12,12,.55),transparent 60%);
  mix-blend-mode:multiply;
}
.b-hero__art::after{/* halftone dots */
  content:"";position:absolute;inset:0;z-index:2;
  background-image:var(--halftone);background-size:5px 5px;
  opacity:.32;mix-blend-mode:overlay;
}
.b-hero__cap{
  position:absolute;left:0;bottom:0;z-index:3;
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:.3rem .5rem;
}
.b-sticker{
  position:absolute;z-index:4;
  font-family:var(--mono);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--acid);color:var(--ink);border:var(--bw) solid var(--ink);
  padding:.35rem .55rem;line-height:1;box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-7deg);
}
.b-sticker--red{background:var(--red);color:#fff}
.b-hero__art .b-sticker{top:1rem;right:1rem;font-size:.8rem}
.b-hero__art .b-sticker small{display:block;font-size:.56rem;font-weight:700;letter-spacing:.12em;margin-top:.15rem;opacity:.85}

/* highlighter / marker swipe behind words */
.b-mark{
  background:linear-gradient(100deg,transparent 1.5%,var(--acid) 1.5%,var(--acid) 98%,transparent 98%);
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* spec / data strip */
.b-specs{display:grid;grid-template-columns:auto repeat(4,1fr);border-top:var(--bw) solid var(--line)}
.b-spec{padding:1.15rem 1.3rem;border-right:var(--bw) solid var(--line);display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.b-spec:last-child{border-right:none}
.b-spec b{display:block;font-family:var(--mono);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.b-spec b em{font-style:normal;color:var(--red)}
.b-spec span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.b-spec--lab{background:var(--ink);color:var(--paper)}
.b-spec--lab span{color:var(--paper);font-weight:800;font-size:.74rem;letter-spacing:.24em;line-height:1.15;margin-top:0}

/* ---------- TICKER / MARQUEE ---------- */
.b-ticker{background:var(--ink);color:var(--paper);border-bottom:var(--bw) solid var(--line);overflow:hidden;white-space:nowrap}
.b-ticker__track{display:inline-flex;gap:0;font-family:var(--mono);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;padding:.55rem 0;animation:tick 26s linear infinite;will-change:transform}
.b-ticker__track span{padding:0 1.1rem;display:inline-flex;align-items:center;gap:.6rem}
.b-ticker__track b{color:var(--red)}
.b-ticker__track i{font-style:normal;color:var(--acid)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.b-ticker__track{animation:none}}

/* ---------- FEATURED SPOTLIGHT ---------- */
.b-spot{border-bottom:var(--bw) solid var(--line);background:var(--ink);color:var(--paper)}
.b-spot__grid{display:grid;grid-template-columns:1fr 1fr}
.b-spot__art{position:relative;overflow:hidden;background:var(--ink);min-height:340px;isolation:isolate;border-right:var(--bw) solid var(--line)}
.b-spot__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(1.05)}
.b-spot__art::after{content:"";position:absolute;inset:0;background-image:var(--halftone);background-size:5px 5px;opacity:.28;mix-blend-mode:overlay}
.b-spot__art .b-hero__cap{z-index:3}
.b-spot__body{padding:2.2rem 1.9rem;position:relative;display:flex;flex-direction:column;justify-content:center}
.b-spot__eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--acid);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.b-spot__eyebrow::before{content:"";width:26px;height:var(--bw);background:var(--red)}
.b-spot__ic{width:64px;height:64px;border:var(--bw) solid var(--paper);flex:0 0 auto}
.b-spot__head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.b-spot__head h3{font-family:var(--mono);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.02em;line-height:1}
.b-spot__head p{font-family:var(--mono);font-size:.72rem;color:#cfccc2;text-transform:uppercase;letter-spacing:.08em;margin-top:.35rem}
.b-spot__verdict{font-size:1.02rem;color:#e6e3da;max-width:46ch;margin-bottom:1.3rem}
.b-spot__verdict b{color:#fff}
.b-spot__foot{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
/* VOTO seal stamp */
.b-seal{width:96px;height:96px;flex:0 0 auto;position:relative;color:var(--red)}
.b-seal svg{width:100%;height:100%;display:block}
.b-seal--ink{color:var(--ink)}

/* ---------- CATALOG FILMSTRIP ---------- */
.b-film{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--bw) solid var(--line);margin-bottom:1.6rem;background:var(--ink)}
.b-film figure{position:relative;overflow:hidden;min-height:130px;border-right:var(--bw) solid var(--line);isolation:isolate}
.b-film figure:last-child{border-right:none}
.b-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.08)}
.b-film figure::after{content:"";position:absolute;inset:0;background-image:var(--halftone);background-size:4px 4px;opacity:.3;mix-blend-mode:overlay}
.b-film figcaption{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.25rem .45rem}
.b-film figcaption b{color:var(--acid)}

/* ---------- PODIO (classifica top 3) ---------- */
.b-podio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem}
.b-pod{min-width:0;border:var(--bw) solid var(--line);background:var(--box);padding:1.1rem;display:flex;gap:.8rem;align-items:center;position:relative;box-shadow:5px 5px 0 var(--ink)}
.b-pod--1{background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--ink)}
.b-pod__rk{font-family:var(--mono);font-weight:800;font-size:2.6rem;line-height:.85;letter-spacing:-.04em}
.b-pod--1 .b-pod__rk{color:#fff}
.b-pod__ic{width:52px;height:52px;border:var(--bw) solid var(--ink);flex:0 0 auto}
.b-pod--1 .b-pod__ic{border-color:#fff}
.b-pod__tx{min-width:0}
.b-pod__tx strong{display:block;font-family:var(--mono);font-weight:800;font-size:.95rem;line-height:1.1}
.b-pod__tx span{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}
.b-pod__vote{font-family:var(--mono);font-weight:800;font-size:1.15rem;margin-left:auto}
.b-pod__vote i{font-style:normal;color:var(--acid)}
.b-pod--1 .b-pod__vote i{color:#fff}

/* ---------- CATALOG ROWS ---------- */
.b-cat{border:var(--bw) solid var(--line);border-bottom:none}
.b-row{
  display:grid;grid-template-columns:56px 62px 1fr auto;align-items:center;gap:1rem;
  padding:.85rem 1rem;border-bottom:var(--bw) solid var(--line);text-decoration:none;
  background:var(--paper);transition:background .08s;
}
.b-row:hover{background:var(--box)}
.b-row__n{font-family:var(--mono);font-weight:800;font-size:1.1rem;color:var(--muted)}
.b-row:hover .b-row__n{color:var(--red)}
.b-row__ic{width:54px;height:54px;border:2px solid var(--ink)}
.b-row__ic img{width:100%;height:100%;object-fit:cover}
.b-row__b{min-width:0}
.b-row__name{font-family:var(--mono);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1.15}
.b-row__meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}
.b-row__blurb{font-size:.9rem;color:var(--ink);margin-top:.35rem;max-width:60ch}
.b-row__r{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex:0 0 auto}
.b-rate{font-family:var(--mono);font-weight:800;font-size:.95rem;white-space:nowrap}
.b-rate i{font-style:normal;color:var(--red)}
.b-go{font-family:var(--mono);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--ink);padding:.32rem .55rem;white-space:nowrap;background:var(--ink);color:var(--paper)}
.b-row:hover .b-go{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- LEADERBOARD TABLE ---------- */
.b-tablewrap{border:var(--bw) solid var(--line);overflow-x:auto}
table.b-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.84rem;min-width:520px}
.b-tbl th,.b-tbl td{padding:.7rem .85rem;text-align:left;border-bottom:2px solid var(--line);border-right:2px solid var(--line)}
.b-tbl th{background:var(--ink);color:var(--paper);text-transform:uppercase;font-size:.68rem;letter-spacing:.12em}
.b-tbl th:last-child,.b-tbl td:last-child{border-right:none}
.b-tbl tr:last-child td{border-bottom:none}
.b-tbl td b{color:var(--red)}
.b-tbl tbody tr:hover td{background:var(--box)}
.b-tbl .rk{font-weight:800}

/* ---------- GLOSSARIO ---------- */
.b-glos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.b-glo{border:var(--bw) solid var(--line);background:var(--box);box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column}
.b-glo__t{
  display:flex;align-items:center;gap:.6rem;
  background:var(--ink);color:var(--paper);padding:.55rem .8rem;
  font-family:var(--mono);font-weight:800;font-size:.98rem;letter-spacing:-.01em;
  border-bottom:var(--bw) solid var(--line);
}
.b-glo__t i{font-style:normal;background:var(--acid);color:var(--ink);font-size:.72rem;font-weight:800;padding:.14rem .34rem;letter-spacing:.02em;transform:rotate(-4deg);display:inline-block}
.b-glo__d{padding:.85rem .9rem;font-size:.92rem;line-height:1.5}
.b-glo__d::before{content:"// ";font-family:var(--mono);color:var(--red);font-weight:700}

/* ---------- FAQ ---------- */
.b-faq{border:var(--bw) solid var(--line)}
.b-faq details{border-bottom:var(--bw) solid var(--line)}
.b-faq details:last-child{border-bottom:none}
.b-faq summary{
  list-style:none;cursor:pointer;padding:1rem 1.1rem;
  font-family:var(--mono);font-weight:700;font-size:.98rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary::after{content:"+";font-family:var(--mono);font-weight:800;color:var(--red);font-size:1.3rem}
.b-faq details[open] summary::after{content:"\2212"}
.b-faq details[open] summary{background:var(--ink);color:var(--paper)}
.b-faq details[open] summary::after{color:var(--paper)}
.b-faq__a{padding:1rem 1.1rem;font-size:.96rem;color:var(--ink);border-top:2px solid var(--line)}

/* ---------- SUBSCRIBE ---------- */
.b-sub{display:grid;grid-template-columns:1fr 1fr;border:var(--bw) solid var(--line);box-shadow:7px 7px 0 var(--ink)}
.b-sub__l{padding:1.6rem;border-right:var(--bw) solid var(--line);background:var(--ink);color:var(--paper)}
.b-sub__l h3{font-family:var(--mono);font-weight:800;font-size:1.4rem;margin-bottom:.7rem}
.b-sub__l h3 span{color:var(--red)}
.b-sub__l p{font-size:.95rem;color:#cfccc2}
.b-sub__l ul{list-style:none;margin-top:1rem;font-family:var(--mono);font-size:.82rem}
.b-sub__l li{padding:.35rem 0;border-bottom:2px solid #2a2a28}
.b-sub__l li::before{content:"//";color:var(--red);margin-right:.5rem}
.b-sub__r{padding:1.6rem}
.b-field{margin-bottom:.9rem}
.b-field label{display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem}
.b-field input[type=text],.b-field input[type=tel],.b-field input[type=email]{
  width:100%;font-family:var(--mono);font-size:.92rem;
  padding:.65rem .7rem;border:var(--bw) solid var(--ink);background:var(--paper);color:var(--ink);
}
.b-field input:focus{outline:3px solid var(--red);outline-offset:2px}
.b-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;margin-bottom:1rem;font-family:var(--mono)}
.b-consent input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--red);margin-top:.1rem}
.b-consent a{color:var(--ink);text-decoration:underline}
#successMsg{display:none;margin-top:1rem;border:var(--bw) solid var(--ink);background:var(--red);color:#fff;padding:.7rem .9rem;font-family:var(--mono);font-weight:700;font-size:.85rem}
#successMsg.show{display:block}

/* ---------- ABOUT / PROSE ---------- */
.b-prose{max-width:72ch}
.b-prose p{margin-bottom:1rem}
.b-prose h3{font-family:var(--mono);font-weight:800;margin:1.6rem 0 .6rem;font-size:1.15rem}
.b-prose ul{margin:0 0 1rem 1.1rem}
.b-prose li{margin-bottom:.4rem}
.b-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.b-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.b-card{border:var(--bw) solid var(--line);padding:1.2rem;background:var(--box)}
.b-card h3{font-family:var(--mono);font-weight:800;font-size:1.05rem;margin-bottom:.4rem}
.b-card .b-k{font-family:var(--mono);color:var(--red);font-weight:800;font-size:1.6rem;display:block;margin-bottom:.3rem}

/* ABOUT — centered colophon that fills the width */
.b-sec--about{text-align:center}
.b-sec--about .b-tag{margin-left:auto;margin-right:auto}
.b-about{
  display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:1.8rem;align-items:center;text-align:left;
  max-width:1040px;margin:1.4rem auto 0;
}
.b-about .b-zineart{margin:0;justify-self:center;max-width:100%}
.b-about__tx{max-width:none}
.b-about__tx>p:first-child{margin-top:0}
@media(max-width:760px){
  .b-about{grid-template-columns:1fr;max-width:480px}
  .b-about .b-zineart{max-width:420px;margin-inline:auto}
}

/* zine cover art in about */
.b-zineart{position:relative;overflow:hidden;border:var(--bw) solid var(--line);box-shadow:6px 6px 0 var(--ink);margin:0 0 1.4rem;isolation:isolate;max-width:420px}
.b-zineart img{width:100%;height:auto;display:block;filter:contrast(1.08) saturate(1.05)}
.b-zineart::after{content:"";position:absolute;inset:0;background-image:var(--halftone);background-size:4px 4px;opacity:.26;mix-blend-mode:overlay}
.b-zineart .b-sticker{top:.9rem;right:.9rem;font-size:.72rem}

/* NAP block */
.b-nap{border:var(--bw) solid var(--line);padding:1.1rem 1.2rem;font-family:var(--mono);font-size:.86rem;line-height:1.9;background:var(--box)}
.b-nap b{color:var(--red)}
.b-nap a{color:var(--ink)}

/* ---------- FOOTER ---------- */
.b-foot{border-top:var(--bw) solid var(--line);background:var(--ink);color:var(--paper)}
.b-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.5rem;padding:2.4rem 1.6rem}
.b-foot h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.9rem}
.b-foot__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.b-foot__brand .b-brand__mk{border-color:var(--paper)}
.b-foot__brand b{font-family:var(--mono);font-weight:800;font-size:1.1rem}
.b-foot p{font-size:.88rem;color:#cfccc2;max-width:40ch}
.b-foot ul{list-style:none}
.b-foot li{margin-bottom:.5rem}
.b-foot a{color:#e6e3da;text-decoration:none;font-family:var(--mono);font-size:.84rem}
.b-foot a:hover{color:var(--red)}
.b-foot__nap{font-family:var(--mono);font-size:.82rem;color:#cfccc2;line-height:1.9}
.b-foot__bar{border-top:var(--bw) solid #2a2a28;padding:1rem 1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:#9d9a90}
.b-foot__bar a{color:#9d9a90;text-decoration:none}
.b-foot__bar a:hover{color:var(--red)}

/* ---------- COOKIE BANNER ---------- */
.b-cookie{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;
  border:var(--bw) solid var(--ink);background:var(--paper);
  box-shadow:8px 8px 0 var(--ink);
  display:none;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1rem 1.2rem;max-width:900px;margin:0 auto;
}
.b-cookie.show{display:grid}
.b-cookie p{font-size:.86rem}
.b-cookie a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red)}
.b-cookie__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.b-cookie .b-btn{box-shadow:3px 3px 0 var(--ink);padding:.55rem .9rem;font-size:.78rem}

/* ---------- PAGE HEADER (inner pages) ---------- */
.b-phead{border-bottom:var(--bw) solid var(--line);padding:2.6rem 1.6rem;background:var(--box)}
.b-phead .b-crumb{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.7rem}
.b-phead .b-crumb a{color:var(--muted);text-decoration:none}
.b-phead .b-crumb a:hover{color:var(--red)}
.b-phead h1{font-family:var(--mono);font-weight:800;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.02em;line-height:1}
.b-phead h1 span{color:var(--red)}
.b-phead p{margin-top:.7rem;color:var(--muted);max-width:60ch}

.b-contact{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

/* ---------- CLASSI & ARCHETIPI (sticker cards) ---------- */
.b-classi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.b-cls{
  position:relative;overflow:hidden;
  border:var(--bw) solid var(--line);background:var(--paper);
  padding:1.15rem 1.15rem 1.2rem;box-shadow:5px 5px 0 var(--ink);
  display:flex;flex-direction:column;
}
.b-cls:nth-child(4n+2),.b-cls:nth-child(4n+3){background:var(--box)}
.b-cls__wm{position:absolute;right:-.4rem;bottom:-1.7rem;z-index:0;pointer-events:none;
  font-family:var(--mono);font-weight:800;font-size:6.5rem;line-height:1;letter-spacing:-.06em;color:rgba(12,12,12,.06)}
.b-cls>*{position:relative;z-index:1}
.b-cls__stamp{
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  font-family:var(--mono);font-weight:800;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid var(--red);color:var(--red);padding:.3rem .42rem;line-height:1;opacity:.9;
  transform:rotate(8deg);
}
.b-cls__hd{display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem}
.b-cls__glyph{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--acid);border:var(--bw) solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-weight:800;font-size:1.1rem;line-height:1;transform:rotate(-4deg)
}
.b-cls__name{font-family:var(--mono);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1}
.b-cls__role{display:block;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.b-cls__d{font-size:.92rem;line-height:1.5;margin:.7rem 0 .3rem;max-width:40ch}
.b-cls__foot{margin-top:auto;padding-top:.85rem;border-top:2px solid var(--line)}
.b-cls__lab{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.b-cls__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.b-chip{font-family:var(--mono);font-weight:700;font-size:.72rem;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:.26rem .5rem;white-space:nowrap}
.b-cls:nth-child(4n+1) .b-chip{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- BESTIARIO (dark index + threat bars) ---------- */
.b-bwrap{display:grid;grid-template-columns:322px 1fr;gap:1rem;align-items:start}
.b-bart{position:relative;overflow:hidden;border:var(--bw) solid var(--line);background:var(--ink);isolation:isolate;box-shadow:5px 5px 0 var(--ink)}
.b-bart img{width:100%;height:auto;display:block;filter:contrast(1.12) saturate(1.05)}
.b-bart::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(255,59,31,.4),transparent 55%),linear-gradient(0deg,rgba(12,12,12,.5),transparent 62%);mix-blend-mode:multiply}
.b-bart::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--halftone);background-size:5px 5px;opacity:.32;mix-blend-mode:overlay}
.b-bart .b-hero__cap{z-index:3}
.b-bart .b-sticker{top:.8rem;left:.8rem;right:auto;z-index:4;font-size:.68rem}
.b-best{border:var(--bw) solid var(--line);background:var(--ink);color:var(--paper)}
.b-beast{display:grid;grid-template-columns:52px 1fr 190px;gap:1rem;align-items:center;padding:.95rem 1.05rem;border-bottom:var(--bw) solid var(--line)}
.b-beast:last-child{border-bottom:none}
.b-beast:hover{background:#161614}
.b-beast__n{font-family:var(--mono);font-weight:800;font-size:1.45rem;line-height:1;color:var(--acid)}
.b-beast__b{min-width:0}
.b-beast__name{font-family:var(--mono);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1.1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.b-beast__kind{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:#fff;padding:.15rem .42rem}
.b-beast__d{font-size:.86rem;color:#cfccc2;margin-top:.3rem;max-width:58ch}
.b-threat{display:flex;flex-direction:column;gap:.32rem;flex:0 0 auto}
.b-threat__lab{font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9d9a90;display:flex;justify-content:space-between;gap:.5rem}
.b-threat__lab b{color:var(--paper)}
.b-threat__bar{display:flex;gap:3px}
.b-threat__seg{flex:1;height:11px;border:2px solid #6f6c64}
.b-threat__seg--on{background:var(--acid);border-color:var(--acid)}
.b-threat__seg--max{background:var(--red);border-color:var(--red)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .b-classi{grid-template-columns:repeat(2,1fr)}
  .b-glos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .b-shell{grid-template-columns:1fr}
  .b-side{display:none}
  .b-specs{grid-template-columns:repeat(2,1fr)}
  .b-spec--lab{display:none}
  .b-spec{border-right:none}
  .b-spec:nth-child(odd){border-right:var(--bw) solid var(--line)}
  .b-spec:nth-child(2),.b-spec:nth-child(3){border-bottom:var(--bw) solid var(--line)}
  .b-sub{grid-template-columns:1fr}
  .b-sub__l{border-right:none;border-bottom:var(--bw) solid var(--line)}
  .b-foot__grid{grid-template-columns:1fr 1fr}
  .b-contact{grid-template-columns:1fr}
  .b-hero__grid{grid-template-columns:1fr}
  .b-hero__art{border-left:none;border-top:var(--bw) solid var(--line);min-height:260px}
  .b-spot__grid{grid-template-columns:1fr}
  .b-spot__art{border-right:none;border-bottom:var(--bw) solid var(--line);min-height:280px}
  .b-podio{grid-template-columns:1fr}
  .b-bwrap{grid-template-columns:1fr}
  .b-bart{max-width:420px}
}
@media (max-width:760px){
  .b-nav{display:none}
  .b-burger{display:flex}
  .b-glos{grid-template-columns:1fr}
  .b-classi{grid-template-columns:1fr}
  .b-cols{grid-template-columns:1fr}
  .b-film{grid-template-columns:1fr}
  .b-beast{grid-template-columns:44px 1fr;gap:.5rem .8rem}
  .b-beast .b-threat{grid-column:1/3;margin-top:.2rem}
  .b-film figure{border-right:none;border-bottom:var(--bw) solid var(--line);min-height:150px}
  .b-film figure:last-child{border-bottom:none}
}
@media (max-width:560px){
  .b-sec,.b-hero__body,.b-phead,.b-spot__body{padding-left:1.1rem;padding-right:1.1rem}
  .b-specs{grid-template-columns:1fr}
  .b-spec{border-right:none;border-bottom:var(--bw) solid var(--line)}
  .b-spec:nth-child(odd){border-right:none}
  .b-spec:last-child{border-bottom:none}
  .b-foot__grid{grid-template-columns:1fr}
  .b-row{grid-template-columns:34px 50px 1fr;gap:.7rem}
  .b-row__r{grid-column:2/4;flex-direction:row;justify-content:space-between;align-items:center;margin-top:.2rem}
  .b-row__ic{width:48px;height:48px}
  .b-brand__tx small{display:none}
}

/* =========================================================
   GRIMOIRE LAYER — "grimorio illuminato / fanzine da tavolo"
   Concept: an aged, hand-bound dark-fantasy RPG grimoire.
   Two colors (parchment + ink) + red rubrication, acid overprint.
   Signature: illuminated versal + folio running-head per section,
   wax seals & rubber stamps, drop-caps, marginalia, riso plates.
   ========================================================= */

/* aged parchment — subtle rubric wash top, ink pooling at foot */
body{
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(255,59,31,.05), transparent 55%),
    radial-gradient(120% 130% at 50% 118%, rgba(12,12,12,.11), transparent 60%),
    var(--paper);
  background-attachment:fixed;
}

.b-plate{position:relative}

/* ---------- FOLIO RUNNING-HEAD (signature) ---------- */
.b-folio{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.15rem}
.b-folio::before{content:"";flex:0 0 26px;height:2px;background:var(--red)}
.b-folio::after{content:"";flex:1;border-top:2px dotted rgba(12,12,12,.42)}
.b-folio--dark{color:#cfccc2}
.b-folio--dark::after{border-top-color:rgba(255,255,255,.28)}
.b-folio--center{justify-content:center}
.b-folio--center::before,.b-folio--center::after{display:none}

/* ---------- ILLUMINATED VERSAL + GRIMOIRE HEAD (signature) ----------
   Chapter openings are centered like an illuminated manuscript, so the
   head/lede column is balanced (never left-hugging with empty right). */
.b-head{max-width:920px;margin:0 auto 1.7rem;text-align:center}
.b-head__row{display:flex;gap:1.1rem;align-items:center;justify-content:center;margin-bottom:.7rem}
.b-head__tt{padding-top:.1rem;text-align:center}
.b-head__tt .b-tag{margin:0 auto .7rem}
.b-head .b-folio{justify-content:center;max-width:560px;margin:0 auto 1.15rem}
.b-head .b-lede{text-align:left;margin-left:auto;margin-right:auto}
.b-versal{
  flex:0 0 auto;display:grid;place-items:center;
  min-width:60px;height:60px;padding:0 .45rem;
  font-family:var(--mono);font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.02em;
  color:#fff;background:var(--red);border:var(--bw) solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);transform:rotate(-3deg);
}
.b-head--center{text-align:center}
.b-head--center .b-head__row{justify-content:center;align-items:center}
.b-head--center .b-tag{margin-left:auto;margin-right:auto}

/* ---------- DROP-CAP / VERSALE (signature) ---------- */
.b-lede,.b-prose{display:flow-root}
.b-drop{
  float:left;font-family:var(--mono);font-weight:800;line-height:.7;
  font-size:3rem;color:#fff;background:var(--red);border:var(--bw) solid var(--ink);
  padding:.16em .16em .1em;margin:.06em .55rem .04rem 0;box-shadow:4px 4px 0 var(--ink);
}
.b-drop--ink{background:var(--ink)}
/* hero: inline rubricated initial rather than a floated cap */
.b-front h1 .b-drop{float:none;display:inline-block;font-size:.92em;line-height:.82;padding:.04em .12em;margin:0 .04em 0 0;box-shadow:4px 4px 0 var(--ink);vertical-align:-.06em}

/* ---------- ORNAMENTAL DIVIDER ---------- */
.b-orn{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.4rem 1.6rem;border-bottom:var(--bw) solid var(--line);background:var(--box)}
.b-orn::before,.b-orn::after{content:"";flex:1;max-width:220px;height:0;border-top:2px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.b-orn span{font-family:var(--mono);color:var(--red);font-weight:800;font-size:.9rem}
.b-orn i{font-style:normal;font-size:1.15rem;color:var(--ink);letter-spacing:.15em}

/* ---------- MARGINALIA (scribe's hand) ---------- */
.b-scribe{display:inline-block;margin-top:1.5rem;font-family:var(--mono);font-style:italic;font-size:.82rem;line-height:1.5;color:var(--red);border-left:3px solid var(--red);padding-left:.7rem;max-width:32ch;transform:rotate(-1.4deg)}

/* ---------- WAX SEAL (the one round, non-hard-edged illumination) ---------- */
.b-wax{
  width:92px;height:92px;border-radius:50%;flex:0 0 auto;
  display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 38% 32%, #ff7059, var(--red) 56%, #a81d0b);
  color:#fff;font-family:var(--mono);font-weight:700;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  border:2px solid #8f1808;
  box-shadow:inset 0 3px 8px rgba(255,255,255,.3), inset 0 -7px 12px rgba(0,0,0,.38), 3px 4px 0 rgba(12,12,12,.4);
  transform:rotate(-9deg);
}
.b-wax b{display:block;font-size:.9rem;font-weight:800;letter-spacing:.02em}
.b-wax i{display:block;font-style:normal;font-size:.5rem;opacity:.85;letter-spacing:.05em}

/* ---------- RUBBER STAMP ---------- */
.b-stamp{
  display:inline-block;font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);border:2.5px solid var(--red);padding:.32rem .55rem;border-radius:2px;
  transform:rotate(-7deg);opacity:.92;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,59,31,.25);
}
.b-stamp--art{position:absolute;bottom:1rem;right:1rem;z-index:4;background:rgba(12,12,12,.4);color:#ff6a54;border-color:#ff6a54}

/* ---------- FRONTISPIECE (illuminated title page) ---------- */
.b-front{border-bottom:var(--bw) solid var(--line);background:var(--box);position:relative;overflow:hidden}
.b-front__run{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:var(--ink);text-align:center;padding:.55rem 1rem;border-bottom:var(--bw) solid var(--line)}
.b-front__run span{color:var(--red)}
.b-front__grid{display:grid;grid-template-columns:.92fr 1.08fr}
.b-front__col{padding:2.8rem 2rem 2.5rem;border-right:var(--bw) solid var(--line);position:relative}
.b-front h1{font-family:var(--mono);font-weight:800;font-size:clamp(2rem,4.4vw,3.35rem);line-height:1;letter-spacing:-.03em;margin:.2rem 0 1.1rem;max-width:17ch}
.b-front h1 mark{background:var(--red);color:#fff;padding:0 .1em}
.b-front__plate{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;min-height:440px;border-left:var(--bw) solid var(--line)}
.b-front__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.14) saturate(1.06)}
.b-front__plate::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(255,59,31,.42),transparent 55%),linear-gradient(0deg,rgba(12,12,12,.6),transparent 60%);mix-blend-mode:multiply}
.b-front__plate::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--halftone);background-size:5px 5px;opacity:.32;mix-blend-mode:overlay}
.b-front__plate .b-sticker{top:1rem;right:1rem;font-size:.8rem;z-index:4}
.b-front__plate .b-sticker small{display:block;font-size:.56rem;font-weight:700;letter-spacing:.12em;margin-top:.15rem;opacity:.85}
.b-front__plate .b-wax{position:absolute;bottom:1.1rem;right:1.1rem;z-index:4}

/* ---------- SPREAD ALTERNATION (vary section widths/tones) ---------- */
.b-sec--tablet{background:var(--box)}
.b-sec--faq{background:var(--box)}
.b-sec--faq .b-head,.b-sec--faq .b-faq{max-width:880px;margin-left:auto;margin-right:auto}

/* ---------- CLASSI as illuminated arcana cards ---------- */
.b-cls{position:relative;box-shadow:6px 6px 0 var(--ink)}
.b-cls::before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(12,12,12,.26);pointer-events:none;z-index:2}
.b-cls__arc{position:relative;z-index:1;display:block;font-family:var(--mono);font-weight:800;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);border-bottom:2px solid var(--ink);padding:0 0 .55rem;margin-bottom:.9rem;max-width:9ch}
.b-cls:nth-child(4n+1) .b-cls__arc,.b-cls:nth-child(4n+4) .b-cls__arc{color:var(--red)}

/* ---------- SUBSCRIBE panel wax ---------- */
.b-sub__l{position:relative}
.b-sub__l h3{padding-right:5.5rem}
.b-wax--panel{position:absolute;top:1.2rem;right:1.2rem;width:80px;height:80px;z-index:2}

/* ---------- FOOTER colophon credit ---------- */
.b-foot__colo{margin-top:.9rem;font-family:var(--mono);font-size:.72rem;color:#9d9a90;letter-spacing:.02em;max-width:42ch}

/* ---------- GRIMOIRE RESPONSIVE ---------- */
@media (max-width:980px){
  .b-front__grid{grid-template-columns:1fr}
  .b-front__col{border-right:none;border-bottom:var(--bw) solid var(--line);padding:2.2rem 1.6rem}
  .b-front__plate{border-left:none;min-height:300px}
}
@media (max-width:560px){
  .b-versal{min-width:52px;height:52px;font-size:1.25rem}
  .b-drop{font-size:2.5rem}
  .b-sub__l h3{padding-right:0}
  .b-wax--panel{position:static;margin:0 0 1rem auto}
  .b-orn::before,.b-orn::after{max-width:60px}
}