:root{
  /* IBM Plex Mon* Mono** — use sparingly for timestamps */
  --archive-bone:#E6DDC8;
  --smoked-umber:#312A24;
  --oxidized-blue:#3F5964;
  --faded-red:#A0443E;
  --dust-olive:#77715C;
  --bruised-violet:#5B526D;
  --old-brass:#B59A5B;
  --ease-elastic:cubic-bezier(.18,1.42,.38,.98);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--smoked-umber)}
body{
  margin:0;
  font-family:"Commissioner","Noto Sans KR",system-ui,sans-serif;
  color:var(--archive-bone);
  background:
    radial-gradient(circle at 70% 20%, rgba(181,154,91,.20), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(160,68,62,.20), transparent 24%),
    linear-gradient(135deg, #312A24 0%, #5B526D 48%, #E6DDC8 100%);
  overflow-x:hidden;
}

body:before,body:after,.paper-swim:before,.paper-swim:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
}
body:before{
  opacity:.22;
  background-image:
    linear-gradient(90deg, rgba(230,221,200,.05) 1px, transparent 1px),
    linear-gradient(rgba(230,221,200,.04) 1px, transparent 1px);
  background-size:72px 72px,72px 72px;
  mix-blend-mode:screen;
}
body:after{
  opacity:.20;
  background:
    repeating-radial-gradient(circle at 24% 18%, rgba(230,221,200,.10) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(102deg, rgba(49,42,36,.15) 0 2px, transparent 2px 9px);
  animation:grainDrift 13s steps(8,end) infinite;
}
.paper-swim{position:fixed;inset:-10%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(49,42,36,.22) 70%)}
.paper-swim:before{background:linear-gradient(120deg, transparent 0 42%, rgba(230,221,200,.08) 43% 44%, transparent 45% 100%);animation:paperSwim 17s ease-in-out infinite alternate}
.paper-swim:after{background:radial-gradient(circle at 20% 30%, rgba(181,154,91,.16), transparent 18%),radial-gradient(circle at 82% 70%, rgba(63,89,100,.18), transparent 26%);filter:blur(16px)}

.star-chart{position:fixed;inset:-18vmax auto auto -8vmax;width:118vmax;height:118vmax;z-index:0;opacity:.56;transform-origin:50% 50%;transition:transform 900ms var(--ease-elastic)}
.orbital-lines circle,.orbital-lines ellipse,.constellation-lines path{fill:none;stroke:var(--oxidized-blue);stroke-width:1.2;opacity:.42}
.constellation-lines path{stroke:var(--old-brass);stroke-width:1.5;stroke-dasharray:900;stroke-dashoffset:900;animation:drawConstellation 4.8s var(--ease-elastic) forwards}
.constellation-lines .delay-1{animation-delay:.8s}.constellation-lines .delay-2{animation-delay:1.3s}

.lunar-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:19px;color:var(--archive-bone)}
.lunar-rail:before{content:"";position:absolute;top:-34px;bottom:-34px;width:1px;background:linear-gradient(transparent,var(--old-brass),transparent);opacity:.55}
.lunar-rail a{width:22px;height:22px;position:relative;border:1px solid rgba(230,221,200,.38);border-radius:50%;background:rgba(49,42,36,.24);backdrop-filter:blur(2px)}
.lunar-rail a span{position:absolute;inset:5px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);background:transparent;transition:background .45s,transform .45s var(--ease-elastic)}
.lunar-rail a.active span{background:var(--old-brass);transform:scale(1.35) rotate(30deg)}
.rail-coordinate{position:absolute;right:34px;top:-54px;width:190px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--old-brass)}

.night{min-height:100vh;position:relative;z-index:2;overflow:hidden;padding:9vw 9vw 7vw;isolation:isolate}
.night:before{content:"";position:absolute;inset:7vw 6vw;border:1px solid rgba(230,221,200,.12);box-shadow:0 0 80px rgba(49,42,36,.24) inset;transform:rotate(var(--tilt,-1deg));z-index:-1}
.mono{font-family:"IBM Plex Mono",monospace}.caption{font-size:11px;letter-spacing:.14em;color:var(--old-brass);text-transform:uppercase}.chapter-veil{position:absolute;inset:0;background:radial-gradient(circle at 80% 14%,rgba(181,154,91,.13),transparent 28%),linear-gradient(180deg,rgba(49,42,36,.1),rgba(49,42,36,.62));z-index:-1}

