:root {
  --cyan: #58D6D1;
  --black: #080506;
  --bone: #E7D8C2;
  --charcoal: #242021;
  --burgundy: #2A0711;
  --wine: #5B1423;
  --graphite: #8A7C76;
  --vermilion: #D43B2A;
  --display: "M PLUS Rounded 1c", "Inter", sans-serif;
  --body: "Noto Sans JP", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  background: var(--black);
  font-family: var(--body);
  overflow-x: hidden;
}

.site-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 14% 24%, rgba(91,20,35,.55), transparent 32%), radial-gradient(circle at 80% 70%, rgba(42,7,17,.72), transparent 42%), var(--black); }
.fixed-grid { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(90deg, rgba(138,124,118,.22) 1px, transparent 1px), linear-gradient(0deg, rgba(138,124,118,.16) 1px, transparent 1px); background-size: 8.333vw 100%, 100% 12.5vh; transition: opacity .4s ease; }
.fixed-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(231,216,194,.28) 0 1px, transparent 2px); background-size: 8.333vw 12.5vh; mix-blend-mode: screen; opacity: var(--pulse, .32); }
.soot { position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(circle at 24% 32%, rgba(231,216,194,.08) 0 1px, transparent 1.8px), radial-gradient(circle at 70% 60%, rgba(212,59,42,.08) 0 1px, transparent 1.8px), linear-gradient(115deg, transparent, rgba(36,32,33,.22), transparent); background-size: 37px 41px, 53px 47px, 100% 100%; }

.chapter-index { position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: .65rem; writing-mode: vertical-rl; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; }
.index-mark { color: rgba(231,216,194,.48); text-decoration: none; border: 1px solid rgba(138,124,118,.28); background: rgba(8,5,6,.58); padding: .65rem .35rem; transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.index-mark span { color: var(--graphite); }
.index-mark.active { color: var(--bone); border-color: var(--vermilion); transform: translateX(-3px); box-shadow: 0 0 0 1px rgba(212,59,42,.12) inset; }

.chapter { position: relative; min-height: 100vh; z-index: 1; display: grid; place-items: stretch; padding: clamp(1rem, 2.6vw, 3rem) clamp(3.8rem, 6vw, 7rem) clamp(1rem, 2.6vw, 3rem) clamp(1rem, 3vw, 3.5rem); overflow: hidden; }
.bento-shell { min-height: calc(100vh - clamp(2rem, 5.2vw, 6rem)); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: clamp(.55rem, 1.2vw, 1rem); position: relative; }
.panel { position: relative; border: 1px solid rgba(138,124,118,.28); background: linear-gradient(145deg, rgba(42,7,17,.82), rgba(8,5,6,.86) 45%, rgba(36,32,33,.52)); overflow: hidden; transform: translateY(36px); opacity: .34; transition: transform .9s cubic-bezier(.2,.75,.1,1), opacity .9s ease, clip-path .45s ease; clip-path: inset(8% 0 8% 0); }
.chapter.active .panel { transform: translateY(0); opacity: 1; clip-path: inset(0); }
.panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(231,216,194,.06), transparent); transform: translateX(-100%); transition: transform 1s ease; }
.chapter.active .panel::before { transform: translateX(100%); }
.title-panel { grid-column: 1 / 8; grid-row: 2 / 7; padding: clamp(1rem, 3vw, 3.2rem); display: flex; flex-direction: column; justify-content: flex-end; }
.origin .title-panel { margin-left: -3.5vw; }
.small-title { grid-column: 2 / 7; grid-row: 1 / 5; }
.club-title { grid-column: 1 / 7; grid-row: 3 / 8; }
.lattice-panel { grid-column: 8 / 13; grid-row: 1 / 6; display: grid; place-items: center; }
.ledger-panel { grid-column: 8 / 11; grid-row: 6 / 8; padding: 1.2rem; }
.pressure-panel { grid-column: 7 / 13; grid-row: 3 / 8; padding: 1.4rem; display: grid; align-content: end; }
.glyph-panel { grid-column: 1 / 4; grid-row: 5 / 8; padding: 1rem; display: grid; align-content: space-between; }
.diagram-panel { grid-column: 6 / 13; grid-row: 1 / 7; padding: 1.5rem; }
.note-panel { grid-column: 2 / 6; grid-row: 5 / 8; padding: 1.3rem; }
.seal-panel { grid-column: 8 / 13; grid-row: 1 / 5; display: grid; place-items: center; }
.closing-panel { grid-column: 7 / 11; grid-row: 5 / 8; padding: 1.4rem; }
.empty-panel { grid-column: 11 / 13; grid-row: 7 / 9; background: rgba(8,5,6,.18); border-style: dashed; opacity: .62; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: .82; font-size: clamp(3.5rem, 11vw, 11rem); text-transform: lowercase; color: var(--bone); }
h2 { font-size: clamp(3.5rem, 10vw, 9rem); }
.seal-line, .statement, .mono, .coordinate { font-family: var(--mono); }
.seal-line { margin: 0 0 auto; font-size: .78rem; color: var(--graphite); letter-spacing: .12em; text-transform: uppercase; }
.statement { margin: 1.4rem 0 0; color: var(--bone); font-size: clamp(.9rem, 1.4vw, 1.2rem); letter-spacing: .08em; }
.panel p { line-height: 1.8; font-weight: 300; max-width: 28ch; }
.mono { color: var(--vermilion); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.vertical-caption { position: absolute; left: .3rem; top: 1rem; writing-mode: vertical-rl; color: rgba(231,216,194,.42); font-size: .72rem; letter-spacing: .18em; }

.lattice-svg { width: min(82%, 430px); filter: drop-shadow(0 0 26px rgba(91,20,35,.52)); }
.bonds .broken { stroke-dasharray: 26 18; animation: drift 5s steps(8) infinite; }
.compression-bars { display: grid; gap: clamp(.55rem, 1.2vw, 1rem); }
.compression-bars i { display: block; height: clamp(1.4rem, 4vw, 3.4rem); background: linear-gradient(90deg, var(--wine), var(--burgundy), var(--charcoal)); border: 1px solid rgba(138,124,118,.22); transform-origin: left; animation: compress 4s ease-in-out infinite; }
.compression-bars i:nth-child(even) { margin-left: 12%; animation-delay: -.6s; }
.glyph-bars { position: relative; min-height: 160px; }
.glyph-bars i { position: absolute; background: var(--bone); opacity: .76; box-shadow: 10px 0 0 rgba(212,59,42,.35), -8px 0 0 rgba(88,214,209,.18); }
.glyph-bars i:nth-child(1) { width: 70%; height: 8px; left: 10%; top: 16%; }.glyph-bars i:nth-child(2) { width: 8px; height: 78%; left: 47%; top: 8%; }.glyph-bars i:nth-child(3) { width: 46%; height: 8px; left: 28%; top: 48%; }.glyph-bars i:nth-child(4) { width: 8px; height: 38%; left: 72%; top: 46%; }.glyph-bars i:nth-child(5) { width: 58%; height: 8px; left: 20%; bottom: 10%; }
.micro-grid { height: 100%; min-height: 420px; background-image: linear-gradient(90deg, rgba(138,124,118,.22) 1px, transparent 1px), linear-gradient(0deg, rgba(138,124,118,.22) 1px, transparent 1px); background-size: 64px 64px; position: relative; }
.micro-grid span { position: absolute; width: 9px; height: 9px; background: var(--bone); opacity: .72; transform: translate(-50%, -50%); animation: pixelDrift 3s steps(3) infinite; }
.micro-grid span:nth-child(1){left:18%;top:18%}.micro-grid span:nth-child(2){left:36%;top:32%}.micro-grid span:nth-child(3){left:58%;top:18%}.micro-grid span:nth-child(4){left:76%;top:38%}.micro-grid span:nth-child(5){left:25%;top:62%}.micro-grid span:nth-child(6){left:46%;top:72%}.micro-grid span:nth-child(7){left:68%;top:62%}.micro-grid span:nth-child(8){left:84%;top:78%}.micro-grid span:nth-child(9){left:10%;top:82%}
.micro-grid::before { content: ""; position: absolute; inset: 8%; background: linear-gradient(30deg, transparent 49.7%, rgba(138,124,118,.45) 50%, transparent 50.3%), linear-gradient(150deg, transparent 49.7%, rgba(138,124,118,.35) 50%, transparent 50.3%); }
.hanko { width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border: 3px solid var(--vermilion); border-radius: 50%; display: grid; place-items: center; color: var(--vermilion); font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); line-height: .9; text-align: center; box-shadow: 0 0 40px rgba(212,59,42,.18), inset 0 0 40px rgba(212,59,42,.08); }
.hanko span { font-family: var(--mono); font-size: .75rem; letter-spacing: .22em; }

