@charset "UTF-8";
:root{color-scheme:dark;--ivory:#fff4d9;--gold:#d7b66f;--navy:#100e1e}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy)}
body{color:var(--ivory);font-family:Georgia,"Times New Roman",serif}
a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}
.not-found{padding:3rem;max-width:50rem;line-height:1.6}.not-found h1{font-size:2rem;line-height:1.3}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:7px}
.skip-link{position:fixed;z-index:9;left:1rem;top:1rem;padding:.75rem 1rem;background:var(--navy);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.hero{min-height:700px;min-height:max(700px,100svh);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center}
.hero-art,.shade,.lantern-glow,.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-art{object-fit:cover;object-position:45% 50%;z-index:-4}
.ravine-mist{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mist-scene{position:absolute;left:var(--scene-x,0px);top:var(--scene-y,0px);width:var(--scene-width,100%);height:var(--scene-height,100%);mask-image:linear-gradient(90deg,transparent 49%,#000 61%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent 49%,#000 61%,#000 94%,transparent)}
.mist-bank{position:absolute;left:45%;width:65%;height:23%;background:radial-gradient(ellipse at 18% 58%,rgba(200,188,225,.5),transparent 26%),radial-gradient(ellipse at 47% 43%,rgba(197,182,226,.65),transparent 30%),radial-gradient(ellipse at 78% 62%,rgba(180,163,217,.45),transparent 28%);mix-blend-mode:screen;animation:ravine-drift 24s linear -9s infinite alternate;animation-play-state:paused;opacity:.72}
.mist-bank:after{content:"";position:absolute;inset:24% 8% 28%;background:radial-gradient(ellipse at 32% 65%,rgba(221,211,240,.45),transparent 29%),radial-gradient(ellipse at 69% 32%,rgba(211,197,237,.4),transparent 31%)}
.mist-far{top:35%;height:17%;opacity:.4;animation-duration:38s;animation-delay:-19s}
.mist-middle{top:51%}
.mist-near{top:68%;height:28%;opacity:.65;animation-name:ravine-drift-back;animation-duration:28s;animation-delay:-12s}
.motion-enabled .mist-bank{animation-play-state:running}
@keyframes ravine-drift{from{transform:translate(-14%,3%)}to{transform:translate(14%,-7%)}}
@keyframes ravine-drift-back{from{transform:translate(12%,-5%)}to{transform:translate(-15%,5%)}}
.shade{z-index:-3;background:linear-gradient(90deg,transparent 38%,rgba(13,8,28,.44) 53%,rgba(13,8,28,.68) 100%),linear-gradient(0deg,rgba(8,7,17,.9),transparent 22%,transparent 88%,rgba(8,7,17,.12))}
.hero-copy{width:44%;margin:0 1.5% 2% 54.5%;text-align:center;padding:3rem 1.4rem 5rem;position:relative;z-index:2;text-shadow:0 2px 22px rgba(6,5,14,.8)}
.eyebrow{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.33em;color:#e6c78c;font-size:clamp(.57rem,.78vw,.8rem);margin:0 0 2.2rem}
h1{font-weight:400;text-transform:uppercase;line-height:1;margin:0;font-feature-settings:"kern"}
.tagline{font-size:clamp(1rem,1.35vw,1.4rem);letter-spacing:.18em;line-height:1.6;margin:0;text-wrap:balance}
.updates-link{display:inline-flex;align-items:center;gap:2.4rem;justify-content:center;text-decoration:none;margin-top:2.2rem;min-height:50px;padding:.8rem 2rem;border:1px solid var(--gold);background:rgba(16,13,31,.5);box-shadow:inset 0 0 0 3px rgba(215,182,111,.08);transition:background .2s}
.updates-link:hover{background:rgba(215,182,111,.16)}
.site-footer{position:absolute;bottom:0;left:0;right:0;min-height:72px;display:flex;align-items:center;gap:1rem;padding:1.5rem 2.8rem;color:#dbcba8;font-size:.65rem;text-transform:uppercase;letter-spacing:.17em}
.studio-link{text-decoration:none}.studio-link:hover{text-decoration:underline;text-underline-offset:4px}
.copyright{margin-left:auto;letter-spacing:.08em;font-size:.6rem;color:#b9abbf}
.motion-toggle{border:0;border-bottom:1px solid #8d7956;background:transparent;color:#dfd0b2;min-height:44px;font:inherit;text-transform:inherit;letter-spacing:inherit;margin-right:auto;padding:.25rem 0;cursor:pointer}
.lantern-glow{inset:auto;left:var(--lantern-x,30%);top:var(--lantern-y,52%);width:var(--lantern-width,320px);height:var(--lantern-height,360px);transform:translate(-50%,-50%);z-index:-2;background:radial-gradient(ellipse,rgba(255,184,62,.48),rgba(255,136,25,.18) 35%,transparent 70%);mix-blend-mode:screen;opacity:.55}
.lantern-glow:after{content:"";position:absolute;inset:18% 28%;background:radial-gradient(ellipse,rgba(255,242,176,.85),rgba(255,194,73,.55) 32%,rgba(255,149,37,.15) 58%,transparent 75%);transform-origin:50% 70%;animation:flame-shimmer 1.7s ease-in-out infinite;animation-play-state:paused}
.embers{z-index:-1}
.embers i{position:absolute;width:2px;height:2px;left:var(--x);top:72%;border-radius:50%;background:#f9ce7c;box-shadow:0 0 7px 2px #f0a44766;opacity:0}
.embers i:nth-child(1){--x:24%;--delay:0s}.embers i:nth-child(2){--x:32%;--delay:3s}.embers i:nth-child(3){--x:27%;--delay:6s}.embers i:nth-child(4){--x:38%;--delay:1.5s}.embers i:nth-child(5){--x:18%;--delay:7s}.embers i:nth-child(6){--x:29%;--delay:4.5s}
.lantern-glow{animation:lantern-flicker 3.7s ease-in-out infinite;animation-play-state:paused}
.embers i{animation:drift 12s ease-out var(--delay) infinite;animation-play-state:paused}
.motion-enabled .lantern-glow,.motion-enabled .lantern-glow:after,.motion-enabled .embers i{animation-play-state:running}
@keyframes lantern-flicker{0%,100%{opacity:.48}8%{opacity:.8}17%{opacity:.42}25%{opacity:.72}34%{opacity:.55}43%{opacity:.9}51%{opacity:.63}62%{opacity:.83}73%{opacity:.44}81%{opacity:.76}91%{opacity:.58}}
@keyframes flame-shimmer{0%,100%{transform:scale(.94,1);opacity:.5}23%{transform:scale(1.03,.96);opacity:.85}47%{transform:scale(.98,1.04);opacity:.6}76%{transform:scale(1.04,1.02);opacity:.95}}
@keyframes drift{0%{opacity:0;transform:translate(0,0)}15%{opacity:.55}75%{opacity:.25}100%{opacity:0;transform:translate(20px,-160px)}}
@media(min-width:1800px){.hero-art{object-position:50% 50%}.hero-copy{margin-left:53%;width:44%}}
@media(max-width:1000px) and (min-width:701px){.hero-copy{margin-left:49%;width:50%;padding-left:.7rem;padding-right:.7rem}.eyebrow{letter-spacing:.22em}.site-footer{padding-inline:1.5rem;gap:.7rem}.copyright{display:none}}
@media(max-width:700px){
.hero{min-height:max(780px,100svh);align-items:flex-end}
.hero-art{height:64%;object-position:23% 50%}
.ravine-mist{height:64%;bottom:auto}
.shade{background:linear-gradient(0deg,rgba(9,7,20,.98) 0%,rgba(13,8,28,.94) 19%,rgba(14,8,29,.72) 42%,rgba(14,8,29,.08) 68%,rgba(14,8,29,.08) 100%)}
.hero-copy{margin:0 0 100px;width:100%;padding:1.5rem 1rem 2rem}
.eyebrow{font-size:.6rem;margin-bottom:1.35rem;letter-spacing:.28em}
.site-footer{min-height:84px;justify-content:center;flex-wrap:wrap;padding:1rem 1.2rem;gap:.65rem;font-size:.57rem}
.motion-toggle{position:absolute;top:-44px;left:50%;transform:translateX(-50%);font-size:.56rem;margin:0}.copyright{width:100%;text-align:center;margin:0;font-size:.5rem}
.embers i{top:45%}
}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) *,body:not(.motion-enabled) *:before,body:not(.motion-enabled) *:after{animation:none!important}*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}


@media(max-width:370px){.site-footer{gap:.5rem;padding-inline:.65rem;letter-spacing:.1em}.hero-copy{padding-inline:.65rem}}
@media(max-height:550px) and (min-width:701px){.hero{min-height:600px}}

.game-wordmark{line-height:0;text-transform:none}
.title-wordart{display:block;width:100%;max-width:660px;height:auto;margin-inline:auto;filter:drop-shadow(0 3px 15px rgba(6,5,14,.85))}
.game-wordmark + .tagline{margin-top:2rem}
@media(max-width:700px){.game-wordmark + .tagline{margin-top:1.5rem}.tagline{font-size:.9rem;letter-spacing:.12em}}

/* Coordinates follow the lantern chamber at (599, 230) in the 1200 x 499 word art. */
.wordmark-effects{position:relative;display:block;width:100%;max-width:660px;margin-inline:auto;isolation:isolate}
.logo-lantern-light,.logo-lantern-glint{position:absolute;left:49.92%;top:46.1%;pointer-events:none;transform:translate(-50%,-50%);animation-play-state:paused}
.logo-lantern-light{width:9%;height:26%;border-radius:50%;background:radial-gradient(ellipse,#fffce3 0%,rgba(255,231,147,.86) 17%,rgba(255,183,55,.48) 40%,transparent 72%);mix-blend-mode:screen;opacity:.5;animation:logo-lantern-pulse 5.8s ease-in-out infinite;animation-play-state:paused}
.logo-lantern-glint{width:17%;aspect-ratio:1;opacity:0;background:radial-gradient(circle,#fff 0%,#fff6cc 5%,rgba(255,216,124,.55) 11%,transparent 29%);filter:drop-shadow(0 0 4px #ffd68a);animation:logo-lantern-spark 12s linear infinite;animation-play-state:paused}
.logo-lantern-glint:before,.logo-lantern-glint:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e6b96b,#fffdf1 45%,#fff 50%,#fffdf1 55%,#e6b96b);clip-path:polygon(0 50%,44% 46%,50% 0,56% 46%,100% 50%,56% 54%,50% 100%,44% 54%)}
.logo-lantern-glint:after{inset:38%;background:#fff;filter:blur(1px)}
.motion-enabled .logo-lantern-light,.motion-enabled .logo-lantern-glint{animation-play-state:running}
@keyframes logo-lantern-pulse{0%,100%{opacity:.32;transform:translate(-50%,-50%) scale(.92)}28%{opacity:.62}34%{opacity:.5}41%{opacity:.7}58%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}66%{opacity:.68}73%{opacity:.81}86%{opacity:.45}}
@keyframes logo-lantern-spark{0%,24%,33%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}26%{opacity:.7;transform:translate(-50%,-50%) scale(.65)}27.5%{opacity:1;transform:translate(-50%,-50%) scale(1)}29%{opacity:.8;transform:translate(-50%,-50%) scale(.85)}32%{opacity:0;transform:translate(-50%,-50%) scale(.35)}}

/* Distant water behind the near bridge, following the user's marked route.
   The SVG water mask occludes the vessel at the banks and bridge deck. */
.gondola-layer{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.gondola-scene{position:absolute;left:var(--scene-x,0px);top:var(--scene-y,0px);width:var(--scene-width,100%);height:var(--scene-height,100%)}
.gondola-water{display:block;width:100%;height:100%;overflow:hidden}
.gondola-travel{transform:translate(1125px,695px);animation:gondola-crossing 260s linear -65s infinite;animation-play-state:paused}
.gondola-vessel{transform:scale(.6)}
.gondola-bob{animation:gondola-rock 5s ease-in-out infinite;animation-play-state:paused}
.gondola-lamp{opacity:.5;animation:boat-lantern-flicker 4.7s ease-in-out infinite;animation-play-state:paused}
.motion-enabled .gondola-travel,.motion-enabled .gondola-bob,.motion-enabled .gondola-lamp{animation-play-state:running}
@keyframes gondola-crossing{0%{transform:translate(958.3px,703px);opacity:.9}25%{transform:translate(1042px,699px);opacity:.9}50%{transform:translate(1125px,695px);opacity:.9}75%{transform:translate(1208px,687px);opacity:.9}100%{transform:translate(1294px,682.4px);opacity:.9}}
@keyframes gondola-rock{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(.45px) rotate(.5deg)}}
@keyframes boat-lantern-flicker{0%,100%{opacity:.35}27%{opacity:.475}34%{opacity:.39}55%{opacity:.5}72%{opacity:.41}}
@media(max-width:700px){.gondola-layer{height:64%;bottom:auto}}

.gondola-bow-glint{opacity:.85;filter:drop-shadow(0 0 4px #ffd267);animation:bow-lantern-glint 8s ease-in-out infinite;animation-play-state:paused}
.motion-enabled .gondola-bow-glint{animation-play-state:running}
@keyframes bow-lantern-glint{0%,29%,48%,100%{opacity:.85;transform:scale(1)}36%{opacity:1;transform:scale(1.5)}39%{opacity:1;transform:scale(1.85)}44%{opacity:.95;transform:scale(1.3)}}

.ambient-controls{display:flex;align-items:center;gap:1.5rem;margin-right:auto}
.ambient-controls .motion-toggle{position:static;transform:none;margin:0}
.music-toggle{border:0;border-bottom:1px solid #8d7956;background:transparent;color:#dfd0b2;min-height:44px;font:inherit;text-transform:inherit;letter-spacing:inherit;padding:.25rem 0;cursor:pointer}
#soundtrack:not([controls]){display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:701px) and (max-width:1200px){.site-footer{gap:.8rem;padding-inline:1.5rem}.ambient-controls{gap:1rem}.copyright{display:none}}
@media(max-width:700px){.ambient-controls{position:absolute;top:-44px;left:0;right:0;justify-content:center;margin:0;gap:2rem}.music-toggle{font-size:.56rem}}