*,*::before,*::after{box-sizing:border-box}
html{background:var(--sumi-paper);overflow-x:hidden}
body{margin:0;background:var(--sumi-paper);color:var(--sumi-ink);font-family:'Gowun Dodum',system-ui,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--sumi-seal);text-decoration:none;border-bottom:1px solid rgba(178,58,52,.3)}
a:hover{color:var(--sumi-ink);border-color:var(--sumi-ink)}
::selection{background:var(--sumi-blush-soft);color:var(--sumi-ink)}

/* ---- paper layers ---- */
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.5;mix-blend-mode:multiply}
.cranes{position:absolute;pointer-events:none;z-index:0;opacity:0;transition:opacity 2.2s cubic-bezier(.19,1,.22,1) .2s}
.rev.in .cranes{opacity:var(--o,.26)}
.cranes.lift{left:-11%;bottom:-9%;width:clamp(280px,50vw,560px);--o:.30}
.cranes.passage{right:-6%;top:0;width:clamp(300px,46vw,600px);--o:.34}
.cranes.arrive{right:-4%;bottom:4%;width:clamp(240px,38vw,500px);--o:.30}
@media(max-width:900px){.cranes.lift{width:74vw;left:-14%;bottom:-6%}.cranes.passage{width:74vw;right:-8%}.cranes.arrive{width:64vw;right:-6%}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(34,26,22,.10) 100%)}

#smooth{position:relative;z-index:2}
#content section,#content footer{position:relative}
#content section>*:not(.cranes),#content footer>*{position:relative;z-index:1}
canvas.petals{position:fixed;inset:0;z-index:3;pointer-events:none}

/* ---- shared type ---- */
.wrap{max-width:1080px;margin:0 auto;padding-left:40px;padding-right:40px}
.kr{font-family:'Nanum Myeongjo',serif;color:var(--sumi-seal);letter-spacing:.5em;font-size:13px;display:block;margin-bottom:18px;text-indent:.5em}
h1,h2,h3{font-family:'Nanum Myeongjo',serif;font-weight:800;color:var(--sumi-ink);margin:0;line-height:1.06;letter-spacing:-.015em}
h2{font-size:clamp(38px,5.2vw,72px);margin-bottom:26px}
h3{font-size:22px;font-weight:700;line-height:1.3}
p{margin:0 0 22px;max-width:62ch;color:var(--sumi-ink-soft)}
p.lead{font-size:20px;color:var(--sumi-ink)}
.turnmark{font-family:'Nanum Myeongjo',serif;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--sumi-ink-soft);opacity:.65;margin-bottom:12px;display:block}
section{position:relative;padding:clamp(90px,13vh,170px) 0}

