:root {
  --hanji: #F7EED8;
  --ink: #18120E;
  --indigo: #182A5C;
  --seal: #C83A2D;
  --green: #2F6B57;
  --persimmon: #F28A2E;
  --brass: #C7A94B;
  --lavender: #D8D2F2;
  --serif: "Noto Serif KR", serif;
  --sans: "Noto Sans KR", sans-serif;
  --fat: "Bagel Fat One", cursive;
  --poem: "Gowun Batang", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(24,18,14,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 63% 82%, rgba(47,107,87,.12) 0 1px, transparent 2px),
    repeating-linear-gradient(83deg, rgba(24,18,14,.045) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(7deg, rgba(255,255,255,.22) 0 2px, transparent 2px 13px);
}

.seal-strip {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.seal-strip a {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--hanji);
  background: var(--seal);
  border: 2px solid rgba(24,18,14,.35);
  box-shadow: 3px 4px 0 rgba(24,18,14,.26);
  font-family: var(--fat);
  font-size: 13px;
  line-height: 1;
  writing-mode: vertical-rl;
  text-decoration: none;
  transform: rotate(var(--tilt, -2deg));
}

.seal-strip a:nth-child(even) { --tilt: 2deg; background: var(--persimmon); color: var(--ink); }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 86px);
}

.opening-chamber {
  background:
    radial-gradient(circle at 50% 47%, rgba(247,238,216,.8), transparent 18%),
    radial-gradient(circle at 16% 82%, rgba(200,58,45,.13), transparent 18%),
    var(--hanji);
}

.vertical-note {
  position: absolute;
  left: 24px;
  top: 24px;
  writing-mode: vertical-rl;
  font-family: var(--poem);
  color: var(--green);
  letter-spacing: .16em;
}

.brush-dot {
  position: absolute;
  width: 88px;
  height: 76px;
  left: 48%;
  top: 38%;
  background: var(--ink);
  border-radius: 54% 46% 63% 37% / 42% 56% 44% 58%;
  filter: blur(.4px);
  mix-blend-mode: multiply;
  animation: inkBloom 4s ease-in-out infinite;
}

