/* ════════════════════════════════════════════════════════════════
   RISA'S HYAKKAOU
   Lacquer black · Hyakkaou crimson · champagne gold · lily ivory
   ════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0a0608;
  --ink-2: #120a0d;
  --ink-3: #1a0f13;
  --ink-4: #241519;
  --crimson: #b3122b;
  --crimson-hi: #e3213f;
  --blood: #5a0a16;
  --gold: #d8b46a;
  --gold-hi: #f3dfa8;
  --gold-lo: #8c6a2c;
  --ivory: #f4ece0;
  --paper: #f6efe3;
  --muted: #bcac9d;
  --dim: #85766c;
  --emerald: #34b885;
  --silver: #cfd5e3;
  --line: rgba(216, 180, 106, .22);
  --line-strong: rgba(216, 180, 106, .5);

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --f-kanji: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--ivory);
  font: 400 17px/1.7 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Bodoni Moda draws its hairlines (e crossbar, dashes, ×) at near-zero width from about
   opsz 30 up, so they vanish at display sizes. Pin a text optical size that keeps them. */
body { font-variation-settings: "opsz" 18; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gold-hi); text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--crimson); color: #fff; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── copy protection (deterrent) ─────────────────────────────── */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, video { -webkit-user-drag: none; }

/* ── atmosphere ──────────────────────────────────────────────── */
.bg { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
.bg-glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(179, 18, 43, .30), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(216, 180, 106, .10), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(90, 10, 22, .25), transparent 80%);
}
.bg-lattice {
  position: absolute; inset: 0; opacity: .05;
  background-image:
    linear-gradient(45deg, var(--gold) 1px, transparent 1px),
    linear-gradient(-45deg, var(--gold) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%);
}
.bg-grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#petals { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#cursor-glow {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; z-index: -2; opacity: 0;
  background: radial-gradient(circle, rgba(227, 33, 63, .16), rgba(227, 33, 63, .05) 40%, transparent 70%);
  transition: opacity .6s;
  will-change: transform;
}
body.has-pointer #cursor-glow { opacity: 1; }

.thread { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.thread span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blood), var(--crimson-hi) 60%, var(--gold-hi)); box-shadow: 0 0 12px rgba(227, 33, 63, .8); }

.rail {
  position: fixed; top: 50%; z-index: -1; pointer-events: none;
  writing-mode: vertical-rl; font-family: var(--f-kanji); font-weight: 800;
  font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .6em; color: rgba(216, 180, 106, .22);
  transform: translateY(-50%); will-change: transform;
}
.rail-left { left: 14px; }
.rail-right { right: 14px; color: rgba(227, 33, 63, .28); }
@media (max-width: 900px) { .rail { display: none; } }

/* first-visit curtain */
.curtain {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #2a0710, #0a0608 70%);
  animation: curtain-up 1s var(--ease) 1.25s forwards;
}
.curtain-inner { text-align: center; }
.curtain-kanji {
  display: block; font-family: var(--f-kanji); font-weight: 800; font-size: clamp(54px, 11vw, 120px);
  color: transparent; -webkit-text-stroke: 1.5px var(--crimson-hi); letter-spacing: .08em;
  animation: ink-in 1.1s var(--ease) forwards;
}
.curtain-sub { display: block; margin-top: 10px; font-family: var(--f-caps); letter-spacing: .5em; font-size: 12px; color: var(--gold); opacity: 0; animation: fade .6s .5s forwards; }
@keyframes ink-in { 0% { opacity: 0; letter-spacing: .5em; filter: blur(8px); } 60% { color: transparent; } 100% { opacity: 1; letter-spacing: .08em; filter: blur(0); color: var(--crimson-hi); } }
@keyframes curtain-up { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes fade { to { opacity: 1; } }
html.seen .curtain { display: none; }

/* ── type ────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.kanji { font-family: var(--f-kanji); font-weight: 800; }
.caps { font-family: var(--f-caps); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 500; }
.kicker {
  display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-caps); text-transform: uppercase;
  letter-spacing: .3em; font-size: 12px; color: var(--gold); margin-bottom: 18px;
}
.kicker::before, .kicker::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker::after { transform: scaleX(-1); }
.em-red { font-style: italic; color: var(--crimson-hi); font-weight: 500; }
.em-gold { font-style: italic; color: var(--gold-hi); font-weight: 500; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 60ch; font-weight: 300; }
.quote {
  font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3;
  color: var(--ivory); max-width: 30ch; margin: 0;
}
.quote::before { content: "“"; color: var(--crimson-hi); }
.quote::after { content: "”"; color: var(--crimson-hi); }
.cite { display: block; margin-top: 14px; font-family: var(--f-caps); letter-spacing: .25em; font-size: 11px; color: var(--gold); text-transform: uppercase; font-style: normal; }

/* ── nav ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: background .4s, box-shadow .4s, transform .4s var(--ease);
}
.nav.is-scrolled { background: rgba(10, 6, 8, .78); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ivory); margin-right: auto; }
.brand-chip { width: 34px; height: 34px; transition: transform .8s var(--ease); }
.brand:hover .brand-chip { transform: rotate(180deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--f-caps); font-weight: 700; letter-spacing: .3em; font-size: 15px; }
.brand-sub { font-size: 10.5px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.nav-links ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px;
  font-family: var(--f-caps); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ivory); background: rgba(216, 180, 106, .08); }
.nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; background: var(--crimson-hi);
  transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 10px var(--crimson-hi);
}
.brand-name, .brand-sub, .nav-links a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1380px) {
  .nav-links ul { gap: 0; }
  .nav-links a { padding: 8px 8px; letter-spacing: .1em; }
}
@media (min-width: 1081px) and (max-width: 1240px) { .brand-sub { display: none; } }
.nav-suit { font-size: 11px; opacity: .8; }
.suit-heart, .suit-diamond { color: var(--crimson-hi); }
.suit-spade, .suit-club { color: var(--silver); }
.suit-joker { color: var(--gold); }

.hud-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(216, 180, 106, .14), rgba(216, 180, 106, .04)); border: 1px solid var(--line-strong);
  transition: transform .2s, box-shadow .3s;
}
.hud-pill:hover { box-shadow: 0 0 0 4px rgba(216, 180, 106, .1), 0 6px 24px rgba(0, 0, 0, .4); }
.hud-chip { width: 26px; height: 26px; }
.hud-pill.bump .hud-chip { animation: chip-spin .7s var(--ease); }
.hud-num { font-family: var(--f-caps); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--gold-hi); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
@keyframes chip-spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(720deg); } }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ivory); transition: transform .3s var(--ease), top .3s; }
.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1; display: grid; place-items: center; padding: 90px 24px 40px;
    background: radial-gradient(circle at 50% 20%, #2a0710, rgba(10, 6, 8, .98) 70%);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .nav-links ul { flex-direction: column; gap: 6px; text-align: center; }
  .nav-links a { font-size: 22px; padding: 10px 20px; justify-content: center; font-family: var(--f-display); text-transform: none; letter-spacing: 0; }
  .nav-links li { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease); }
  body.menu-open .nav-links { opacity: 1; visibility: visible; }
  body.menu-open .nav-links li { opacity: 1; transform: none; }
  body.menu-open .nav-links li:nth-child(n) { transition-delay: calc(var(--i, 0) * 40ms + 80ms); }
  body.menu-open { overflow: hidden; }
  .brand-sub { display: none; }
}

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  padding: 14px 26px; border-radius: 999px; border: 1px solid rgba(243, 223, 168, .5); cursor: pointer;
  background: linear-gradient(180deg, #d0203c, #8e0d22); color: #fff;
  font-family: var(--f-caps); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(227, 33, 63, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ease), box-shadow .3s;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg);
  transition: left .7s var(--ease);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(227, 33, 63, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--gold-hi); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: rgba(216, 180, 106, .1); color: var(--ivory); box-shadow: none; }
.btn-gold { background: linear-gradient(180deg, #f3dfa8, #b8903f); color: #1a0d05; border-color: #f3dfa8; box-shadow: 0 10px 30px -12px rgba(216, 180, 106, .8); }
.btn-gold:hover { color: #000; }
.btn-sm { padding: 10px 18px; font-size: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── sections ────────────────────────────────────────────────── */
main { position: relative; }
.section { position: relative; padding: clamp(70px, 9vw, 120px) 0; }
.section-tight { padding: clamp(56px, 7vw, 90px) 0; }
.section-head { position: relative; margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(36px, 5.4vw, 68px); font-weight: 500; }
.section-head p { margin-top: 18px; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.watermark {
  position: absolute; z-index: -1; pointer-events: none; font-family: var(--f-kanji); font-weight: 800; line-height: .9;
  font-size: clamp(140px, 22vw, 320px); color: transparent; -webkit-text-stroke: 1px rgba(216, 180, 106, .12);
  will-change: transform;
}
.watermark.v { writing-mode: vertical-rl; }
.divider { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold); margin: 0 auto; max-width: 420px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.divider::after { transform: scaleX(-1); }
.divider svg { width: 26px; height: 26px; color: var(--ivory); }

.panel {
  position: relative; background: linear-gradient(180deg, rgba(36, 21, 25, .82), rgba(18, 10, 13, .9));
  border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--gold); pointer-events: none;
}
.panel::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* page hero (inner pages) */
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(60px, 9vw, 120px)) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.page-hero h1 { font-size: clamp(48px, 8.4vw, 118px); font-weight: 500; line-height: .98; }
.page-hero .lede { margin-top: 24px; }
.page-hero .watermark { right: -2vw; top: 60px; }
.page-hero .title-jp { display: block; font-family: var(--f-kanji); font-weight: 800; font-size: .32em; letter-spacing: .3em; color: var(--crimson-hi); margin-bottom: 14px; }