/* ---- reveal motion ---- */
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.line>span{display:block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.19,1,.22,1)}
.rev.in .line>span{transform:translateY(0)}
.line:nth-child(2)>span{transition-delay:.08s}.line:nth-child(3)>span{transition-delay:.16s}
.fade{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
.fade.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* ---- seal ---- */
.seal{width:44px;height:44px;opacity:0;mix-blend-mode:multiply;transform:scale(.6) rotate(-8deg);transition:opacity .32s ease,transform .5s cubic-bezier(.34,1.56,.64,1);-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 88%);mask-image:radial-gradient(circle,#000 58%,transparent 88%)}
.seal.in{opacity:.92;transform:scale(1) rotate(-3deg)}

.turn.washed{position:relative}
.turn.washed::before{content:'';position:absolute;left:-6%;top:2%;width:62%;max-width:820px;aspect-ratio:993/718;background:url('assets/ink-backdrop.png') center/contain no-repeat;opacity:.14;pointer-events:none;z-index:0}
.turn.washed>*:not(.cranes){position:relative;z-index:1}
@media(max-width:720px){.turn.washed::before{width:100%;left:-14%;opacity:.1}}

/* ---- hero ---- */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:80px 0 60px;position:relative}
.avatar-seal{width:110px;height:auto;object-fit:contain;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.enso{position:relative;width:min(62vmin,460px);aspect-ratio:1;display:grid;place-items:center;margin:0 auto}
.enso img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.92}
@media (prefers-reduced-motion:reduce){.enso img{animation:none}}
.enso .brand{position:relative;z-index:2}
.brand .han{font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:clamp(52px,9vmin,86px);line-height:1;letter-spacing:.04em}
.brand .lat{font-family:'Nanum Myeongjo',serif;font-size:12px;letter-spacing:.62em;text-indent:.62em;color:var(--sumi-ink-soft);margin-top:12px}
.hero .credo{max-width:52ch;margin:44px auto 0;font-size:19px;color:var(--sumi-ink)}
.cue{margin-top:56px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sumi-ink-soft);opacity:.6}
.cue i{display:block;width:1px;height:54px;background:linear-gradient(var(--sumi-ink-soft),transparent);margin:16px auto 0;animation:drip 3.4s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.6);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ---- turn II spiral stops ---- */
.spiral-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.spiral-art{position:relative;aspect-ratio:1}
.spiral-art svg{width:100%;height:100%;overflow:visible}
.spiral-art path{fill:none;stroke:var(--sumi-ink);stroke-width:2.4;stroke-linecap:round;filter:url(#inkbleed);stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) - var(--len) * var(--prog,0))}
.stops{list-style:none;margin:0;padding:0}
.stops li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(34,26,22,.13);opacity:.32;transition:opacity .6s ease}
.stops li.on{opacity:1}
.stops b{font-family:'Nanum Myeongjo',serif;font-size:13px;color:var(--sumi-seal);font-weight:400}
.stops em{font-style:normal;font-family:'Nanum Myeongjo',serif;font-size:24px}

/* ---- turn III zones ---- */
.zones{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.rings{position:relative;aspect-ratio:1;width:100%;max-width:476px;margin:0 auto}
#t2{overflow:hidden}
.zone-copy-wrap{position:relative}
.proxemic-flank{position:relative;height:360px;margin-top:36px}
.proxemic-flank img{position:absolute;top:50%;left:50%;max-height:100%;max-width:92%;object-fit:contain;opacity:0;filter:grayscale(1);transform:translate(-50%,-50%) scale(.9);transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
.proxemic-flank img.on{opacity:.45;transform:translate(-50%,-50%) scale(1)}
@media(max-width:900px){.proxemic-flank{height:270px;margin-top:24px}}
.ringline{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:1;opacity:.82;mix-blend-mode:multiply;transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1),filter .6s cubic-bezier(.19,1,.22,1);animation:ringbreathe 4.4s ease-in-out infinite}
.ringline[data-zone="2"]{animation-delay:.35s}.ringline[data-zone="1"]{animation-delay:.7s}.ringline[data-zone="0"]{animation-delay:1.05s}
.ringline.on{opacity:1;animation:none;filter:drop-shadow(0 0 10px rgba(178,58,52,.55));transform:translate(-50%,-50%) scale(1.05)}
.rings.touched .ringline{animation:none;opacity:.32}
.rings.touched .ringline.on{opacity:1}
@keyframes ringbreathe{0%,100%{opacity:.62}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.ringline{animation:none;opacity:.8}}
.rings button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:transparent;cursor:pointer;border:0;z-index:2;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.rings button:hover{transform:translate(-50%,-50%) scale(1.012)}
.rings button:focus-visible{outline:1px solid var(--sumi-seal);outline-offset:3px;border-radius:50%}
.rings span{position:absolute;left:50%;transform:translateX(-50%);font-family:'Nanum Myeongjo',serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sumi-ink-soft);pointer-events:none}
.zone-copy{min-height:210px;transition:opacity .5s ease}
.zone-copy.swap{opacity:0}
.zone-copy .count{font-family:'Nanum Myeongjo',serif;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--sumi-seal);margin-bottom:10px;display:block}
.zone-copy h3{margin-bottom:14px;font-size:34px}

/* ---- turn IV egg ---- */
.egg-row{display:grid;grid-template-columns:1fr 60px 1.7fr;align-items:center;gap:34px;margin-bottom:56px}
.plate{text-align:center}
.plate .cap{margin-top:22px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sumi-ink-soft)}
.egg{width:212px;margin:0 auto;position:relative}
.egg img{width:100%;height:auto;display:block}
.egg::after{content:'';position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;background:url('assets/spiral-ink.png') center/contain no-repeat;opacity:.3}
.arrowline{height:1px;background:linear-gradient(90deg,transparent,var(--sumi-ink-soft),transparent);position:relative}
.arrowline::after{content:'';position:absolute;right:0;top:-3px;border:3px solid transparent;border-left-color:var(--sumi-ink-soft)}
.fox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:420px;margin:0 auto}
.fox-grid img{display:block;width:100%;height:auto}
.laws{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;border-top:1px solid rgba(34,26,22,.13);padding-top:30px}
.laws p{margin:0;font-size:16px}
.laws b{display:block;font-family:'Nanum Myeongjo',serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--sumi-seal);font-weight:400;margin-bottom:8px}