.assembly-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .65; }
.ink-path { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; filter: url(#rough); }
.opening-chamber.in-view .ink-path { animation: pathDraw 2.4s ease forwards; }
.path-two { animation-delay: .35s !important; stroke: var(--green); }
.path-three { animation-delay: .6s !important; stroke: var(--seal); stroke-width: 5; }

.jamo {
  position: absolute;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(76px, 13vw, 210px);
  color: var(--ink);
  opacity: .9;
  text-shadow: 5px 8px 0 rgba(199,169,75,.22);
  transition: transform 1.3s cubic-bezier(.2,.9,.1,1), left 1.3s cubic-bezier(.2,.9,.1,1), top 1.3s cubic-bezier(.2,.9,.1,1), color .8s;
}
.jamo-h { left: 12%; top: 12%; transform: rotate(-18deg); }
.jamo-a { left: 78%; top: 18%; transform: rotate(23deg); }
.jamo-n { left: 7%; top: 68%; transform: rotate(14deg); }
.jamo-g { left: 65%; top: 68%; transform: rotate(-28deg); }
.jamo-eu { left: 40%; top: 74%; transform: rotate(6deg); }
.jamo-r { left: 83%; top: 55%; transform: rotate(-10deg); }
.opening-chamber.assembled .jamo-h { left: 28%; top: 45%; transform: rotate(0deg); color: var(--indigo); }
.opening-chamber.assembled .jamo-a { left: 39%; top: 45%; transform: rotate(0deg); color: var(--indigo); }
.opening-chamber.assembled .jamo-n { left: 49%; top: 45%; transform: rotate(0deg); color: var(--indigo); }
.opening-chamber.assembled .jamo-g { left: 59%; top: 45%; transform: rotate(0deg); color: var(--seal); }
.opening-chamber.assembled .jamo-eu { left: 69%; top: 45%; transform: rotate(0deg); color: var(--seal); }
.opening-chamber.assembled .jamo-r { left: 79%; top: 45%; transform: rotate(0deg); color: var(--seal); }

.hero-title { position: absolute; left: 9vw; bottom: 9vh; max-width: 720px; z-index: 2; }
.festival-stamp { display: inline-block; margin: 0 0 16px; padding: 10px 16px; font-family: var(--fat); background: var(--seal); color: var(--hanji); transform: rotate(-3deg); box-shadow: 5px 5px 0 rgba(24,18,14,.18); }
h1, h2 { margin: 0; font-family: var(--serif); line-height: .96; letter-spacing: -.045em; }
h1 { font-size: clamp(54px, 8vw, 128px); max-width: 900px; }
h2 { font-size: clamp(44px, 6vw, 96px); }
p { font-size: clamp(16px, 1.55vw, 22px); line-height: 1.55; }
.domain-lockup { position: absolute; right: 12vw; top: 12vh; display: flex; gap: 8px; align-items: center; font-family: var(--serif); font-size: clamp(42px, 8vw, 120px); font-weight: 900; color: var(--indigo); opacity: 0; transform: translateY(-20px); transition: .9s ease; }
.opening-chamber.assembled .domain-lockup { opacity: 1; transform: translateY(0); }
.dot-day { font-family: var(--fat); font-size: .32em; color: var(--seal); align-self: flex-end; margin-bottom: .35em; }

.origin-chamber { background: var(--indigo); color: var(--hanji); }
.diagonal-cut { position: absolute; inset: -20% -10% auto auto; width: 68%; height: 130%; background: linear-gradient(115deg, transparent 0 30%, rgba(216,210,242,.16) 31% 58%, transparent 59%); transform: rotate(6deg); }
.moon-disc { position: absolute; right: 10vw; top: 9vh; width: min(36vw, 390px); height: min(36vw, 390px); border-radius: 50%; display: grid; place-items: center; font: 900 min(23vw, 250px)/1 var(--serif); color: var(--indigo); background: var(--lavender); box-shadow: 0 0 0 28px rgba(199,169,75,.16), inset -30px -20px 0 rgba(24,18,14,.14); animation: moonBreathe 7s ease-in-out infinite; }
.manuscript-folds { position: relative; z-index: 2; min-height: 72vh; display: grid; grid-template-columns: 1.15fr .7fr .9fr; gap: 22px; align-items: end; }
.fold { background: rgba(247,238,216,.93); color: var(--ink); border: 2px solid var(--brass); padding: clamp(22px, 4vw, 54px); box-shadow: 16px 16px 0 rgba(24,18,14,.24); transform-origin: left center; }
.origin-chamber.in-view .fold { animation: foldOpen 1.2s ease both; }
.fold-b { align-self: center; font: 700 clamp(24px, 3vw, 48px)/1.25 var(--poem); transform: rotate(3deg); animation-delay: .18s !important; }
.fold-c { align-self: start; margin-top: 18vh; font-family: var(--poem); color: var(--indigo); animation-delay: .34s !important; }
.gold-caption { color: var(--brass); text-transform: uppercase; letter-spacing: .22em; font-weight: 900; }
.gold-lines i { position: absolute; height: 2px; width: 24vw; background: var(--brass); left: var(--x); top: var(--y); transform: rotate(var(--r)); opacity: .75; }
.gold-lines i:nth-child(1){--x:6%;--y:18%;--r:-9deg}.gold-lines i:nth-child(2){--x:58%;--y:70%;--r:12deg}.gold-lines i:nth-child(3){--x:22%;--y:86%;--r:3deg}.gold-lines i:nth-child(4){--x:74%;--y:34%;--r:-22deg}

.sound-chamber { background: linear-gradient(90deg, var(--hanji) 0 58%, rgba(47,107,87,.19) 58% 100%); }
.side-title { position: absolute; left: 3vw; top: 8vh; writing-mode: vertical-rl; font: 900 clamp(40px, 6vw, 94px)/1 var(--serif); color: rgba(24,18,14,.12); }
.workshop-copy { max-width: 560px; margin-left: 9vw; padding-top: 8vh; }
.process-note { font-family: var(--poem); color: var(--seal); border-left: 5px solid var(--brass); padding-left: 18px; }
.green { background: var(--green); }
.beam-yard { position: absolute; right: 10vw; top: 13vh; bottom: 14vh; width: min(44vw, 620px); }
.jamo-beam { position: absolute; border: 0; color: var(--hanji); background: var(--ink); font: 900 clamp(58px, 8vw, 118px)/1 var(--serif); cursor: pointer; box-shadow: 10px 10px 0 rgba(200,58,45,.28); transition: transform .45s ease, border-radius .45s ease, background .45s ease, color .45s ease; }
.beam-giyeok { left: 0; top: 5%; padding: 24px 66px 54px 24px; }
.beam-ieung { right: 7%; top: 0; width: 170px; height: 170px; border-radius: 50%; }
.beam-i { left: 42%; top: 35%; width: 70px; height: 330px; color: var(--ink); background: var(--brass); }
.beam-eu { left: 5%; bottom: 10%; width: 340px; height: 82px; color: var(--ink); background: var(--green); }
.beam-siot { right: 3%; bottom: 2%; padding: 30px 46px; background: var(--seal); }
.jamo-beam.active, .jamo-beam:hover { background: var(--persimmon); color: var(--ink); transform: rotate(-7deg) scale(1.08); border-radius: 22px 4px 28px 8px; }
.beam-ieung.active, .beam-ieung:hover { transform: scale(1.18); border-radius: 50%; }
.beam-i.active, .beam-i:hover { transform: scaleY(1.15); background: var(--brass); }
.beam-eu.active, .beam-eu:hover { transform: translateY(18px) scaleX(1.1); }
.role-readout { position: absolute; left: 12vw; bottom: 12vh; padding: 20px 28px; border: 2px solid var(--ink); background: var(--hanji); font-family: var(--poem); font-size: 24px; box-shadow: 8px 8px 0 var(--brass); }

.parade-chamber { background: var(--persimmon); color: var(--ink); }
.banner-river span { position: absolute; width: 160%; height: 95px; left: -25%; background: var(--hanji); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-17deg); box-shadow: 0 18px 0 rgba(24,18,14,.14); }
.banner-river span:nth-child(1){top:18%}.banner-river span:nth-child(2){top:47%;background:var(--seal)}.banner-river span:nth-child(3){top:76%;background:var(--brass)}
.parade-clusters { position: relative; z-index: 2; min-height: 76vh; }
.syllable-block { position: absolute; width: clamp(180px, 23vw, 320px); height: clamp(180px, 23vw, 320px); display: grid; place-items: center; text-align: center; background: var(--hanji); border: 5px solid var(--ink); box-shadow: 18px 18px 0 rgba(24,18,14,.3); transform: rotate(-8deg); animation: march 5s ease-in-out infinite; }
.syllable-block b { display: block; font: 900 clamp(86px, 13vw, 190px)/.8 var(--serif); }
.syllable-block em { position: absolute; bottom: 16px; font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.block-han { left: 8%; top: 12%; }
.block-geul { left: 39%; top: 31%; animation-delay: .4s; background: var(--indigo); color: var(--hanji); }
.block-nal { right: 7%; top: 8%; animation-delay: .8s; background: var(--green); color: var(--hanji); }
.movable-tray { position: absolute; right: 12%; bottom: 3%; display: grid; grid-template-columns: repeat(3, 82px); gap: 9px; padding: 16px; background: var(--ink); transform: rotate(4deg); }
.movable-tray span { display: grid; place-items: center; height: 72px; background: var(--brass); font: 900 38px var(--serif); box-shadow: inset 4px 4px 0 rgba(255,255,255,.25), inset -5px -5px 0 rgba(24,18,14,.25); }
.confetti-seals i { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; background: var(--seal); color: var(--hanji); font: 400 20px var(--fat); border-radius: 6px; animation: flutter 4s ease-in-out infinite; left: var(--x); top: var(--y); }
.confetti-seals i:nth-child(1){--x:18%;--y:72%}.confetti-seals i:nth-child(2){--x:30%;--y:18%;animation-delay:.2s}.confetti-seals i:nth-child(3){--x:70%;--y:58%;animation-delay:.5s}.confetti-seals i:nth-child(4){--x:84%;--y:28%;animation-delay:.9s}.confetti-seals i:nth-child(5){--x:54%;--y:80%;animation-delay:1.1s}
.parade-chamber h2 { position: absolute; left: 6vw; bottom: 6vh; color: rgba(24,18,14,.22); font-size: clamp(70px, 12vw, 180px); }

.square-chamber { background: var(--green); color: var(--hanji); }
.roof-tiles { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: radial-gradient(circle at 50% 100%, transparent 0 42px, var(--indigo) 43px 70px, transparent 71px) 0 0/120px 100%; opacity: .9; }
.plaza { position: absolute; inset: 16vh 9vw 10vh 11vw; border: 4px solid var(--brass); border-radius: 50%; background: radial-gradient(circle, rgba(247,238,216,.22), transparent 58%); }
.letter-bench { position: absolute; display: grid; place-items: center; background: var(--hanji); color: var(--green); font: 900 clamp(78px, 10vw, 150px)/1 var(--serif); box-shadow: 12px 12px 0 rgba(24,18,14,.24); }
.bench-one { left: 12%; top: 17%; width: 190px; height: 150px; }
.bench-two { right: 16%; top: 28%; width: 240px; height: 100px; }
.bench-three { left: 42%; bottom: 13%; width: 180px; height: 180px; border-radius: 50%; }
.community-phrase { position: absolute; padding: 14px 22px; background: var(--indigo); color: var(--hanji); font-family: var(--poem); font-size: clamp(20px, 2.2vw, 34px); transform: rotate(var(--r)); }
.phrase-a { left: 22%; top: 49%; --r: -3deg; }
.phrase-b { right: 9%; bottom: 17%; --r: 5deg; background: var(--seal); }
.phrase-c { left: 8%; bottom: 16%; --r: 2deg; background: var(--brass); color: var(--ink); }
.signpost { position: absolute; left: 5vw; top: 20vh; width: 130px; min-height: 440px; background: var(--ink); color: var(--hanji); display: grid; place-items: center; padding: 20px; box-shadow: 14px 12px 0 rgba(24,18,14,.22); }
.signpost span { writing-mode: vertical-rl; font-family: var(--fat); font-size: 24px; }
.signpost b { position: absolute; bottom: -22px; right: -36px; font: 900 110px var(--serif); color: var(--brass); }

.finale-chamber { background: linear-gradient(180deg, var(--lavender), var(--indigo)); color: var(--hanji); }
.lavender-sky { position: absolute; inset: 0; background: radial-gradient(circle at 18% 24%, rgba(247,238,216,.65), transparent 11%), radial-gradient(circle at 76% 18%, rgba(199,169,75,.36), transparent 13%); }
.lantern-stage { position: absolute; inset: 0; }
.syllable-lantern { position: absolute; left: 14vw; top: 24vh; width: 260px; height: 310px; border-radius: 46% 46% 38% 38%; display: grid; place-items: center; background: radial-gradient(circle, #F7EED8 0 40%, #C7A94B 78%); color: var(--indigo); box-shadow: 0 0 45px rgba(247,238,216,.7); animation: lanternBreath 4s ease-in-out infinite; }
.syllable-lantern .stroke { position: absolute; font: 900 88px var(--serif); }
.syllable-lantern .top { top: 34px; }.syllable-lantern .mid { right: 52px; top: 118px; }.syllable-lantern .bot { bottom: 46px; }
.vowel-lantern { position: absolute; display: grid; place-items: center; width: 98px; height: 150px; border-radius: 48%; background: var(--hanji); color: var(--seal); font: 900 76px var(--serif); box-shadow: 0 0 36px rgba(247,238,216,.72); animation: rise 8s ease-in-out infinite; }
.lantern-a { left: 48%; top: 62%; }.lantern-b { left: 64%; top: 52%; animation-delay: 1.4s; }.lantern-c { left: 80%; top: 66%; animation-delay: 2.2s; }
.paper-charms i { position: absolute; font: 400 32px var(--fat); color: var(--hanji); animation: charmDrift 6s ease-in-out infinite; left: var(--x); top: var(--y); }
.paper-charms i:nth-child(1){--x:26%;--y:66%}.paper-charms i:nth-child(2){--x:36%;--y:22%;animation-delay:.4s}.paper-charms i:nth-child(3){--x:55%;--y:36%;animation-delay:.9s}.paper-charms i:nth-child(4){--x:74%;--y:24%;animation-delay:1.2s}.paper-charms i:nth-child(5){--x:87%;--y:49%;animation-delay:1.8s}.paper-charms i:nth-child(6){--x:46%;--y:78%;animation-delay:2.2s}
.final-message { position: absolute; right: 8vw; bottom: 9vh; max-width: 720px; text-align: right; }

@keyframes inkBloom { 0%,100% { transform: scale(.72); opacity:.82; filter: blur(.3px); } 50% { transform: scale(1.08); opacity:.95; filter: blur(1.6px); } }
@keyframes pathDraw { to { stroke-dashoffset: 0; } }
@keyframes moonBreathe { 0%,100%{transform:scale(1)}50%{transform:scale(1.045)} }
@keyframes foldOpen { from { transform: perspective(600px) rotateY(72deg); opacity: .2; } to { transform: perspective(600px) rotateY(0deg); opacity: 1; } }
@keyframes march { 0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(18px,-22px) rotate(-4deg)} }
@keyframes flutter { 0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-30px) rotate(12deg)} }
@keyframes lanternBreath { 0%,100%{transform:scale(.96);filter:brightness(.96)}50%{transform:scale(1.06);filter:brightness(1.16)} }
@keyframes rise { 0%,100%{transform:translateY(20px)}50%{transform:translateY(-80px)} }
@keyframes charmDrift { 0%,100%{transform:translate(0,0) rotate(-8deg);opacity:.55}50%{transform:translate(34px,-46px) rotate(15deg);opacity:1} }

@media (max-width: 860px) {
  .seal-strip { right: 8px; transform: translateY(-50%) scale(.82); }
  .manuscript-folds { grid-template-columns: 1fr; }
  .moon-disc { opacity: .35; }
  .beam-yard { position: relative; right: auto; top: auto; bottom: auto; width: 100%; height: 560px; margin-top: 30px; }
  .role-readout { position: relative; left: auto; bottom: auto; margin: 20px 0 0 8vw; max-width: 80%; }
  .plaza { inset: 14vh 6vw 8vh 6vw; border-radius: 26px; }
  .signpost { opacity: .45; }
  .final-message { left: 8vw; right: 8vw; text-align: left; }
}