.astral-title{position:relative;max-width:980px;margin-top:6vh;filter:drop-shadow(16px 22px 0 rgba(63,89,100,.12))}
.astral-title h1{margin:.08em 0 0;font-family:"Noto Sans KR","Commissioner",sans-serif;font-size:clamp(70px,13vw,190px);line-height:.88;letter-spacing:-.08em;font-weight:900;color:var(--archive-bone);text-shadow:2px 2px 0 rgba(160,68,62,.45),-3px -2px 0 rgba(63,89,100,.32)}
.astral-title h1 i{font-style:normal;font-family:"Commissioner",sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px var(--archive-bone);letter-spacing:-.04em}
.title-thread{position:absolute;left:0;top:34%;width:min(86vw,920px);height:120px;overflow:visible}.title-thread path{fill:none;stroke:var(--old-brass);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawConstellation 3.2s var(--ease-elastic) .4s forwards}.title-thread circle{fill:var(--old-brass);filter:drop-shadow(0 0 9px rgba(181,154,91,.7))}
.lead-copy{max-width:590px;font-size:clamp(18px,2.1vw,28px);line-height:1.55;color:rgba(230,221,200,.86);margin-top:4vh;word-break:keep-all}

.honeycomb,.elastic-field{position:absolute;transition:transform 900ms var(--ease-elastic)}
.rigid{right:7vw;bottom:6vh;width:560px;height:470px}.hex{position:absolute;width:145px;height:126px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:rgba(230,221,200,.14);border:1px solid rgba(230,221,200,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--archive-bone);padding:20px;box-shadow:0 20px 45px rgba(49,42,36,.28),inset 0 0 0 1px rgba(230,221,200,.12);transition:transform 700ms var(--ease-elastic),background .5s,filter .5s;will-change:transform}
.hex b{font-family:"Noto Sans KR",sans-serif;font-size:26px;font-weight:900}.hex em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--old-brass);margin-top:8px}.hex.large{width:188px;height:164px}.hex.small{width:96px;height:84px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--old-brass)}.hex.outline{background:rgba(49,42,36,.12);box-shadow:inset 0 0 0 2px rgba(63,89,100,.65),0 18px 36px rgba(49,42,36,.2)}.hex.empty{opacity:.38}.hex.ghost{filter:blur(.2px);opacity:.18}.hex.paper{background:linear-gradient(135deg,rgba(230,221,200,.70),rgba(181,154,91,.18));color:var(--smoked-umber)}.hex.blue{color:var(--archive-bone)}.red-stamp{background:rgba(160,68,62,.55);transform:rotate(-7deg)}.brass-pin{background:rgba(181,154,91,.22)}
.rigid .hex:nth-child(1){left:40px;top:40px}.rigid .hex:nth-child(2){left:190px;top:4px}.rigid .hex:nth-child(3){left:325px;top:76px}.rigid .hex:nth-child(4){left:222px;top:150px}.rigid .hex:nth-child(5){left:78px;top:214px}.rigid .hex:nth-child(6){left:322px;top:246px}.rigid .hex:nth-child(7){left:462px;top:186px}
.window:before{content:"";position:absolute;inset:0;background:var(--img);opacity:.9}.asphalt{--img:radial-gradient(circle at 20% 30%,rgba(230,221,200,.18) 0 1px,transparent 2px),linear-gradient(35deg,#312A24,#3F5964 55%,#77715C)}.streetlight{--img:radial-gradient(circle at 58% 38%,rgba(181,154,91,.85),transparent 20%),radial-gradient(circle at 45% 58%,rgba(230,221,200,.24),transparent 30%),linear-gradient(#312A24,#5B526D)}.fluorescent{--img:linear-gradient(90deg,transparent 0 28%,rgba(230,221,200,.8) 29% 33%,transparent 34% 100%),linear-gradient(140deg,#3F5964,#312A24)}

.redaction{position:absolute;height:18px;background:var(--faded-red);opacity:.72;box-shadow:0 12px 0 rgba(49,42,36,.38)}.redaction-one{left:9vw;bottom:19vh;width:340px;transform:rotate(-2deg)}.seal{position:absolute;border:2px solid rgba(160,68,62,.65);border-radius:50%;color:var(--faded-red);display:grid;place-items:center;text-align:center;mix-blend-mode:screen}.celestial-seal{right:18vw;top:17vh;width:138px;height:138px;transform:rotate(9deg);animation:sealTurn 9s ease-in-out infinite}.seal span{font-family:"Noto Sans KR";font-size:44px;font-weight:900}.seal i{font-family:"IBM Plex Mono";font-style:normal;font-size:10px;letter-spacing:.1em;position:absolute;bottom:25px;color:var(--old-brass)}

.chapter-copy{position:relative;max-width:520px;z-index:3}.chapter-copy h2,.dawn-field h2{font-family:"Noto Sans KR",sans-serif;font-weight:900;font-size:clamp(54px,8vw,126px);line-height:.88;margin:.1em 0;color:var(--archive-bone);letter-spacing:-.06em}.chapter-copy p:not(.caption),.dawn-field p:not(.caption){font-size:clamp(18px,2vw,25px);line-height:1.6;color:rgba(230,221,200,.82);word-break:keep-all}.left-copy{margin-top:10vh}.right-copy{margin-left:auto;margin-top:8vh;text-align:right}.street-field{right:8vw;top:20vh;width:700px;height:430px}.street-field .hex:nth-child(1){left:45px;top:120px}.street-field .hex:nth-child(2){left:180px;top:30px}.street-field .hex:nth-child(3){left:325px;top:160px}.street-field .hex:nth-child(4){left:460px;top:86px}.street-field .hex:nth-child(5){left:545px;top:220px}.street-field .hex:nth-child(6){left:245px;top:285px}.text-cell{background:rgba(63,89,100,.58)}.text-cell.muted{background:rgba(119,113,92,.38)}.elastic-lines{position:absolute;inset:0;overflow:visible;z-index:-1}.elastic-lines path{fill:none;stroke:var(--old-brass);stroke-width:2;stroke-dasharray:760;stroke-dashoffset:760;transition:stroke-dashoffset 1200ms var(--ease-elastic)}.night.in-view .elastic-lines path{stroke-dashoffset:0}.tape{position:absolute;width:220px;height:42px;background:rgba(230,221,200,.24);border:1px solid rgba(230,221,200,.17);box-shadow:0 14px 26px rgba(49,42,36,.2)}.tape-a{left:12vw;bottom:16vh;transform:rotate(12deg)}.tape-b{right:18vw;top:16vh;transform:rotate(-16deg)}

.delay-night{background:linear-gradient(180deg,rgba(49,42,36,.18),rgba(49,42,36,.54))}.clock-hex-ring{position:absolute;left:8vw;top:14vh;width:520px;height:520px;border:1px dashed rgba(181,154,91,.42);border-radius:50%;transform:skew(-4deg,5deg);transition:transform 850ms var(--ease-elastic)}.ring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);width:210px;height:184px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:rgba(230,221,200,.78);color:var(--smoked-umber);display:grid;place-items:center}.ring-core span{font-family:"IBM Plex Mono";font-size:42px}.ring-core i{font-style:normal;color:var(--faded-red);font-weight:800}.tick{width:72px;height:63px;background:rgba(63,89,100,.46)}.t1{left:222px;top:-28px}.t2{right:20px;top:112px}.t3{right:36px;bottom:80px}.t4{left:224px;bottom:-32px}.t5{left:20px;bottom:98px}.t6{left:24px;top:96px}.stretched-ledger{position:absolute;right:10vw;bottom:12vh;width:48vw;display:grid;gap:24px}.stretched-ledger span{height:2px;background:linear-gradient(90deg,transparent,var(--dust-olive),var(--faded-red),transparent);transform-origin:right;animation:ledgerStretch 4s var(--ease-elastic) infinite alternate}.stretched-ledger span:nth-child(even){animation-delay:.6s}

