:root {
  --ink: #050505;
  --charcoal: #171717;
  --paper: #F2EEE6;
  --bone: #B8B3AA;
  --silver: #6F7372;
  --ice: #DDE7E4;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "IBM Plex Sans", Inter, Arial, sans-serif;
  --jp: "Noto Serif JP", serif;
}

/* Compliance note: IBM Plex Sans** for tutorial body text is implemented with IBM Plex Sans. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 8%, rgba(221, 231, 228, .08), transparent 22rem),
    radial-gradient(circle at 88% 30%, rgba(111, 115, 114, .12), transparent 18rem),
    linear-gradient(125deg, #050505 0%, #050505 42%, #0b0b0b 72%, #050505 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .19;
  background-image:
    repeating-linear-gradient(27deg, rgba(242,238,230,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(117deg, rgba(111,115,114,.08) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
}

.cursor-lens {
  position: fixed;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(221,231,228,.18);
  clip-path: polygon(50% 0, 100% 28%, 100% 74%, 48% 100%, 0 72%, 0 24%);
  pointer-events: none;
  z-index: 18;
  transform: translate(-50%, -50%) rotate(30deg);
  opacity: .16;
  filter: blur(1px);
  background: radial-gradient(circle, rgba(221,231,228,.09), transparent 58%);
}

.site-header {
  position: fixed;
  inset: 1.15rem 1.35rem auto 1.35rem;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  color: var(--bone);
  mix-blend-mode: difference;
}

.wordmark, .closing-mark {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  letter-spacing: .08em;
  color: var(--paper);
}

.header-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--silver), transparent);
}

.header-note, .eyebrow, .scene-title, .ingredient-strip, .floating-annotation, .clipped-note {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
}

.floorplan { position: relative; }

.chapter {
  min-height: 100vh;
  position: relative;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.3rem, 5vw, 5rem);
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: 4vw;
  top: 11vh;
  font-family: var(--serif);
  font-size: clamp(8rem, 22vw, 24rem);
  color: rgba(184,179,170,.035);
  z-index: -1;
}

.callout {
  max-width: 34rem;
  padding: 1.2rem 1.35rem 1.45rem;
  background: rgba(23,23,23,.78);
  border: 1px solid rgba(184,179,170,.24);
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  box-shadow: 0 1.6rem 5rem rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

.callout h1, .callout h2 {
  margin: .35rem 0 .8rem;
  font-family: var(--serif);
  font-weight: 500;
  line-height: .96;
  color: var(--paper);
}

.callout h1 { font-size: clamp(3rem, 8.5vw, 8.4rem); }
.callout h2 { font-size: clamp(2.45rem, 6.5vw, 6.6rem); }

.callout p:not(.eyebrow) {
  margin: 0;
  color: var(--bone);
  font-size: clamp(.96rem, 1.45vw, 1.14rem);
  line-height: 1.75;
}

.jp { font-family: var(--jp); }
.vertical-note, .side-glyph {
  writing-mode: vertical-rl;
  color: var(--silver);
  letter-spacing: .18em;
  font-size: .85rem;
}

.threshold {
  grid-template-columns: minmax(2rem, .2fr) minmax(18rem, 1fr) minmax(18rem, .85fr);
  align-items: center;
  gap: 2rem;
}

.door-scene {
  position: relative;
  min-height: 33rem;
  transform: rotate(-7deg);
  filter: blur(5px);
  transition: filter .9s ease, transform .9s ease;
}

.active .door-scene, .focusable.is-focused { filter: blur(0); }

.door-frame {
  position: absolute;
  left: 34%; top: 12%;
  width: 12rem; height: 18rem;
  transform: skewY(-30deg) rotate(30deg);
  border: 1px solid var(--ice);
  box-shadow: inset 0 0 2.4rem rgba(221,231,228,.06), 0 0 4rem rgba(221,231,228,.08);
}

.door-frame span { position: absolute; background: var(--silver); opacity: .7; }
.door-frame span:nth-child(1) { width: 1px; height: 115%; left: 18%; top: -7%; }
.door-frame span:nth-child(2) { width: 1px; height: 115%; right: 20%; top: -7%; }
.door-frame span:nth-child(3) { height: 1px; width: 140%; left: -20%; top: 34%; }
.door-frame span:nth-child(4) { height: 1px; width: 140%; left: -20%; bottom: 22%; }

.iso-floor, .door-shadow {
  position: absolute;
  left: 25%; top: 48%;
  width: 28rem; height: 17rem;
  transform: rotate(30deg) skewX(-30deg);
  transform-origin: center;
}

.iso-floor {
  background: linear-gradient(135deg, rgba(242,238,230,.1), rgba(23,23,23,.96));
  border: 1px solid rgba(184,179,170,.32);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.door-shadow {
  translate: 3rem 3rem;
  background: rgba(0,0,0,.56);
  filter: blur(18px);
}

.leader { position: absolute; fill: none; stroke: var(--silver); stroke-width: 1; opacity: .8; }
.leader path { stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.6s ease; }
.active .leader path { stroke-dashoffset: 0; }
.leader-a { right: 12vw; bottom: 22vh; width: 34vw; }

.threshold-copy { justify-self: end; transform: translateY(9vh) rotate(1deg); }

.tools { grid-template-columns: 1.05fr .75fr; align-items: center; }
.scene-title { position: absolute; left: 8vw; top: 15vh; }

.tool-table, .pour-scene, .cellar-scene, .map-board {
  position: relative;
  min-height: 32rem;
  filter: blur(4px);
  transform: rotate(-3deg) scale(.98);
  transition: filter .8s ease, transform .8s ease;
}
.chapter.active .tool-table, .chapter.active .pour-scene, .chapter.active .cellar-scene, .chapter.active .map-board {
  filter: blur(.4px);
  transform: rotate(0deg) scale(1);
}

.table-plane {
  position: absolute; inset: 26% 8% auto 5%; height: 16rem;
  background: linear-gradient(120deg, #171717 0 48%, rgba(242,238,230,.08) 49%, #050505 70%);
  border: 1px solid rgba(184,179,170,.26);
  transform: rotate(30deg) skewX(-30deg);
  clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}
.block, .cellar-block, .map-piece { position: absolute; background: var(--charcoal); border: 1px solid rgba(184,179,170,.23); box-shadow: 1rem 1.4rem 0 rgba(0,0,0,.35); }
.block-one { width: 8rem; height: 8rem; left: 22%; top: 28%; transform: rotate(30deg) skewX(-30deg); }
.block-two { width: 5rem; height: 11rem; left: 55%; top: 36%; transform: rotate(30deg) skewX(-30deg); background: #050505; }
.ruler { position: absolute; height: 1px; background: repeating-linear-gradient(90deg, var(--bone) 0 9px, transparent 9px 14px); transform-origin: left; }
.ruler-one { width: 26rem; left: 18%; top: 60%; transform: rotate(-30deg); }
.ruler-two { width: 18rem; left: 47%; top: 37%; transform: rotate(30deg); }
.spoon { position: absolute; width: 18rem; height: .45rem; left: 35%; top: 48%; transform: rotate(-22deg); background: linear-gradient(90deg, transparent, var(--silver), transparent); border-radius: 50%; }
.spoon::after { content: ""; position: absolute; right: -.5rem; top: -1rem; width: 2.4rem; height: 2.4rem; border: 1px solid var(--silver); border-radius: 50%; }
.tools-copy { justify-self: end; transform: rotate(-2deg); }
.ingredient-strip { position: absolute; right: 7vw; bottom: 9vh; display: flex; gap: .4rem; flex-wrap: wrap; }
.ingredient-strip span { border: 1px solid rgba(111,115,114,.7); padding: .55rem .7rem; clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%); }

.pour { grid-template-columns: .78fr 1.1fr; align-items: center; }
.pour-copy { transform: rotate(2deg); }
.bottle-specimen {
  position: absolute; left: 28%; top: 13%; width: 13rem; height: 24rem;
  border: 0; background: transparent; cursor: pointer; transform: rotate(-18deg); transition: transform .7s ease;
}
.bottle-specimen.rotated { transform: rotate(13deg) translateX(2rem); }
.bottle-specimen span { position: absolute; left: 50%; transform: translateX(-50%) rotate(30deg) skewX(-30deg); border: 1px solid rgba(221,231,228,.55); background: rgba(23,23,23,.88); }
.cap { width: 3.2rem; height: 1.5rem; top: 0; }
.neck { width: 4.2rem; height: 8rem; top: 1.3rem; }
.body { width: 9rem; height: 5.3rem; }
.body-a { top: 9.8rem; background: rgba(5,5,5,.92); }
.body-b { top: 14.1rem; translate: 1.25rem 0; background: rgba(111,115,114,.26); }
.body-c { top: 18.4rem; translate: 2.5rem 0; background: rgba(221,231,228,.08); }
.light-shaft { position: absolute; left: 39%; top: 38%; width: 32rem; height: 14rem; background: linear-gradient(90deg, rgba(221,231,228,.22), transparent); clip-path: polygon(0 28%, 100% 0, 82% 100%, 8% 64%); filter: blur(.3px); transform: rotate(8deg); }
.glass-cube { position: absolute; right: 16%; bottom: 18%; width: 9rem; height: 9rem; border: 1px solid var(--ice); background: linear-gradient(135deg, rgba(221,231,228,.13), rgba(5,5,5,.82)); transform: rotate(30deg) skewX(-30deg); box-shadow: 1.4rem 1.4rem 0 rgba(23,23,23,.95); }
.leader-b { right: 8%; top: 23%; width: 28rem; }
.clipped-note { position: absolute; right: 6vw; top: 26vh; max-width: 20rem; padding: .9rem; border: 1px solid rgba(221,231,228,.22); background: rgba(5,5,5,.78); clip-path: polygon(0 0, 100% 0, 90% 100%, .8rem 100%, 0 calc(100% - .8rem)); }

.cellar { grid-template-columns: 1fr 1fr; align-items: center; }
.hatch-field { position: absolute; inset: 10vh 7vw; opacity: .28; background-image: repeating-linear-gradient(120deg, transparent 0 8px, rgba(184,179,170,.18) 8px 9px), repeating-linear-gradient(62deg, transparent 0 13px, rgba(111,115,114,.19) 13px 14px); clip-path: polygon(8% 14%, 88% 0, 100% 72%, 38% 100%, 0 68%); animation: hatchDrift 9s linear infinite; }
.cellar-copy { z-index: 2; transform: rotate(-1deg); }
.cellar-scene { min-height: 38rem; }
.stair { position: absolute; width: 16rem; height: 4rem; border: 1px solid rgba(184,179,170,.25); background: #171717; transform: rotate(30deg) skewX(-30deg); }
.s1 { left: 12%; top: 22%; } .s2 { left: 20%; top: 31%; background: #101010; } .s3 { left: 28%; top: 40%; background: #0b0b0b; } .s4 { left: 36%; top: 49%; background: #050505; }
.cb1 { width: 11rem; height: 15rem; right: 16%; top: 22%; transform: rotate(30deg) skewX(-30deg); }
.cb2 { width: 9rem; height: 9rem; right: 34%; bottom: 14%; transform: rotate(30deg) skewX(-30deg); background: rgba(111,115,114,.18); }
.side-glyph { position: absolute; right: 5vw; bottom: 16vh; }

.final-map { min-height: 110vh; grid-template-columns: .7fr 1.1fr; align-items: center; }
.map-copy { transform: rotate(1.5deg); }
.map-board { min-height: 42rem; }
.map-piece { transform: rotate(30deg) skewX(-30deg); }
.p1 { width: 14rem; height: 9rem; left: 17%; top: 12%; background: rgba(242,238,230,.08); }
.p2 { width: 18rem; height: 7rem; left: 43%; top: 24%; }
.p3 { width: 10rem; height: 16rem; left: 29%; top: 43%; background: #050505; }
.p4 { width: 16rem; height: 10rem; left: 55%; top: 52%; background: rgba(111,115,114,.13); }
.p5 { width: 7rem; height: 7rem; left: 16%; top: 68%; background: rgba(221,231,228,.09); }
.map-line { position: absolute; height: 1px; background: var(--silver); transform-origin: left; opacity: .75; }
.ml1 { width: 34rem; left: 20%; top: 38%; transform: rotate(30deg); }
.ml2 { width: 25rem; left: 44%; top: 48%; transform: rotate(-30deg); }
.ml3 { width: 20rem; left: 25%; top: 70%; transform: rotate(0deg); }
.closing-mark { position: absolute; right: 7vw; bottom: 8vh; font-size: clamp(3rem, 9vw, 10rem); opacity: .22; }

.floating-annotation {
  position: fixed;
  left: 1.3rem;
  bottom: 1.2rem;
  z-index: 35;
  max-width: 24rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(184,179,170,.22);
  background: rgba(5,5,5,.78);
  color: var(--ice);
  transform: translateY(140%);
  transition: transform .35s ease;
}
.floating-annotation.visible { transform: translateY(0); }

@keyframes hatchDrift { to { background-position: 80px 0, -80px 0; } }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr; gap: .35rem; }
  .header-rule { display: none; }
  .chapter, .threshold, .tools, .pour, .cellar, .final-map { grid-template-columns: 1fr; gap: 2rem; }
  .threshold-copy, .tools-copy, .pour-copy, .cellar-copy, .map-copy { transform: none; justify-self: start; }
  .vertical-note, .side-glyph { writing-mode: horizontal-tb; }
  .door-scene, .tool-table, .pour-scene, .cellar-scene, .map-board { min-height: 25rem; }
  .leader-a, .leader-b { display: none; }
  .ingredient-strip, .clipped-note { position: relative; inset: auto; right: auto; top: auto; }
}