:root {
  /* Mono** */
  --paper: #F5ECDD;
  --rice: #FFF8EC;
  --burgundy: #6D1828;
  --rose: #9B4A55;
  --walnut: #4A3028;
  --amber: #D9A75F;
  --copper: #B87549;
  --ghost: #B9AEA2;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--walnut);
  font-family: var(--sans);
  overflow-x: hidden;
}

.bokeh-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,248,236,.86), transparent 21rem),
    radial-gradient(circle at 82% 18%, rgba(217,167,95,.25), transparent 19rem),
    linear-gradient(115deg, #F5ECDD 0%, #FFF8EC 52%, #F5ECDD 100%);
  z-index: -3;
}

.bokeh-field span {
  position: absolute;
  width: 20vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(217,167,95,.22);
  filter: blur(22px);
  animation: breathe 14s ease-in-out infinite;
}

.bokeh-field span:nth-child(1) { left: 5%; top: 68%; width: 17vw; background: rgba(184,117,73,.18); }
.bokeh-field span:nth-child(2) { left: 58%; top: 8%; animation-delay: -3s; }
.bokeh-field span:nth-child(3) { right: 8%; bottom: 9%; width: 13vw; background: rgba(155,74,85,.14); animation-delay: -7s; }
.bokeh-field span:nth-child(4) { left: 35%; top: 42%; width: 9vw; background: rgba(255,248,236,.75); animation-delay: -5s; }
.bokeh-field span:nth-child(5) { left: 78%; top: 46%; width: 7vw; background: rgba(217,167,95,.18); animation-delay: -10s; }

.toc-strip {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: .45rem;
  padding: .35rem;
  border: 1px solid rgba(185,174,162,.55);
  background: rgba(255,248,236,.72);
  backdrop-filter: blur(12px);
}

.toc-link {
  border: 0;
  background: transparent;
  color: var(--copper);
  font: 400 .68rem var(--mono);
  letter-spacing: .16em;
  padding: .35rem .55rem;
  cursor: pointer;
  transition: background .35s ease, color .35s ease;
}

.toc-link.active { background: var(--burgundy); color: var(--rice); }

.book { width: 100%; }

.spread {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(1.5rem, 4vw) minmax(0, 1fr) minmax(1rem, 6vw) minmax(0, 1fr) minmax(1.5rem, 4vw);
  gap: 0;
  padding: clamp(4.8rem, 8vh, 7rem) 0 clamp(2rem, 4vh, 4rem);
  border-bottom: 1px solid rgba(185,174,162,.42);
  isolation: isolate;
}

.page {
  position: relative;
  min-height: calc(100vh - 10rem);
  padding: clamp(2rem, 5vw, 5.5rem);
  background: rgba(255,248,236,.42);
  border: 1px solid rgba(185,174,162,.36);
  box-shadow: 0 25px 80px rgba(74,48,40,.08);
  overflow: hidden;
}

.verso { grid-column: 2; border-right: 0; }
.recto { grid-column: 4; border-left: 0; }
.gutter {
  grid-column: 3;
  min-height: calc(100vh - 10rem);
  background: linear-gradient(90deg, rgba(74,48,40,.10), rgba(255,248,236,.08), rgba(74,48,40,.08));
  border-top: 1px solid rgba(185,174,162,.25);
  border-bottom: 1px solid rgba(185,174,162,.25);
}

.folio {
  writing-mode: vertical-rl;
  color: var(--ghost);
  font: 400 .68rem var(--mono);
  letter-spacing: .18em;
  align-self: center;
  justify-self: center;
  text-transform: uppercase;
}
.outer-left { grid-column: 1; }
.outer-right { grid-column: 5; }

.mono-kicker, .stamp, .footnote-shelf, .page-turn {
  font-family: var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .68rem;
}

.mono-kicker { color: var(--copper); margin: 0 0 2rem; }

h1, h2, blockquote, .chapter-number {
  font-family: var(--serif);
  color: var(--burgundy);
  font-weight: 500;
}

h1 {
  position: absolute;
  left: clamp(1.8rem, 4.5vw, 5rem);
  bottom: clamp(1.6rem, 4vh, 4rem);
  margin: 0;
  font-size: clamp(5.5rem, 16vw, 17rem);
  line-height: .72;
  letter-spacing: -.07em;
}

