/* Literary edition: the text sets the measure; images enter between passages. */
@font-face{font-family:'Dew Literary';src:url('./assets/dew-literary.woff?v=13') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--serif:'Dew Literary','Kaiti SC','STKaiti','Songti SC',serif;--paper:#f2f1e9}
body{font-synthesis:none;text-rendering:optimizeLegibility}
main{overflow:clip}
.masthead{padding-block:1.1rem;transition:color 1s,background 1s,backdrop-filter .5s}
.masthead.scrolled{background:#071b1eae}
.masthead.light{background:#f2f1e9bd}
.wordmark>span:first-child{font-size:1.45rem;letter-spacing:.18em}
.header-actions{gap:1.65rem;letter-spacing:.06em}
.hero-inner{padding-left:10vw;padding-top:11rem}
.hero h1{font-size:clamp(8rem,14.6vw,15rem);gap:.17em;letter-spacing:.04em;font-weight:400}
.hero-kicker{letter-spacing:.38em;opacity:.6}
.hero-opening{font-size:clamp(1.15rem,1.5vw,1.5rem);line-height:2.1;letter-spacing:.04em}
.hero-bottom{padding-top:4rem}
.hero-edge{display:none}
.hero-shade{background:linear-gradient(90deg,#061b2078,transparent 68%),linear-gradient(0deg,#071b1e 0%,#071b1e0a 38%)}
.movement{padding:5rem 7vw 6rem}
.movement-night{background:linear-gradient(180deg,#071b1e 0%,#091f23 18%,#10272c 43%,#173035 72%,#1d373b 90%,#20393c 100%)}
.movement-intro{max-width:66rem;margin:0 auto 6.5rem;padding-top:1.5rem;letter-spacing:.19em;border-top-color:#9bafa52b}
.movement-layout{display:block;max-width:37rem;margin:0 auto}
.reading-flow{width:100%}
.chapter{margin-bottom:7rem;scroll-margin-top:7rem}
.chapter-heading{display:grid;grid-template-columns:2rem 1.35rem minmax(0,1fr);gap:.85rem;margin-bottom:2.8rem;align-items:baseline;line-height:1.5}
.chapter-num{font-size:1.3rem;line-height:inherit;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;text-align:right;opacity:.7}
.chapter-line{width:100%;align-self:center;transform:none;opacity:.25}
.chapter-heading h2{font-size:1.2rem;line-height:inherit;letter-spacing:.18em;color:var(--text);opacity:.8}
.prose{font-size:1.3125rem;line-height:2.08;letter-spacing:.018em;line-break:strict;overflow-wrap:break-word;word-break:normal}
.prose p{margin-bottom:1.05rem;text-wrap:pretty}
.prose strong{font-weight:400}
.prose p.pause-before{margin-top:2.8rem}
.prose .statement{font-size:1.625rem;line-height:1.95;letter-spacing:.025em;margin:3.2rem 0;max-width:23em}
.prose .statement-small{font-size:1.3125rem}
.prose p.connected-line{margin-bottom:.2rem}
.prose p.quiet-turn{margin-top:2rem}
.prose p.small-step{margin-bottom:.4rem}
.prose p.step-first{margin-top:1.8rem}
.prose .weather-note{font-size:1.3125rem;line-height:2.1}
.weather-tail{display:block;margin-top:.5rem;font-size:1.12em}
.prose .diverge{font-size:1.45rem;margin:1.5rem 0}
.prose .diverge:nth-of-type(even){padding-left:1.25rem}
.four-words{border:0;gap:1rem;margin:2.5rem 0;padding:0;max-width:28rem}
.four-words p{font-size:1.45rem;letter-spacing:.05em}
.scene-panel{position:relative;top:auto;left:50%;transform:translateX(-50%);width:min(78vw,68rem);padding:0;margin:1rem 0 7rem;order:initial}
.scene-frame{min-height:0;max-height:none;height:auto;aspect-ratio:2.1;background:transparent;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 17%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 17%,#000 78%,transparent)}
.scene-frame:after{background:none;pointer-events:none}
.scene-frame img{position:absolute;inset:0;width:100%;height:116%;object-fit:cover;object-position:50% 50%;filter:saturate(.68);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 95%,transparent)}
.scene-caption{max-width:37rem;margin:1.1rem auto 0;justify-content:center;gap:1.2rem;opacity:.65;font-size:.75rem}
.scene-caption>span:first-child{font-size:.95rem;letter-spacing:.18em}
.scene-caption>span:last-child{font-size:.75rem;letter-spacing:.2em}
.scene-track{display:none}
.movement-night .scene-panel{margin-left:2vw}
.movement-night .scene-frame{aspect-ratio:2.05}
.movement-night .scene-frame img{object-position:50% 56%}
.movement-dawn{
 --dawn-bridge:clamp(26rem,68svh,44rem);--muted:#43574b;
 padding-top:calc(var(--dawn-bridge) + 2.5rem);
 background:linear-gradient(180deg,
  #20393c 0,
  #243d40 calc(var(--dawn-bridge) * .12),
  #334d4f calc(var(--dawn-bridge) * .27),
  #4c6563 calc(var(--dawn-bridge) * .42),
  #70877d calc(var(--dawn-bridge) * .59),
  #99ad9d calc(var(--dawn-bridge) * .76),
  #b9c7b6 calc(var(--dawn-bridge) * .91),
  #c4cfc1 var(--dawn-bridge),
  #cbd4c7 40%,#d2dacd 72%,#d8ded4 100%);
}
.movement-dawn .scene-panel{width:min(65vw,51rem);margin-left:-2vw}
.movement-dawn .scene-frame{aspect-ratio:2.05;-webkit-mask-image:radial-gradient(ellipse 67% 63% at 54% 50%,#000 25%,#000a 61%,transparent 83%);mask-image:radial-gradient(ellipse 67% 63% at 54% 50%,#000 25%,#000a 61%,transparent 83%)}
.movement-dawn .scene-frame img{object-position:69% 50%;filter:saturate(.42);opacity:.85}
.movement-day .scene-panel{width:min(80vw,66rem)}
.movement-day{background:linear-gradient(180deg,#d8ded4 0%,#dde3d8 12%,#e4e8de 34%,#eaede4 59%,#eff0e8 83%,#f2f1e9 100%)}
.movement-day .scene-frame{aspect-ratio:1.85;min-height:0}
.movement-day .scene-frame img{object-position:100% 50%;filter:saturate(.65);height:116%}
.afterword{padding-top:3rem;padding-bottom:8rem}
.afterword-line{height:4rem;margin-bottom:4.5rem;opacity:.65}
.afterword .prose{max-width:37rem;font-size:1.25rem;line-height:2.25;letter-spacing:.025em}
.afterword .prose p{margin-bottom:1.1rem}
.afterword .prose .final-line{font-size:clamp(2.6rem,4.1vw,4rem);line-height:1.7;letter-spacing:.04em;margin-top:5rem}
.writing-date{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.65em;max-width:37rem;margin:3.4rem auto 0;color:#607160;font:400 .875rem/1.9 var(--serif);letter-spacing:.06em}
.writing-date time{white-space:nowrap;font-variant-numeric:oldstyle-nums}
.colophon{border-top:0}
.reading-dock{padding:.15rem .4rem;box-shadow:0 6px 25px #02151112;backdrop-filter:blur(22px);opacity:1;visibility:visible;transition:background .5s,color .5s,opacity .55s ease,visibility 0s}
.reading-dock.is-quiet{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,0s,.55s}
.menu-header h2{font-family:var(--serif);font-weight:400}
.menu-layout b{font-family:var(--serif);font-size:1.4rem}
#menu-preview-text{font-size:1.8rem;letter-spacing:.02em}
.emerging{animation-duration:1.2s}
@keyframes emerge{from{opacity:.6;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* Music is opt-in. Its controls remain reachable throughout the essay. */
.music-control{position:relative;display:flex;align-items:center;gap:.05rem}
.header-actions #music-toggle{gap:.6rem;white-space:nowrap}
.header-actions #music-settings-toggle{display:grid;place-items:center;width:1.8rem;padding:0;font-size:1.05rem;opacity:.6}
.sound-bars{display:flex;align-items:center;justify-content:center;gap:3px;width:19px;height:19px}
.sound-bars i{display:block;width:1px;height:5px;background:currentColor;transform-origin:center;transition:height .4s}
.sound-bars i:nth-child(2){height:13px}.sound-bars i:nth-child(3){height:9px}.sound-bars i:nth-child(4){height:6px}
.music-control.playing .sound-bars i{animation:sound-breathe 1.7s ease-in-out infinite alternate}
.music-control.playing .sound-bars i:nth-child(2){animation-delay:-.9s}.music-control.playing .sound-bars i:nth-child(3){animation-delay:-.35s}.music-control.playing .sound-bars i:nth-child(4){animation-delay:-1.2s}
@keyframes sound-breathe{from{transform:scaleY(.4)}to{transform:scaleY(1.2)}}
#music-panel{position:absolute;top:calc(100% + .7rem);right:0;width:17.5rem;max-width:calc(100vw - 2rem);padding:1.5rem 1.5rem 1.3rem;background:#f2f1e9;color:#304339;box-shadow:0 8px 45px #04171126;border:1px solid #71847626;border-radius:3px;text-align:left;letter-spacing:.03em}
.music-title{font-family:var(--serif);font-size:1.5rem;line-height:1.5;margin:0 0 .25rem}
.music-subtitle{font-size:.75rem;opacity:.65;margin:0 0 1.6rem;letter-spacing:.12em}
#music-panel label{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;margin-bottom:.35rem}
#volume-value{font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.7}
#music-volume{display:block;width:100%;height:2.5rem;accent-color:#506954;cursor:pointer;margin:0}
#music-volume:focus-visible{outline:2px solid #506954;outline-offset:3px}
#music-status{min-height:2.8em;font-size:.8125rem;line-height:1.7;opacity:.8;margin:.7rem 0}
.header-actions .music-credit{font-size:.75rem;line-height:1.6;min-height:2rem;padding:0;opacity:.6}
.music-credit:hover{opacity:1;text-decoration:underline}
body.focus .movement-layout,body.focus .movement-intro{max-width:37rem}
body.focus .prose{font-size:1.3125rem;line-height:2.1}
body.focus .chapter{margin-bottom:6rem}
body.focus .hero-inner{max-width:51rem}
body.focus .music-control.playing .sound-bars i{animation:none}

@media(min-width:1101px){
 .chapter-heading{grid-template-columns:2rem minmax(0,1fr);column-gap:2.5rem;margin-left:-4.5rem}
 .chapter-line{display:none}
 .movement-intro{padding-left:1rem;padding-right:1rem}
}
@media(min-width:1700px){.hero-inner{padding-left:calc((100vw - 1340px)/2)}.hero h1{font-size:15rem}.movement{padding-left:7vw;padding-right:7vw}.movement-layout{max-width:38rem}}
@media(max-width:1100px){
 .hero-inner{padding-left:8vw}.hero h1{font-size:clamp(8rem,17vw,13rem)}
 .movement-layout{display:block;max-width:35rem}
 .movement-intro{max-width:45rem}
 .prose{font-size:1.25rem}.prose .statement{font-size:1.55rem}
 .scene-panel{width:86vw}
 .movement-dawn .scene-panel{width:75vw}
}
@media(max-width:760px){
 .masthead{padding:.8rem 1.15rem;gap:.6rem}
 .wordmark{gap:.55rem}.wordmark>span:first-child{font-size:1.25rem;letter-spacing:.12em}
 .wordmark>span:last-child{display:none}
 .header-actions{gap:.8rem;font-size:.875rem;letter-spacing:0}
 .header-actions button,.header-actions a{gap:.4rem}
 .header-actions #music-toggle{gap:.4rem}
 .header-actions #music-settings-toggle{width:1.45rem}
 #music-panel{right:-5.6rem}
 .hero,.hero-inner{min-height:max(720px,100svh)}
 .hero-inner{padding:9.1rem 1.65rem 4.5rem}
 .hero h1{font-size:clamp(6.4rem,24vw,10rem);gap:.14em;margin-left:-.04em}
 .hero-kicker{font-size:.75rem;letter-spacing:.16em}
 .hero-opening{font-size:1.1875rem;line-height:2.05;letter-spacing:.025em}
 .hero-bottom{padding-top:4.5rem}
 .movement{padding:3rem 1.7rem 4.5rem}
 .movement-intro{margin-bottom:4rem;font-size:.75rem;padding-top:1.2rem}
 .movement-layout{max-width:35rem;display:block}
 .chapter{margin-bottom:5.5rem}
 .chapter-heading{grid-template-columns:1.85rem 1.1rem minmax(0,1fr);gap:.8rem;margin-bottom:2.25rem}
 .chapter-num{font-size:1.2rem}.chapter-heading h2{font-size:1.125rem}
 .chapter-line{width:1.1rem}
 .prose,body.focus .prose{font-size:1.1875rem;line-height:2.08;letter-spacing:.012em}
 .prose p{margin-bottom:1.1rem}
 .prose .statement{font-size:1.4375rem;line-height:1.95;letter-spacing:.015em;margin:2.8rem 0}
 .prose .statement-small{font-size:1.1875rem}
 .prose p.pause-before{margin-top:2.4rem}
 .prose .diverge{font-size:1.25rem}
 .four-words{gap:.5rem;margin:2.4rem 0;padding:0}
 .four-words p{font-size:1.25rem}
 .scene-panel{left:50%;transform:translateX(-50%);width:calc(100vw - .5rem);margin:0 0 5rem;order:initial}
 .movement-night .scene-panel,.movement-dawn .scene-panel{margin-left:0}
 .scene-frame,.movement-night .scene-frame{aspect-ratio:1.4}
 .scene-frame img{height:116%;object-position:56% 50%}
 .scene-caption{gap:.8rem;margin-top:.6rem;font-size:.75rem}
 .scene-caption>span:first-child{font-size:.875rem}
 .scene-caption>span:last-child{font-size:.75rem;letter-spacing:.13em}
 .movement-dawn{--dawn-bridge:clamp(24rem,70svh,38rem);padding-top:calc(var(--dawn-bridge) + 2.5rem)}
 .movement-dawn .scene-panel{width:calc(100vw - .5rem)}
 .movement-dawn .scene-frame{aspect-ratio:1.5}
 .movement-day .scene-panel{width:calc(100vw - .5rem)}
 .movement-day .scene-frame{aspect-ratio:1.25}
 .movement-day .scene-frame img{object-position:100% 50%}
 .afterword{padding:1rem 1.7rem 5rem}
 .afterword .prose{font-size:1.1875rem;line-height:2.15;letter-spacing:.012em}
 .afterword .prose .final-line{font-size:clamp(2rem,7.3vw,2.8rem);line-height:1.8;letter-spacing:.01em;margin-top:4rem}
 .menu-layout b{font-size:1.3rem}
 body.focus .hero-inner{padding-inline:1.7rem}
}
@media(max-width:360px){
 .masthead{padding-inline:.9rem}.header-actions{gap:.65rem;font-size:.8125rem}
 .menu-glyph{width:15px}.focus-glyph{display:none}
 .hero-inner,.movement,.afterword{padding-left:1.5rem;padding-right:1.5rem}
 .prose,body.focus .prose,.afterword .prose{font-size:1.125rem}
 .prose .statement{font-size:1.35rem}
 .hero h1{font-size:6.6rem}
}
@media(prefers-reduced-motion:reduce){.music-control.playing .sound-bars i{animation:none}.reading-dock,.reading-dock.is-quiet{transition:none}}
@media print{
 .music-control,.scene-panel{display:none!important}
 .movement,.hero-inner,.afterword{padding:0}.movement-layout{max-width:none}
 .chapter{margin-bottom:20pt}.prose,.afterword .prose,body.focus .prose{font-size:12pt;line-height:1.8;letter-spacing:0}
 .prose .statement,.afterword .prose .final-line{font-size:14pt;margin:12pt 0}
 .hero h1{font-size:32pt}.hero-opening{font-size:12pt}.prose p{margin-bottom:6pt}
}