:root {
  /* Typography compliance: IBM Plex Sans KR** Interface annotations */
  --ink: #090806;
  --washi: #F2E8D3;
  --gold: #B9974A;
  --leaf: #2F5D46;
  --brown: #3A2418;
  --bone: #FFF9EC;
  --oxide: #8C2F1B;
  --display: "Libre Baskerville", Baskerville, Georgia, serif;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --label: "IBM Plex Sans KR", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--display);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .19;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,249,236,.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 42%, rgba(185,151,74,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 81%, rgba(242,232,211,.16) 0 1px, transparent 1.6px);
  background-size: 33px 37px, 51px 47px, 27px 29px;
}

.corner-nav {
  position: fixed;
  z-index: 30;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,249,236,.62);
  font: 300 11px/1.1 var(--label);
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}

.chamber {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(22px, 8vw) repeat(10, minmax(0, 1fr)) minmax(22px, 8vw);
  grid-template-rows: minmax(70px, 12vh) repeat(8, 1fr) minmax(70px, 12vh);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 78%, rgba(47,93,70,.2), transparent 31%),
    radial-gradient(circle at 84% 12%, rgba(185,151,74,.12), transparent 29%),
    var(--ink);
}

.vertical-rail {
  grid-column: 11 / 12;
  grid-row: 3 / 9;
  writing-mode: vertical-rl;
  color: rgba(242,232,211,.42);
  font: 300 12px var(--label);
  letter-spacing: .45em;
  text-transform: uppercase;
  transform: translateX(32px);
}

.paper-slab {
  grid-column: 7 / 12;
  grid-row: 2 / 8;
  background: var(--washi);
  transform: rotate(-2.5deg) translateX(7vw);
  box-shadow: -35px 45px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(58,36,24,.08);
  clip-path: polygon(4% 0, 100% 3%, 96% 92%, 11% 100%, 0 28%);
}

.paper-slab::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(58,36,24,.16);
  clip-path: polygon(0 4%, 98% 0, 100% 90%, 8% 100%);
}

