/* Bakemono minisite · "Bakemono" arriva da https://www.zetafonts.com/satellite-fonts.php?slg=bakemono
   "Bakemono Local" è la copia di riserva, usata solo se il CSS remoto non risponde.

   GRIGLIA · Genkō Yōshi (原稿用紙)
   Il modulo è la cella quadrata --cell. Le colonne di celle sono separate da un interspazio --gut
   (un quarto di cella) come nella carta da manoscritto: il passo orizzontale è --pitch.
   Tutto si allinea al modulo: interlinee e altezze in multipli di --cell, larghezze e distanze
   orizzontali in multipli di --pitch. Il numero di colonne (--cols: 32 / 24 / 16 / 12) lo sceglie
   bakemono.js in base alla larghezza della finestra, così la gabbia è sempre fatta di colonne intere. */
@font-face{font-family:"Bakemono Local";src:url(../fonts/Bakemono-Variable.woff2) format("woff2-variations"),url(../fonts/Bakemono-Variable.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:block}
/* kana disegnati per Bakemono: si aggiungono alla famiglia solo per l'intervallo giapponese (hiragana, katakana) */
@font-face{font-family:"Bakemono";src:url(../fonts/Bakemono-Kana.woff2) format("woff2-variations"),url(../fonts/Bakemono-Kana.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+3040-30FF}
@font-face{font-family:"Bakemono";src:url(../fonts/Bakemono-Kana.woff2) format("woff2-variations"),url(../fonts/Bakemono-Kana.woff2) format("woff2");font-weight:100 800;font-style:italic;font-display:swap;unicode-range:U+3040-30FF}
@font-face{font-family:"Bakemono Local";src:url(../fonts/Bakemono-Kana.woff2) format("woff2-variations"),url(../fonts/Bakemono-Kana.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+3040-30FF}
@font-face{font-family:"Bakemono Local";src:url(../fonts/Bakemono-Italic-Variable.woff2) format("woff2-variations"),url(../fonts/Bakemono-Italic-Variable.woff2) format("woff2");font-weight:100 800;font-style:italic;font-display:block}

:root{
  --ink:#00212D;--deep:#00141C;--red:#ED1C25;--paper:#ECEBE8;--mist:#B9C6CA;--stone:#8A9497;
  --cell:clamp(28px,3.4vw,60px);--u:calc(var(--cell)/2);--gut:calc(var(--cell)*.25);--pitch:calc(var(--cell)*1.25);
  --cols:20;--gw:calc(var(--cols)*var(--pitch));--gwc:calc(var(--gw) - var(--gut));--gx:0px;
  --ease:cubic-bezier(.65,0,.25,1);--soft:cubic-bezier(.22,1,.36,1);color-scheme:dark;
  /* celle della griglia: una cella quadrata per ogni passo, l'interspazio resta vuoto */
  --genko-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.25 1'%3E%3Crect x='0.015' y='0.015' width='0.97' height='0.97' fill='none' stroke='%23ECEBE8' stroke-width='0.03'/%3E%3C/svg%3E");
  --genko-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.25 1'%3E%3Crect x='0.015' y='0.015' width='0.97' height='0.97' fill='none' stroke='%2300212D' stroke-width='0.03'/%3E%3C/svg%3E");
  --genko-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.25 1'%3E%3Crect x='0.015' y='0.015' width='0.97' height='0.97' fill='none' stroke='%23ED1C25' stroke-width='0.03'/%3E%3C/svg%3E");
  --genko:var(--genko-paper);--genko-a:.09;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:"Bakemono","Bakemono Local",ui-monospace,Menlo,sans-serif;font-size:calc(var(--u)*.58);line-height:var(--u);overflow-x:clip;-webkit-font-smoothing:antialiased;font-variation-settings:"MONO" 0,"wght" 400}
p{margin:0}h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.mono{font-variation-settings:"MONO" 1000,"wght" 450}
.stereo{font-variation-settings:"MONO" 500,"wght" 450}
.caps{text-transform:uppercase;letter-spacing:.12em;font-size:calc(var(--u)*.4);line-height:var(--u);font-variation-settings:"MONO" 1000,"wght" 600}
.red{color:var(--red)}
/* i kana sono composti in Bakemono: finché i glifi non esistono il browser ripiega sul sistema */
.kana{font-family:"Bakemono","Bakemono Local","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;font-variation-settings:"MONO" 1000,"wght" 600}
.vert{writing-mode:vertical-rl;text-orientation:upright}

/* ---------- la gabbia ---------- */
.wrap{width:var(--gw);max-width:100%;margin-inline:auto}
.pad{padding-block:calc(var(--cell)*1)}
.g{position:relative}
/* la griglia vive solo dentro la gabbia: dal margine sinistro al destro del container */
.g::before{content:"";position:absolute;top:0;bottom:0;left:var(--gx);width:var(--gw);max-width:100%;pointer-events:none;background-image:var(--genko);background-size:var(--pitch) var(--cell);background-position:0 0;background-repeat:repeat;opacity:var(--genko-a);border-left:1px solid currentColor;border-right:1px solid currentColor;box-sizing:content-box}
/* il gyōkan: la piega centrale del foglio con il gyobi (魚尾) */
.g::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--gut);transform:translateX(-50%);pointer-events:none;border-left:1px solid currentColor;border-right:1px solid currentColor;opacity:calc(var(--genko-a)*1.4)}
.g>*{position:relative;z-index:1}
.gyobi{position:absolute;left:50%;top:var(--cell);transform:translateX(-50%);width:var(--pitch);height:var(--cell);pointer-events:none;opacity:.5;z-index:1}
.gyobi::before,.gyobi::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:calc(var(--u)*.3) solid transparent;border-right:calc(var(--u)*.3) solid transparent}
.gyobi::before{top:0;border-bottom:calc(var(--u)*.35) solid var(--red)}
.gyobi::after{bottom:0;border-top:calc(var(--u)*.35) solid var(--red)}
.light{--genko:var(--genko-ink);--genko-a:.1}
.on-red{--genko:var(--genko-paper);--genko-a:.14}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:calc(var(--u)*1.5);padding-inline:calc(var(--pitch)/2);border:2px solid currentColor;border-radius:4px;text-decoration:none;font:inherit;font-size:calc(var(--u)*.5);font-variation-settings:"MONO" 1000,"wght" 600;background:none;color:inherit;cursor:pointer;white-space:nowrap;transition:background .45s var(--soft),color .45s var(--soft),border-color .45s var(--soft),transform .45s var(--soft)}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:2px solid var(--red)}
.nav .in{display:flex;align-items:center;gap:var(--pitch);height:calc(var(--u)*2);width:var(--gw);max-width:100%;margin-inline:auto}
/* Try e Buy vicini: il gap del flex viene riassorbito, resta mezza cella */
.nav .btn.try{margin-left:auto}.nav .btn.solid{margin-left:calc(var(--gut)*2 - var(--pitch))}
.logo{text-decoration:none;font-size:calc(var(--u)*.75);font-variation-settings:"MONO" 1000,"wght" 750;display:flex;align-items:baseline;gap:calc(var(--gut)*2)}
.logo .kana{font-size:calc(var(--u)*.45);color:var(--red)}
.board{flex:1;min-width:0;display:flex;align-items:center;gap:var(--gut);font-size:calc(var(--u)*.4);letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 500;color:var(--mist);overflow:hidden;white-space:nowrap}
.board .lamp{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:lamp 2.4s infinite;flex:none}
@keyframes lamp{50%{opacity:.25;box-shadow:none}}
@media(max-width:700px){.board{display:none}.nav .btn.try{display:none}}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - var(--u)*2);min-height:calc(100dvh - var(--u)*2);display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 50% at 50% 110%,#0a3443 0%,transparent 70%),var(--ink)}
.hero-in{text-align:center;padding:calc(var(--u)*2) 0 calc(var(--u)*4);width:var(--gw);max-width:100%}
.hero h1{font-size:calc(var(--cell)*2.1);line-height:calc(var(--cell)*2.5);letter-spacing:-.01em;font-variation-settings:"MONO" 0,"wght" 700;animation:henge 14s ease-in-out infinite;text-wrap:balance}
@media(max-width:700px){.hero h1{font-size:calc(var(--u)*2.4);line-height:calc(var(--u)*3)}}
.hero-help{margin-top:var(--u);font-size:calc(var(--u)*.42);line-height:var(--u);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-variation-settings:"MONO" 1000,"wght" 500}
@media(hover:none){.hero-help{display:none}}
/* il sigillo che sostituisce il cursore */
@media(hover:hover){.hero{cursor:none}}
.sign{position:fixed;left:0;top:0;z-index:70;pointer-events:none;display:none;transform:translate(18px,22px);will-change:transform}
/* la punta del cursore: freccia rossa bordata d'inchiostro, l'apice in alto a sinistra coincide con il mouse */
.sg-arrow{position:fixed;left:0;top:0;width:24px;height:24px;z-index:71;pointer-events:none;display:none;fill:var(--red);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));will-change:transform}
.sg-arrow.on{display:block}
.sign.on{display:flex;align-items:center;gap:var(--gut)}
.seal{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);border:3px solid var(--red);border-radius:6px;display:grid;place-items:center;color:var(--red);background:rgba(0,33,45,.55);box-shadow:0 0 0 3px rgba(0,33,45,.6),0 0 22px rgba(237,28,37,.5);transform:rotate(-6deg)}
.seal .kana{font-size:calc(var(--u)*.72);line-height:1}
.coords{position:relative;display:grid;gap:2px;padding:4px 8px 10px;background:var(--ink);border:1px solid var(--red);border-radius:4px;font-size:calc(var(--u)*.38);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);font-variation-settings:"MONO" 1000,"wght" 500;white-space:nowrap}
.coords b{color:var(--paper);font-variation-settings:"MONO" 1000,"wght" 700;margin-left:6px}
.coords i{position:absolute;left:8px;right:8px;height:2px;background:#1e4150}
.coords i::after{content:"";position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateX(calc(var(--p,0)*100%))}
#sg-bar-m{bottom:7px}#sg-bar-w{bottom:3px}
/* quando il mouse guida il titolo, l'animazione si ferma e il font segue la mano */
.hero h1.hand{animation:none;transition:font-variation-settings .25s linear}
.hero h1.rest{transition:font-variation-settings 1.2s var(--soft)}
@keyframes henge{0%,10%{font-variation-settings:"MONO" 0,"wght" 700}38%,48%{font-variation-settings:"MONO" 1000,"wght" 300}62%,70%{font-variation-settings:"MONO" 1000,"wght" 800}90%,100%{font-variation-settings:"MONO" 0,"wght" 700}}
.hero .tag{margin-top:var(--u);font-size:calc(var(--u)*.9);line-height:var(--u);font-variation-settings:"MONO" 1000,"wght" 300;color:var(--mist)}
.hero .tag b{color:var(--paper);font-variation-settings:"MONO" 1000,"wght" 700}
.readout{margin-top:var(--u);display:inline-flex;gap:var(--pitch);align-items:center;height:calc(var(--u)*1.5);padding-inline:calc(var(--pitch)/2);font-size:calc(var(--u)*.4);letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 500;color:var(--mist);border:1px solid #1e4150;border-radius:4px}
.readout b{color:var(--red);min-width:4ch;display:inline-block;text-align:right}
/* un kana per cella: corpo .72 + spaziatura .28 = una riga; la colonna è larga un pitch e parte da un bordo di riga (--kana-top dal JS) */
.hero-kana{position:absolute;right:calc(var(--gx) + var(--pitch));top:var(--kana-top,50%);font-size:calc(var(--cell)*.72);line-height:var(--pitch);letter-spacing:calc(var(--cell)*.28);padding-block-start:calc(var(--cell)*.14);color:var(--red);z-index:1}
@media(max-width:860px){.hero-kana{display:none}}
.hint{position:absolute;left:50%;bottom:var(--u);transform:translateX(-50%);font-size:calc(var(--u)*.4);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-variation-settings:"MONO" 1000,"wght" 500;animation:bob 1.8s ease-in-out infinite;white-space:nowrap;z-index:1}
@keyframes bob{50%{transform:translate(-50%,6px)}}
/* hitodama: fuochi fatui, alti due celle */
.hitodama{position:absolute;pointer-events:none;width:calc(var(--u)*1.4);height:calc(var(--u)*2);opacity:.85;filter:drop-shadow(0 0 14px rgba(237,28,37,.6));animation:float var(--d,14s) ease-in-out infinite;left:var(--x);top:var(--y);animation-delay:var(--dl,0s);z-index:1}
.hitodama::before{content:"";position:absolute;inset:0;background:var(--red);border-radius:50%/60% 60% 40% 40%;transform-origin:50% 100%;animation:flame 2.6s ease-in-out infinite}
.hitodama::after{content:"";position:absolute;left:46%;top:-38%;width:36%;height:70%;background:var(--red);border-radius:50% 50% 40% 40%;transform:rotate(28deg);transform-origin:50% 100%;animation:flame 2.6s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) rotate(-6deg)}33%{transform:translate(26px,-40px) rotate(6deg)}66%{transform:translate(-18px,-70px) rotate(-3deg)}}
@keyframes flame{50%{transform:scaleY(.86) scaleX(1.08)}}
@media(max-width:700px){.hitodama{scale:.6}}
.mist{position:absolute;left:-10%;right:-10%;bottom:-20px;height:38%;pointer-events:none;background:radial-gradient(40% 60% at 20% 100%,rgba(185,198,202,.22),transparent 70%),radial-gradient(50% 70% at 70% 100%,rgba(185,198,202,.16),transparent 70%);animation:drift 18s ease-in-out infinite alternate;z-index:0}
@keyframes drift{to{transform:translateX(40px)}}

