/* ═══════════════════════════════════════════════════════════════════════════
   INK & RED — shared visual layer (loaded LAST on every page)
   Direction: the manga's own language. Black-and-white inked panels, screentone, a saturated
   blood red, warm paper, dry-brush strokes behind heavy condensed type. Pages are scenes, not
   stacks of boxes: art bleeds, type is huge, sections are separated by torn paper and tone —
   not borders. Boxes survive only where they are real UI (modals, inputs).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --f-serif:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif;
  --ink:#0B0708;--ink-0:#0B0708;--ink-2:#120B0C;--blood:#B3141C;--blood-hot:#E0252D;--blood-deep:#6E0C12;
  --paper:#EFE5D2;--paper-2:#E3D5BB;--bone:#F6EEDF;--gold:#D9A93F;--olive:#6E7541;
  --red:var(--blood);--red-hot:var(--blood-hot);--red-deep:var(--blood-deep);
  --rail:0px;--pad:clamp(1.25rem,5.5vw,5.5rem);
  --brush-a:url('/assets/ink/brush-a.png');--brush-b:url('/assets/ink/brush-b.png');--brush-s:url('/assets/ink/brush-s.png');--brush-u:url('/assets/ink/brush-u.png');--brush-v:url('/assets/ink/brush-v.png');
  --torn-top:url('/assets/ink/torn-top.png');--torn-bottom:url('/assets/ink/torn-bottom.png');--splat:url('/assets/ink/splat.png');
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
@media(min-width:1100px){:root{--rail:84px}}

:root[data-theme="dark"]{
  --bg:#0B0708;--bg2:#100A0B;--surface:#140D0F;--surface2:#1B1214;--surface3:#241719;
  --text:#F1E7D6;--text-dim:#CFC2AE;--text-muted:#9D8F7D;--accent:#FF5348;--accent-fill:#B3141C;--accent2:#FF9A4A;
  --line:rgba(241,231,214,.12);--line-strong:rgba(241,231,214,.32);--hard:#000;--nav-bg:#0B0708;
  --inv-bg:#EFE5D2;--inv-fg:#17100E;--inv-dim:#3E322B;--inv-mut:#6E5F52;--inv-acc:#B3141C;--inv-surface:#E3D5BB;
  --brush-bg:var(--paper);--brush-fg:#0B0708;--grain-op:.10;--grain-blend:screen;
}
:root[data-theme="light"]{
  --bg:#EFE5D2;--bg2:#E8DCC4;--surface:#E3D5BB;--surface2:#DACBAE;--surface3:#D0BF9F;
  --text:#17100E;--text-dim:#3E322B;--text-muted:#6E5F52;--accent:#B3141C;--accent-fill:#B3141C;--accent2:#8E0F18;
  --line:rgba(23,16,14,.14);--line-strong:rgba(23,16,14,.5);--hard:#17100E;--nav-bg:#0B0708;
  --inv-bg:#E6D9BF;--inv-fg:#17100E;--inv-dim:#3E322B;--inv-mut:#6E5F52;--inv-acc:#B3141C;--inv-surface:#D9C9AA;
  --brush-bg:var(--blood);--brush-fg:#FFF4E4;--grain-op:.5;--grain-blend:overlay;
}
/* a scope that flips the palette (paper band on a dark page, ink band on a light page) */
.inv{--bg:var(--inv-bg);--text:var(--inv-fg);--text-dim:var(--inv-dim);--text-muted:var(--inv-mut);--accent:var(--inv-acc);--surface:var(--inv-surface);
  --line:color-mix(in srgb,var(--inv-fg) 16%,transparent);--line-strong:color-mix(in srgb,var(--inv-fg) 48%,transparent);--hard:var(--inv-fg);
  background:var(--bg);color:var(--text)}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);line-height:1.75;-webkit-font-smoothing:antialiased;padding-left:var(--rail)}