.glitching .glitch-source h1, .glitching .glitch-source h2 { animation: glitchText .22s steps(2) 2; text-shadow: 3px 0 var(--vermilion), -3px 0 var(--cyan); }
.glitching .panel { animation: panelSlip .24s steps(2) 1; }
.glitching::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(212,59,42,.16) 13px, transparent 16px); mix-blend-mode: screen; animation: scanTear .26s linear 1; }

@keyframes drift { 50% { stroke-dashoffset: 44; opacity: .45; } }
@keyframes compress { 50% { transform: scaleX(.72); filter: brightness(1.18); } }
@keyframes pixelDrift { 50% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)); } }
@keyframes glitchText { 0% { clip-path: inset(0 0 70% 0); transform: translateX(-5px); } 50% { clip-path: inset(28% 0 36% 0); transform: translateX(4px); } 100% { clip-path: inset(0); transform: translateX(0); } }
@keyframes panelSlip { 50% { transform: translateX(10px); filter: hue-rotate(18deg); } }
@keyframes scanTear { from { opacity: 0; transform: translateY(-12px); } 50% { opacity: 1; } to { opacity: 0; transform: translateY(12px); } }

@media (max-width: 760px) {
  .chapter { padding-right: 3.2rem; }
  .bento-shell { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, minmax(55px, 1fr)); }
  .title-panel, .small-title, .club-title { grid-column: 1 / 7; grid-row: 2 / 6; margin-left: 0; }
  .lattice-panel, .pressure-panel, .diagram-panel, .seal-panel { grid-column: 1 / 7; grid-row: 6 / 10; }
  .ledger-panel, .glyph-panel, .note-panel, .closing-panel { grid-column: 1 / 5; grid-row: 9 / 11; }
  .empty-panel { grid-column: 5 / 7; grid-row: 1 / 2; }
  h1, h2 { font-size: clamp(3.5rem, 17vw, 6rem); }
}