.paper-stack{position:relative;margin:8vh 0 0 7vw;width:min(760px,72vw)}.witness-note{background:rgba(230,221,200,.82);color:var(--smoked-umber);box-shadow:24px 28px 0 rgba(63,89,100,.25),-8px -8px 0 rgba(160,68,62,.18);padding:44px;transform:rotate(-2deg);position:relative}.witness-note:before{content:"";position:absolute;left:12%;right:12%;top:-18px;height:38px;background:rgba(230,221,200,.34);transform:rotate(3deg)}.witness-note h2{font-family:"Noto Sans KR";font-size:clamp(32px,5vw,68px);line-height:1.22;margin:0;letter-spacing:-.05em}.note-b{width:58%;margin:-12px 0 0 auto;transform:rotate(4deg);font-size:20px;line-height:1.7}.hand-arrow{position:absolute;right:24vw;top:33vh;font-size:130px;color:var(--faded-red);transform:rotate(-18deg);font-family:"Noto Sans KR"}.witness-comb{right:8vw;bottom:10vh;width:360px;height:260px}.witness-comb .hex:nth-child(1){left:0;top:70px}.witness-comb .hex:nth-child(2){left:138px;top:4px}.witness-comb .hex:nth-child(3){left:225px;top:130px}

.ledger-night{background:linear-gradient(180deg,rgba(230,221,200,.12),rgba(230,221,200,.82));color:var(--smoked-umber)}.ledger-night:before{border-color:rgba(49,42,36,.15)}.dawn-field{position:relative;z-index:3;max-width:780px;margin:8vh auto;text-align:left}.dawn-field h2{color:var(--smoked-umber);text-shadow:2px 2px 0 rgba(181,154,91,.24)}.dawn-field p:not(.caption){color:rgba(49,42,36,.78)}.star-pins{position:absolute;inset:18vh 12vw 18vh;z-index:2}.star-pins span{position:absolute;left:var(--x);top:var(--y);font-family:"IBM Plex Mono";font-size:12px;color:var(--smoked-umber);transform:translate(-50%,-50%)}.star-pins span:before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--old-brass);box-shadow:0 0 0 7px rgba(181,154,91,.13),0 0 28px rgba(181,154,91,.75);margin:0 auto 8px}.star-pins:before{content:"";position:absolute;inset:0;background:linear-gradient(25deg,transparent 14%,rgba(63,89,100,.32) 14.2%,transparent 14.6% 41%,rgba(63,89,100,.24) 41.3%,transparent 41.8% 69%,rgba(160,68,62,.24) 69.3%,transparent 70%)}.final-domain{position:absolute;right:8vw;bottom:7vh;font-family:"Noto Sans KR";font-size:clamp(40px,8vw,116px);font-weight:900;color:rgba(49,42,36,.16);letter-spacing:-.08em}