/* ---------- section head: 3 celle di altezza ---------- */
/* occhiello sopra, titolo sotto, tutto a sinistra: una riga per l'occhiello e due per il titolo */
.shead{display:grid;grid-template-columns:1fr auto;grid-template-rows:var(--cell) calc(var(--cell)*2);column-gap:var(--pitch);align-items:center;margin-bottom:var(--cell)}
.shead .n{grid-column:1/-1;color:var(--red);font-variation-settings:"MONO" 1000,"wght" 600;font-size:calc(var(--u)*.42);letter-spacing:.14em;text-transform:uppercase;line-height:var(--cell)}
/* titolo sulla griglia: maiuscole alte una cella (cap .65em → corpo cell/.65), base sul bordo inferiore della fascia di due celle.
   Con interlinea 2 celle la base cade a 1.5 celle (metà + (asc .875 − desc .225)/2 · corpo): la sposto giù di mezza cella */
.shead h2{grid-column:1;align-self:start;white-space:nowrap;font-size:calc(var(--cell)/.65);line-height:calc(var(--cell)*2);position:relative;top:calc(var(--cell)*.5);font-variation-settings:"MONO" 0,"wght" 750;letter-spacing:-.01em}
.shead h2 .kana{font-size:calc(var(--cell)*.8);line-height:1;color:var(--red);margin-left:var(--pitch);vertical-align:.08em}
@media(max-width:700px){.shead{grid-template-columns:1fr;grid-template-rows:auto}.shead h2{font-size:calc(var(--u)*1.6);line-height:1.15;white-space:normal;top:0}.shead h2 .kana{font-size:calc(var(--u)*1)}}
/* noppera-bō: a volte le parole perdono la faccia */
/* henge in rollover: il titolo si trasforma da proporzionale a mono, da pesante a leggero */
/* henge in rollover: titolo e kana passano a Mono leggero; il titolo è su una riga sola e non va a capo */
.faceless{transition:font-variation-settings .9s var(--soft)}
.faceless:hover{font-variation-settings:"MONO" 1000,"wght" 300}
.faceless .kana{display:inline-block;transition:font-variation-settings .9s var(--soft)}
.faceless:hover .kana{font-variation-settings:"MONO" 0,"wght" 300}