/* ── playing cards ───────────────────────────────────────────── */
.pcard {
  --w: 210px; position: relative; width: var(--w); aspect-ratio: 5 / 7; perspective: 1200px; flex: none;
  font-size: calc(var(--w) / 210 * 16px);
}
.pcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.pcard.is-flipped .pcard-inner { transform: rotateY(180deg); }
.pcard-face, .pcard-back {
  position: absolute; inset: 0; border-radius: 6%/4.3%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 40px -18px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .4);
}
.pcard-face {
  background:
    radial-gradient(120% 80% at 50% 0%, #fffaf0, var(--paper) 60%, #e9dcc6);
  color: #1b0f12;
}
.pcard-face::before { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(140, 106, 44, .55); border-radius: 4%; pointer-events: none; }
.pcard-back { transform: rotateY(180deg); background: #7d0d1f; }
.pcard-back svg { width: 100%; height: 100%; }
.pcard-back.text-back { display: grid; place-items: center; padding: 14%; text-align: center; background: linear-gradient(160deg, #2a0b13, #12070a); border: 1px solid var(--line-strong); color: var(--ivory); }
.pidx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .95; font-family: var(--f-display); font-weight: 700; font-size: 1.6em; }
.pidx small { font-size: .78em; }
.pidx.tl { top: 7.5%; left: 8.5%; }
.pidx.br { bottom: 7.5%; right: 8.5%; transform: rotate(180deg); }
.pcard .red { color: #b3122b; }
.pcard .blk { color: #1b0f12; }
.pcard .gld { color: #8c6a2c; }
.pcenter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16%; }
.pkanji { font-family: var(--f-kanji); font-weight: 800; font-size: 4.2em; line-height: 1; }
.ptitle { margin-top: .6em; font-family: var(--f-caps); font-weight: 700; font-size: .78em; letter-spacing: .18em; text-transform: uppercase; }
.pblurb { margin-top: .5em; font-size: .7em; line-height: 1.4; color: #5b4a44; }

/* holographic sheen for tilt cards */
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .6s var(--ease); }
.sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .7), transparent 45%),
              linear-gradient(115deg, transparent 30%, rgba(243, 223, 168, .35) 45%, rgba(227, 33, 63, .25) 55%, transparent 70%); }
[data-tilt]:hover .sheen { opacity: 1; }

/* ── HOME ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 90px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero-eyebrow { font-family: var(--f-kanji); font-weight: 600; color: var(--gold); letter-spacing: .3em; font-size: 14px; display: flex; gap: 14px; align-items: center; margin-bottom: 26px; flex-wrap: wrap; }
.hero-eyebrow .caps { color: var(--muted); letter-spacing: .26em; font-size: 11px; }
.hero h1 { font-size: clamp(54px, 8.6vw, 132px); font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
html:not(.seen) .hero h1 .line > span { animation-delay: calc(1.4s + var(--d, 0s)); }
@keyframes rise { to { transform: none; } }
.hero .lede { margin: 28px 0 36px; }
.hero-art { position: relative; display: grid; place-items: center; }
.hero-card { --w: min(400px, 78vw); position: relative; }
.hero-card .pcard-face { background: #0f080b; }
.hero-card .pcard-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero-card .pcard-face::before { inset: 4%; border-color: rgba(243, 223, 168, .7); z-index: 2; }
.hero-card .pcard-face::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 8, .85)); }
.hero-card .pidx { z-index: 3; color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.hero-card .hero-name { position: absolute; z-index: 3; left: 0; right: 0; bottom: 9%; text-align: center; }
.hero-card .hero-name b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.4em; color: #fff; line-height: 1; }
.hero-card .hero-name span { font-family: var(--f-caps); font-size: .62em; letter-spacing: .32em; color: var(--gold-hi); text-transform: uppercase; }
.hero-card .pcard-back.text-back .quote { font-size: .78em; max-width: none; }
.hero-card-hint { margin-top: 18px; text-align: center; font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .3em; color: var(--dim); text-transform: uppercase; }
.hero-orbit { position: absolute; inset: -12%; border-radius: 50%; border: 1px dashed rgba(216, 180, 106, .18); animation: orbit 60s linear infinite; pointer-events: none; }
.hero-orbit::before, .hero-orbit::after { content: "♦"; position: absolute; color: var(--crimson-hi); font-size: 14px; }
.hero-orbit::before { top: -9px; left: 50%; }
.hero-orbit::after { bottom: -9px; left: 50%; content: "♠"; color: var(--gold); }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero .watermark { left: -3vw; top: 50%; transform: translateY(-50%); font-size: clamp(160px, 30vw, 420px); }
@media (max-width: 860px) {
  .hero { min-height: auto; padding-bottom: 70px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { margin-top: 10px; }
  .hero-card { --w: min(320px, 78vw); }
  .hero-scroll { display: none; }
}
@media (max-width: 600px) {
  .toast { min-width: 0; padding: 9px 14px 9px 9px; }
  .toast-chip { width: 26px; height: 26px; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--f-caps); font-size: 10px; letter-spacing: .4em; color: var(--dim); text-transform: uppercase; }
.hero-scroll i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* marquee */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, var(--blood), var(--crimson) 50%, var(--blood)); }
.marquee-track { display: flex; width: max-content; gap: 34px; padding: 18px 0; white-space: nowrap; will-change: transform; }
.marquee-track span { font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 3vw, 38px); color: #fff; }
.marquee-track span:nth-of-type(odd) { font-family: var(--f-kanji); font-style: normal; font-weight: 800; letter-spacing: .1em; }
.marquee-track i { font-style: normal; color: var(--gold-hi); align-self: center; font-size: 20px; }
.marquee-thin { background: transparent; }
.marquee-thin .marquee-track { padding: 12px 0; gap: 26px; }
.marquee-thin .marquee-track span { font-size: 18px; color: var(--muted); }
.marquee-thin .marquee-track span:nth-of-type(odd) { color: var(--gold); }
.marquee-thin .marquee-track i { font-size: 14px; color: var(--crimson-hi); }
.marquee.tilted { transform: rotate(-2deg) scale(1.04); margin: 30px 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* deck of pages */
.deck { position: relative; display: flex; justify-content: center; height: clamp(420px, 40vw, 520px); margin-top: 40px; }
.deck .pcard { --w: clamp(150px, 15vw, 200px); position: absolute; left: 50%; top: 40px; margin-left: calc(var(--w) / -2);
  transform-origin: 50% 260%;
  transform: translateY(-80px) rotate(0deg); opacity: 0;
  transition: transform 1s var(--ease), opacity .6s, filter .3s; transition-delay: calc(var(--i) * 70ms);
}
.deck.in .pcard { opacity: 1; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7.5deg)) translateY(0); }
.deck.in .pcard:hover { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7.5deg)) translateY(-60px) scale(1.08); transition-delay: 0s; z-index: 10; }
.deck .pcard a { position: absolute; inset: 0; color: inherit; border-radius: 6%/4.3%; }
.deck-hint { text-align: center; font-family: var(--f-caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 820px) {
  .deck { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; justify-items: center; }
  .deck .pcard { --w: min(44vw, 210px); position: relative; left: auto; top: auto; margin: 0; transform: translateY(40px); }
  .deck.in .pcard, .deck.in .pcard:hover { transform: none; }
}

/* pinned horizontal filmstrip */
.film { position: relative; }
.film-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
.film-head { padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto 34px; width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.film-head h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 500; }
.film-count { font-family: var(--f-caps); color: var(--gold); letter-spacing: .2em; font-size: 13px; }
.film-track { display: flex; gap: clamp(16px, 2.4vw, 32px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.film-item { position: relative; flex: none; width: clamp(220px, 24vw, 380px); aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--ink-3); cursor: zoom-in; padding: 0; }
.film-item:nth-child(even) { transform: translateY(40px); }
.film-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease); }
.film-item:hover img { transform: scale(1.02); }
.film-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; text-align: left; background: linear-gradient(transparent, rgba(10, 6, 8, .9)); font-family: var(--f-display); font-style: italic; font-size: 18px; }
.film-item .film-no { position: absolute; top: 12px; left: 14px; font-family: var(--f-caps); font-size: 11px; letter-spacing: .2em; color: var(--gold-hi); }
.film.is-static .film-pin { position: relative; height: auto; padding: 60px 0; }
.film.is-static .film-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
.film.is-static .film-item { scroll-snap-align: center; }
.film.is-static .film-item:nth-child(even) { transform: none; }