/* ---- objects ---- */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3.8vw,58px);margin-top:14px}
.obj{margin:0;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.obj.fade{transform:none}
.obj:hover{transform:translateY(-6px)}
.obj:hover .objart img{transform:scale(1.05) rotate(-1deg)}
.obj .objart{display:flex;height:190px;align-items:flex-end;justify-content:center;margin-bottom:28px}
.obj .objart img{max-height:100%;max-width:100%;width:auto;object-fit:contain;opacity:.9;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.obj .objkr{display:block;font-family:'Nanum Myeongjo',serif;line-height:1.5;font-size:15px;color:var(--sumi-ink-soft);opacity:.7;margin-bottom:9px;letter-spacing:.08em}
.obj h3{font-family:'Nanum Myeongjo',serif;font-size:25px;margin:0 0 5px;font-weight:700}
.obj .objs{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sumi-seal);opacity:.85;margin-bottom:15px;transition:color .4s ease}
.obj p{font-size:14.5px;line-height:1.72;color:var(--sumi-ink-soft);margin:0;text-wrap:pretty}
@media(max-width:1000px){.plates{grid-template-columns:repeat(2,1fr);gap:46px}}
@media(max-width:600px){.plates{grid-template-columns:1fr}.obj .objart{height:158px}}

/* ---- turn VI patronage ---- */
.lantern{background:var(--sumi-ink);color:var(--sumi-paper);padding:clamp(48px,7vw,88px);position:relative;overflow:hidden}
.lantern::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 30%,rgba(169,132,67,.30),transparent 62%)}
.lantern *{position:relative;z-index:2}
.lantern h2,.lantern h3{color:var(--sumi-paper)}
.lantern p{color:rgba(246,234,231,.78)}
.lantern .kr{color:var(--sumi-blush)}
.lantern .glow{position:absolute;right:9%;bottom:12%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(169,132,67,.42),transparent 68%);filter:blur(6px);z-index:1}

/* ---- turn VII center ---- */
.center{text-align:center}
.marks{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:44px 0 0;list-style:none;padding:0}
.marks li{font-family:'Nanum Myeongjo',serif;font-size:19px;padding:0 26px;border-right:1px solid rgba(34,26,22,.18)}
.marks li:last-child{border:0}
.marks li.key{color:var(--sumi-seal)}
.never-sold{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0}
.never-sold img{width:24px;height:24px;display:block}
.never-sold span{font-family:'Nanum Myeongjo',serif;font-size:19px;color:var(--sumi-seal)}
.center p{margin-left:auto;margin-right:auto}

/* ---- footer ---- */
footer{padding:110px 0 90px;text-align:center;border-top:1px solid rgba(34,26,22,.14)}
footer p{margin-left:auto;margin-right:auto}
.equation{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;font-family:'Nanum Myeongjo',serif;margin-bottom:34px}
.equation i{font-style:normal;font-size:34px}
.equation small{display:block;font-family:'Gowun Dodum',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sumi-ink-soft);margin-top:6px}
.equation .op{font-size:20px;color:var(--sumi-ink-soft)}
footer .close{font-family:'Nanum Myeongjo',serif;font-size:19px;color:var(--sumi-ink)}

/* ---- progress spiral ---- */
.progress{position:fixed;right:26px;bottom:26px;width:48px;height:48px;z-index:50;pointer-events:none}
.progress path{fill:none;stroke:var(--sumi-seal);stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) - var(--len) * var(--p,0))}

@media (max-width:900px){
  .wrap{padding:0 22px}
  .zones{grid-template-columns:1fr;gap:36px}
  .egg-row{grid-template-columns:1fr;gap:18px}
  .fox-grid{max-width:320px}
  .arrowline{width:1px;height:46px;justify-self:center;background:linear-gradient(180deg,transparent,var(--sumi-ink-soft),transparent)}
  .arrowline::after{right:auto;left:-3px;top:auto;bottom:0;border-left-color:transparent;border-top-color:var(--sumi-ink-soft)}
  .laws{grid-template-columns:1fr;gap:22px}
  .marks li{border:0;padding:6px 16px}
  .lantern .glow{width:150px;height:150px;right:2%;bottom:4%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .line>span{transform:none}.fade{opacity:1;transform:none}.seal{opacity:.92;transform:none}
  .enso img{opacity:.92;filter:none;transform:none;animation:none}
  canvas.petals{display:none}
}