.slab-label {
  position: absolute;
  right: 34px;
  bottom: 44px;
  color: rgba(58,36,24,.55);
  font: 300 10px var(--label);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hero-copy {
  grid-column: 2 / 8;
  grid-row: 6 / 10;
  align-self: center;
  z-index: 3;
}

.coordinate {
  color: var(--gold);
  font: 300 11px/1.5 var(--label);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin: 0 0 28px;
}

h1, h2, p { margin-top: 0; }

h1 {
  font: 700 clamp(3.4rem, 9.8vw, 10rem)/.9 var(--display);
  letter-spacing: -.055em;
  margin-bottom: 30px;
  text-shadow: 0 0 18px rgba(255,249,236,.09);
}

h2 {
  font: 600 clamp(2.3rem, 5.6vw, 6.5rem)/.92 var(--serif);
  letter-spacing: -.035em;
  color: var(--bone);
}

.poem, .text-column p:not(.coordinate), .closing-copy p:not(.coordinate):not(.signature), .side-note {
  max-width: 520px;
  color: rgba(255,249,236,.75);
  font: 600 clamp(1.2rem, 2.1vw, 2rem)/1.28 var(--serif);
}

.fracture, .gold-seam, .final-seam {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform-origin: left center;
  transform: scaleX(0) rotate(-11deg);
}

.fracture-opening {
  width: 68vw;
  left: 26vw;
  top: 46vh;
  z-index: 4;
  animation: growSeam 2.6s .4s cubic-bezier(.2,.8,.1,1) forwards;
}

.stone-geometry {
  position: absolute;
  width: 21vw;
  aspect-ratio: 1;
  left: 12vw;
  top: 16vh;
  background: linear-gradient(135deg, #1b1713, #090806 52%, #3A2418);
  clip-path: polygon(14% 8%, 91% 0, 100% 68%, 42% 100%, 0 53%);
  opacity: .72;
  transform: rotate(8deg);
}

.red-seal {
  position: absolute;
  left: 63vw;
  bottom: 19vh;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--oxide);
  color: var(--washi);
  font: 700 24px var(--display);
  transform: rotate(5deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
}

.chamber-ink::before { background: linear-gradient(108deg, var(--ink) 0 52%, #120f0b 52% 100%); }

.matte-panel {
  grid-column: 2 / 7;
  grid-row: 2 / 9;
  background: var(--brown);
  opacity: .88;
  transform: rotate(1.7deg) translateY(18px);
  box-shadow: 38px 42px 80px rgba(0,0,0,.34);
  clip-path: polygon(0 5%, 94% 0, 100% 88%, 10% 100%);
}

.broken-square {
  grid-column: 7 / 12;
  grid-row: 3 / 9;
  border: 1px solid rgba(185,151,74,.58);
  transform: rotate(-5deg) translateX(-28px);
}

.broken-square span {
  position: absolute;
  inset: 16% 22% 18% 10%;
  background: var(--washi);
  clip-path: polygon(8% 0, 100% 6%, 88% 100%, 0 80%);
  opacity: .94;
}

.column-left { grid-column: 3 / 7; grid-row: 3 / 8; z-index: 2; }
.column-right { grid-column: 8 / 12; grid-row: 3 / 8; z-index: 2; align-self: center; }

.side-note {
  grid-column: 8 / 11;
  grid-row: 8 / 9;
  color: rgba(242,232,211,.55);
  font-style: italic;
  transform: translateX(38px);
}

.seam-two {
  width: 54vw;
  right: 8vw;
  top: 68vh;
  transform: scaleX(0) rotate(7deg);
}

.chamber-leaf::before { background: linear-gradient(90deg, var(--washi), #eadabd 58%, var(--ink) 58%); }
.chamber-leaf .coordinate { color: var(--oxide); }
.chamber-leaf h2 { color: var(--brown); }
.chamber-leaf .text-column p:not(.coordinate) { color: rgba(58,36,24,.76); }

.paper-plane {
  grid-column: 2 / 7;
  grid-row: 2 / 9;
  background: rgba(255,249,236,.58);
  clip-path: polygon(0 12%, 86% 0, 100% 78%, 12% 100%);
  transform: rotate(6deg) translateX(-36px);
  border: 1px solid rgba(58,36,24,.12);
}

.compiled-leaf {
  grid-column: 4 / 9;
  grid-row: 2 / 10;
  width: min(58vw, 560px);
  align-self: center;
  justify-self: center;
  filter: drop-shadow(24px 32px 38px rgba(9,8,6,.38));
}

.facet { fill: rgba(255,249,236,.08); stroke: rgba(185,151,74,.36); stroke-width: 1; }
.vein { fill: none; stroke: #B9974A; stroke-width: 3; stroke-linecap: round; opacity: .84; }

.tick-field { position: absolute; inset: 18vh 10vw auto auto; width: 170px; height: 170px; }
.tick-field i { position: absolute; width: 23px; height: 1px; background: var(--gold); transform: rotate(var(--r)); left: var(--x); top: var(--y); }
.tick-field i:nth-child(1) { --x: 18px; --y: 28px; --r: 12deg; }
.tick-field i:nth-child(2) { --x: 112px; --y: 45px; --r: -18deg; }
.tick-field i:nth-child(3) { --x: 64px; --y: 93px; --r: 88deg; }
.tick-field i:nth-child(4) { --x: 136px; --y: 128px; --r: 0deg; }
.tick-field i:nth-child(5) { --x: 24px; --y: 142px; --r: -35deg; }

.chamber-compiler::before { background: radial-gradient(circle at 72% 40%, rgba(47,93,70,.2), transparent 28%), var(--ink); }

.compiler-slab {
  grid-column: 2 / 9;
  grid-row: 2 / 9;
  background: linear-gradient(135deg, rgba(242,232,211,.96), rgba(242,232,211,.7));
  clip-path: polygon(1% 4%, 92% 0, 100% 83%, 16% 100%, 0 63%);
  transform: rotate(-1deg);
}

.fractured-circle {
  grid-column: 7 / 12;
  grid-row: 3 / 9;
  width: min(42vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(185,151,74,.6);
  align-self: center;
  justify-self: center;
  background: conic-gradient(from 40deg, transparent 0 19%, rgba(185,151,74,.18) 19% 23%, transparent 23% 47%, rgba(47,93,70,.38) 47% 58%, transparent 58% 100%);
  clip-path: polygon(0 8%, 62% 0, 100% 22%, 91% 100%, 25% 94%);
}

.closing-copy {
  grid-column: 3 / 8;
  grid-row: 4 / 8;
  z-index: 2;
  color: var(--brown);
}

.closing-copy h2 { color: var(--brown); }
.closing-copy p:not(.coordinate):not(.signature) { color: rgba(58,36,24,.78); }
.signature { font: 700 clamp(2rem, 5vw, 5rem)/1 var(--display); color: var(--ink); letter-spacing: -.05em; margin-top: 34px; }

.final-seam {
  width: 62vw;
  left: 18vw;
  bottom: 25vh;
  transform: scaleX(0) rotate(-3deg);
}

.reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px) rotate(var(--start-rotate, 0deg));
  transition: opacity 1.45s cubic-bezier(.2,.8,.1,1), filter 1.45s cubic-bezier(.2,.8,.1,1), transform 1.45s cubic-bezier(.2,.8,.1,1);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) rotate(var(--end-rotate, 0deg));
}

.paper-slab.reveal { --start-rotate: -2.5deg; --end-rotate: -2.5deg; transform: translateX(9vw) translateY(28px) rotate(-2.5deg); }
.paper-slab.reveal.is-visible { transform: translateX(7vw) translateY(0) rotate(-2.5deg); }
.matte-panel.reveal { --start-rotate: 1.7deg; --end-rotate: 1.7deg; }
.broken-square.reveal { --start-rotate: -5deg; --end-rotate: -5deg; }
.paper-plane.reveal { --start-rotate: 6deg; --end-rotate: 6deg; }
.compiler-slab.reveal { --start-rotate: -1deg; --end-rotate: -1deg; }

.chamber.is-active .gold-seam, .chamber.is-active .final-seam { animation: growSeam 2s .35s cubic-bezier(.2,.8,.1,1) forwards; }

@keyframes growSeam { to { transform: scaleX(1) rotate(var(--seam-rotate, -11deg)); } }

@media (max-width: 760px) {
  .chamber { grid-template-columns: 22px repeat(6, 1fr) 22px; }
  .paper-slab, .matte-panel, .broken-square, .paper-plane, .compiled-leaf, .compiler-slab, .fractured-circle { grid-column: 2 / 8; }
  .hero-copy, .column-left, .column-right, .closing-copy { grid-column: 2 / 8; grid-row: 5 / 9; }
  .paper-slab { grid-row: 2 / 6; }
  .compiled-leaf { width: 78vw; opacity: .62; }
  .corner-nav { left: 18px; right: 18px; font-size: 9px; }
  .vertical-rail { display: none; }
  .side-note { grid-column: 2 / 7; transform: none; }
}