/* griglie a colonne: ogni traccia è un passo della Genkō */
/* le colonne di layout sono le celle: una traccia per cella, il canaletto è il gap, così ogni span finisce su un bordo di cella */
.cols{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));column-gap:var(--gut);align-items:center}
.span-a,.span-b{grid-column:1/-1}
.span-b{margin-top:calc(var(--u)*2)}
[data-cols="20"] .span-a{grid-column:1/span 11}[data-cols="20"] .span-b{grid-column:13/span 8;margin-top:0}
[data-cols="16"] .span-a{grid-column:1/span 9}[data-cols="16"] .span-b{grid-column:11/span 6;margin-top:0}

/* ---------- obake statement ---------- */
.obake{background:var(--paper);color:var(--ink)}
.obake .lead{font-size:calc(var(--u)*1.05);line-height:calc(var(--u)*1.5);font-variation-settings:"MONO" 0,"wght" 550;text-wrap:pretty}
.obake .lead em{font-style:italic;color:var(--red)}
.obake .body{margin-top:var(--u);color:#2c4a55;max-width:calc(var(--pitch)*8)}
.obake .quote{margin-top:var(--u);border-left:4px solid var(--red);padding-left:calc(var(--pitch)/2);font-variation-settings:"MONO" 1000,"wght" 450;font-size:calc(var(--u)*.55)}
.obake figure{margin:0;position:relative}
.obake figure img{width:calc(var(--pitch)*3);max-width:100%;margin-inline:auto;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-10px)}}
.obake figcaption{text-align:center;margin-top:var(--u);font-size:calc(var(--u)*.42);line-height:var(--u);color:#4f6b76;font-variation-settings:"MONO" 1000,"wght" 500;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:860px){.obake .span-b{order:-1;margin:0 0 calc(var(--u)*2)}}

/* ---------- henge: tester ---------- */
.henge{background:var(--deep)}
.win{background:var(--mist);color:var(--ink);border-radius:4px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.win .bar{display:flex;align-items:center;gap:var(--pitch);height:calc(var(--u)*1.5);padding-inline:calc(var(--pitch)/2);border-bottom:2px solid var(--ink);font-size:calc(var(--u)*.42);letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 550}
.dots{display:flex;gap:8px}.dots i{width:14px;height:14px;border-radius:50%;background:var(--ink);transition:background .3s,box-shadow .3s}
.dots i.o{background:transparent;box-shadow:inset 0 0 0 2.5px var(--ink)}
.win .txt{padding:var(--u) calc(var(--pitch)/2);font-size:calc(var(--u)*1.3);line-height:1.2;min-height:calc(var(--u)*7);outline:none;text-wrap:pretty;transition:font-variation-settings .7s var(--soft),font-size .5s var(--soft),background .5s}
.win .txt:focus{background:#c6d1d4}
.ctl{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0 var(--pitch);margin-bottom:var(--u);align-items:start}
.ax{display:grid;grid-template-rows:var(--u) var(--u) var(--u);align-items:center}
.ctl label{font-size:calc(var(--u)*.4);line-height:var(--u);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-variation-settings:"MONO" 1000,"wght" 500}
.ctl label b{color:var(--red);margin-left:.4em}
.stops{display:flex;justify-content:space-between;font-size:calc(var(--u)*.34);line-height:var(--u);letter-spacing:.1em;text-transform:uppercase;color:#4f6b76;font-variation-settings:"MONO" 1000,"wght" 500}
/* cursori sottili: una linea di un pixel e un punto rosso */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--u);margin:0;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:#2b4f5c}
input[type=range]::-moz-range-track{height:1px;background:#2b4f5c}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--red);border:0;margin-top:-4.5px;box-shadow:0 0 0 3px var(--deep);transition:transform .3s var(--soft)}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--red);border:0;box-shadow:0 0 0 3px var(--deep)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.4)}
.chips{display:flex;gap:4px;align-items:center;height:var(--u)}
.chips .sep{width:1px;height:calc(var(--u)*.6);background:#2b4f5c;margin-inline:4px}
.chip{border:1px solid #2b4f5c;border-radius:3px;background:none;color:var(--mist);height:calc(var(--u)*.8);padding-inline:calc(var(--gut)*1.5);font-size:calc(var(--u)*.36);letter-spacing:.06em;cursor:pointer;font-variation-settings:"MONO" 1000,"wght" 550;transition:background .45s var(--soft),border-color .45s var(--soft),color .45s;line-height:1}
.chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:var(--paper)}
.chip:hover{border-color:var(--red);color:var(--paper)}
@media(max-width:1000px){.ctl{grid-template-columns:1fr 1fr}.ax.shape{grid-column:1/-1}}
@media(max-width:600px){.ctl{grid-template-columns:1fr}}
/* il cursore lampeggia finché nessuno scrive */
.win .txt:not(:focus)::after{content:"▍";color:var(--red);margin-left:.05em;animation:lamp 1s steps(2) infinite}
/* monowidth demo */
.monow{margin-top:calc(var(--u)*3)}
.monow .desc h3{font-size:calc(var(--u)*1.3);line-height:calc(var(--u)*1.5);font-variation-settings:"MONO" 0,"wght" 700}
.monow .desc p{margin-top:var(--u);color:var(--mist);max-width:calc(var(--pitch)*8)}
.stack{position:relative;padding:var(--gut) 0;font-size:calc(var(--u)*2.1);line-height:calc(var(--u)*2.5);font-variation-settings:"MONO" 0,"wght" 400;white-space:nowrap;display:inline-block}
.stack span{display:block;transition:font-variation-settings 1.4s var(--soft)}
.stack::before,.stack::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--red)}
.stack::before{left:calc(var(--gut)*-1)}.stack::after{right:calc(var(--gut)*-1)}
.stack-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--u)}
@media(max-width:700px){.stack{font-size:calc(var(--u)*1.35);line-height:calc(var(--u)*1.5)}}

/* ---------- hyakki: night parade ---------- */
.hyakki{overflow:hidden;background:var(--ink)}
.hyakki .shead{width:var(--gw);max-width:100%;margin-inline:auto;margin-bottom:var(--u)}
/* card larghe 5 celle (5 passi meno l'ultimo canaletto), intervallo passo+canaletto: ogni card parte su un bordo di cella; altezza propria, niente stiramento */
.parade{display:flex;align-items:flex-start;gap:calc(var(--pitch) + var(--gut));overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 calc(var(--u)*2);scrollbar-width:none;scroll-padding-inline:var(--gx)}
.parade::-webkit-scrollbar{display:none}
.parade{cursor:grab;user-select:none;-webkit-user-select:none}.parade.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.parade.drag .yokai{transition:none}
.parade::before,.parade::after{content:"";flex:0 0 calc(var(--gx) - var(--pitch) - var(--gut))}
.yokai{flex:0 0 calc(var(--pitch)*5 - var(--gut));scroll-snap-align:start;background:var(--paper);color:var(--ink);border-radius:4px;overflow:hidden;border:2px solid var(--ink);display:flex;flex-direction:column;transform:translateY(var(--ty,0));transition:transform 1.1s var(--soft)}
.yokai:nth-child(even){--ty:var(--u)}
.yokai .pic{aspect-ratio:1/1;background:var(--mist);display:grid;place-items:center;padding:8%;position:relative;overflow:hidden}
.yokai .pic img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--soft)}
.yokai:hover .pic img{transform:scale(1.06) rotate(-2deg)}
.yokai .pic .kana{position:absolute;right:var(--gut);top:var(--gut);color:var(--red);font-size:calc(var(--u)*.7);line-height:1}
.yokai .name{padding:var(--u) calc(var(--pitch)/2) 0;font-size:calc(var(--u)*1.05);line-height:var(--u);font-variation-settings:"MONO" 0,"wght" 750;transition:font-variation-settings 1.2s var(--soft)}
.yokai:hover .name{font-variation-settings:"MONO" 1000,"wght" 300}
.yokai .sub{padding:0 calc(var(--pitch)/2);font-size:calc(var(--u)*.4);line-height:var(--u);letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-variation-settings:"MONO" 1000,"wght" 600}
.yokai .desc{padding:0 calc(var(--pitch)/2) var(--u);font-size:calc(var(--u)*.52);line-height:var(--u);color:#2c4a55}
.yokai .desc.stereo{font-variation-settings:"MONO" 500,"wght" 450}.yokai .desc.mono{font-variation-settings:"MONO" 1000,"wght" 450}
@media(max-width:700px){.yokai{flex-basis:calc(var(--pitch)*5)}}
/* frecce al piede delle illustrazioni: la parata parte a 4.5 celle (padding 1 + testata 3 + mezza), le immagini sono alte quanto la card (5 passi − canaletto) */
.hyakki{position:relative}
.parade-nav{position:absolute;right:var(--gx);top:calc(var(--cell)*10.5 - var(--gut));transform:translateY(-100%);display:flex;gap:var(--gut);z-index:3;margin:0}
@media(max-width:700px){.parade-nav{position:static;transform:none;justify-content:flex-end;width:var(--gw);max-width:100%;margin:calc(var(--u)*-1) auto 0}}
.parade-nav button{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;border:2px solid var(--mist);background:var(--ink);color:var(--paper);font-size:calc(var(--u)*.7);cursor:pointer}
.parade-nav button{transition:background .45s var(--soft),border-color .45s var(--soft),transform .45s var(--soft)}
.parade-nav button:hover{background:var(--red);border-color:var(--red);transform:scale(1.08)}
.torii{margin-top:calc(var(--u)*3);position:relative;width:var(--gw);max-width:100%;margin-inline:auto}
.torii img{width:100%;border:2px solid var(--ink)}
.torii .cap{position:absolute;right:var(--pitch);bottom:var(--u);max-width:calc(var(--pitch)*3);font-size:calc(var(--u)*.8);line-height:var(--u);color:var(--ink);font-variation-settings:"MONO" 0,"wght" 700;background:var(--paper);padding:var(--gut) calc(var(--pitch)/2);border:2px solid var(--ink)}
@media(max-width:700px){.torii .cap{position:static;max-width:none;margin-top:var(--gut)}}

/* ---------- tsukumogami: code ---------- */
.tsuku{background:var(--paper);color:var(--ink)}
.term{background:#f5f7f2;border:2px solid var(--ink);border-radius:4px;overflow:hidden;box-shadow:var(--gut) var(--gut) 0 var(--ink)}
.term .bar{display:flex;gap:var(--pitch);align-items:center;height:calc(var(--u)*1.5);padding-inline:calc(var(--pitch)/2);border-bottom:2px solid var(--ink);font-size:calc(var(--u)*.4);letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 600}
.term pre{margin:0;padding:var(--u) calc(var(--pitch)/2);font:inherit;font-size:calc(var(--u)*.5);line-height:var(--u);font-variation-settings:"MONO" 1000,"wght" 400;white-space:pre-wrap;min-height:calc(var(--u)*16);color:var(--ink)}
.term .k{color:var(--red);font-variation-settings:"MONO" 1000,"wght" 700}.term .c{color:#6b7f88}
.cursor::after{content:"▍";color:var(--red);animation:lamp 1s steps(2) infinite}
.tsuku .desc h3{font-size:calc(var(--u)*1.3);line-height:calc(var(--u)*1.5);font-variation-settings:"MONO" 0,"wght" 750}
.tsuku .desc p{margin-top:var(--u);color:#2c4a55;max-width:calc(var(--pitch)*8)}
.tsuku .desc .mono{font-size:calc(var(--u)*.48);color:var(--ink)}
.banner{margin-top:calc(var(--u)*3)}
.banner img{width:100%;border:2px solid var(--ink)}

/* ---------- family ---------- */
.family{background:var(--ink)}
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pitch)}
.sub-col{border:2px solid #1e4150;border-radius:4px;padding:var(--u) calc(var(--pitch)/2);background:var(--deep)}
.sub-col h3{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(var(--u)*.9);line-height:var(--u);font-variation-settings:"MONO" 0,"wght" 750;border-bottom:2px solid var(--red);padding-bottom:calc(var(--u)*.5);margin-bottom:calc(var(--u)*.5)}
.sub-col h3 small{font-size:calc(var(--u)*.38);color:var(--mist);letter-spacing:.12em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 500}
.sub-col .glyph{font-size:calc(var(--u)*4);line-height:calc(var(--u)*5);text-align:center;color:var(--paper)}
.sub-col ol{list-style:none;margin:0;padding:0;font-size:calc(var(--u)*.7);line-height:var(--u)}
.sub-col li{display:flex;justify-content:space-between;gap:var(--gut);transition:color .5s var(--soft),transform .5s var(--soft)}
.sub-col li:hover{transform:translateX(var(--gut))}
.sub-col li:hover{color:var(--red)}
.sub-col li small{font-size:calc(var(--u)*.36);color:var(--stone);letter-spacing:.1em;font-variation-settings:"MONO" 1000,"wght" 500}
.fam-foot{margin-top:var(--u);display:flex;flex-wrap:wrap;gap:var(--gut) var(--pitch);align-items:center;color:var(--mist);line-height:var(--u)}
.fam-foot b{color:var(--paper);font-variation-settings:"MONO" 1000,"wght" 700;font-size:calc(var(--u)*.9)}
@media(max-width:860px){.subs{grid-template-columns:1fr}}

/* ---------- glyphs: una cella per glifo ---------- */
.glyphs{background:var(--deep)}
.gl-tabs{display:flex;gap:var(--gut);flex-wrap:wrap;margin-bottom:var(--u)}
.gl-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));column-gap:var(--gut);grid-auto-rows:var(--cell)}
.gl-grid span{width:var(--cell);height:var(--cell);display:grid;place-items:center;font-size:calc(var(--u)*.62);background:#07303d;border-radius:2px;color:var(--paper);transition:background .5s var(--soft),color .5s,font-variation-settings .6s var(--soft),transform .5s var(--soft);cursor:default}
.gl-grid span:hover{transform:scale(1.15)}
.gl-grid span:hover{background:var(--red);font-variation-settings:"MONO" 1000,"wght" 800}
.gl-stats{display:flex;flex-wrap:wrap;gap:var(--gut) var(--pitch);margin-bottom:var(--u);color:var(--mist);line-height:var(--u)}
.gl-stats b{display:block;font-size:calc(var(--u)*1.2);line-height:calc(var(--u)*1.5);color:var(--paper);font-variation-settings:"MONO" 1000,"wght" 700}
.feat{margin-top:var(--u);display:flex;flex-wrap:wrap;gap:var(--gut)}
.feat span{font-size:calc(var(--u)*.38);height:var(--u);display:inline-flex;align-items:center;letter-spacing:.1em;text-transform:uppercase;border:1px solid #1e4150;padding-inline:var(--gut);border-radius:2px;color:var(--mist);font-variation-settings:"MONO" 1000,"wght" 500}

/* ---------- buy ---------- */
.buy{background:var(--red);color:var(--paper)}
.buy h2{font-size:calc(var(--u)*3);line-height:calc(var(--u)*3);font-variation-settings:"MONO" 0,"wght" 750;letter-spacing:-.01em}
.buy h2 span{display:block;font-variation-settings:"MONO" 1000,"wght" 300;font-size:calc(var(--u)*1.3);line-height:calc(var(--u)*1.5);margin-top:calc(var(--u)*.5)}
@media(max-width:700px){.buy h2{font-size:calc(var(--u)*2);line-height:calc(var(--u)*2)}}
.price{border-top:2px solid var(--paper)}
.price>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gut);min-height:calc(var(--u)*2);padding-block:calc(var(--u)*.5);border-bottom:2px solid var(--paper)}
.price b{font-size:calc(var(--u)*.9);font-variation-settings:"MONO" 1000,"wght" 700}
.buy .btn{color:var(--paper)}.buy .btn.solid{background:var(--ink);border-color:var(--ink)}
.buy .btn:hover{background:var(--paper);color:var(--red);border-color:var(--paper)}
.buy .lic{margin-top:calc(var(--u)*.5);font-size:calc(var(--u)*.4);line-height:var(--u);letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 500;opacity:.85}
.buy .acts{display:flex;gap:var(--gut);flex-wrap:wrap;margin-top:var(--u)}