body::before{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;background:url('/assets/ink/grain.png') 0 0/180px;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend)}
body::after{display:none}
::selection{background:var(--blood);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--blood);border:2px solid var(--bg2)}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ── type ─────────────────────────────────────────────────────────────────── */
.skew{display:inline-block;transform:skewX(-7deg)}
h1,h2,h3{font-weight:400}
.eyebrow{font:700 .78rem/1 var(--f-label);letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}

/* ── brush utilities ─────────────────────────────────────────────────────── */
.brush{position:relative;isolation:isolate;display:inline-block}
.brush::before{content:'';position:absolute;z-index:-1;inset:-.12em -.55em -.08em -.4em;background:var(--brush-bg);-webkit-mask:var(--brush-a) 0 0/100% 100% no-repeat;mask:var(--brush-a) 0 0/100% 100% no-repeat}
.brush-red::before{background:var(--blood)}
.brush-u{position:relative}
.brush-u::after{content:'';position:absolute;left:-.1em;right:-.3em;bottom:-.28em;height:.5em;background:var(--blood);-webkit-mask:var(--brush-u) 0 0/100% 100% no-repeat;mask:var(--brush-u) 0 0/100% 100% no-repeat;transform-origin:left;transition:transform .35s var(--ease-out)}

/* ── buttons: text + brush, not boxes ────────────────────────────────────── */
.btn,.btn-p,.btn-dc,.btn-sm{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.7rem;min-height:48px;padding:.75rem 1.7rem;cursor:pointer;
  font:400 1.15rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:none;border:0;box-shadow:none;transition:color .25s}
.btn::before,.gk-btn::before{content:'';position:absolute;inset:-.1em -.2em;z-index:-1;background:none;border:0;box-shadow:none;transform:none;
  -webkit-mask:var(--brush-s) 0 0/100% 100% no-repeat;mask:var(--brush-s) 0 0/100% 100% no-repeat;background:var(--text);opacity:.14;transition:opacity .2s,background .2s}
.btn:hover{--b-bg:none;--b-fg:var(--text);color:#FFF4E4;transform:none}
.btn:hover::before{opacity:1;background:var(--blood);transform:none;box-shadow:none}
.btn:active::before{transform:none;box-shadow:none}
.btn-p,.btn.btn-p{color:#FFF4E4}
.btn-p::before{background:var(--blood);opacity:1}
.btn-p:hover::before{background:var(--blood-deep)}
.btn-dc:hover::before{background:#4752C4}
.btn:focus-visible::before{opacity:1;background:var(--blood)}
.btn:focus-visible{color:#FFF4E4}
.btn-dc{color:#fff}.btn-dc::before{background:var(--blurple,#5865F2);opacity:1}
.btn-sm{min-height:40px;padding:.55rem 1.2rem;font-size:1rem}
.btn::after{content:'↗';font:700 .8em/1 var(--f-label);opacity:.7}
.btn.no-arrow::after,.btn-sm::after,.btn-dc::after,button.btn::after{content:none}
.btn svg{width:1.1em;height:1.1em}

/* ── form fields: underline only ─────────────────────────────────────────── */
input[type="text"],input[type="number"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="datetime-local"],textarea,select{
  background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);border:0;border-bottom:2px solid var(--line-strong);border-radius:0;box-shadow:none;padding:.8rem .9rem;font:400 1rem/1.7 var(--f-body);transition:border-color .15s,background .15s}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--blood);background:color-mix(in srgb,var(--blood) 8%,transparent);box-shadow:none}
::placeholder{color:var(--text-muted);opacity:.85}

/* ── torn edges ──────────────────────────────────────────────────────────── */
.torn-t{position:relative}
.torn-t::before{content:'';position:absolute;left:0;right:0;top:-59px;height:60px;background:var(--bg);-webkit-mask:var(--torn-top) 0 0/100% 100% no-repeat;mask:var(--torn-top) 0 0/100% 100% no-repeat;pointer-events:none}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}