:root{color-scheme:dark;--ink:#edece6;--muted:#b3bfcc;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--sans:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#08101b;color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.9}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #d7b986;outline-offset:6px}a:hover{color:#e4c790}.skip{position:fixed;left:24px;top:-100px;z-index:50;background:#fff;color:#111;padding:12px}.skip:focus{top:10px}#world{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 65% 36%,#304b65 0%,#12253a 30%,#070e18 72%)}#world canvas{width:100%;height:100%;display:block}.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(3,9,15,.44),transparent 55%),radial-gradient(ellipse at center,transparent 38%,rgba(0,2,8,.4));}.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.026;background-image:none}header{position:fixed;top:0;left:0;width:100%;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:28px 5%}.wordmark{font-family:var(--serif);font-size:27px;letter-spacing:.18em;line-height:1.4}.wordmark span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.32em;margin-top:6px}nav{display:flex;gap:28px;align-items:center;font-size:16px}#motion{border:1px solid #b8c1c54a;background:transparent;border-radius:50px;padding:8px 18px;font-size:16px;cursor:pointer;min-height:44px}#motion:hover{background:#ffffff12}.journey{position:relative;z-index:2}.chapter{height:120svh;min-height:650px;position:relative;padding:0 5%}.copy{position:relative;top:53svh;max-width:680px}.index{font-size:16px;letter-spacing:.23em;margin:0 0 22px;color:#c6c8c9}.index span{font-family:Georgia,serif;margin-right:16px;color:#96a9b8}h1,h2{font-family:var(--serif);font-weight:400;margin:0;line-height:1.65;letter-spacing:.12em;font-size:clamp(36px,4.25vw,68px);text-wrap:balance}.caption{font-size:18px;letter-spacing:.10em;color:#d5d4d0;margin-top:23px;max-width:32em;line-height:1.9}.scroll-cue{position:absolute;top:90svh;left:50%;transform:translateX(-50%);font-size:16px;letter-spacing:.08em;white-space:nowrap;color:#d1d6dc}.scroll-cue span{display:block;text-align:center;font-size:24px;margin-top:2px}.union .copy{top:44svh;max-width:none;text-align:center}.union h2{font-size:clamp(44px,5vw,78px);text-shadow:0 2px 35px #040a12}.union .caption{margin:22px auto}.union .index{font-size:11px;letter-spacing:.32em}.portrait{position:relative;z-index:3;background:#eae8e1;color:#253139;padding:125px 9% 90px;display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;scroll-margin-top:0}.portrait-heading h2{font-size:56px;letter-spacing:.16em;margin:26px 0 28px}.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:#6e746f}.intro{font-family:var(--serif);font-size:28px;letter-spacing:.12em;line-height:1.8}.portrait-body p{font-size:18px;line-height:2.2;margin:0 0 34px;letter-spacing:.035em}.portrait-body em{font-style:normal;border-bottom:1px solid #ae9c7c;padding-bottom:4px}.portrait-body .closing{font-family:var(--serif);font-size:30px;line-height:1.9;margin-top:60px}.interests{grid-column:1/-1;border-top:1px solid #88958a55;margin-top:32px;padding-top:35px;display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw}.interests ul{list-style:none;padding:0;margin:0}.interests li{padding:15px 0;border-bottom:1px solid #88958a33;font-size:18px}.interests li span{font-family:Georgia,serif;font-size:16px;color:#777f76;margin-right:22px}footer{background:#dcded7;position:relative;z-index:3;color:#283a37;display:grid;grid-template-columns:1fr auto;align-items:start;gap:50px;padding:60px 9% 30px}footer p{font-size:16px;margin:10px 0}.footer-name{font-family:var(--serif);font-size:30px;letter-spacing:.18em}footer>a{border-bottom:1px solid #5e7066;padding:12px 0;font-size:16px}.draft-note{grid-column:1/-1;border-top:1px solid #87978d55;padding-top:25px;color:#4c5d56;max-width:100%;font-size:16px}.render-status{position:relative;z-index:12;color:#fff;background:#14222eee;border:1px solid #ccd3d555;padding:12px 18px;margin:0;font-size:16px;pointer-events:none}.static-mode #world{background:radial-gradient(ellipse at 70% 40%,#2c4154, #0a1622 65%)}@media(max-width:700px){header{padding:22px 6%;align-items:flex-start}.wordmark{font-size:24px}nav{gap:12px;align-items:flex-end;flex-direction:column}nav>a{font-size:16px}#motion{font-size:16px;padding:3px 12px;min-height:44px}.chapter{padding:0 6%;min-height:0;height:120svh}.copy{top:58svh;max-width:100%}h1,h2{font-size:clamp(31px,8.2vw,45px);letter-spacing:.075em;line-height:1.6}.caption{font-size:16px;letter-spacing:.025em;max-width:22em;margin-top:20px}.index{font-size:16px;margin-bottom:15px}.scroll-cue{top:91svh;font-size:16px}.union .copy{top:48svh}.union h2{font-size:clamp(32px,8.6vw,46px)}.union .caption{max-width:16em}.portrait{padding:75px 7% 70px;display:block}.portrait-heading h2{font-size:42px}.intro{font-size:25px;margin-bottom:50px}.portrait-body p{font-size:18px;line-height:2}.portrait-body .closing{font-size:27px}.interests{display:block;padding-top:20px}.interests ul{margin-top:20px}.interests li{font-size:16px}footer{padding:45px 7% 25px;gap:30px}.footer-name{font-size:26px}footer>a{max-width:120px}.draft-note{line-height:1.9}.atmosphere{background:linear-gradient(0deg,rgba(2,8,15,.7),transparent 60%)}}@media(min-width:701px) and (max-height:720px){h1,h2{font-size:48px}.copy{top:46svh}.caption{margin-top:16px}.index{margin-bottom:12px}.chapter{min-height:0}.union .copy{top:42svh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}html[data-paused=true]{scroll-behavior:auto}

body.reading header{color:#233a36;background:#eae8e1f0}body.reading #motion{border-color:#6c7a7266}body.reading header a:hover{color:#526b64}

.narrow-break{display:none}@media(max-width:360px){.narrow-break{display:block}#seek .copy{top:46svh}}

/* Keep scroll compositing cheap: static background + opacity-only warmth. */
#world{background:radial-gradient(ellipse at 65% 36%,#284157 0%,#112031 35%,#060d17 77%)}
#world::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 65% 36%,#aa713c,transparent 70%);opacity:var(--warmth,0);will-change:opacity;pointer-events:none}
#world canvas{position:relative}
.grain{display:none}

/* Date is a small composited 3D layer, independent of the WebGL scene. */
.date-banner{position:fixed;top:0;left:0;width:100%;height:46px;z-index:11;display:flex;align-items:center;justify-content:center;perspective:900px;background:linear-gradient(#08101be8,#08101b00);pointer-events:none}
.date-orbit{position:relative;display:block;width:296px;height:30px;transform-style:preserve-3d;animation:date-turn 24s linear infinite;will-change:transform}
.date-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:.015em;color:#e6d4b3;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.date-front{transform:translateZ(1px)}.date-back{transform:rotateY(180deg) translateZ(1px)}
@keyframes date-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
header{top:42px;padding-top:16px;padding-bottom:16px}
body.reading .date-banner{background:#eae8e1}body.reading .date-face{color:#344b42}
html[data-paused=true] .date-orbit{animation:none;transform:rotateY(0deg);will-change:auto}
@media(prefers-reduced-motion:reduce){.date-orbit{animation:none;will-change:auto}}
@media(max-width:700px){header{padding-top:8px}.date-orbit{width:288px}nav{gap:7px}}

.date-orbit{width:334px}
.date-face{font-family:var(--serif);font-size:18px;letter-spacing:.035em;background:linear-gradient(110deg,#7d8e9d 0%,#f9fcff 17%,#aab8c5 30%,#edf2f3 39%,#e7d0a0 52%,#b88a42 66%,#fff0c9 80%,#c7974e 94%,#efd8a9 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body.reading .date-face{background-image:linear-gradient(110deg,#415460 0%,#64757d 28%,#394f5b 40%,#896427 58%,#74541e 78%,#967238 100%);color:transparent}
@media(max-width:700px){.date-orbit{width:288px}.date-face{font-size:16px;letter-spacing:.015em}}

@media(max-width:700px){header #motion{position:absolute;left:6%;top:64px}header nav{padding-top:0}}

.date-control{display:flex;align-items:center;justify-content:center;width:350px;max-width:100%;height:46px;padding:0;border:0;background:none;pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;perspective:900px}
.date-control[data-dragging=true]{cursor:grabbing}
.date-control .date-orbit{pointer-events:none}
.date-control[data-manual=true] .date-orbit{animation:none}
@media(max-width:700px){.date-control{width:304px}}

.date-control{position:relative}
.date-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.solid-ready .date-orbit{opacity:0;animation:none;will-change:auto}

.date-control{touch-action:none}

body.reading .date-canvas{filter:brightness(.58)}