/* ---------- footer ---------- */
footer{background:var(--deep)}
footer .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cell) var(--gut);width:var(--gw);max-width:100%;margin-inline:auto;padding:calc(var(--u)*2) var(--gut) calc(var(--u)*3) 0;font-size:calc(var(--u)*.5);line-height:var(--u)}
footer h4{color:var(--red);font-variation-settings:"MONO" 1000,"wght" 700;font-size:calc(var(--u)*.42);line-height:var(--u);letter-spacing:.1em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0}
footer a{text-decoration:underline;text-decoration-color:#1e4150}footer a:hover{color:var(--red)}
@media(max-width:860px){footer .in{grid-template-columns:1fr 1fr;gap:var(--u) var(--gut)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- il sentiero del pennello ---------- */
.brush{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
.brush .ink{fill:none;stroke:var(--red);stroke-linecap:round;stroke-linejoin:round;filter:url(#sumi)}
.brush .dry{fill:none;stroke:var(--red);stroke-linecap:round;stroke-linejoin:round;opacity:.45;filter:url(#sumi)}
.brush .drop{fill:var(--red);filter:url(#sumi)}
.brush .tip{filter:drop-shadow(0 0 16px rgba(237,28,37,.8))}
.g{isolation:auto}
@media(prefers-reduced-motion:reduce){.brush .ink,.brush .dry{stroke-dashoffset:0!important}}

/* ---------- rivelazione: gli elementi entrano come apparizioni ---------- */
.rv{opacity:0;transform:translateY(calc(var(--u)*1.2));transition:opacity 1.1s var(--soft),transform 1.1s var(--soft);transition-delay:calc(var(--i,0)*.12s)}
.rv.rv-in{opacity:1;transform:none}
.rv.rv-l{transform:translateX(calc(var(--u)*-1.5))}.rv.rv-r{transform:translateX(calc(var(--u)*1.5))}
.rv.rv-l.rv-in,.rv.rv-r.rv-in{transform:none}
.hero .hero-in>*{animation:rise 1.6s var(--soft) both}
.hero .hero-in>h1{animation:rise 1.6s var(--soft) both,henge 14s ease-in-out 1.6s infinite}
.hero .hero-in>h1.hand{animation:none}
.hero .hero-in>h1.rest{animation:none;transition:font-variation-settings 1.2s var(--soft)}
.hero .tag{animation-delay:.25s}.hero .readout{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--u)*1.2))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- varianti delle illustrazioni: sumi (SVG), glyph (lettere), original ---------- */
.pic .art{position:absolute;inset:8%;display:none}
.pic img{display:none}
[data-art="original"] .pic img{display:block}
[data-art="sumi"] .pic .sumi{display:block}
[data-art="glyph"] .pic .glyph{display:flex}
.pic .sumi{width:84%;height:84%}
.pic .glyph{margin:0;align-items:center;justify-content:center;font:inherit;font-size:calc(var(--u)*1.1);line-height:1.1;font-variation-settings:"MONO" 1000,"wght" 600;color:var(--ink);white-space:pre}
.pic .glyph.b{font-variation-settings:"MONO" 1000,"wght" 800}
.obake figure .art{display:none;margin-inline:auto}
.obake figure img{display:none}
[data-art="original"] .obake figure img{display:block}
[data-art="sumi"] .obake figure .sumi.big{display:block;width:calc(var(--pitch)*6);max-width:100%;animation:breathe 7s ease-in-out infinite}
[data-art="glyph"] .obake figure .glyph.big{display:flex;justify-content:center;font:inherit;font-size:calc(var(--u)*2);line-height:1.1;font-variation-settings:"MONO" 1000,"wght" 600;white-space:pre;color:var(--ink);margin:0;animation:breathe 7s ease-in-out infinite}
:not([data-art="original"]) .torii,:not([data-art="original"]) .banner{display:none}
/* vita nelle sagome */
.sumi .eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.sumi .tail{transform-box:fill-box;transform-origin:left bottom;animation:wag 3s ease-in-out infinite}.sumi .tail.t2{animation-delay:-1.2s}
.sumi .neck{animation:none}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes wag{50%{transform:rotate(8deg)}}
.yokai:hover .sumi{animation:wobble 1.6s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(-3deg) translateY(-4px)}}
.art-switch{grid-column:2;justify-self:end}
@media(max-width:700px){.art-switch{grid-column:1;justify-self:start}}

/* campione vivo della feature in ogni scheda */
.yokai .sample{margin:calc(var(--u)*.5) calc(var(--pitch)/2) 0;padding:calc(var(--u)*.3) calc(var(--gut)*1.5);border:1px solid var(--mist);border-radius:3px;font-size:calc(var(--u)*.95);line-height:1.2;color:var(--ink);font-variation-settings:"MONO" 1000,"wght" 500;transition:font-feature-settings .4s,font-variation-settings 1s var(--soft)}
.yokai .sample.sets{font-feature-settings:normal}
.yokai:hover .sample.sets{font-feature-settings:"ss01","ss02","ss03","ss04","ss05","ss09","ss10"}
.yokai:hover .sample[style*="wght\' 100"]{font-variation-settings:"MONO" 0,"wght" 800}

/* ---------- kakeru: la scena ancorata ---------- */
.kakeru{height:320vh;background:var(--ink)}
.kk-sticky{position:sticky;top:calc(var(--u)*2);height:calc(100vh - var(--u)*2);height:calc(100dvh - var(--u)*2);display:grid;align-content:center;background:var(--ink)}
.kk-head{display:flex;align-items:baseline;gap:var(--pitch);margin-bottom:var(--u);flex-wrap:wrap}
.kk-head .n{color:var(--red);font-size:calc(var(--u)*.42);letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"MONO" 1000,"wght" 600}
.kk-head .kana{color:var(--red);font-size:calc(var(--u)*.9)}
.kk-head .kk-t{color:var(--mist);font-size:calc(var(--u)*.5);font-variation-settings:"MONO" 1000,"wght" 400}
.kk-stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);width:var(--gwc);max-width:100%;align-items:center}
.kk-letter,.kk-kana{display:grid;place-items:center;gap:var(--u);text-align:center}
.kk-letter span{font-size:calc(var(--cell)*7);line-height:1;font-variation-settings:"MONO" 0,"wght" 400;color:var(--paper);transition:font-variation-settings .2s linear}
.kk-letter small,.kk-kana small{font-size:calc(var(--u)*.42);line-height:var(--u);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-variation-settings:"MONO" 1000,"wght" 500}
.kk-kana small b{color:var(--red)}
.kk-kana svg{width:calc(var(--cell)*7);height:calc(var(--cell)*7);overflow:visible}
.kk-kana{overflow:visible}
.kk-ghost{fill:none;stroke:var(--mist);stroke-width:4;stroke-dasharray:12 14;opacity:.35}
.kk-ink{fill:none;stroke:var(--red);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:url(#sumi)}
.kk-dry{fill:none;stroke:var(--red);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.45;stroke-dasharray:2 8 14 5 3 11;filter:url(#sumi)}
.kk-tip{filter:drop-shadow(0 0 10px rgba(237,28,37,.8))}
@media(max-width:860px){.kakeru{height:260vh}.kk-stage{grid-template-columns:1fr 1fr;gap:var(--gut)}.kk-letter span{font-size:calc(var(--cell)*4)}.kk-kana svg{width:calc(var(--cell)*4);height:calc(var(--cell)*4)}.kk-ink{stroke-width:9}.kk-dry{stroke-width:13}}

/* a disegno finito, sopra il segno rosso appare il glifo あ disegnato per Bakemono */
.kk-glyph{fill:var(--paper)}
.kk-glyph-wrap{opacity:0;transform:scale(.92);transform-box:fill-box;transform-origin:center;transition:opacity 1.1s var(--soft),transform 1.1s var(--soft);filter:drop-shadow(0 0 18px rgba(0,20,28,.6))}
.kk-glyph-wrap.done{opacity:1;transform:none}

/* copertina: Roman / Italic */
.hero-style{display:inline-flex;gap:4px;margin-top:var(--u)}
.hero h1{transition:font-style 0s}
.hero h1.italic{font-style:italic}

/* testata: quando il titolo passa a Italic, blu e bianco si scambiano */
.hero{transition:background-color 1s var(--soft),color 1s var(--soft)}
.hero.inv{background:var(--paper);color:var(--ink);--genko:var(--genko-ink);--genko-a:.12}
.hero.inv .tag,.hero.inv .readout,.hero.inv .hint,.hero.inv .hero-help{color:#4f6b76}
.hero.inv .tag b{color:var(--ink)}
.hero.inv .readout{border-color:#b9c6ca}
.hero.inv .chip{border-color:#8a9497;color:var(--ink)}
.hero.inv .chip[aria-pressed=true]{background:var(--red);border-color:var(--red);color:var(--paper)}
.hero.inv .mist{opacity:.5}
.hero .hero-in>h1{transition:color 1s var(--soft)}

/* su telefono la riga tipografica non segue più la mezza cella: resta leggibile */
@media(max-width:700px){:root{--u:22px}body{font-size:15px}.caps,.stops,.chip,.ctl label,.kk-head .n,.shead .n,.yokai .sub,.kk-letter small,.kk-kana small,.gl-stats,.fam-foot,footer .in{font-size:max(11px,1em)}footer .in{font-size:14px}.yokai .desc{font-size:14px}.obake .body,.monow .desc p,.tsuku .desc p{font-size:15px}}

/* lente del charset: la lettera sotto il mouse si ingrandisce in una scheda che la segue */
.gl-wrap{position:relative}
.gl-grid span.is-hot{background:var(--red);color:var(--paper);transform:scale(1.25);z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.gl-lens{position:absolute;left:0;top:0;width:calc(var(--pitch)*4);pointer-events:none;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:4px;box-shadow:var(--gut) var(--gut) 0 var(--red);padding:calc(var(--u)*.5) var(--gut);text-align:center;opacity:0;transform:translate(-50%,-105%) scale(.9);transition:opacity .35s var(--soft),transform .45s var(--soft);z-index:5}
.gl-lens.on{opacity:1;transform:translate(-50%,-105%) scale(1)}
.gl-lens .big{font-size:calc(var(--cell)*3);line-height:1;font-variation-settings:"MONO" 0,"wght" 500;transition:font-variation-settings .6s var(--soft)}
.gl-lens .three{display:flex;justify-content:center;gap:var(--gut);margin-top:calc(var(--u)*.4);font-size:calc(var(--u)*1.2);line-height:1;color:#2c4a55}
.gl-lens .meta{margin-top:calc(var(--u)*.3);font-size:calc(var(--u)*.38);letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-variation-settings:"MONO" 1000,"wght" 600}
@media(hover:none){.gl-lens{display:none}}