.night.in-view .red-stamp{animation:stampEnter 1.3s var(--ease-elastic) both}.night.in-view .hex{filter:saturate(1.08)}.is-dented{transform:translate(var(--dent-x,0),var(--dent-y,0)) scale(1.045) rotate(var(--dent-r,0deg))!important;background:rgba(181,154,91,.28)}

@keyframes drawConstellation{to{stroke-dashoffset:0}}
@keyframes grainDrift{50%{transform:translate3d(2%, -1%,0)}100%{transform:translate3d(-1%, 2%,0)}}
@keyframes paperSwim{to{transform:translate3d(4%,2%,0) rotate(.8deg)}}
@keyframes sealTurn{50%{transform:rotate(-4deg) scale(1.03)}}
@keyframes stampEnter{0%{transform:rotate(-18deg) scale(.9);opacity:.2}70%{transform:rotate(5deg) scale(1.05)}100%{transform:rotate(-7deg) scale(1)}}
@keyframes ledgerStretch{from{transform:scaleX(.42)}to{transform:scaleX(1.08)}}

@media (max-width:900px){
  .night{padding:92px 28px}.lunar-rail{right:10px}.rigid,.street-field,.clock-hex-ring,.witness-comb{position:relative;inset:auto;margin:40px auto;width:86vw;max-width:560px}.street-field{height:430px}.clock-hex-ring{height:86vw;max-height:520px}.right-copy{text-align:left;margin-left:0}.paper-stack{width:88vw;margin-left:0}.note-b{width:82%}.hand-arrow{right:8vw;top:52vh}.astral-title h1{font-size:clamp(58px,18vw,120px)}
}