:root {
  --charred: #17110B;
  --endgrain: #4A2E1A;
  --paper: #F1E6CF;
  --indigo: #223A5E;
  --lacquer: #102A24;
  --brass: #C69A3D;
  --sap: #7AA36B;
  --graphite: #5E625B;
  --title: "Gowun Batang", serif;
  --serif: "DM Serif Display", serif;
  --sans: "IBM Plex Sans KR", sans-serif;
  --hand: "Nanum Pen Script", cursive;
  --font-check: "KR** annotations";
}

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

a { color: inherit; text-decoration: none; }

.grain-film {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .2;
  background:
    radial-gradient(circle at 20% 30%, rgba(241,230,207,.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(92deg, rgba(241,230,207,.04) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(7deg, transparent 0 11px, rgba(74,46,26,.35) 12px 13px);
  mix-blend-mode: overlay;
}

.lamp {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  pointer-events: none;
  background: radial-gradient(circle, rgba(198,154,61,.2), rgba(241,230,207,.08) 32%, transparent 68%);
  mix-blend-mode: screen;
  filter: blur(3px);
}

.tool-roll {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: grid;
  gap: 10px;
  padding: 12px 8px;
  background: rgba(23,17,11,.72);
  border: 1px solid rgba(198,154,61,.35);
  border-radius: 999px;
  box-shadow: 0 24px 55px rgba(0,0,0,.45), inset 0 0 18px rgba(198,154,61,.08);
}
.tool-link {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 44px;
  min-height: 50px;
  color: rgba(241,230,207,.55);
  transition: color .4s ease, transform .4s ease;
}
.tool-link.active { color: var(--brass); transform: translateX(5px); }
.tool-link em { font: 500 9px/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.tool { position: relative; display: block; width: 24px; height: 24px; }
.awl::before { content: ""; position: absolute; left: 11px; top: 2px; width: 2px; height: 20px; background: currentColor; transform: rotate(20deg); }
.plane::before { content: ""; position: absolute; inset: 8px 2px 6px; border: 2px solid currentColor; transform: skewX(-20deg); }
.wedge::before { content: ""; position: absolute; inset: 4px; clip-path: polygon(0 100%,100% 50%,0 0); background: currentColor; }
.brush::before { content: ""; position: absolute; left: 10px; top: 2px; width: 4px; height: 22px; background: currentColor; border-radius: 3px; }
.brush::after { content: ""; position: absolute; left: 5px; bottom: 0; width: 14px; height: 8px; background: currentColor; clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); }
.cord::before { content: ""; position: absolute; left: 11px; top: 0; width: 2px; height: 15px; background: currentColor; }
.cord::after { content: ""; position: absolute; left: 6px; bottom: 1px; width: 12px; height: 9px; border: 2px solid currentColor; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.chapter {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(7rem, 18vw, 18rem);
  line-height: .72;
  color: rgba(198,154,61,.18);
  letter-spacing: -.05em;
  pointer-events: none;
}
.label {
  margin: 0 0 16px;
  color: var(--brass);
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
h1, h2 { font-family: var(--title); font-weight: 700; margin: 0; }
h2 { font-size: clamp(2.4rem, 6vw, 6.6rem); line-height: .95; letter-spacing: -.045em; }
p { line-height: 1.75; }

.door-slab {
  background:
    radial-gradient(circle at 88% 20%, rgba(198,154,61,.08), transparent 24%),
    linear-gradient(120deg, var(--charred), #090604 58%, var(--lacquer));
}
.door-panel {
  position: absolute;
  top: -6vh;
  left: -8vw;
  width: 82vw;
  height: 113vh;
  transform: rotate(-4deg) translateX(calc(var(--door-shift, 0) * -42vw));
  transition: transform .12s linear;
  background:
    radial-gradient(ellipse at 24% 22%, rgba(198,154,61,.14), transparent 18%),
    repeating-linear-gradient(88deg, rgba(241,230,207,.035) 0 2px, transparent 2px 17px),
    linear-gradient(95deg, #21140b, var(--charred) 42%, #2a170c 100%);
  border-right: 8px solid rgba(74,46,26,.95);
  box-shadow: 30px 0 90px rgba(0,0,0,.7), inset -18px 0 45px rgba(0,0,0,.4);
}
.door-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 42% 51%, transparent 0 16px, rgba(198,154,61,.05) 17px 19px, transparent 20px 32px);
  opacity: .72;
}
.ring-map { position: absolute; border: 2px solid rgba(198,154,61,.2); border-radius: 50%; filter: blur(.2px); }
.ring-one { width: 430px; height: 260px; left: 8%; bottom: 10%; transform: rotate(22deg); }
.ring-two { width: 280px; height: 420px; right: 10%; top: 6%; transform: rotate(-18deg); }
.saw-border { position: absolute; right: -2px; top: 0; width: 34px; height: 100%; background: linear-gradient(135deg, transparent 50%, rgba(198,154,61,.22) 51%) 0 0/24px 24px; }
.door-slab .chapter { position: absolute; right: 10%; top: 18%; }
.brand-seal {
  position: absolute;
  left: 19%;
  top: 42%;
  transform: rotate(-8deg);
  font-size: clamp(4rem, 10vw, 11rem);
  color: #100905;
  text-shadow: 0 1px 0 rgba(198,154,61,.18), 0 -1px 0 rgba(0,0,0,.8), 0 0 20px rgba(198,154,61,.1);
  letter-spacing: -.07em;
}
.brass-dot { color: var(--brass); text-shadow: 0 0 22px rgba(198,154,61,.9); }
.burned-line { position: absolute; left: 24%; top: 58%; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 3rem); color: rgba(241,230,207,.58); transform: rotate(-8deg); }
.door-note { position: absolute; right: 14%; bottom: 14%; color: rgba(241,230,207,.48); font-size: .95rem; letter-spacing: .04em; }
.registration-pin, .tack { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F1E6CF, var(--brass) 38%, #6b4615 78%); box-shadow: 0 0 28px rgba(198,154,61,.75); }
.registration-pin { right: 22%; top: 34%; animation: glint 3.4s ease-in-out infinite; }
.door-reveal { position: absolute; right: 8vw; top: 42vh; max-width: 330px; color: rgba(241,230,207,.64); font-family: var(--hand); font-size: 2rem; transform: rotate(4deg); }
.moth { position: absolute; right: 19vw; top: 17vh; width: 14px; height: 10px; border-radius: 50% 50% 20% 20%; background: rgba(241,230,207,.58); box-shadow: 0 0 18px rgba(241,230,207,.4); animation: moth 8s ease-in-out infinite; }

.grain-table {
  background: linear-gradient(160deg, #1d120b 0%, var(--endgrain) 45%, var(--charred) 100%);
  padding: 10vh 7vw 8vh 12vw;
}
.table-plane {
  position: relative;
  min-height: 82vh;
  transform: rotate(-3deg);
  border-radius: 44px;
  background:
    repeating-linear-gradient(96deg, rgba(241,230,207,.045) 0 2px, transparent 2px 21px),
    radial-gradient(ellipse at 65% 55%, rgba(198,154,61,.12), transparent 38%),
    #2d1b0d;
  box-shadow: inset 0 0 80px rgba(0,0,0,.42), 0 35px 80px rgba(0,0,0,.42);
}
.table-num { position: absolute; right: 5%; bottom: 5%; }
.paper {
  position: absolute;
  color: var(--charred);
  background: linear-gradient(130deg, rgba(241,230,207,.92), rgba(241,230,207,.72));
  border: 1px solid rgba(198,154,61,.28);
  box-shadow: 0 24px 45px rgba(0,0,0,.33), inset 0 0 50px rgba(255,255,255,.14);
  backdrop-filter: blur(2px);
}
.paper::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(94,98,91,.18); pointer-events: none; }
.sheet-main { left: 9%; top: 13%; width: min(690px, 62vw); padding: 46px 52px 64px; transform: rotate(2deg); }
.sheet-main h2 { color: var(--endgrain); font-size: clamp(2.2rem, 5vw, 5.2rem); }
.sheet-main p:not(.label) { max-width: 520px; color: var(--graphite); font-size: 1.08rem; }
.tack-a { left: 25px; top: 20px; }
.tack-b { right: 28px; top: 28px; }
.note-card { right: 9%; bottom: 15%; width: 360px; padding: 34px 34px 38px; transform: rotate(-7deg); }
.hand { font-family: var(--hand); font-size: 2.1rem; line-height: 1.1; color: var(--indigo); margin: 0 0 10px; }
.note-card ul { margin: 0; padding-left: 18px; color: var(--graphite); line-height: 2; }
.pencil-lines { display: grid; gap: 9px; margin-top: 28px; }
.pencil-lines i { display: block; height: 2px; width: 0; background: var(--graphite); opacity: .7; animation: drawLine 2.4s ease forwards; }
.pencil-lines i:nth-child(2) { animation-delay: .35s; max-width: 70%; }
.pencil-lines i:nth-child(3) { animation-delay: .7s; max-width: 43%; }
.curl { position: absolute; border: 8px solid rgba(241,230,207,.44); border-left-color: transparent; border-bottom-color: rgba(198,154,61,.28); border-radius: 50%; }
.shaving-a { width: 120px; height: 72px; left: 58%; top: 15%; animation: curl 9s ease-in-out infinite; }
.shaving-b { width: 70px; height: 120px; left: 25%; bottom: 12%; animation: curl 11s ease-in-out infinite reverse; }
.measure-strip { position: absolute; left: 7%; bottom: 7%; color: rgba(241,230,207,.45); font-family: var(--hand); font-size: 2rem; letter-spacing: .08em; }

.joinery-wall {
  background: linear-gradient(115deg, var(--charred), #24180f 48%, var(--indigo));
  padding: 9vh 7vw 8vh 12vw;
}
.wall-num { position: absolute; left: 8%; top: 10%; }
.wall-copy { position: relative; z-index: 3; width: min(560px, 48vw); margin-left: auto; margin-bottom: -40px; }
.wall-copy p:not(.label) { color: rgba(241,230,207,.62); max-width: 440px; }
.joinery-board { position: relative; height: 66vh; min-height: 520px; margin-top: 2vh; }
.joint-svg { width: min(900px, 74vw); height: 100%; overflow: visible; filter: drop-shadow(0 28px 35px rgba(0,0,0,.38)); }
.joint-piece {
  fill: rgba(241,230,207,.08);
  stroke: rgba(198,154,61,.54);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.15s cubic-bezier(.18,.9,.22,1), fill 1s ease, stroke-dashoffset 1.4s ease;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
}
.joinery-wall.in-view .joint-piece { stroke-dashoffset: 0; fill: rgba(241,230,207,.13); }
.piece-fit { transform: translateX(-70px); }
.piece-grain { transform: translateX(85px); }
.piece-tension { transform: translateY(55px); }
.joinery-wall.in-view .piece-fit, .joinery-wall.in-view .piece-grain, .joinery-wall.in-view .piece-tension { transform: translate(0); }
.guide-line { fill: none; stroke: rgba(94,98,91,.75); stroke-width: 2; stroke-dasharray: 12 12; }
.brass-node { fill: var(--brass); filter: drop-shadow(0 0 12px rgba(198,154,61,.8)); }
.sap-node { fill: var(--sap); filter: drop-shadow(0 0 12px rgba(122,163,107,.8)); }
.principle { position: absolute; width: 190px; padding: 16px; background: rgba(23,17,11,.72); border: 1px solid rgba(198,154,61,.28); color: rgba(241,230,207,.72); transform: translateY(20px); opacity: .2; transition: opacity .8s ease, transform .8s ease; }
.joinery-wall.in-view .principle { opacity: 1; transform: translateY(0); }
.principle strong { display: block; color: var(--brass); font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.principle span { font-size: .9rem; }
.principle-fit { left: 7%; top: 18%; }
.principle-grain { right: 13%; top: 34%; transition-delay: .25s; }
.principle-tension { left: 31%; bottom: 7%; transition-delay: .45s; }
.principle-finish { right: 4%; bottom: 18%; transition-delay: .65s; }

.finishing-basin { background: var(--lacquer); padding: 8vh 7vw 8vh 12vw; }
.basin-surface {
  position: relative;
  min-height: 84vh;
  border-radius: 50% 38% 45% 42% / 30% 42% 36% 45%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 55% 54%, rgba(34,58,94,.45), transparent 32%),
    radial-gradient(ellipse at 32% 45%, rgba(198,154,61,.14), transparent 18%),
    linear-gradient(140deg, #081511, var(--lacquer) 52%, #06100d);
  box-shadow: inset 0 0 90px rgba(0,0,0,.7), 0 35px 90px rgba(0,0,0,.4);
}
.basin-num { position: absolute; right: 7%; top: 8%; color: rgba(198,154,61,.12); }
.basin-copy { position: absolute; left: 9%; top: 22%; max-width: 620px; z-index: 3; }
.basin-copy p:not(.label):not(.reflection) { max-width: 450px; color: rgba(241,230,207,.66); }
.reflection { font-family: var(--title); font-size: clamp(2.6rem, 7vw, 7rem); transform: scaleY(-1) skewX(-8deg); opacity: .11; margin-top: 6vh; filter: blur(1px); }
.ripple { position: absolute; border: 1px solid rgba(241,230,207,.14); border-radius: 50%; animation: ripple 7s ease-in-out infinite; }
.r1 { width: 42vw; height: 14vw; left: 38%; top: 31%; }
.r2 { width: 30vw; height: 10vw; left: 19%; bottom: 18%; animation-delay: -2s; }
.r3 { width: 22vw; height: 8vw; right: 9%; bottom: 25%; animation-delay: -4s; }
.basin-surface.clicked .ripple { animation-duration: 1.7s; border-color: rgba(198,154,61,.42); }
.floating-curl { position: absolute; width: 92px; height: 28px; border: 6px solid rgba(198,154,61,.36); border-top-color: rgba(241,230,207,.26); border-left-color: transparent; border-radius: 50%; animation: floatCurl 10s ease-in-out infinite; }
.curl-one { right: 24%; top: 24%; }
.curl-two { left: 30%; bottom: 18%; animation-delay: -3s; }
.curl-three { right: 12%; bottom: 35%; animation-delay: -6s; }

.rafter-archive {
  min-height: 105vh;
  background: radial-gradient(ellipse at 50% 0, rgba(198,154,61,.13), transparent 35%), linear-gradient(180deg, #0a0705, var(--charred));
  padding: 10vh 8vw 12vh 12vw;
  perspective: 900px;
}
.rafters { position: absolute; inset: -12vh -10vw auto -8vw; height: 44vh; transform: rotateX(58deg); background: repeating-linear-gradient(90deg, transparent 0 90px, rgba(74,46,26,.9) 91px 118px), repeating-linear-gradient(0deg, rgba(198,154,61,.06) 0 2px, transparent 2px 20px); box-shadow: 0 22px 80px rgba(0,0,0,.55); }
.archive-num { position: absolute; right: 9%; bottom: 10%; }
.archive-copy { position: relative; z-index: 3; width: min(620px, 52vw); margin-top: 22vh; }
.archive-copy p:not(.label) { color: rgba(241,230,207,.62); max-width: 500px; }
.hanging { position: absolute; top: 0; transform-origin: 50% 0; animation: swing 6s ease-in-out infinite; }
.mobile-a { left: 58%; top: 14%; }
.mobile-b { left: 78%; top: 20%; animation-delay: -2s; }
.mobile-c { left: 37%; top: 8%; animation-delay: -3.2s; }
.mobile-d { left: 67%; top: 2%; animation-delay: -4s; }
.cord-line { display: block; width: 1px; height: 185px; margin: 0 auto; background: rgba(241,230,207,.34); }
.mini-window { width: 150px; height: 94px; padding: 14px; background: rgba(241,230,207,.78); border: 5px solid var(--endgrain); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mini-window b { display: block; height: 12px; margin-bottom: 10px; background: var(--indigo); opacity: .75; }
.token { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--endgrain); border: 2px solid var(--brass); font-family: var(--serif); font-size: 2rem; color: var(--paper); }
.paper-strip { writing-mode: vertical-rl; padding: 24px 12px; background: var(--paper); color: var(--graphite); font-family: var(--hand); font-size: 1.7rem; box-shadow: 0 18px 42px rgba(0,0,0,.34); }
.sprout-token { width: 90px; height: 54px; background: var(--endgrain); border-radius: 45px 45px 16px 16px; position: relative; border: 1px solid rgba(198,154,61,.4); }
.sprout-token i::before, .sprout-token i::after { content: ""; position: absolute; left: 42px; top: -22px; width: 22px; height: 14px; background: var(--sap); border-radius: 100% 0; transform: rotate(-28deg); }
.sprout-token i::after { left: 27px; transform: scaleX(-1) rotate(-28deg); }
.maker-stamp { position: absolute; left: 12vw; bottom: 7vh; color: rgba(198,154,61,.65); font-family: var(--serif); font-size: 1.25rem; }

@keyframes glint { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.8); transform: scale(1.14); } }
@keyframes moth { 0%,100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-52px,34px) rotate(24deg); } 50% { transform: translate(20px,72px) rotate(-18deg); } 75% { transform: translate(48px,-20px) rotate(16deg); } }
@keyframes drawLine { to { width: 100%; } }
@keyframes curl { 50% { transform: rotate(18deg) translateY(-18px); } }
@keyframes ripple { 0%,100% { transform: scale(1); opacity: .42; } 50% { transform: scale(1.08); opacity: .78; } }
@keyframes floatCurl { 50% { transform: translate(24px, -18px) rotate(12deg); } }
@keyframes swing { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(3deg); } }

@media (max-width: 760px) {
  body { cursor: auto; }
  .lamp { display: none; }
  .tool-roll { left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); grid-auto-flow: column; }
  .door-panel { width: 104vw; }
  .brand-seal { left: 12%; font-size: 4rem; }
  .grain-table, .joinery-wall, .finishing-basin, .rafter-archive { padding-left: 7vw; }
  .table-plane { transform: none; }
  .sheet-main, .note-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 88%; margin: 8vh auto; }
  .wall-copy, .archive-copy { width: 88vw; margin-left: 0; }
  .joint-svg { width: 100%; }
  .principle { position: relative; display: inline-block; left: auto; right: auto; top: auto; bottom: auto; margin: 8px; }
  .basin-copy { left: 8%; max-width: 82vw; }
  .hanging { transform: scale(.72); }
}