h2 {
  margin: 0;
  font-size: clamp(5rem, 13vw, 14rem);
  line-height: .78;
  letter-spacing: -.06em;
}

blockquote {
  margin: 18vh 0 0;
  font-size: clamp(2.6rem, 6.5vw, 7rem);
  line-height: .86;
  font-style: italic;
  color: rgba(109,24,40,.82);
}

.chapter-number {
  display: block;
  font-size: clamp(4rem, 10vw, 11rem);
  color: rgba(155,74,85,.18);
  margin-bottom: -2.2rem;
}

.fragment {
  max-width: 22rem;
  color: var(--rose);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.65;
  margin: 1.6rem 0;
}

.vellum-note, .specimen-card {
  position: relative;
  max-width: 25rem;
  padding: 1.4rem 1.45rem;
  background: rgba(245,236,221,.66);
  border: 1px solid rgba(184,117,73,.45);
  box-shadow: 14px 14px 0 rgba(185,174,162,.15);
}

.vellum-note p, .specimen-card p:not(.mono-kicker), .burgundy-plate p:not(.fragment) {
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  line-height: 1.75;
  margin: .75rem 0 0;
}

.implementation-rubric {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.stamp { color: var(--rose); }

.skeleton-card {
  position: absolute;
  right: 8%;
  top: 22%;
  width: min(21rem, 42%);
  padding: 1.4rem;
  border: 1px solid rgba(185,174,162,.42);
}

.skeleton-card i {
  display: block;
  height: .72rem;
  margin: .9rem 0;
  background: linear-gradient(100deg, rgba(185,174,162,.18), rgba(255,248,236,.85), rgba(155,74,85,.16));
  background-size: 220% 100%;
  animation: shimmer 2.6s ease-in-out infinite;
}

.skeleton-card i:nth-child(2) { width: 78%; }
.skeleton-card i:nth-child(3) { width: 54%; }
.skeleton-card i:nth-child(4) { width: 88%; }
.loading-card.resolved { opacity: .18; transform: translateY(-.8rem); }

.quiet-page { display: flex; flex-direction: column; justify-content: center; }
.text-page { display: flex; flex-direction: column; justify-content: center; gap: 2rem; }

.object-study {
  position: relative;
  width: min(22rem, 70%);
  aspect-ratio: 1;
  margin-top: 3rem;
  border: 1px solid rgba(184,117,73,.28);
  background: radial-gradient(circle at 70% 22%, rgba(217,167,95,.22), transparent 6rem);
}

.chair-study span, .switch-study span, .mask-study span { position: absolute; display: block; }
.chair-back { width: 42%; height: 48%; left: 27%; top: 18%; border-left: 2px solid var(--burgundy); border-top: 2px solid var(--burgundy); }
.chair-seat { width: 46%; height: 2px; left: 28%; top: 58%; background: var(--burgundy); }
.chair-leg { width: 2px; height: 30%; top: 58%; background: var(--copper); }
.chair-leg.one { left: 34%; transform: rotate(8deg); }
.chair-leg.two { left: 68%; transform: rotate(-8deg); }

.mask-study { margin: auto; }
.mask-shape { inset: 18% 20%; border-radius: 50% 50% 44% 44%; background: var(--rice); box-shadow: 0 22px 35px rgba(109,24,40,.18); }
.eye { width: 14%; height: 5%; top: 44%; border-radius: 50%; background: var(--rose); }
.eye.left { left: 38%; }
.eye.right { right: 38%; }

.burgundy-plate {
  background: linear-gradient(145deg, #6D1828, #9B4A55);
  color: var(--rice);
}
.burgundy-plate h2, .burgundy-plate .chapter-number { color: var(--rice); }
.burgundy-plate .fragment, .burgundy-plate .pale { color: rgba(255,248,236,.78); }

.small-lines { position: relative; inset: auto; width: 68%; margin: 2rem 0 0 auto; }

.switch-study .plate { inset: 20% 30%; border: 1px solid var(--copper); background: rgba(255,248,236,.55); box-shadow: inset 0 0 0 1rem rgba(185,174,162,.12); }
.toggle-specimen {
  position: absolute;
  left: 42%;
  top: 42%;
  width: 16%;
  height: 26%;
  border: 1px solid var(--burgundy);
  background: var(--rice);
  cursor: pointer;
}
.toggle-specimen span { inset: 18% 25%; background: var(--copper); transition: transform .45s ease, background .45s ease; }
.toggle-specimen.on span { transform: translateY(58%); background: var(--burgundy); }
.decision-card.lit { box-shadow: 0 0 0 1px rgba(217,167,95,.7), 0 25px 80px rgba(217,167,95,.22); }

.footnote-shelf {
  width: max-content;
  max-width: 100%;
  padding: .8rem 1rem;
  border-top: 1px solid var(--ghost);
  color: var(--copper);
}

.page-turn {
  align-self: flex-start;
  border: 1px solid var(--copper);
  background: rgba(255,248,236,.55);
  color: var(--burgundy);
  padding: .9rem 1.15rem;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease;
}
.page-turn:hover { transform: translateX(.3rem); background: var(--rice); }

.circuit { position: absolute; pointer-events: none; opacity: .72; }
.circuit span { position: absolute; background: var(--copper); transform-origin: left center; }
.circuit span::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 13px rgba(217,167,95,.65); }
.circuit-one { right: 10%; bottom: 11%; width: 18rem; height: 9rem; }
.circuit-one span:nth-child(1) { width: 10rem; height: 1px; left: 0; top: 2rem; }
.circuit-one span:nth-child(2) { width: 1px; height: 5rem; left: 10rem; top: 2rem; }
.circuit-one span:nth-child(3) { width: 6rem; height: 1px; left: 10rem; top: 7rem; }
.circuit-two { left: 12%; bottom: 13%; width: 15rem; height: 7rem; }
.circuit-two span:nth-child(1) { width: 8rem; height: 1px; top: 1rem; left: 1rem; }
.circuit-two span:nth-child(2) { width: 1px; height: 4rem; top: 1rem; left: 9rem; }
.circuit-two span:nth-child(3) { width: 4rem; height: 1px; top: 5rem; left: 9rem; }
.draw { inset: auto 10% 14% auto; width: 16rem; height: 9rem; }
.draw span:nth-child(1) { width: 0; height: 1px; top: 1rem; left: 0; }
.draw span:nth-child(2) { width: 1px; height: 0; top: 1rem; left: 9rem; }
.draw span:nth-child(3) { width: 0; height: 1px; top: 6rem; left: 9rem; }
.draw span:nth-child(4) { width: 1px; height: 0; top: 3rem; left: 4rem; }
.in-view .draw span:nth-child(1) { animation: drawWidth 1.3s ease forwards; }
.in-view .draw span:nth-child(2) { animation: drawHeight 1s .8s ease forwards; }
.in-view .draw span:nth-child(3) { animation: drawWidthShort 1s 1.4s ease forwards; }
.in-view .draw span:nth-child(4) { animation: drawHeightShort .8s 1s ease forwards; }

.crop { position: absolute; width: 2rem; height: 2rem; border-color: var(--ghost); }
.crop-tl { left: 1rem; top: 1rem; border-left: 1px solid; border-top: 1px solid; }

.spread .page > * { transition: opacity .9s ease, transform .9s ease; }
.chapter-spread .page > * { opacity: .35; transform: translateY(1.4rem); }
.chapter-spread.in-view .page > * { opacity: 1; transform: translateY(0); }
.book.vellum .spread { filter: sepia(.08) brightness(1.02); }

@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes breathe { 0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .55; } 50% { transform: translate3d(1.2rem,-1rem,0) scale(1.12); opacity: .9; } }
@keyframes drawWidth { to { width: 9rem; } }
@keyframes drawWidthShort { to { width: 5rem; } }
@keyframes drawHeight { to { height: 5rem; } }
@keyframes drawHeightShort { to { height: 3rem; } }

@media (max-width: 860px) {
  .spread { grid-template-columns: 1rem 1fr 1rem; padding-top: 5rem; }
  .folio, .gutter { display: none; }
  .page, .verso, .recto { grid-column: 2; min-height: 62vh; border: 1px solid rgba(185,174,162,.36); }
  h1 { font-size: clamp(4.4rem, 24vw, 9rem); }
  h2 { font-size: clamp(4rem, 22vw, 8rem); }
  .skeleton-card { position: relative; right: auto; top: auto; width: 100%; margin-top: 3rem; }
}