:root{color-scheme:dark;--ink:#f1ecd7;--edge:clamp(18px,2.3vw,38px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#28362a;color:var(--ink);font-family:Georgia,'Times New Roman','Songti SC',SimSun,serif;-webkit-font-smoothing:antialiased}.symbols{position:absolute;width:0;height:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid var(--ink);outline-offset:5px;border-radius:4px}svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.meadow,.shade{position:fixed;inset:0;width:100%;height:100%}.meadow{object-fit:cover}.shade{pointer-events:none;background:linear-gradient(180deg,rgba(11,24,15,.13),transparent 28%,transparent 62%,rgba(5,15,7,.35))}header{position:fixed;z-index:2;top:max(20px,env(safe-area-inset-top));left:var(--edge);right:var(--edge);display:flex;align-items:center;justify-content:space-between}.signature{display:flex;gap:13px;align-items:center;text-decoration:none;color:inherit;font-size:20px;letter-spacing:.4px;white-space:nowrap;text-shadow:0 1px 10px #1b291e55}.signature svg{width:29px;height:29px}nav{display:flex;gap:29px}nav button{position:relative;padding:12px 0;font-size:14px;letter-spacing:2px;opacity:.82;transition:opacity .2s}nav button:hover,nav button[aria-expanded=true]{opacity:1}nav button:after{content:'';position:absolute;bottom:2px;left:0;right:2px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .3s}nav button[aria-expanded=true]:after{transform:scaleX(1)}.music{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px;width:242px;height:40px;padding:5px 15px;border:1px solid #eee9d522;border-radius:30px;background:#273b2522;backdrop-filter:blur(7px);font-size:17px}.music-copy{display:grid;gap:3px;font-size:11px;letter-spacing:1px;text-align:center}.music-copy small{font-size:8px;opacity:.7}.equalizer{display:flex;align-items:center;gap:2px;height:18px}.equalizer i{width:2px;height:5px;background:currentColor;opacity:.7}.equalizer i:nth-child(2),.equalizer i:nth-child(4){height:11px}.equalizer i:nth-child(3){height:17px}.playing .equalizer i{animation:pulse 1s ease-in-out infinite alternate}.playing .equalizer i:nth-child(even){animation-delay:-.6s}@keyframes pulse{to{transform:scaleY(.25)}}.panel{position:fixed;z-index:2;left:var(--edge);bottom:80px;max-width:min(600px,70vw);max-height:55vh;overflow-y:auto;opacity:0;transform:translateY(35px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);text-shadow:0 2px 15px #0009}.panel.open{opacity:1;transform:translateY(0)}.panel-heading{display:flex;align-items:center;gap:26px}.panel h1{font-size:30px;font-weight:400;margin:0 0 14px;letter-spacing:3px}.close{align-self:flex-start;font-size:21px;line-height:32px;width:36px;opacity:.7}.close:hover{opacity:1}.panel p{font-size:15px;line-height:1.9;letter-spacing:1px;margin:5px 0}.panel .secondary{opacity:.65;font-size:13px}.social{position:fixed;z-index:3;bottom:max(23px,env(safe-area-inset-bottom));right:calc(var(--edge) - 6px);display:flex;gap:14px}.social button{width:40px;height:40px;padding:7px;opacity:.85;transition:transform .25s,opacity .25s}.social button:hover{transform:translateY(-3px);opacity:1}.social svg{width:25px;height:25px}.motion{position:fixed;bottom:24px;left:var(--edge);width:26px;height:30px;font-size:13px;opacity:.4;z-index:3}.motion:hover{opacity:1}.contact-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:12px}.contact-links button{padding:6px 0;border-bottom:1px solid #eee9d544;font-size:14px}.qr{max-width:150px;display:block;margin-top:15px;border-radius:8px}#notice{position:fixed;z-index:5;left:50%;bottom:25px;transform:translate(-50%,10px);opacity:0;pointer-events:none;font:12px/1.6 system-ui,sans-serif;padding:10px 18px;border-radius:22px;background:#1b2a21c9;backdrop-filter:blur(8px);transition:.25s;max-width:80vw;text-align:center}#notice.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){header{top:18px;align-items:flex-start}.signature{font-size:17px;gap:8px}.signature svg{width:25px;height:25px}nav{gap:14px}nav button{font-size:12px;letter-spacing:1px;padding-top:5px}.music{top:51px;width:204px;height:36px}.panel{bottom:93px;max-width:calc(100vw - 2 * var(--edge));max-height:55vh}.panel h1{font-size:25px}.panel p{font-size:14px}.social{gap:6px}.social button{width:38px;height:40px}#notice{bottom:70px}}@media(max-width:370px){.signature{font-size:14px}nav{gap:9px}nav button{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Compact playlist and subtle pointer feedback. */
.music{width:300px;gap:9px;padding:4px 10px;transition:background .25s,border-color .25s,box-shadow .25s}
.music-copy{min-width:0;flex:1;padding:2px 0;cursor:pointer}.music-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.music-controls{display:flex;align-items:center;gap:2px}.music-controls button{width:26px;height:30px;border-radius:50%;font:20px Georgia,serif;padding:0;transition:background .2s,transform .2s,color .2s}.music-controls #play{font-size:17px}.music-controls button:disabled{opacity:.28;cursor:default}.playlist{position:absolute;top:49px;left:0;right:0;padding:12px;border-radius:16px;border:1px solid #eee9d52b;background:#243027e8;backdrop-filter:blur(18px);box-shadow:0 12px 30px #0002;text-align:left}.playlist[hidden]{display:none}#track-list{max-height:220px;overflow-y:auto}.track{display:block;width:100%;text-align:left;font:12px/1.6 system-ui,sans-serif;padding:9px 10px;border-radius:7px;overflow-wrap:anywhere}.track[aria-current=true]{background:#e7ecd51a;color:#fffbe5}.add-tracks{font:12px system-ui,sans-serif;margin-top:8px;padding:10px;width:100%;text-align:left;border-top:1px solid #eee9d51c}.playlist p{font:10px system-ui,sans-serif;opacity:.5;padding-left:10px;margin:5px 0}.signature{transition:opacity .25s,filter .25s}.signature svg{transition:transform .45s}.social button,.close,.motion{border-radius:50%;transition:background .25s,opacity .25s,transform .25s,filter .25s}.contact-links button{transition:color .25s,transform .25s,text-shadow .25s}button:active:not(:disabled){scale:.94}
@media(hover:hover){.signature:hover{filter:drop-shadow(0 0 7px #f1ecd74d)}.signature:hover svg{transform:rotate(18deg)}nav button:hover{transform:translateY(-2px);text-shadow:0 0 12px #f1ecd780}nav button:hover:after{transform:scaleX(1)}.music:hover,.music:focus-within{background:#4f61464d;border-color:#eee9d550;box-shadow:0 3px 18px #13201233}.music-controls button:hover:not(:disabled),.close:hover,.motion:hover{background:#eee9d51c;transform:translateY(-1px)}.social button:hover{background:#eee9d515;filter:drop-shadow(0 0 6px #f1ecd755)}.contact-links button:hover{transform:translateY(-2px);text-shadow:0 0 9px #fff8}.track:hover,.add-tracks:hover{background:#eee9d51a}.music-copy:hover{color:#fff}}
nav button{transition:opacity .2s,transform .25s,text-shadow .25s}
@media(min-width:761px) and (max-width:1000px){.music{width:240px}.music-copy span{max-width:105px}nav{gap:17px}}
@media(max-width:760px){.music{width:272px}.music-copy span{max-width:132px}.music-controls button{height:28px}.playlist{top:44px}}
/* A quiet top capsule reveals the player on hover, tap, or keyboard activation. */
.music-dock{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:310px;padding-top:32px;z-index:6;pointer-events:none}
.music-tab{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:32px;display:grid;place-items:center;pointer-events:auto;border-radius:0 0 18px 18px}
.music-tab span{display:block;width:48px;height:6px;border-radius:9px;background:#eee9d57a;box-shadow:0 1px 9px #18332233;transition:width .3s,background .3s,box-shadow .3s}
.music-tab:hover span,.music-tab:focus-visible span,.music-dock.expanded .music-tab span{width:64px;background:#f1ecd7c7;box-shadow:0 0 10px #f1ecd730}
.music-dock .music{position:relative;left:auto;top:auto;margin:0 auto;width:300px;height:40px;transform:translateY(-19px) scale(.94);transform-origin:top center;opacity:0;visibility:hidden;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility .35s,background .25s,border-color .25s}
.music-dock.expanded{pointer-events:auto}.music-dock.expanded .music{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.music-dock .playlist{top:calc(100% + 8px)}.music-dock .playlist:before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
@media(max-width:760px){.music-dock{top:-18px;width:290px;padding-top:76px}.music-dock.expanded{pointer-events:none}.music-dock .music{width:272px;height:38px}.music-tab{height:31px}.music-tab span{width:40px;height:5px}}
/* Opening: a soft veil of mist lifts from the meadow. */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:#c1ccc2;animation:morning-mist 2.2s ease-out both}
.meadow{animation:meadow-arrive 2.4s cubic-bezier(.18,.65,.3,1) both}
.signature,nav,.social,.motion{animation:interface-arrive 1.25s .35s ease-out backwards}
.music-dock{animation:music-arrive .85s ease-out backwards}
@keyframes morning-mist{0%{opacity:.7}45%{opacity:.2}100%{opacity:0;visibility:hidden}}
@keyframes meadow-arrive{from{transform:scale(1.025);filter:blur(5px);opacity:.55}to{transform:scale(1);filter:blur(0);opacity:1}}
@keyframes interface-arrive{from{opacity:0;filter:blur(3px)}to{filter:blur(0)}}
@keyframes music-arrive{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){body::before{display:none}}
/* Scrollable chapters over the continuous meadow. */
html{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto;scroll-padding-top:0}
body{height:auto;min-height:100%;overflow:visible}
header{z-index:10}
main{position:relative;z-index:1}
.landing{height:100vh;height:100svh;position:relative}
.scroll-hint{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:var(--ink);opacity:.6;text-decoration:none;transition:opacity .25s;display:flex;align-items:center;gap:12px;padding:10px}
.scroll-hint:hover{opacity:1}.scroll-hint span{font-size:17px}
.story-section{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:140px max(var(--edge),8vw) 110px;position:relative}
.story-copy{max-width:680px;text-shadow:0 2px 20px #08170dc9}
.section-number{display:block;font-size:10px;letter-spacing:3px;opacity:.55;margin-bottom:22px}
.story-copy h1,.story-copy h2{font-weight:400;font-size:clamp(28px,3vw,42px);letter-spacing:4px;margin:0 0 26px}
.story-copy p{font-size:16px;line-height:2;letter-spacing:1px;margin:10px 0}
.story-copy .secondary{font-size:14px;opacity:.75}
nav button.active{opacity:1;text-shadow:0 0 12px #f1ecd755}nav button.active:after{transform:scaleX(1)}
.shade:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b1b1599,transparent 85%);opacity:0;transition:opacity .65s}
body.reading .shade:after{opacity:1}
@media(max-width:760px){.story-section{padding:145px var(--edge) 110px}.story-copy p{font-size:14px}.story-copy .secondary{font-size:13px}.scroll-hint{bottom:78px;white-space:nowrap}.story-copy h1,.story-copy h2{font-size:28px}}
/* Full-height chapters snap into place on touch, keyboard and wheel scrolling. */
html{scroll-snap-type:y mandatory;overscroll-behavior-y:contain}
.landing,.story-section{scroll-snap-align:start;scroll-snap-stop:always}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A clover invitation, then the same mark flies home to the corner. */
body.awaiting-entry{height:100svh;overflow:hidden}
html:has(body.awaiting-entry){overflow:hidden;scroll-snap-type:none}
.entry-screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#16291d22;transition:background 1.1s}
.entry-clover{display:flex;flex-direction:column;align-items:center;gap:25px;padding:30px;overflow:visible}
.entry-clover svg{width:72px;height:72px;stroke-width:1.1;filter:drop-shadow(0 0 18px #e5efd44d);transition:filter .4s}
.entry-clover span{font-size:11px;letter-spacing:3px;opacity:.65;transition:opacity .35s}
.entry-clover:hover svg{filter:drop-shadow(0 0 26px #eff9dba6)}
.entry-clover:active:not(:disabled){scale:1}
body.awaiting-entry header,body.awaiting-entry main,body.awaiting-entry footer,body.awaiting-entry #motion{opacity:0;pointer-events:none;animation:none}
body.awaiting-entry .signature,body.awaiting-entry nav,body.awaiting-entry .music-dock,body.awaiting-entry .social,body.awaiting-entry .motion{animation:none}
body.entering-site .entry-screen{background:transparent}body.entering-site .entry-clover span{opacity:0}
body.site-entered header,body.site-entered main,body.site-entered footer,body.site-entered #motion{animation:entry-interface 1s ease-out both}
body.site-entered .signature,body.site-entered nav,body.site-entered .music-dock,body.site-entered .social,body.site-entered .motion{animation:none}
@keyframes entry-interface{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.entry-screen,.entry-clover span{transition:none}}
/* Seek controls stay inside the expanding music capsule. */
.music-dock .music{height:64px;padding-bottom:25px;border-radius:22px}
.music-progress{position:absolute;left:14px;right:14px;bottom:8px;display:flex;align-items:center;gap:8px;font:9px/1.4 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#f1ecd7b3}
.music-progress span{min-width:26px}.music-progress span:last-child{text-align:right}
#seek{appearance:none;-webkit-appearance:none;min-width:0;flex:1;height:14px;margin:0;background:transparent;cursor:pointer;--progress:0%}
#seek::-webkit-slider-runnable-track{height:2px;border-radius:4px;background:linear-gradient(to right,#f1ecd7 var(--progress),#f1ecd738 var(--progress))}
#seek::-moz-range-track{height:2px;border-radius:4px;background:#f1ecd738}#seek::-moz-range-progress{background:#f1ecd7;height:2px}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;margin-top:-2.5px;background:#f1ecd7;border-radius:50%;transition:box-shadow .2s}
#seek::-moz-range-thumb{width:7px;height:7px;border:0;background:#f1ecd7;border-radius:50%}
#seek:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #f1ecd720}#seek:focus-visible{outline:1px solid #f1ecd7;outline-offset:3px;border-radius:4px}
#seek:disabled{opacity:.35;cursor:default}
/* First-page postcard: a greeting, a real music status, and quiet chapter markers. */
.welcome-copy{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(780px,calc(100% - 100px));text-align:center;color:#f2eedc;text-shadow:0 2px 22px #12221766}
.welcome-eyebrow{font:9px/1.6 Georgia,serif;letter-spacing:4px;opacity:.6;margin:0 0 25px}
.welcome-copy h1{font-weight:400;font-size:clamp(28px,3.2vw,46px);line-height:1.6;letter-spacing:5px;margin:0}
.welcome-note{font-size:12px;letter-spacing:2px;opacity:.72;margin:20px 0 0}
.welcome-music{display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;letter-spacing:1px;opacity:.65;margin:38px 0 0}
.listening-dot{width:4px;height:4px;background:currentColor;border-radius:50%}
.music-playing .listening-dot{animation:quiet-pulse 2.4s ease-in-out infinite}
.mobile-break{display:none}
.page-dots{position:fixed;right:calc(var(--edge) - 8px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:4;gap:3px}
.page-dots button{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%}
.page-dots span{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.35;transition:opacity .3s,transform .3s,box-shadow .3s}
.page-dots button[aria-current] span{opacity:1;transform:scale(1.4);box-shadow:0 0 0 4px #eee9d51a}
.page-dots button:hover span{opacity:1;box-shadow:0 0 0 6px #eee9d518}
body.site-entered .welcome-copy>*{animation:welcome-line 1.5s .35s ease-out backwards}
body.site-entered .welcome-copy h1{animation-delay:.55s}body.site-entered .welcome-note{animation-delay:.8s}body.site-entered .welcome-music{animation-delay:1.05s}
.scroll-hint span{animation:downward-breath 2.8s ease-in-out infinite}
@keyframes welcome-line{from{opacity:0;translate:0 10px;filter:blur(3px)}to{translate:0 0;filter:blur(0)}}
@keyframes quiet-pulse{50%{opacity:.35;box-shadow:0 0 0 3px #eee9d51c}}
@keyframes downward-breath{50%{transform:translateY(4px)}}
@media(max-width:600px){.welcome-copy{width:calc(100% - 80px);top:46%}.mobile-break{display:block}.welcome-copy h1{font-size:30px;letter-spacing:3px}.welcome-eyebrow{font-size:8px;letter-spacing:2px}.welcome-note{font-size:10px;letter-spacing:1px}.welcome-music{font-size:9px;line-height:1.8;margin-top:28px}.page-dots{right:5px}.welcome-eyebrow{margin-bottom:19px}}
/* Persistent photograph survives suspended video surfaces and decoder recovery. */
.meadow-fallback{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.meadow{animation-fill-mode:backwards}
.meadow.recovering{opacity:0!important}
/* One entrance sequence: no full-screen video blur, no second logo fade. */
html{scrollbar-gutter:stable}
body::before{display:none}
.meadow{animation:none;filter:none;transform:none}
.entry-clover svg{filter:none;transition:opacity .25s}
.entry-clover:hover svg{filter:none;opacity:.8}
body.site-entered header,body.site-entered main,body.site-entered footer,body.site-entered #motion{animation:none}
body.site-entered .signature{animation:none}
body.site-entered .signature span,body.site-entered nav,body.site-entered .social,body.site-entered .music-dock,body.site-entered .motion,body.site-entered .page-dots,body.site-entered .moment-card{animation:entry-interface .65s ease-out backwards}
body.site-entered .welcome-copy>*{animation:welcome-settle .8s .12s ease-out backwards}
body.site-entered .welcome-copy h1{animation-delay:.12s}body.site-entered .welcome-note{animation-delay:.22s}body.site-entered .welcome-music{animation-delay:.36s}
@keyframes welcome-settle{from{opacity:0;translate:0 6px}to{translate:0 0}}
.welcome-copy{top:46%}
.welcome-note{letter-spacing:8px;padding-left:8px;margin-top:18px}
.welcome-divider{height:1px;width:32px;margin:25px auto 20px;background:#eee9d54d}
.welcome-aside{font-size:12px;letter-spacing:2px;opacity:.6;line-height:1.8;margin:0}
.welcome-music{margin-top:24px}
.moment-card{position:absolute;left:var(--edge);bottom:90px;display:grid;gap:8px;color:var(--ink);text-shadow:0 1px 12px #15251b55}
.moment-label{font-size:8px;letter-spacing:2px;opacity:.5}
#moment-clock{font-size:26px;line-height:1.2;letter-spacing:2px;font-variant-numeric:tabular-nums;font-weight:400}
#moment-date{font-size:10px;letter-spacing:1px;opacity:.6}
@media(max-width:600px){.welcome-copy{top:43%}.welcome-divider{margin:18px auto 16px}.welcome-aside{font-size:10px;letter-spacing:1px}.welcome-music{margin-top:20px}.moment-card{bottom:100px;gap:5px}#moment-clock{font-size:22px}#moment-date{font-size:9px}.moment-label{font-size:7px}}
@media(max-height:620px){.moment-card{bottom:65px}.welcome-eyebrow{margin-bottom:12px}.welcome-divider{margin:12px auto}.welcome-note{margin-top:10px}.welcome-music{margin-top:12px}.welcome-copy h1{font-size:28px}}
/* Clear time typography and a restrained, mouse-only glow. */
#moment-clock{font-family:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif;font-weight:300;font-size:30px;letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:none}
#moment-date,.moment-label{font-family:'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:.8px}
.cursor-aura,.cursor-echo{position:fixed;top:0;left:0;pointer-events:none;z-index:40;opacity:0;will-change:transform;transition:opacity .3s}
.cursor-aura{width:100px;height:100px;margin:-50px;background:radial-gradient(circle,#e8efd819 0%,#dcebd40a 35%,transparent 70%);border-radius:50%}
.cursor-echo{width:26px;height:26px;margin:-13px;border:1px solid #f1ecd745;border-radius:50%}
.cursor-aura.visible{opacity:1}.cursor-echo.visible{opacity:.65}
.cursor-echo.over-control{border-color:#f1ecd799;background:#f1ecd70a}
@media(max-width:600px){#moment-clock{font-size:25px}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-aura,.cursor-echo{display:none}}
.welcome-aside{font-size:17px;line-height:1.7;letter-spacing:1.5px;opacity:.85}
.welcome-nickname{font-size:12px;line-height:1.8;letter-spacing:2px;opacity:.6;margin:22px 0 0}
.click-bloom{position:fixed;pointer-events:none;z-index:45;left:0;top:0;width:16px;height:16px;margin:-8px;border:1px solid #f1ecd78c;border-radius:50%;background:#e8efd710;box-shadow:0 0 14px #e8efd71a;animation:click-bloom .65s cubic-bezier(.15,.65,.25,1) forwards}
@keyframes click-bloom{from{opacity:.85;transform:scale(.4)}to{opacity:0;transform:scale(4)}}
@media(max-width:600px){.welcome-aside{font-size:15px}.welcome-nickname{font-size:11px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){.click-bloom{display:none}}
.sound-settings{border-top:1px solid #eee9d51c;margin-top:10px;padding:12px 8px 4px;font:11px/1.6 'Segoe UI','Microsoft YaHei',sans-serif}
.sound-settings label{display:flex;justify-content:space-between;align-items:center;gap:15px}.sound-settings output{opacity:.65;font-variant-numeric:tabular-nums}
#music-volume{width:100%;height:28px;margin:4px 0 8px;accent-color:#dadfc3;cursor:pointer}.sound-toggle{padding:6px 0}.sound-toggle input{accent-color:#dadfc3;width:16px;height:16px;cursor:pointer}
.playlist{max-height:min(65svh,430px);overflow-y:auto}
@media(max-width:760px){nav button{min-height:40px}.social button{min-width:44px;min-height:44px}.music-controls button{min-width:30px;min-height:32px}.track,.add-tracks{min-height:40px}.sound-toggle{min-height:44px}#music-volume{height:34px}.page-dots button{height:36px}}
/* Volume is visible beside the main playback controls, outside the playlist. */
.music-dock .music{height:90px;padding-bottom:51px}
.music-progress{bottom:34px}
.volume-row{position:absolute;left:14px;right:14px;bottom:7px;display:flex;align-items:center;gap:10px;font:10px/1.4 'Segoe UI','Microsoft YaHei',sans-serif;color:#f1ecd7c9}
.volume-row label{white-space:nowrap;cursor:pointer}.volume-row output{min-width:29px;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}
.volume-row #music-volume{flex:1;min-width:0;width:auto;height:22px;margin:0;accent-color:#e5e9d2}
@media(max-width:760px){.music-dock .music{height:96px;padding-bottom:57px}.music-progress{bottom:40px}.volume-row{bottom:5px}.volume-row #music-volume{height:30px}}
/* Full personal introduction inside the second chapter. */
.about-copy{width:min(100%,760px);max-width:760px}
.about-reading{max-height:calc(100svh - 290px);max-height:clamp(180px,55svh,650px);overflow-y:auto;padding:2px 24px 16px 0;scrollbar-width:thin;scrollbar-color:#e8ead04d transparent;scroll-snap-type:none;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
.about-reading p{white-space:pre-line;line-height:1.95;font-size:15px;letter-spacing:.6px;margin:0 0 25px}
.about-reading p:last-child{margin-bottom:0}.about-reading:focus-visible{outline:1px solid #eee9d54d;outline-offset:8px;border-radius:4px}
.reading-hint{display:block;margin-top:13px;font-size:9px;letter-spacing:2px;opacity:.45}
@media(max-width:760px){#about{padding-top:125px;padding-bottom:85px}.about-reading{max-height:calc(100svh - 290px);padding-right:14px}.about-reading p{font-size:13px;line-height:1.95;letter-spacing:.2px;margin-bottom:22px}#about h1{margin-bottom:20px}#about .section-number{margin-bottom:14px}}
@media(max-height:520px){#about{padding-top:90px;padding-bottom:65px}.about-reading{max-height:45svh}#about h1{font-size:24px;margin-bottom:12px}#about .section-number{margin-bottom:8px}.reading-hint{display:none}}
/* A little visitor arrives beside the introduction. */
.about-photo{float:right;width:clamp(150px,15vw,210px);margin:8px 9px 25px 28px;opacity:0;transform:translate(24px,20px) rotate(5deg) scale(.96);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.75,.25,1);pointer-events:none}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:13px;border:1px solid #eee9d547;box-shadow:0 9px 25px #0c1d1833}
#about.is-current .about-photo{opacity:1;transform:translate(0,0) rotate(-2deg) scale(1);transition-delay:.12s}
@media(max-width:600px){.about-photo{width:110px;margin:6px 5px 18px 16px}.about-photo img{border-radius:10px}}
@media(max-width:360px){.about-photo{width:90px;margin-left:12px}}
@media(prefers-reduced-motion:reduce){.about-photo{opacity:1;transform:none!important;transition:none}}
/* Hand-drawn clover signs off in the right-hand whitespace. */
.about-signoff{clear:both;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:180px;padding:5px 22px 10px 0}
.about-signoff p{margin:0!important;align-self:center}
.hand-clover{flex:none;width:140px;height:164px;color:#eee9cf;opacity:.8;transform:rotate(-9deg);margin-right:32px}
@media(max-width:600px){.about-signoff{min-height:140px;gap:12px;padding-right:4px}.hand-clover{width:96px;height:116px;margin-right:8px}}
/* The whole sketch floats into place once, like a quiet handwritten sign-off. */
.hand-clover.reveal-ready{opacity:0;transform:translateY(14px) rotate(-15deg) scale(.96);transform-origin:50% 75%}
.hand-clover.reveal-ready.revealed{animation:clover-arrive .9s cubic-bezier(.22,.68,.3,1) both}
@keyframes clover-arrive{0%{opacity:0;transform:translateY(14px) rotate(-15deg) scale(.96)}70%{opacity:.8;transform:translateY(-2px) rotate(-7deg) scale(1)}100%{opacity:.8;transform:translateY(0) rotate(-9deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.hand-clover.reveal-ready{opacity:.8;transform:rotate(-9deg);animation:none!important}}

/* Personal snapshots sit beside the introduction, with room for the meadow. */
#about{padding-right:max(var(--edge),4vw)}
#about .about-copy{width:100%;max-width:none}
#about .about-reading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,96px)}
.about-prose{min-width:0}
.about-gallery{position:sticky;top:6px;align-self:start;justify-self:end;width:100%;max-width:480px;min-width:0;padding:8px 0 22px;text-shadow:0 2px 14px #08170db0}
.about-gallery figure{margin:0;min-width:0}
.about-gallery-pair{display:grid;grid-template-columns:1.058fr 1.223fr .707fr;gap:24px;align-items:start;margin-bottom:44px}
.about-gallery img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 5px 18px #08170d20}
.about-gallery-pair figure{width:100%}
.about-gallery .musician-card{width:100%;margin:0}
.musician-card figcaption{display:grid;gap:6px;margin-top:15px;font-size:12px;line-height:1.7;letter-spacing:.5px;opacity:.85}
.musician-card figcaption span:last-child{font-size:11px;opacity:.75}
@media(max-width:900px){#about .about-reading{grid-template-columns:1fr;gap:38px}.about-gallery{position:static;width:min(100%,460px);justify-self:center}.about-gallery-pair{gap:22px;margin-bottom:34px}.musician-card figcaption{text-align:left}}
/* Keep the reading scrollbar beside the text, independent of the photos. */
@media(min-width:901px){
 #about .about-reading{max-height:none;overflow:visible;padding-right:0}
 .about-prose{max-height:clamp(180px,55svh,650px);overflow-y:auto;padding:2px 24px 16px 0;scrollbar-width:thin;scrollbar-color:#e8ead04d transparent}
 .about-gallery{position:static}
}
/* A fixed photo arrangement; only the introduction has its own scroll area. */
.about-gallery{display:flex;flex-direction:column;gap:22px;max-width:620px;max-height:none;overflow:visible;padding:0}
.about-gallery-pair{grid-template-columns:1fr 1.15fr;gap:28px;margin:0;align-items:center}
.about-gallery-pair img{max-height:clamp(120px,19svh,210px);width:auto;max-width:100%;margin:auto;object-fit:contain}
.about-gallery .gallery-extras{order:1;margin:0}
.about-gallery .musician-card{order:2}
.musician-card>img{max-height:15svh;width:auto;max-width:100%;object-fit:contain}
.musician-card figcaption{margin-top:10px}
@media(min-width:901px){#about .about-prose{max-height:max(180px,calc(100svh - 360px))}}
@media(max-width:900px){#about .about-reading{grid-template-columns:1fr}.about-gallery-pair img{max-height:210px}.musician-card>img{max-height:none;width:100%}}/* us — two equal windows into shared moments. */
#interests.people-section{height:100svh;min-height:620px;padding:100px max(var(--edge),5vw) 85px;display:flex;flex-direction:column;align-items:stretch;gap:26px}
#interests-title{font-size:clamp(38px,4vw,60px);font-style:italic;font-weight:400;letter-spacing:1px;line-height:1;margin:0;text-align:center;color:var(--ink)}
.people-halves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,100px);flex:1;min-height:0;position:relative}
.people-halves:after{content:'';position:absolute;top:3%;bottom:3%;left:50%;width:1px;background:linear-gradient(transparent,#eee9d54d 20%,#eee9d54d 80%,transparent);pointer-events:none}
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,22px);min-height:0;align-items:stretch}
.people-photo{padding:0;min-width:0;min-height:0;display:grid;place-items:center;border-radius:5px;transition:transform .22s,filter .22s;cursor:zoom-in}
.people-photo img,.people-photo svg{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:5px;overflow:hidden;stroke:none;filter:drop-shadow(0 4px 7px #07160d30)}
@media(hover:hover){.people-photo:hover{transform:translateY(-3px) scale(1.035);filter:brightness(1.08)}}
#people-online .people-photo:last-child{grid-column:2}
#photo-viewer{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;border:0;margin:0;padding:65px 5vw;background:#101d13e8;color:var(--ink);overflow:hidden}
#photo-viewer::backdrop{background:#09130ced}
#photo-viewer[open]{display:grid;place-items:center}
.photo-large{width:100%;height:100%;min-height:0;display:grid;place-items:center;pointer-events:none}
.photo-large img,.photo-large svg{width:100%;height:100%;object-fit:contain;stroke:none;overflow:hidden}
.photo-close{position:absolute;right:25px;top:16px;width:44px;height:44px;font:32px/1 sans-serif;z-index:1}
html.viewing-photo{overflow:hidden;scroll-snap-type:none}
@media(max-width:760px){#interests.people-section{padding:110px var(--edge) 85px;min-height:620px;gap:22px}.people-halves{gap:24px}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:10px}#people-online .people-photo:last-child{grid-column:auto}}
/* Two independently scrolling albums with a little breathing room. */
#interests.people-section{height:100svh;min-height:0;padding:100px max(var(--edge),4vw) 80px;gap:24px}
#interests-title{display:flex;align-items:baseline;justify-content:center;gap:14px;font-style:normal;font-size:27px;letter-spacing:5px;line-height:1.4}
#interests-title span{font-size:11px;font-style:italic;letter-spacing:1px;opacity:.5}
.people-halves{gap:clamp(16px,2.4vw,42px);overflow:hidden;width:86%;align-self:center;margin:6svh 0 5svh}
.people-grid{display:block;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:none}
.people-grid::-webkit-scrollbar{display:none}
.people-grid:focus-visible{outline:1px solid #eee9d588;outline-offset:-2px}
.people-mosaic{column-count:2;column-gap:6px;line-height:0}
.people-photo{display:block;width:100%;padding:0;margin:0 0 6px;border:0;border-radius:0;break-inside:avoid;overflow:hidden;transform:none;transition:filter .2s}
.people-photo img,.people-photo svg{display:block;width:100%;height:auto;max-height:none;border-radius:0;filter:none;object-fit:contain}
.people-photo:hover{transform:none;filter:brightness(1.08)}
.people-photo:focus-visible{outline-offset:-3px;border-radius:0}
@media(max-width:760px){#interests.people-section{padding:110px var(--edge) 80px;gap:18px}.people-halves{gap:14px;width:94%;margin:2svh 0}.people-mosaic{column-count:1}#interests-title{font-size:23px}}
/* Personal notes appear only when a photo has one. */
#photo-viewer.has-note{grid-template-rows:minmax(0,1fr) auto;gap:20px}
.photo-note{margin:0;max-width:min(720px,90vw);max-height:24svh;overflow-y:auto;text-align:center;font-size:clamp(16px,1.4vw,21px);line-height:1.8;letter-spacing:1px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.photo-note[hidden]{display:none}
.photo-note strong{font-weight:700}
@media(max-width:760px){#photo-viewer.has-note{gap:14px;padding-bottom:32px}}
/* A pair of quiet albums, with one leading image and smaller moments. */
#interests.people-section{padding:94px max(var(--edge),8vw) 76px;gap:26px}
.people-heading{width:min(100%,1240px);margin:0 auto;flex:none}
.people-eyebrow{font:10px/1.4 system-ui,sans-serif;letter-spacing:3px;opacity:.55}
#interests-title{justify-content:flex-start;font-size:34px;letter-spacing:5px;margin:10px 0 8px}
#interests-title span{font-size:12px;letter-spacing:1px}
.people-heading p{font-size:12px;letter-spacing:2px;opacity:.65;margin:0}
.people-halves{width:min(100%,1240px);margin:0;gap:clamp(22px,4vw,64px);overflow:visible}
.people-halves:after{display:none}
.people-album{display:flex;flex-direction:column;min-width:0;min-height:0;padding:15px 15px 11px;border:1px solid #eee9d52b;border-radius:5px;background:#16251c70;box-shadow:0 12px 36px #08160c15}
.album-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 2px 14px;flex:none}
.album-heading h3{font-size:14px;letter-spacing:2px;font-weight:400;margin:0}
.album-heading>span{font:9px/1.5 system-ui,sans-serif;letter-spacing:1px;opacity:.45}
.people-grid{flex:1;height:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#eee9d530 transparent}
.people-grid::-webkit-scrollbar{display:block;width:3px}
.people-grid::-webkit-scrollbar-thumb{background:#eee9d530}
.people-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;column-count:auto;padding-right:4px}
.people-photo{margin:0;aspect-ratio:4/3;position:relative;border-radius:2px;background:#17291d;isolation:isolate}
.people-photo:nth-child(5n+1){grid-column:1/-1;aspect-ratio:16/9}
#people-online .people-photo:last-child{grid-column:auto}
.people-photo img,.people-photo svg{width:100%;height:100%;object-fit:cover;max-height:100%;border-radius:2px;transition:transform .35s ease,filter .35s ease;filter:saturate(.83)}
.people-photo:after{content:'↗';position:absolute;right:10px;bottom:8px;color:#fff;font:16px/1 sans-serif;opacity:0;text-shadow:0 1px 5px #000;transition:opacity .2s;pointer-events:none}
@media(hover:hover){.people-photo:hover{filter:none}.people-photo:hover img{transform:scale(1.025);filter:saturate(1)}.people-photo:hover:after{opacity:1}}
.album-footer{display:flex;justify-content:space-between;gap:6px;padding:11px 2px 0;font-size:10px;letter-spacing:1px;opacity:.5;flex:none}
@media(max-width:760px){#interests.people-section{padding:112px var(--edge) 76px;gap:20px}#interests-title{font-size:27px}.people-halves{width:100%;gap:12px;margin:0}.people-album{padding:9px 7px}.album-heading{display:block;padding-bottom:9px}.album-heading h3{font-size:12px;letter-spacing:1px}.album-heading>span{font-size:8px}.people-mosaic{grid-template-columns:1fr;gap:6px;padding-right:2px}.people-photo,.people-photo:nth-child(5n+1){aspect-ratio:4/3;grid-column:auto}.album-footer{font-size:9px;letter-spacing:0}.album-footer>span:first-child{display:none}}
@media(max-height:700px) and (min-width:761px){#interests.people-section{padding-top:80px;gap:16px}.people-heading p{display:none}#interests-title{font-size:27px;margin:5px 0}.people-eyebrow{font-size:9px}}
/* A small roadside story beside the ways to say hello. */
#contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(48px,9vw,170px)}
.contact-story{width:100%;max-height:calc(100svh - 220px);overflow-y:auto;overscroll-behavior:contain;padding:0 16px 8px 0;scrollbar-width:thin;scrollbar-color:#eee9d540 transparent;text-shadow:0 2px 16px #08170d80}
.road-cat{width:clamp(180px,19vw,260px);max-width:100%;margin:0 auto 24px}
.road-cat svg{display:block;width:100%;height:auto;aspect-ratio:838/840;overflow:hidden;border-radius:16px;stroke:none;box-shadow:0 8px 28px #08170d25}
.road-copy{font-size:14px;line-height:2.05;letter-spacing:.8px;color:var(--ink)}
.road-copy p{margin:0 0 16px}
.road-copy .road-ending{margin-top:22px;font-size:17px;letter-spacing:1.5px}
@media(max-width:760px){#contact{grid-template-columns:1fr;gap:42px;padding-top:130px;padding-bottom:100px}.contact-story{max-height:none;overflow:visible;padding:0;max-width:470px;justify-self:center}.road-cat{width:210px}.road-copy{font-size:13px}.road-copy .road-ending{font-size:16px}}
/* Keep online photos in their original colors; give detailed scenes more room. */
#people-online .people-photo img,#people-online .people-photo svg{filter:none;transform:none;transition:none}
#people-online .people-photo:nth-child(9),#people-online .people-photo:nth-child(10),#people-online .people-photo:nth-child(12){grid-column:1/-1;aspect-ratio:16/9}
#people-online .people-photo:nth-child(7) img{object-position:25% center}

#people-online .people-photo:last-child{grid-column:1/-1;aspect-ratio:720/638}
#people-online .people-photo:last-child img{object-fit:contain}

#people-online .people-photo[data-photo-id="B21"]{grid-column:1/-1;aspect-ratio:16/9}
.photo-number{position:absolute;left:8px;top:8px;padding:4px 6px;border-radius:3px;background:#102018bb;color:#fff9e8;font:10px/1.2 system-ui,sans-serif;letter-spacing:1px;pointer-events:none;z-index:1}
.photo-viewer-number{position:absolute;left:5vw;top:25px;font:13px/1.4 system-ui,sans-serif;letter-spacing:2px;opacity:.8}
/* Give album media a definite containing block on mobile WebKit. */
.people-photo{appearance:none;-webkit-appearance:none;box-sizing:border-box}
.people-photo>img,.people-photo>svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;margin:0}
.people-mosaic{align-items:start;grid-auto-rows:max-content}