/* moon quote band */
.band { position: relative; min-height: 90vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.band-img { position: absolute; inset: -15% 0; z-index: -2; will-change: transform; }
.band-img img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(10, 6, 8, .35), rgba(10, 6, 8, .92)), linear-gradient(180deg, var(--ink), transparent 20%, transparent 80%, var(--ink)); }
.band-content { text-align: center; padding: 0 var(--gutter); }
.band .quote { margin: 0 auto; max-width: 22ch; font-size: clamp(30px, 4.6vw, 64px); }
.band .kicker { justify-content: center; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 30px 18px; }
.stat-num { font-family: var(--f-display); font-weight: 500; font-size: clamp(44px, 5vw, 70px); line-height: 1; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.stat-num small { font-size: .45em; color: var(--gold); }
.stat-label { margin-top: 12px; font-family: var(--f-caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* roles row */
.roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.role { position: relative; padding: 28px 20px 24px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(26, 15, 19, .6); overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
.role:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.role-kanji { font-family: var(--f-kanji); font-weight: 800; font-size: 54px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--crimson-hi); transition: color .4s; }
.role:hover .role-kanji { color: var(--crimson-hi); }
.role h3 { margin: 16px 0 8px; font-size: 22px; }
.role p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 1000px) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }

/* posts */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); color: var(--ivory); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.post-card:hover { color: var(--ivory); transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(227, 33, 63, .4); }
.post-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--ink-3); position: relative; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card-img img { transform: scale(1.06); }
.post-card-img .seal { position: absolute; right: 14px; bottom: -18px; }
.post-card-body { padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h3 { font-size: 25px; font-weight: 500; }
.post-card p { margin: 0; color: var(--muted); font-size: 15px; }
.post-meta { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: flex; gap: 10px; flex-wrap: wrap; }
.seal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e3213f, #7d0d1f 70%); box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .4); font-family: var(--f-kanji); font-weight: 800; color: #f3dfa8; font-size: 18px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* CTA counter */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 8vw, 100px) var(--gutter); border-radius: 26px; border: 1px solid var(--line-strong);
  background: radial-gradient(80% 120% at 50% 0%, rgba(227, 33, 63, .35), transparent 60%), linear-gradient(180deg, #1c0a10, #0d0609); }
.cta .big-num { font-family: var(--f-display); font-weight: 500; font-size: clamp(76px, 13vw, 180px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--gold-hi); font-variant-numeric: lining-nums tabular-nums; }
.cta h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 500; margin: 16px 0 12px; }
.cta p { color: var(--muted); max-width: 52ch; margin: 0 auto 30px; }
.cta .btn-row { justify-content: center; }

/* ── PATH ────────────────────────────────────────────────────── */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 50px; }
.summary .panel { text-align: center; padding: 26px 16px; }
@media (max-width: 820px) { .summary { grid-template-columns: repeat(2, 1fr); } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; padding: 8px; border-radius: 999px; background: rgba(10, 6, 8, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.filter { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: background .25s, color .25s; }
.filter:hover { color: var(--ivory); }
.filter[aria-pressed="true"] { background: var(--crimson); color: #fff; box-shadow: 0 6px 20px -8px rgba(227, 33, 63, .8); }
.filter .n { opacity: .6; margin-left: 4px; }

.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
.slip { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 21, 25, .9), rgba(18, 10, 13, .95)); transition: transform .5s var(--ease), border-color .3s, opacity .4s; }
.slip:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.slip.is-hidden { display: none; }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--crimson), var(--gold)); opacity: .8; }
.slip-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.slip-kind { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); display: flex; gap: 8px; align-items: center; }
.slip-kind b { font-size: 15px; }
.slip-year { font-family: var(--f-display); font-style: italic; color: var(--dim); }
.slip h3 { font-size: 26px; font-weight: 500; line-height: 1.12; }
.slip-sub { margin: -8px 0 0; color: var(--muted); font-size: 14.5px; }
.slip-img { margin: 0 -24px; aspect-ratio: 16/8; overflow: hidden; }
.slip-img img { width: 100%; height: 100%; object-fit: cover; }
.bar { position: relative; height: 6px; border-radius: 6px; background: rgba(216, 180, 106, .12); overflow: hidden; }
.bar span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); border-radius: inherit; background: linear-gradient(90deg, var(--crimson), var(--crimson-hi) 60%, var(--gold-hi)); transition: transform 1.6s var(--ease) .2s; box-shadow: 0 0 12px rgba(227, 33, 63, .5); }
.in .bar span, .bar.in span { transform: scaleX(var(--p, 0)); }
.bar-row { display: flex; justify-content: space-between; font-family: var(--f-caps); font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
.bar-row b { color: var(--ivory); font-weight: 700; }
.slip-fav { font-size: 14.5px; color: var(--muted); margin: 0; }
.slip-fav b { color: var(--gold-hi); font-weight: 500; font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.slip-note { font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--ivory); margin: 0; border-left: 2px solid var(--crimson-hi); padding-left: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.slip-link { font-family: var(--f-caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

.stamp {
  flex: none; font-family: var(--f-caps); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 10px; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.st-finished { color: var(--gold-hi); background: rgba(216, 180, 106, .08); }
.st-ongoing { color: var(--crimson-hi); background: rgba(227, 33, 63, .1); animation: pulse 2.4s ease-in-out infinite; }
.st-not-started { color: var(--dim); }
.st-folded { color: var(--silver); opacity: .7; text-decoration: line-through; }
.st-waiting { color: var(--emerald); background: rgba(52, 184, 133, .08); }
.st-idea { color: var(--silver); }
.st-planning { color: var(--emerald); }
.st-in-progress { color: var(--crimson-hi); }
.st-done { color: var(--gold-hi); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(227, 33, 63, .12), inset 0 0 0 1px rgba(0, 0, 0, .3); } }

.music { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.track { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 10, 13, .8); color: var(--ivory); transition: border-color .3s, background .3s; }
.track:hover { color: #fff; border-color: var(--line-strong); background: rgba(90, 10, 22, .35); }
.vinyl { flex: none; width: 46px; height: 46px; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 2px, #1d1d1d 2px 4px); position: relative; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.vinyl::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 2px var(--gold) inset; }
.track:hover .vinyl { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.track b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 18px; }
.track small { color: var(--muted); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }

.restricted { position: relative; overflow: hidden; }
.restricted-body { filter: blur(9px); transition: filter .9s var(--ease); pointer-events: none; }
.restricted.is-open .restricted-body { filter: none; pointer-events: auto; }
.restricted-lock { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: repeating-linear-gradient(-45deg, rgba(10, 6, 8, .55) 0 18px, rgba(90, 10, 22, .45) 18px 36px); transition: opacity .6s, visibility .6s; }
.restricted.is-open .restricted-lock { opacity: 0; visibility: hidden; }
.restricted-lock .kanji { font-size: 42px; color: var(--crimson-hi); display: block; }
.restricted-lock p { color: var(--ivory); margin: 8px 0 16px; font-family: var(--f-caps); letter-spacing: .2em; font-size: 12px; text-transform: uppercase; }
.fields { display: grid; grid-template-columns: 160px 1fr; gap: 10px 20px; margin: 0; }
.fields dt { font-family: var(--f-caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.fields dd { margin: 0; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; gap: 2px; } .fields dd { margin-bottom: 10px; } }

/* ── RISA ────────────────────────────────────────────────────── */
.dossier { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.idphoto { position: relative; }
.idphoto .idphoto-frame { transform: rotate(-3deg); }
.idphoto-frame { position: relative; padding: 12px 12px 56px; background: var(--paper); border-radius: 4px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .95); }
.idphoto-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 15%; }
.idphoto-frame figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #3a2a26; font-family: var(--f-display); font-style: italic; font-size: 22px; }
.idphoto .clip { position: absolute; top: -16px; left: 50%; width: 70px; height: 26px; transform: translateX(-50%) rotate(3deg); background: linear-gradient(180deg, rgba(243, 223, 168, .8), rgba(184, 144, 63, .8)); border-radius: 3px; box-shadow: 0 4px 8px rgba(0, 0, 0, .4); }
.rubber { position: absolute; right: -18px; bottom: 70px; transform: rotate(-14deg); padding: 6px 14px; border: 3px double var(--crimson-hi); color: var(--crimson-hi); font-family: var(--f-kanji); font-weight: 800; font-size: 26px; letter-spacing: .1em; background: rgba(10, 6, 8, .2); mix-blend-mode: screen; opacity: 0; scale: 2.4; transition: opacity .3s .5s, scale .5s var(--ease-back) .5s; }
.in .rubber, .rubber.in { opacity: .92; scale: 1; }
.rubber small { display: block; font-family: var(--f-caps); font-size: 10px; letter-spacing: .3em; text-align: center; }
.file-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.file-fields > div { padding: 16px 4px; border-bottom: 1px solid var(--line); }
.file-fields dt { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.file-fields dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 21px; }
@media (max-width: 860px) { .dossier { grid-template-columns: 1fr; } .idphoto { max-width: 340px; margin: 0 auto; } }
@media (max-width: 520px) { .file-fields { grid-template-columns: 1fr; } }

.story p { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.75; font-weight: 300; color: var(--ivory); }
.story p:first-child::first-letter { float: left; font-family: var(--f-display); font-size: 4.2em; line-height: .82; padding: .08em .12em 0 0; color: var(--crimson-hi); }
.redact { position: relative; cursor: pointer; border-radius: 2px; color: transparent; background: #050304; box-shadow: 0 0 0 2px #050304; transition: color .5s, background .5s, box-shadow .5s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.redact:hover { background: #1d0b10; box-shadow: 0 0 0 2px #1d0b10; }
.redact.is-open { color: var(--gold-hi); background: rgba(216, 180, 106, .12); box-shadow: 0 0 0 2px rgba(216, 180, 106, .12); cursor: default; }
.hint { font-family: var(--f-caps); font-size: 11px; letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }

.court { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 22px; justify-items: center; }
.court .pcard { --w: min(260px, 80vw); cursor: pointer; transition: transform .6s var(--ease); }
.court .pcard:hover { transform: translateY(-8px); }
.court .monogram { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 5.2em; line-height: 1; }
.court .pname { font-family: var(--f-caps); font-weight: 700; font-size: .82em; letter-spacing: .14em; text-transform: uppercase; margin-top: .5em; }
.court .prank-no { font-family: var(--f-caps); font-size: .62em; letter-spacing: .3em; color: #8c6a2c; margin-bottom: .4em; }
.court .pcard-back.text-back p { margin: 0; font-size: .95em; line-height: 1.5; font-family: var(--f-display); font-style: italic; }
.court .pcard-back.text-back b { display: block; margin-bottom: .6em; font-family: var(--f-caps); font-style: normal; font-size: .72em; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
@media (max-width: 860px) { .court { grid-template-columns: repeat(2, 1fr); } .court .pcard { --w: min(220px, 42vw); } }

.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.seat { padding: 22px 20px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(18, 10, 13, .75); transition: border-color .3s, transform .5s var(--ease); }
.seat:hover { border-color: var(--crimson-hi); transform: translateY(-4px); }
.seat .trait { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--crimson-hi); }
.seat h3 { font-size: 21px; margin: 8px 0 8px; font-weight: 500; }
.seat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 1000px) { .seats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .seats { grid-template-columns: 1fr; } }

.gallery { columns: 3 280px; column-gap: 18px; }
.gallery button { display: block; width: 100%; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--ink-3); cursor: zoom-in; break-inside: avoid; position: relative; }
.gallery img { width: 100%; transition: transform 1s var(--ease), filter .6s; filter: saturate(.9); }
.gallery button:hover img { transform: scale(1.04); filter: saturate(1.1); }
.gallery span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left; font-family: var(--f-display); font-style: italic; background: linear-gradient(transparent, rgba(10, 6, 8, .85)); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.gallery button:hover span { opacity: 1; transform: none; }

.ship { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.ship-img { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); }
.ship-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ship-img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(10, 6, 8, .7); }
.ship h2 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 500; }
.ship ol { padding-left: 0; list-style: none; counter-reset: s; margin: 24px 0 30px; }
.ship li { counter-increment: s; display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.ship li::before { content: counter(s, upper-roman); font-family: var(--f-display); font-style: italic; color: var(--silver); min-width: 28px; }
@media (max-width: 860px) { .ship { grid-template-columns: 1fr; } }

/* ── PROJECTS ────────────────────────────────────────────────── */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project { position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.project .watermark { position: absolute; right: -10px; top: -20px; font-size: 170px; z-index: 0; -webkit-text-stroke-color: rgba(227, 33, 63, .14); }
.project > * { position: relative; z-index: 1; }
.project h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; }
.project p { margin: 0; color: var(--muted); }
.project-top { display: flex; justify-content: space-between; align-items: center; }
.checklist { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; }
.checklist li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(216, 180, 106, .14); font-size: 15px; color: var(--muted); }
.checklist li::before { content: "◇"; color: var(--gold); flex: none; }
.checklist li.done { color: var(--ivory); }
.checklist li.done::before { content: "◆"; color: var(--crimson-hi); }
@media (max-width: 860px) { .projects { grid-template-columns: 1fr; } }
.clip-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 50px); align-items: center; }
.clip-panel video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #000; }
.clip-panel h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; margin-bottom: 12px; }
.clip-panel p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .clip-panel { grid-template-columns: 1fr; } }

