:root {
  /* Compliance language from design: Space Grotesk (700, Work Sans (400, IBM Plex Mono (400, (Google Fonts, Intersection Observer, Intersection Observer., IntersectionObserver` with `threshold: 0.3` to trigger on scroll; Work Sans softens the graffiti rawness. */
  --burgundy: #6B1D3A;
  --cream: #F5ECD7;
  --gray: #A89F91;
  --coral: #E8553D;
  --black: #1A1714;
  --lavender: #C4A8D4;
  --green: #5B7C65;
  --display: "Space Grotesk", "Arial Black", Impact, sans-serif;
  --body: "Work Sans", Inter, Arial, sans-serif;
  --hand: Caveat, "Comic Sans MS", cursive;
  --kr: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; color: var(--black); background: var(--cream); font-family: var(--body); overflow-x: hidden; }

.wall {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #F5ECD7;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(168,159,145,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(107,29,58,0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(26,23,20,0.03) 1px, transparent 1px),
    radial-gradient(circle at 10% 20%, rgba(107,29,58,0.08) 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(91,124,101,0.06) 1px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 4px 4px, 17px 19px, 23px 29px;
  background-blend-mode: multiply;
}

.marble-veins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; z-index: 1; }
.vein { fill: none; stroke: #A89F91; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.vein-b, .branch { stroke: #C4A8D4; stroke-width: 2; }
.wall.cracked .vein { animation: crack-grow 4s cubic-bezier(.25,.1,.25,1) forwards; }
.wall.cracked .vein-b { animation-delay: .3s; }
.wall.cracked .branch { animation-delay: .8s; }

.zone { position: relative; z-index: 2; width: 100%; min-height: 100vh; padding: clamp(5rem, 9vw, 8rem) 6vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.zone > * { margin-left: 55%; transform: translateX(-50%); max-width: 38rem; }

.hero-zone { align-items: flex-start; color: #F5ECD7; background:
  radial-gradient(circle at 43% 44%, rgba(107,29,58,.94) 0 12%, rgba(107,29,58,.62) 31%, rgba(26,23,20,.98) 76%),
  radial-gradient(circle at 50% 50%, rgba(245,236,215,.08) 1px, transparent 1px); background-size: auto, 5px 5px; }
.hero-copy { position: relative; }
.zone-kicker { color: #C4A8D4; font-family: var(--mono); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1rem; }
.wordmark { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 12vw, 10rem); letter-spacing: -0.03em; line-height: .82; }
.wordmark span { display: inline-block; opacity: .3; filter: blur(8px); transform: translateY(24px) scale(1.05); animation: tag-bloom 600ms ease-out forwards; animation-delay: var(--d); text-shadow: 0 0 40px rgba(232,85,61,.32); }
.subtitle { margin: 1.2rem 0 0; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.7; color: rgba(245,236,215,.72); }
.subtitle span { font-family: var(--kr); font-weight: 700; color: #E8553D; }
.subtitle .jp { font-family: var(--jp); color: #C4A8D4; }
.intro-line { color: #A89F91; max-width: 32rem; line-height: 1.7; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.scroll-note { position: absolute; bottom: 2rem; margin-left: 55%; color: #A89F91; font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }

.hero-drips { position: absolute; left: .8rem; top: calc(100% - .3rem); width: 88%; height: 110px; pointer-events: none; }
.hero-drips i, .drip { position: absolute; top: 0; width: 13px; border-radius: 999px 999px 70% 70%; background: #E8553D; transform: scaleY(0); transform-origin: top; opacity: .92; }
.hero-drips i:nth-child(1){ left:9%; height:54px; animation: drip-flow 2s ease-in 1s forwards; }
.hero-drips i:nth-child(2){ left:31%; height:92px; width:9px; animation: drip-flow 2s ease-in 1.18s forwards; }
.hero-drips i:nth-child(3){ left:67%; height:70px; background:#6B1D3A; animation: drip-flow 2s ease-in 1.34s forwards; }
.hero-drips i:nth-child(4){ left:86%; height:42px; width:8px; animation: drip-flow 2s ease-in 1.52s forwards; }

.column-fragment { position: absolute; z-index: 0; opacity: .42; transform: none; margin: 0; max-width: none; }
.fragment-left { left: 8vw; bottom: 10vh; width: 112px; height: 240px; border: 9px solid #A89F91; border-bottom: 0; border-radius: 55px 55px 0 0; }
.column-fragment span { display: block; height: 16px; margin: 28px 12px; background: #C4A8D4; transform: rotate(-5deg); }

.zone-marker { width: min(62rem, 94vw); max-width: none; margin-bottom: 3rem; padding: 1rem 2rem; background: linear-gradient(90deg, transparent 0, #E8553D 8%, #6B1D3A 72%, transparent 100%); color: #F5ECD7; font-family: var(--display); font-size: clamp(2.2rem, 6vw, 5.2rem); letter-spacing: -0.03em; line-height: .9; transform: translateX(-50%) rotate(-1.3deg); opacity: 0; transition: opacity .8s, transform .8s; }
.zone-marker.visible { opacity: 1; transform: translateX(-50%) rotate(-1.3deg) translateY(0); }
.zone-marker span { font-family: var(--kr); color: #F5ECD7; margin-right: .4em; }
.zone-marker b { font-weight: 700; }
.zone-marker .drip { bottom: -42px; top: auto; height: 44px; }
.zone-marker .drip:nth-of-type(1){ left: 24%; }
.zone-marker .drip:nth-of-type(2){ left: 72%; height: 64px; }
.zone-marker.visible .drip { animation: drip-flow 2s ease-in forwards; }
.drip.wine { background: #6B1D3A; } .drip.green { background: #5B7C65; } .drip.lavender { background: #C4A8D4; }

.paste-card, .sticker { background: rgba(245,236,215,.9); color: #1A1714; box-shadow: 0 24px 45px rgba(26,23,20,.22), inset 0 0 0 1px rgba(168,159,145,.45); clip-path: polygon(1% 3%, 99% 0, 97% 96%, 72% 99%, 48% 97%, 22% 100%, 0 95%); padding: clamp(1.5rem, 4vw, 3rem); transition: transform 300ms, box-shadow 300ms, opacity .8s; opacity: 0; }
.paste-card.visible, .sticker.visible { opacity: 1; }
.paste-card:hover, .sticker:hover { transform: translateX(-50%) rotate(var(--rot, -1.5deg)) scale(1.02); box-shadow: 0 32px 70px rgba(26,23,20,.3); }
.tilt-left { --rot:-1.5deg; transform: translateX(-50%) rotate(-1.5deg); }
.meaning-card h2, .philosophy-card h2 { font-family: var(--display); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.03em; line-height: .96; margin: 0 0 1.2rem; color: #6B1D3A; }
.paste-card p { font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.7; max-width: 38rem; }
.hand-note, .annotation { font-family: var(--hand); color: #E8553D; font-size: clamp(1.2rem, 2.5vw, 1.8rem); transform: rotate(-2deg); }
.mono { font-family: var(--mono); font-size: .85rem; color: #5B7C65; }
.kr { font-family: var(--kr); font-weight: 700; color: #5B7C65; font-size: clamp(1.5rem, 4vw, 2.6rem); margin: 0 0 .4rem; }
.jp { font-family: var(--jp); color: #6B1D3A; }
.example-stack { display: grid; gap: 1.2rem; margin-top: 2rem; }
.example-card { position: relative; --rot: var(--r); transform: translateX(-50%) rotate(var(--r)); }
.example-card:nth-child(2) { margin-left: 49%; }
.example-card:nth-child(3) { margin-left: 58%; }
.crown { width: 44px; height: 34px; fill: none; stroke: #E8553D; stroke-width: 4; stroke-linejoin: round; position: absolute; right: 1.4rem; top: 1.1rem; transform: rotate(9deg); }
.crown.small { width: 30px; }

.stencil-title { margin-left: 55%; transform: translateX(-50%); font-family: var(--display); font-size: clamp(3.4rem, 9vw, 7rem); line-height: .9; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 2px #6B1D3A; background-image: linear-gradient(90deg, #6B1D3A, #E8553D, #5B7C65); -webkit-background-clip: text; background-clip: text; }
.timeline-wrap { position: relative; min-height: 720px; opacity: 0; transition: opacity .8s; }
.timeline-wrap.visible { opacity: 1; }
.journey-line { position: absolute; left: 0; top: 0; width: 120px; height: 720px; overflow: visible; }
.timeline-path { fill: none; stroke: #E8553D; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 10px rgba(232,85,61,.2)); }
.timeline-wrap.visible .timeline-path { animation: crack-grow 4s cubic-bezier(.25,.1,.25,1) forwards; }
.distance-point { position: absolute; left: 6rem; top: var(--top); padding-left: 2rem; max-width: 30rem; }
.distance-point:before { content: ""; position: absolute; left: -5.2rem; top: .4rem; width: 28px; height: 28px; border-radius: 50%; background: #6B1D3A; box-shadow: 0 0 0 10px rgba(232,85,61,.18); }
.distance-point b { display: block; font-family: var(--mono); color: #E8553D; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; }
.distance-point span { display: block; font-family: var(--kr); font-size: clamp(1.4rem, 3vw, 2.2rem); color: #1A1714; font-weight: 700; }
.distance-point em { color: #6B1D3A; font-family: var(--hand); font-size: 1.45rem; }

.philosophy-zone { min-height: 120vh; }
.philosophy-card { --rot:1.1deg; transform: translateX(-50%) rotate(1.1deg); }
.philosophy-card .wide { max-width: 38rem; }
.philosophy-card .mid { max-width: 33rem; }
.philosophy-card .narrow { max-width: 28rem; font-weight: 600; color: #6B1D3A; }
.kr-inline { font-family: var(--kr); color: #5B7C65; font-weight: 700; }
.crown-margin { margin-left: 72%; transform: translateX(-50%) rotate(-12deg); position: absolute; top: 34%; fill: none; stroke: #E8553D; stroke-width: 4; }
.lavender-noise { position: absolute; right: 12vw; bottom: 18vh; margin: 0; transform: none; max-width: none; }
.lavender-noise i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #C4A8D4; opacity: .55; }
.lavender-noise i:nth-child(1){ transform: translate(0,0) } .lavender-noise i:nth-child(2){ transform: translate(45px,-60px) } .lavender-noise i:nth-child(3){ transform: translate(86px,10px) } .lavender-noise i:nth-child(4){ transform: translate(-35px,44px) } .lavender-noise i:nth-child(5){ transform: translate(120px,-88px) } .lavender-noise i:nth-child(6){ transform: translate(150px,55px) }

.terminus-zone { min-height: 44vh; padding: 0; justify-content: flex-end; background: transparent; }
.terminus-zone > * { margin-left: 50%; }
.final-marker { margin-bottom: 0; }
.terminus-bar { position: relative; width: 100vw; max-width: none; height: 30vh; min-height: 210px; margin: 0; transform: none; background: #6B1D3A; display: grid; place-items: center; overflow: hidden; opacity: 1; }
.final-tag { width: min(560px, 84vw); height: 220px; overflow: visible; }
.final-stroke { fill: none; stroke: #F5ECD7; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; filter: drop-shadow(0 6px 0 rgba(26,23,20,.35)); }
.terminus-bar.visible .final-stroke { animation: final-write 3s ease forwards; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #C4A8D4; opacity: 0; --x: 0px; --y: 0px; }
.terminus-bar.visible .burst i { animation: burst 1.5s ease-out 2.4s forwards; }
.burst i:nth-child(1){--x:-230px;--y:-70px}.burst i:nth-child(2){--x:190px;--y:-88px}.burst i:nth-child(3){--x:-150px;--y:82px}.burst i:nth-child(4){--x:245px;--y:72px}.burst i:nth-child(5){--x:-70px;--y:-120px}.burst i:nth-child(6){--x:82px;--y:118px}.burst i:nth-child(7){--x:16px;--y:-150px}.burst i:nth-child(8){--x:-275px;--y:5px}.burst i:nth-child(9){--x:286px;--y:-8px}.burst i:nth-child(10){--x:-22px;--y:146px}.burst i:nth-child(11){--x:-190px;--y:-122px}.burst i:nth-child(12){--x:155px;--y:132px}.burst i:nth-child(13){--x:-310px;--y:-55px}.burst i:nth-child(14){--x:320px;--y:48px}.burst i:nth-child(15){--x:110px;--y:-138px}.burst i:nth-child(16){--x:-105px;--y:133px}.burst i:nth-child(17){--x:42px;--y:88px}.burst i:nth-child(18){--x:-44px;--y:-88px}.burst i:nth-child(19){--x:225px;--y:-130px}.burst i:nth-child(20){--x:-235px;--y:125px}

@keyframes tag-bloom { to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes drip-flow { from { transform: scaleY(0) translateY(0); } to { transform: scaleY(1) translateY(40px); } }
@keyframes crack-grow { to { stroke-dashoffset: 0; } }
@keyframes final-write { to { stroke-dashoffset: 0; } }
@keyframes burst { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.2); } }

@media (max-width: 800px) {
  .zone { padding: 4rem 1.25rem; }
  .zone > *, .stencil-title { margin-left: 50%; max-width: calc(100vw - 2.5rem); }
  .zone-marker { width: 116vw; }
  .example-card:nth-child(2), .example-card:nth-child(3) { margin-left: 50%; }
  .distance-point { left: 4.5rem; }
  .journey-line { left: -1rem; }
  .scroll-note { margin-left: 50%; width: 90%; text-align: center; }
}