/* A continuous scroll-controlled tale, progressively enhanced from readable prose. */
:root { --night: #060b10; }
.hero { background: #060b10; text-align: center; justify-items: center; }
.hero-art { z-index: 0; background-image: url('img/chronicle-fog.webp'); background-position: 60% 50%; filter: brightness(.48) saturate(.65); }
.hero::before { z-index: 1; background: radial-gradient(ellipse at 50% 48%,transparent,#04080e88 72%),linear-gradient(0deg,var(--night),transparent 40%,#03080d66); }
.hero-content { position: relative; z-index: 4; width: min(720px, 90%); }
.hero-content h1 img { margin: auto; width: min(620px, 100%); }
.hero-tagline { font-size: clamp(25px, 2.4vw, 35px); }
.hero-bottom { z-index: 4; }
.site-nav { position: fixed; height: 75px; border-bottom-color: transparent; transition: background .4s; }
body.in-chronicle .site-nav { background: linear-gradient(#050b10c9,transparent); }
body.in-chronicle .nav-links a:first-child { opacity: .5; }
.hero-bottom p { margin-right: 140px; }
.motion-toggle { z-index: 35; }
.experience-controls { position: fixed; z-index: 40; right: max(24px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; }
.experience-controls .motion-toggle { position: static; min-height: 44px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 13px; color: #e2d6bd; background: #080f12ed; border: 1px solid #d5b47a66; font: 500 9px/1.5 var(--display); letter-spacing: .08em; cursor: pointer; backdrop-filter: blur(8px); }
.sound-toggle[hidden] { display: none; }
.tour-toggle { min-height: 44px; padding: 9px 13px; color: #f3d9a6; background: #151910f2; border: 1px solid #d5b47a99; font: 500 9px/1.5 var(--display); letter-spacing: .08em; cursor: pointer; }
.tour-toggle:hover { border-color: var(--gold); }
.tour-toggle:disabled { opacity: .55; cursor: default; }
.experience-controls { max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width:380px) {
  .experience-controls { gap: 5px; }
  .experience-controls button { padding-inline: 8px; font-size: 8px; letter-spacing: .03em; }
}
.sound-toggle:hover { border-color: var(--gold); }
.experience-controls button:focus-visible { outline: 2px solid #e9cb8c; outline-offset: 4px; }
.sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sound-waves, .sound-toggle:is([data-state='playing'],[data-state='waiting']) .sound-slash { display: none; }
.sound-toggle:is([data-state='playing'],[data-state='waiting']) .sound-waves { display: block; }
.sound-toggle:is([data-state='playing'],[data-state='waiting']) { color: #f1d59e; border-color: #d5b47aaa; }
.soundtrack-player:not([hidden]) { position: fixed; left: 16px; bottom: 16px; z-index: 40; max-width: calc(100vw - 32px); }
@media (max-width:600px) { .experience-controls { right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); } }
.particles { z-index: 6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.chronicle { position: relative; background: var(--night); }
.cinema-stage { position: relative; background: var(--night); }
.cinema-visuals, .cinema-shade, .cinema-haze, .lantern-glow, .cinema-grain, .cinema-foot { display: none; }
.chronicle-lines { position: relative; z-index: 7; }
.chronicle-line { margin: 0; padding: 90px 28px; min-height: 55svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; border-bottom: 1px solid #c5a57514; }
.verse-era { display: block; font: 500 10px/1.6 var(--display); text-transform: uppercase; letter-spacing: .3em; color: #d0b88e; }
.verse-words { display: block; max-width: 29ch; font: 400 clamp(30px,3.8vw,56px)/1.35 var(--text); font-style: italic; color: #ede7d9; text-shadow: 0 3px 24px #000c,0 1px 4px #000; text-wrap: balance; }
.verse-mark { display: block; color: #ceb180; font-size: 13px; opacity: .65; }
.cinema-enhanced .chronicle { height: calc(100svh + var(--verse-count) * 68svh); }
.cinema-enhanced .cinema-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.cinema-enhanced .cinema-visuals { display: block; position: absolute; inset: 0; z-index: 0; }
.cinema-picture { position: absolute; inset: -8% -6%; opacity: 0; will-change: opacity; }
.cinema-picture img { width: 100%; height: 100%; object-fit: cover; object-position: var(--picture-focus); max-width: none; filter: saturate(.8) brightness(.8); will-change: transform; }
.cinema-picture[data-scene='fog'] img { filter: saturate(.6) brightness(.8); }
.cinema-picture[data-scene='tree'] img { filter: saturate(.85) brightness(.75); }
.cinema-enhanced .cinema-shade { display: block; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 52%,#040a104d,transparent 65%),linear-gradient(180deg,#03080ed9,transparent 28%,transparent 70%,#03080ed9),linear-gradient(90deg,#03080e7a,transparent 30%,transparent 70%,#03080e7a); }
.cinema-enhanced .cinema-haze { display: block; position: absolute; z-index: 2; inset: 10% -25% -25%; pointer-events: none; background: radial-gradient(ellipse at 20% 65%,#b5cad132,transparent 40%),radial-gradient(ellipse at 80% 80%,#9aafb630,transparent 45%); filter: blur(28px); }
.haze-far { opacity: .3; translate: var(--mist-shift,0px) 0; }
.haze-near { opacity: .35; mix-blend-mode: screen; translate: calc(var(--mist-shift,0px) * 2) 0; }
.cinema-enhanced .lantern-glow { display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: var(--warmth,.15); background: radial-gradient(ellipse at 75% 65%,#c6803535,transparent 30%),radial-gradient(ellipse at 15% 78%,#ce792922,transparent 28%); mix-blend-mode: screen; }
.cinema-enhanced .cinema-grain { display: block; pointer-events: none; position: absolute; inset: 0; z-index: 3; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.cinema-enhanced .chronicle-lines { position: absolute; inset: 0; }
.cinema-enhanced .chronicle-line { position: absolute; inset: 0; min-height: 0; padding: 110px 70px; gap: 34px; border: 0; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.cinema-enhanced .cinema-foot { position: absolute; display: flex; justify-content: space-between; align-items: center; bottom: 85px; left: 4vw; right: 180px; z-index: 8; color: #c7c8be99; font: 500 8px/1.5 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.continue-scroll { display: flex; align-items: center; gap: 16px; }
.continue-scroll i { width: 50px; height: 1px; background: linear-gradient(90deg,#d4bb86aa,transparent); }
.epilogue { background: linear-gradient(#060b10dd,#060b10e8),url('img/chronicle-tree.webp') center / cover; padding-block: 160px 110px; }
.epilogue .invitation { color: #e1c596; }
@media (prefers-reduced-motion: no-preference) {
  .cinema-enhanced .haze-far { animation: far-drift 35s ease-in-out infinite alternate; }
  .cinema-enhanced .haze-near { animation: near-drift 24s ease-in-out infinite alternate; }
  .cinema-enhanced .lantern-glow { animation: lantern-breath 5s ease-in-out infinite alternate; }
  .chronicle:not(.is-near) .cinema-haze, .chronicle:not(.is-near) .lantern-glow { animation-play-state: paused; }
}
@keyframes far-drift { from { transform: translate3d(-5%,2%,0) scale(1); } to { transform: translate3d(5%,-3%,0) scale(1.08); } }
@keyframes near-drift { from { transform: translate3d(6%,6%,0) scale(1.08); } to { transform: translate3d(-6%,-4%,0) scale(1); } }
@keyframes lantern-breath { from { filter: brightness(.7); } to { filter: brightness(1.3); } }
@media (max-width:600px) {
  .site-nav { height: 65px; }
  .hero-content { width: 100%; }
  .hero-art { background-position: 72% center; }
  .cinema-enhanced .chronicle { height: calc(100svh + var(--verse-count) * 74svh); }
  .cinema-enhanced .chronicle-line { padding: 100px 27px 120px; gap: 27px; }
  .verse-words { font-size: clamp(28px,8.2vw,38px); line-height: 1.42; max-width: 25ch; }
  .verse-era { font-size: 8px; letter-spacing: .2em; }
  .cinema-enhanced .cinema-foot { left: 25px; right: 25px; bottom: 80px; }
  .cinema-foot > span:last-child { display: none; }
  .cinema-enhanced .cinema-shade { background: radial-gradient(ellipse,#03080e66,transparent),linear-gradient(#03080ecc,transparent 30%,transparent 65%,#03080ed9); }
  .epilogue { padding: 110px 25px 80px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .cinema-enhanced .chronicle-line { padding: 75px 90px 65px; gap: 15px; }
  .verse-words { font-size: 29px; max-width: 36ch; }
  .verse-mark, .cinema-foot { display: none !important; }
}

.cinema-picture picture { display: block; width: 100%; height: 100%; }
@media (max-width:600px) {
  .hero-art { background-image: url('img/chronicle-fog-mobile.webp'); }
  .epilogue { background-image: linear-gradient(#060b10dd,#060b10e8),url('img/chronicle-tree-mobile.webp'); }
}