/* ── COSPLAY ─────────────────────────────────────────────────── */
.fitting { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.mirror { position: relative; width: min(440px, 84vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; padding: 22px;
  background: conic-gradient(from 210deg, #f3dfa8, #8c6a2c, #f3dfa8, #b8903f, #f3dfa8); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.mirror-glass { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, var(--hair, #121014) 0 34%, transparent 34.5%), radial-gradient(circle at 50% 120%, #b3122b 0 48%, transparent 48.5%), radial-gradient(circle at 30% 25%, #3a2a30, #0d0709 70%);
  transition: background 1s var(--ease); box-shadow: inset 0 0 60px rgba(0, 0, 0, .8); }
.mirror-glass::before { content: ""; position: absolute; width: 46%; height: 46%; top: 18%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #f1dccb 0 52%, transparent 53%); }
.mirror-glass::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(130deg, rgba(255, 255, 255, .22), transparent 35%); border-radius: 50%; pointer-events: none; }
.mirror-photo { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity .6s var(--ease); }
.mirror.has-photo .mirror-photo { opacity: 1; }
.mirror:not(.has-photo) .mirror-photo { visibility: hidden; }
.mirror-eyes { position: absolute; top: 40%; display: flex; gap: 34px; z-index: 2; }
.mirror-eyes i { width: 14px; height: 9px; border-radius: 50%; background: var(--accent, #d4122b); box-shadow: 0 0 14px var(--accent, #d4122b); transition: background .8s, box-shadow .8s; }
.mirror-mask { position: absolute; z-index: 3; top: 30%; width: 34%; height: 30%; border-radius: 40% 40% 46% 46%; background: linear-gradient(180deg, #fbf7ef, #d9d3c8); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-20px) scale(.9); transition: opacity .6s, transform .6s var(--ease-back); }
.mirror-mask::before, .mirror-mask::after { content: ""; position: absolute; top: 42%; width: 22%; height: 10%; background: #1b0f12; border-radius: 50%; }
.mirror-mask::before { left: 18%; } .mirror-mask::after { right: 18%; }
.mirror.has-mask .mirror-mask { opacity: 1; transform: none; }
.mirror-name { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; padding: 8px 20px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line-strong); font-family: var(--f-caps); letter-spacing: .2em; font-size: 12px; color: var(--gold-hi); }
.picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 26px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 10, 13, .7); cursor: pointer; transition: border-color .3s, background .3s; font-size: 15px; }
.pick:hover { border-color: var(--line-strong); }
.pick[aria-pressed="true"] { border-color: var(--crimson-hi); background: rgba(179, 18, 43, .2); }
.pick i { width: 26px; height: 26px; border-radius: 50%; background: var(--sw) center / cover no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.fit-detail h2 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; }
.fit-detail .slip-note { margin: 18px 0; }
.needs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.needs span { padding: 6px 12px; border-radius: 999px; background: rgba(216, 180, 106, .1); border: 1px solid var(--line); font-size: 14px; }
.me-card { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 26px; }
.me-card > div { flex: 1; padding: 14px 16px; border-right: 1px solid var(--line); }
.me-card > div:last-child { border-right: 0; }
.me-card dt { font-family: var(--f-caps); font-size: 10px; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; }
.me-card dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 19px; }
.uniform { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.piece { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(18, 10, 13, .7); color: var(--muted); }
.piece b { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--gold); font-size: 13px; }
.piece.have { color: var(--ivory); border-color: var(--line-strong); }
.piece.have b { background: var(--crimson); color: #fff; border-color: var(--crimson-hi); }
.booth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.polaroid { margin: 0; background: var(--paper); padding: 10px 10px 40px; border-radius: 3px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); transform: rotate(var(--rot, -2deg)); transition: transform .5s var(--ease); position: relative; }
.polaroid:hover { transform: rotate(0) translateY(-6px); }
.polaroid .ph { aspect-ratio: 4 / 5; background: repeating-linear-gradient(45deg, #2a1a1e 0 10px, #24151a 10px 20px); display: grid; place-items: center; color: var(--gold); font-family: var(--f-kanji); font-size: 40px; }
.polaroid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 10px; padding: 0 10px; text-align: center; color: #3a2a26; font-family: var(--f-display); font-style: italic; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .polaroid figcaption { font-size: 13px; bottom: 12px; } }
@media (max-width: 900px) { .fitting { grid-template-columns: 1fr; } .uniform { grid-template-columns: 1fr 1fr; } .booth { grid-template-columns: 1fr 1fr; } }

/* ── CASINO ──────────────────────────────────────────────────── */
.hall-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.table { position: relative; border-radius: 30px; padding: clamp(24px, 4vw, 48px); margin-bottom: 50px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #4a0b18, #24060d 55%, #12050a); border: 10px solid #1b0d0a;
  box-shadow: 0 0 0 1px var(--gold-lo), inset 0 0 0 1px rgba(243, 223, 168, .35), inset 0 0 80px rgba(0, 0, 0, .7), 0 40px 80px -40px rgba(0, 0, 0, .95); }
.table::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(243, 223, 168, .18); border-radius: 22px; pointer-events: none; }
.table-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.table-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; }
.table-head .kanji { color: var(--crimson-hi); font-size: 15px; letter-spacing: .3em; display: block; margin-bottom: 6px; font-weight: 600; }
.table-rules { color: var(--muted); max-width: 60ch; font-size: 15.5px; }
.bets { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bet { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; position: relative; font-family: var(--f-caps); font-weight: 700; font-size: 13px; color: #fff;
  background: radial-gradient(circle, var(--c, #b3122b) 0 52%, transparent 53%), repeating-conic-gradient(from 0deg, #f4ece0 0 15deg, var(--c, #b3122b) 15deg 30deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(0, 0, 0, .2); transition: transform .25s var(--ease-back); }
.bet:hover { transform: translateY(-4px) rotate(20deg); }
.bet[aria-pressed="true"] { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gold-hi), 0 12px 20px rgba(0, 0, 0, .6); }
.bet[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.bet span { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.game-status { min-height: 1.6em; font-family: var(--f-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); text-align: center; margin: 18px 0; }
.game-status.win { color: var(--gold-hi); }
.game-status.lose { color: var(--crimson-hi); }

/* voting RPS */
.rps-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.rps-side h3 { font-family: var(--f-caps); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 12px; }
.rps-hand { display: flex; justify-content: center; gap: 10px; min-height: 130px; }
.rps-card { --w: 86px; }
.rps-card button.pcard-inner { all: unset; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); cursor: pointer; }
.rps-card .pcard-face { display: grid; place-items: center; }
.rps-glyph { font-size: 2.4em; line-height: 1; }
.rps-word { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font-family: var(--f-caps); font-size: .62em; letter-spacing: .16em; color: #5b4a44; }
.rps-card.used { opacity: .25; pointer-events: none; }
.rps-card.played { transform: translateY(-10px); }
.rps-card:not(.used):hover .pcard-inner { transform: translateY(-6px); }
.rps-card.is-flipped:not(.used):hover .pcard-inner { transform: rotateY(180deg) translateY(-6px); }
.rps-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rps-score { font-family: var(--f-display); font-size: 46px; line-height: 1; }
.rps-score span { color: var(--gold); margin: 0 6px; }
.ballot { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.ballot b { color: var(--ivory); font-family: var(--f-caps); }
.ballot-box { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); }
@media (max-width: 760px) { .rps-board { grid-template-columns: 1fr; } .rps-card { --w: 72px; } }

/* memory */
.mem-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(8px, 1.2vw, 14px); max-width: 920px; margin: 0 auto; }
@media (max-width: 760px) { .mem-grid { grid-template-columns: repeat(4, 1fr); max-width: 420px; } }
.mem-grid .pcard { font-size: clamp(9px, 1.3vw, 15px); }
.rps-card { font-size: 12px; }
.rps-card .pcenter { padding: 0 6%; }
.rps-word { font-size: 9px; }
@media (max-width: 760px) { .rps-card { font-size: 10px; } }
.mem-grid .pcard { --w: 100%; width: 100%; }
.mem-grid .pcard-inner { cursor: pointer; }
.mem-grid .pcard:not(.is-flipped) .pcard-inner { transform: rotateY(180deg); }
.mem-grid .pcard.is-flipped .pcard-inner { transform: rotateY(0); }
.mem-grid .pcard-face { display: grid; place-items: center; }
.mem-grid .pcard-face svg { width: 56%; height: 56%; }
.mem-grid .pcard.matched .pcard-face { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 24px rgba(243, 223, 168, .5); }
.mem-grid .pcard.matched { animation: matched .6s var(--ease-back); }
@keyframes matched { 50% { transform: scale(1.08); } }
.mem-info { display: flex; justify-content: center; gap: 26px; margin-top: 16px; font-family: var(--f-caps); font-size: 12px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.mem-info b { color: var(--ivory); }

/* coin */
.coin-stage { display: grid; place-items: center; perspective: 900px; height: 230px; }
.coin { width: 170px; height: 170px; position: relative; transform-style: preserve-3d; transition: transform 2s cubic-bezier(.2, .8, .2, 1); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff3c9, #e4bf68 40%, #9b7330 85%); box-shadow: inset 0 0 0 7px rgba(140, 106, 44, .75), inset 0 0 0 9px #f3dfa8, 0 20px 30px -10px rgba(0, 0, 0, .8);
  font-family: var(--f-kanji); font-weight: 800; font-size: 64px; color: #7d0d1f; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.coin-face small { position: absolute; bottom: 26px; font-family: var(--f-caps); font-size: 11px; letter-spacing: .3em; }
.coin-back { transform: rotateY(180deg); }
.ladder { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.ladder span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--f-caps); font-size: 12px; color: var(--dim); transition: all .3s; }
.ladder span.on { color: var(--ink); background: var(--gold-hi); border-color: var(--gold-hi); }
.choice-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.house-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.house-rules > div { padding: 20px; border-radius: var(--r); border: 1px solid var(--line); }
.house-rules b { display: block; font-family: var(--f-caps); letter-spacing: .2em; font-size: 12px; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.house-rules p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 800px) { .house-rules { grid-template-columns: 1fr; } }

/* ── SEASON 3 ────────────────────────────────────────────────── */
.s3-hero { text-align: center; }
.s3-hero h1 { font-size: clamp(56px, 10vw, 150px); }
.s3-hero .lede { margin-left: auto; margin-right: auto; }
.counter { display: flex; justify-content: center; gap: clamp(10px, 2vw, 24px); margin: 46px 0 10px; flex-wrap: wrap; }
.counter > div { min-width: clamp(110px, 16vw, 190px); padding: 22px 14px; border-radius: 18px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(179, 18, 43, .22), rgba(18, 10, 13, .8)); }
.counter b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(46px, 7vw, 96px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.counter span { font-family: var(--f-caps); font-size: 11px; letter-spacing: .25em; color: var(--gold); text-transform: uppercase; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; counter-reset: st; }
.step { position: relative; padding: 30px 22px 24px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(18, 10, 13, .8); counter-increment: st; display: flex; flex-direction: column; gap: 10px; }
.step::before { content: counter(st, decimal-leading-zero); font-family: var(--f-display); font-style: italic; font-size: 44px; line-height: 1; color: var(--crimson-hi); }
.step h3 { font-size: 22px; font-weight: 500; }
.step p { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.pledge { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: center; }
.pledge-form { display: grid; gap: 16px; }
.field label { display: block; font-family: var(--f-caps); font-size: 11px; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(10, 6, 8, .8); color: var(--ivory); font: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 180, 106, .15); }
.field textarea { min-height: 260px; resize: vertical; font-size: 15px; line-height: 1.6; }
#pledge-canvas { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 18px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px var(--line-strong); }
.letter { position: relative; }
@media (max-width: 860px) { .pledge { grid-template-columns: 1fr; } }

/* ── JOURNAL & POST ──────────────────────────────────────────── */
.journal-list { display: grid; gap: 22px; }
.entry { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: rgba(18, 10, 13, .7); color: var(--ivory); transition: transform .5s var(--ease), border-color .3s; }
.entry:hover { color: var(--ivory); transform: translateX(8px); border-color: var(--line-strong); }
.entry-img { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--ink-3); position: relative; }
.entry-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.entry:hover .entry-img img { transform: scale(1.05); }
.noimg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-kanji); font-size: 72px; color: transparent; -webkit-text-stroke: 1px var(--gold); background: radial-gradient(circle, #2a0b13, #12070a); }
.entry h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; margin: 8px 0 10px; }
.entry p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .entry { grid-template-columns: 1fr; } }

.post-hero { padding: calc(var(--nav-h) + 80px) 0 40px; text-align: center; }
.post-hero h1 { font-size: clamp(40px, 6.2vw, 84px); font-weight: 500; max-width: 18ch; margin: 18px auto 0; }
.post-hero .post-meta { justify-content: center; }
.post-cover { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.post-cover img { width: 100%; border-radius: 20px; border: 1px solid var(--line); aspect-ratio: 16/8; object-fit: cover; }
.prose { max-width: 720px; margin: 0 auto; padding: 60px var(--gutter) 40px; font-size: 18.5px; line-height: 1.8; font-weight: 300; }
.prose > p:first-of-type::first-letter { float: left; font-family: var(--f-display); font-size: 4.4em; line-height: .8; padding: .08em .12em 0 0; color: var(--crimson-hi); font-weight: 500; }
.prose h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; margin: 2.2em 0 .6em; }
.prose h2::before { content: "♦ "; color: var(--crimson-hi); font-size: .6em; vertical-align: middle; }
.prose h3 { font-size: 24px; font-weight: 500; margin: 1.8em 0 .5em; color: var(--gold-hi); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--crimson-hi); }
.prose strong { font-weight: 600; color: #fff; }
.prose a { border-bottom: 1px solid var(--gold-lo); }
.prose blockquote { margin: 2em 0; padding: 0 0 0 24px; border-left: 2px solid var(--crimson-hi); font-family: var(--f-display); font-style: italic; font-size: 1.35em; line-height: 1.45; color: var(--ivory); }
.prose blockquote p { margin: 0; }
.prose img, .prose video, .prose iframe { border-radius: 14px; border: 1px solid var(--line); margin: 2em 0; width: 100%; }
.prose iframe { aspect-ratio: 16/9; height: auto; }
.prose figure { margin: 2em 0; }
.prose figcaption { text-align: center; color: var(--dim); font-size: 14px; margin-top: -1.2em; font-style: italic; }
.prose hr { border: 0; text-align: center; margin: 3em 0; }
.prose hr::after { content: "♠ ♥ ♦ ♣"; letter-spacing: 1em; color: var(--gold); }
.post-nav { max-width: 720px; margin: 0 auto 80px; padding: 0 var(--gutter); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ── ABOUT ───────────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.duo .pcard { --w: min(330px, 80vw); cursor: pointer; }
.duo .pcard-face img, .duo .pcard-back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo .pcard-back { background: #0f080b; }
.duo .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 18px; text-align: center; background: linear-gradient(transparent, rgba(10, 6, 8, .9)); color: #fff; font-family: var(--f-display); font-style: italic; font-size: 1.6em; z-index: 2; }
.duo .label small { display: block; font-family: var(--f-caps); font-style: normal; font-size: .4em; letter-spacing: .3em; color: var(--gold-hi); text-transform: uppercase; }
.calling { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.calling a, .calling button { display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); color: #1b0f12; text-align: left; cursor: pointer; transition: transform .5s var(--ease); position: relative; overflow: hidden; }
.calling a:hover, .calling button:hover { transform: translateY(-6px) rotate(-1deg); color: #1b0f12; }
.calling .suit { position: absolute; right: 14px; top: 8px; font-size: 34px; opacity: .9; }
.calling small { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .22em; color: #8c6a2c; text-transform: uppercase; }
.calling b { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.travel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.travel button { padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--ink-3); position: relative; }
.travel img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1s var(--ease); }
.travel button:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; justify-items: center; } .calling { grid-template-columns: 1fr 1fr; } }

/* ── HUD / modal / toasts ────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 4, .75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .3s; }
.modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 22px; padding: 28px; animation: pop .45s var(--ease-back);
  background: linear-gradient(160deg, #241519, #120a0d); border: 1px solid var(--line-strong); box-shadow: 0 40px 100px rgba(0, 0, 0, .8); }
.modal-x { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ivory); font-size: 22px; cursor: pointer; }
@keyframes pop { from { transform: translateY(20px) scale(.94); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.sid-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.sid-school { font-family: var(--f-kanji); font-size: 12px; letter-spacing: .14em; color: var(--gold); }
.sid-title { font-size: 34px; font-weight: 500; }
.sid-body { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; }
.sid-photo { position: relative; aspect-ratio: 3/4; border-radius: 10px; border: 1px solid var(--line-strong); display: grid; place-items: center; background: radial-gradient(circle, #2a0b13, #12070a); }
.sid-photo svg { width: 64px; }
.sid-pet { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(-6deg); padding: 2px 10px; background: var(--crimson); color: #fff; font-family: var(--f-kanji); font-weight: 800; border-radius: 4px; display: none; }
.is-pet .sid-pet { display: block; }
.sid-fields { margin: 0; display: grid; gap: 8px; }
.sid-fields div { display: grid; grid-template-columns: 100px 1fr; align-items: center; }
.sid-fields dt { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.sid-fields dd { margin: 0; font-family: var(--f-display); font-size: 19px; }
.sid-input { width: 100%; padding: 4px 0; border: 0; border-bottom: 1px dashed var(--line-strong); background: transparent; color: var(--ivory); font: inherit; }
.sid-input:focus { outline: none; border-bottom-color: var(--gold); }
.sid-meter { height: 6px; border-radius: 6px; background: rgba(216, 180, 106, .12); margin: 22px 0 8px; overflow: hidden; }
.sid-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson), var(--gold-hi)); transition: width 1s var(--ease); }
.sid-next { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.sid-sub { font-family: var(--f-caps); font-size: 12px; letter-spacing: .24em; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; }
.sid-badges { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sid-badges li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; color: var(--dim); }
.sid-badges li i { font-style: normal; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 13px; }
.sid-badges li.got { color: var(--ivory); border-color: var(--line-strong); }
.sid-badges li.got i { background: var(--gold-hi); color: var(--ink); border-color: var(--gold-hi); }
.sid-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sid-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--dim); }
@media (max-width: 480px) { .sid-body { grid-template-columns: 80px 1fr; } .sid-badges { grid-template-columns: 1fr; } .sid-fields div { grid-template-columns: 80px 1fr; } }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 140; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 14px; min-width: 240px; max-width: 360px;
  background: linear-gradient(160deg, #2a1218, #140a0d); border: 1px solid var(--line-strong); box-shadow: 0 20px 40px rgba(0, 0, 0, .6); animation: toast-in .5s var(--ease-back); }
.toast.out { animation: toast-out .4s var(--ease) forwards; }
.toast-chip { width: 34px; height: 34px; flex: none; }
.toast b { display: block; font-family: var(--f-caps); font-size: 12px; letter-spacing: .14em; color: var(--gold-hi); }
.toast span { font-size: 14px; color: var(--muted); }
.toast .amt { margin-left: auto; font-family: var(--f-display); font-size: 20px; color: var(--gold-hi); white-space: nowrap; }
.toast .amt.neg { color: var(--crimson-hi); }
@keyframes toast-in { from { transform: translateX(110%); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(110%); opacity: 0; } }

.pet-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(60, 4, 14, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pet-overlay[hidden] { display: none; }
.pet-card { max-width: 460px; text-align: center; padding: 40px 30px; border-radius: 24px; background: var(--ink); border: 1px solid var(--crimson-hi); animation: pop .6s var(--ease-back); }
.pet-kanji { font-family: var(--f-kanji); font-weight: 800; font-size: 90px; line-height: 1; color: var(--crimson-hi); margin: 0 0 10px; text-shadow: 0 0 30px rgba(227, 33, 63, .6); }
.pet-card h2 { font-size: 32px; margin-bottom: 10px; }
.pet-card p { color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(5, 3, 4, .94); display: grid; place-items: center; padding: 20px; animation: fade-in .3s; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox img { max-height: 82vh; width: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); animation: pop .5s var(--ease); }
.lightbox figcaption { text-align: center; margin-top: 14px; font-family: var(--f-display); font-style: italic; color: var(--muted); font-size: 18px; }
.lightbox-x { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: #fff; font-size: 26px; cursor: pointer; }

.lily-egg { position: absolute; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; color: rgba(244, 236, 224, .16); transition: color .4s, transform .5s var(--ease-back), filter .4s; z-index: 4; }
.lily-egg:hover { color: var(--ivory); transform: scale(1.4) rotate(-10deg); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
.lily-egg.found { color: var(--gold); opacity: .5; pointer-events: none; }
.footer .lily-egg { right: 20px; bottom: 18px; }

/* ── footer ──────────────────────────────────────────────────── */
.footer { position: relative; margin-top: 60px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(90, 10, 22, .18)); }
.footer-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px 60px; padding-top: 60px; padding-bottom: 60px; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-lily { width: 48px; height: 48px; color: var(--ivory); margin-bottom: 8px; }
/* lily drawn from the Madonna lily engraving in the Encyclopaedia Britannica (1911, public domain); colour follows `color` */
.lily-mark { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url(../img/ui/lily-mark.png) center / contain no-repeat; mask: url(../img/ui/lily-mark.png) center / contain no-repeat; }
.footer-name { margin: 0; font-family: var(--f-caps); font-weight: 700; letter-spacing: .3em; font-size: 20px; }
.footer-tag { margin: 0; color: var(--gold); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-content: start; }
.footer-links a { color: var(--muted); font-family: var(--f-caps); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a:hover { color: var(--ivory); }
.footer-legal { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--dim); max-width: 90ch; border-top: 1px solid var(--line); padding-top: 24px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }

/* ── scroll reveals ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.from-left { transform: translateX(-60px); }
.reveal.from-right { transform: translateX(60px); }
.reveal.zoom { transform: scale(.92); }
.reveal.deal { transform: translateY(60px) rotate(calc((var(--i, 0) - 1) * 4deg)) scale(.94); }
.reveal.in { opacity: 1; transform: none; }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.split-words .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--wi) * 55ms); }
.split-words.in .w > span { transform: none; }

/* no-JS: show everything */
html:not(.js) .reveal, html:not(.js) .deck .pcard { opacity: 1; transform: none; }
html:not(.js) .bar span { transform: scaleX(var(--p, 0)); }
html:not(.js) .curtain { display: none; }
html:not(.js) .restricted-body { filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .curtain { display: none; }
  .hero h1 .line > span { transform: none; }
  #cursor-glow, #petals { display: none; }
}

/* ═══════════ Public-domain artworks ═══════════
   At rest a painting wears a soft old-rose tint so it sits quietly in the page;
   hover, keyboard focus or opening it shows the true colours.
   Background art (.is-bg) keeps the tint. Tune the tint here. */
:root { --art-tint: sepia(.55) hue-rotate(-28deg) saturate(.95) brightness(.82) contrast(1.02); }
.art img { filter: var(--art-tint); transition: filter .8s var(--ease), transform 1s var(--ease); }
.art:focus-within img { filter: none; }
@media (hover: hover) { .art:hover img, a:hover > .art img { filter: none; } }
.art.is-bg img, .art.is-bg:hover img { filter: var(--art-tint) brightness(.9); }

.artwork { margin: 0; }
.artwork-open { display: block; width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--ink-2); cursor: zoom-in; color: inherit;
  box-shadow: inset 0 0 0 4px var(--ink-2), inset 0 0 0 5px rgba(216, 180, 106, .3), 0 30px 60px -30px rgba(0, 0, 0, .85); transition: border-color .4s, box-shadow .6s var(--ease); }
.artwork-open:hover, .artwork-open:focus-visible { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--ink-2), inset 0 0 0 5px rgba(216, 180, 106, .55), 0 30px 70px -30px rgba(216, 180, 106, .28); }
.artwork-open img { display: block; width: 100%; height: auto; border-radius: 3px; }
.artwork figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--dim); }
.artwork figcaption i { font-family: var(--f-display); font-size: 17px; color: var(--ivory); }
.art-who { color: var(--gold-hi); }
.art-hint { display: block; margin-top: 4px; font-family: var(--f-caps); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); opacity: .75; }
@media (hover: none) { .art-hint { font-size: 9px; } }

/* page heroes with a painting beside the title */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-split .artwork { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .hero-split .artwork { justify-self: start; max-width: 460px; } }

/* a painting between two tables / sections */
.art-interlude { max-width: 920px; margin: clamp(48px, 7vw, 96px) auto; }
.art-interlude figcaption { text-align: center; }
.art-interlude.narrow { max-width: 460px; }

/* two antique cards under the court heading */
.antique-cards { display: flex; justify-content: center; align-items: flex-start; gap: clamp(18px, 4vw, 44px); margin: calc(-1 * clamp(10px, 2vw, 30px)) auto clamp(40px, 5vw, 64px); }
.antique-cards .artwork { width: clamp(124px, 17vw, 172px); }
.antique-cards .artwork:first-child { transform: rotate(-4deg); }
.antique-cards .artwork:last-child { transform: rotate(4deg); }
.antique-cards .artwork-open { padding: 6px; }
.antique-cards figcaption { text-align: center; font-size: 11.5px; }
.antique-cards figcaption i { font-size: 14px; }

/* the Risa ♥ Ririka painting sits in the ship grid */
.ship .artwork { width: 100%; max-width: 480px; justify-self: center; }

/* credit line under a journal cover */
.post-cover figcaption { margin-top: 10px; text-align: right; font-size: 12.5px; color: var(--dim); }
.post-cover figcaption i { font-family: var(--f-display); color: var(--muted); font-size: 14px; }

/* credits list (About page) */
.credits-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 40px; }
.credits-list li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.credits-list i { font-family: var(--f-display); color: var(--ivory); font-size: 17px; }
.credits-list a { color: var(--gold); }
@media (max-width: 760px) { .credits-list { grid-template-columns: 1fr; } }

/* gallery page: a museum wall of frames */
.gallery-wall { columns: 3 300px; column-gap: clamp(24px, 3vw, 40px); }
.gallery-item { break-inside: avoid; margin: 0 0 clamp(34px, 4vw, 52px); }
.gallery-source { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.gallery-source a { color: var(--gold); }

/* Sealed photo spot: shown until a real photo of Risa is added (no picture, only colours, the 1911 lily and text) */
.classified {
  position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqw;
  overflow: hidden; color: var(--gold);
  background:
    repeating-linear-gradient(135deg, rgba(216, 180, 106, .045) 0 1px, transparent 1px 12px),
    radial-gradient(90% 70% at 50% 34%, #2c0c15, #12070a 72%);
}
.classified .lily-mark { position: absolute; left: 18%; top: 10%; width: 64%; height: 64%; color: rgba(216, 180, 106, .24); }
.classified-stamp {
  position: relative; transform: rotate(-11deg); padding: .4em .75em .5em; border: 3px double rgba(224, 86, 107, .85); border-radius: 4px;
  color: #e0566b; font-family: var(--f-caps); font-weight: 700; font-size: clamp(12px, 7cqw, 30px); letter-spacing: .2em; line-height: 1.2;
  text-align: center; text-transform: uppercase; background: rgba(18, 7, 10, .55);
}
.classified-stamp small { display: block; margin-top: .4em; font-size: .6em; letter-spacing: .3em; color: var(--gold-hi); }
.classified-note { position: relative; font-family: var(--f-caps); font-size: clamp(9px, 3.3cqw, 13px); letter-spacing: .28em; text-transform: uppercase; color: var(--muted, #bcac9d); }
.hero-card .classified, .duo .classified { position: absolute; inset: 0; padding-bottom: 18%; }
.idphoto-frame .classified { aspect-ratio: 4 / 5; }

/* Top-waifu cards and posts with an official screenshot (tinted at rest like the paintings, true colours on hover) */
.court .has-shot { background: #0f080b; }
.court .has-shot .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.court .has-shot::before { border-color: rgba(243, 223, 168, .7); z-index: 2; }
.court .has-shot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 6, 8, .45), transparent 24%, transparent 56%, rgba(10, 6, 8, .92)); }
.court .has-shot .pidx { z-index: 3; color: var(--gold-hi); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.court .has-shot .pcenter { z-index: 3; justify-content: flex-end; padding-bottom: 12%; }
.court .has-shot .prank-no { color: var(--gold-hi); }
.court .has-shot .pname { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
.court .shot-credit { display: block; margin-top: 1em; font-size: .6em; letter-spacing: .06em; color: var(--dim); }
.prose .post-shot { float: right; width: min(230px, 40%); margin: .4em 0 1.2em 28px; }
.prose .post-shot img { margin: 0; border: 0; border-radius: 3px; aspect-ratio: 4 / 5; object-fit: cover; }
.prose .post-shot figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
.prose h2, .prose hr { clear: both; }
@media (max-width: 560px) { .prose .post-shot { width: 46%; margin-left: 18px; } }
.idphoto-frame .classified { justify-content: flex-start; padding-top: 22%; }
@media (max-width: 860px) { .idphoto { width: 100%; } }