/* The title keeps its own column; every quote contributes to the stable row height. */
.universe-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr) auto;gap:12px 28px;flex:none;align-items:center}
.heading-title{min-width:0}.universe-heading h1{font-size:clamp(20px,1.8vw,28px)}
.universe-heading h1 em{display:block;margin-left:0}
.heading-quotes{min-width:0;max-width:540px;justify-self:end;color:#d8cfbb}
.quote-stack{display:grid;align-items:center}
.quote-slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 600ms ease,visibility 600ms;min-width:0}
.quote-slide.is-current{opacity:1;visibility:visible}
.quote-slide p{margin:0;overflow-wrap:break-word;letter-spacing:.025em}
.quote-original{font:italic 15px/1.65 var(--serif);color:#e4d7b9}
.quote-chinese{font:14px/1.85 var(--serif);color:#c7bea9}
.quote-original+.quote-chinese{margin-top:10px}
.quote-controls{display:flex;justify-content:flex-end;gap:14px;margin-top:6px}
.quote-controls button{border:0;background:transparent;color:#ada38e;font:11px/1.5 var(--sans);padding:5px 2px;cursor:pointer;min-height:28px}
.quote-controls button:focus-visible,.moment-trigger:focus-visible{outline:1px solid #dfc18c;outline-offset:2px}
.moment-cell-slot{position:relative;min-width:0;min-height:0;aspect-ratio:4/3;max-height:100%}
.moment-trigger{position:absolute;right:2px;bottom:2px;z-index:5;border:1px solid #b89c6d66;border-radius:3px;background:#15170fe8;color:#e1c8a0;font:9px/1.4 var(--sans);padding:4px 5px;cursor:pointer;opacity:0;pointer-events:none}
.moment-cell-slot:hover .moment-trigger,.moment-cell-slot:focus-within .moment-trigger{opacity:1;pointer-events:auto}
.film-row:has(.moment-trigger:focus-visible) .film-belt{animation:none;transform:none}
.film-row[data-moment-held=true] .film-belt{animation-play-state:paused!important}
/* Bound frames stay at their existing size instead of opening the regular hover preview. */
.film-cell[data-moment],.film-cell[data-moment] .film-image{transform:none!important}
#memoryMoment{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:0;transition:opacity 200ms ease;overflow:hidden}
#memoryMoment[hidden]{display:none}#memoryMoment.is-active{opacity:1;transition-duration:300ms}
.moment-aperture{position:absolute;box-shadow:0 0 0 200vmax #030604ba;border-radius:1px}
.moment-copy{position:absolute;color:#ead9b9;text-shadow:0 2px 12px #0008}
.moment-copy time{display:block;font:12px/1.6 var(--sans);letter-spacing:.15em;color:#ba9c6e}
.moment-copy p{margin:9px 0 0;font:17px/1.9 var(--serif);overflow-wrap:anywhere}
.moment-copy{opacity:0;transition:opacity 450ms ease}
.show-copy .moment-copy{opacity:1}
.moment-art{position:absolute;inset:0;opacity:0;transition:opacity 700ms ease;pointer-events:none}
.show-art .moment-art{opacity:1}
.moment-tile{position:absolute;object-fit:contain;max-width:calc(100vw - 32px)}
.concert-light{position:absolute;width:4px;height:6px;border-radius:2px;background:#ecd0a0;box-shadow:0 0 14px 4px #e6b67235;opacity:0}
.show-art .concert-light{animation:audience-light 900ms ease-out calc(var(--order)*100ms) both}
@keyframes audience-light{to{opacity:.72}}
#memoryMoment[data-effect=horizon] .moment-art{background:linear-gradient(#08132077,#071d32dd);transition-duration:1200ms}
.moment-horizon{width:100%;height:100%;position:absolute;inset:0;overflow:visible}
.moment-horizon path{stroke:#718e9f;stroke-width:1.1;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.show-art .moment-horizon path{animation:horizon-unfold 1100ms ease-out both}
@keyframes horizon-unfold{to{stroke-dashoffset:0}}
.horizon-light{position:absolute;right:7%;width:3px;height:3px;border-radius:50%;background:#e9d7a8;box-shadow:0 0 14px 3px #d6bb6d55;opacity:0}
.show-art .horizon-light{animation:audience-light 600ms 1100ms ease-out both}
.home-window{display:flex;gap:5px;padding:8px;border:4px solid #514737;background:#0c100e;box-sizing:border-box;max-width:140px}
.home-window i{flex:1;background:#171911;box-shadow:inset 0 0 15px #0005;position:relative}
.home-window i:after{content:'';position:absolute;inset:0;background:linear-gradient(#b39856,#d3a556);opacity:0}
.show-art .home-window i:after{animation:window-light 850ms ease-out both}
.show-art .home-window i:nth-child(2):after{animation-delay:500ms}
@keyframes window-light{to{opacity:.72}}
.shop-sign{opacity:0;filter:brightness(.55)}
.show-art .shop-sign.asset-ready{animation:sign-light 1100ms ease-out both}
@keyframes sign-light{to{opacity:1;filter:brightness(1)}}
.dog-peek{position:absolute;bottom:0;right:8%;width:180px;max-width:32vw;height:auto;max-height:40vh;object-fit:contain;transform:translateY(100%)}
.show-art .dog-peek.asset-ready{animation:dog-peek 1200ms ease-out both}
@keyframes dog-peek{0%{transform:translateY(100%)}40%,62%{transform:translateY(80%)}100%{transform:translateY(45%)}}
.table-glow{position:absolute;inset:50% -10% -30%;background:radial-gradient(ellipse at 50% 100%,var(--event-color),transparent 68%);opacity:0;transform:translateY(15%)}
.show-art .table-glow{animation:table-light 1200ms ease-out both}
@keyframes table-light{to{opacity:.28;transform:translateY(0)}}
.moment-effect-editor{font-size:12px;line-height:1.7}.moment-effect-editor p{overflow-wrap:anywhere}.moment-effect-editor textarea{width:100%;box-sizing:border-box;font:12px/1.6 monospace}
.moment-binding{display:grid;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid #a7906755}
.moment-binding select{width:100%;min-width:0}.moment-binding button{min-height:42px}.moment-binding small{min-height:1.5em}
.milestone-help{font-size:12px;line-height:1.8}.milestone-entry strong small{display:block;font-size:11px;font-weight:normal;color:#777}
#milestoneForm label{display:grid;gap:4px}#milestoneForm textarea{min-height:65px}
@media(max-width:900px){
 .universe-heading{grid-template-columns:minmax(0,1fr) auto;gap:8px}.heading-quotes{grid-column:1/-1;grid-row:2;justify-self:stretch;max-width:none}
 .universe-heading h1{font-size:19px}.universe-heading h1 em{display:inline;margin-left:6px}
 .quote-original{font-size:14px}.quote-chinese{font-size:13px;line-height:1.75}.quote-original+.quote-chinese{margin-top:8px}
 .quote-controls{margin-top:2px}.quote-controls button{min-height:32px}
}
@media(max-width:700px){
 #universe{height:auto;min-height:calc(100dvh - 58px)}body.is-journey{overflow-y:auto}
 #universe .universe-body{flex:none;grid-template-rows:minmax(220px,36dvh) 48px auto}
 .universe-heading h1{font-size:17px}.universe-heading h1 em{display:block;margin-left:0}
 .moment-trigger{opacity:1;pointer-events:auto;min-height:32px;max-width:100%;font-size:9px}
 .moment-copy p{font-size:15px}.moment-copy time{font-size:11px}
}
@media(hover:none),(pointer:coarse){.moment-trigger{opacity:1;pointer-events:auto;min-height:32px}}
@media(prefers-reduced-motion:reduce){.quote-slide,#memoryMoment,#memoryMoment.is-active,.moment-art,.moment-copy{transition:none!important}.moment-art *{animation:none!important;transition:none!important}.show-art .concert-light,.show-art .horizon-light{opacity:.72}.show-art .moment-horizon path{stroke-dashoffset:0}.show-art .home-window i:after{opacity:.72}.show-art .shop-sign{opacity:1;filter:none}.show-art .dog-peek{transform:translateY(45%)}.show-art .table-glow{opacity:.28;transform:none}}


/* A small film cover opens the exact YouTube video in a separate tab. */
.universe-heading{grid-template-columns:minmax(230px,1.15fr) 168px minmax(260px,1fr) auto;gap:12px 22px}
.heading-title{grid-column:1;grid-row:1}.heading-quotes{grid-column:3;grid-row:1}
.heading-film{width:168px;aspect-ratio:16/10;grid-column:2;grid-row:1;align-self:center}
#headingFilmOpen{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;border:1px solid #b69c6b66;border-radius:3px;background:linear-gradient(135deg,#34372c,#161b18);color:#f7ead2;cursor:pointer;text-align:left;box-sizing:border-box;text-decoration:none}
#headingFilmOpen[hidden]{display:none}
#headingFilmOpen img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
#headingFilmOpen img[hidden]{display:none}
.heading-film-shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,#080b09d9)}
.heading-film-play{position:absolute;left:10px;top:9px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1317119c;border:1px solid #f2ddb77a;font-size:11px;padding-left:2px}
.heading-film-label{position:absolute;left:10px;right:8px;bottom:8px;font:11px/1.5 var(--sans);text-shadow:0 1px 6px #000}
#headingFilmOpen:hover{border-color:#eed3a1}#headingFilmOpen:focus-visible{outline:2px solid #efd1a0;outline-offset:4px}
@media(max-width:1100px){
 .universe-heading{grid-template-columns:minmax(0,1fr) 168px;gap:10px 20px}
 .heading-film{grid-column:2}.heading-quotes{grid-column:1/-1;grid-row:2;max-width:none;justify-self:stretch}
 #unknownToggle{grid-column:1/-1;justify-self:start}
}
@media(max-width:700px){
 .universe-heading{grid-template-columns:minmax(0,1fr);gap:14px}
 .heading-title{grid-column:1;grid-row:1}.heading-film{grid-column:1;grid-row:2;width:200px;aspect-ratio:16/9}
 .heading-quotes{grid-column:1;grid-row:3}#unknownToggle{grid-row:4}
}
/* Reserve the heading and ruler first; only the middle stage flexes. */
@media(min-width:701px){
 body.is-journey{overflow-y:hidden}
 #universe{height:calc(100dvh - 64px);min-height:0}
 #universe .universe-body{min-height:0}
 .universe-ruler{flex:none}
 .journey-atlas{min-height:0;gap:4px;padding-top:0;padding-bottom:0}
 .journey-atlas>*{flex-shrink:0}
 #journeyGlobe{flex:1 1 0;min-height:80px;height:0;max-height:250px;width:100%;aspect-ratio:auto}
}
@media(min-width:901px) and (max-width:1100px){
 .universe-heading{grid-template-columns:minmax(0,1fr) 140px minmax(250px,1.15fr) auto;gap:12px}
 .heading-film{width:140px;grid-column:2;grid-row:1}
 .heading-quotes{grid-column:3;grid-row:1}
}
@media(min-width:701px) and (max-height:800px){
 .journey-atlas{gap:3px}
 .journey-atlas .globe-help,.journey-atlas #geoHint{display:none}
 #journeyDay{font-size:28px}
}
/* The virtual track's full archive height must not size the outer grid. */
#ribbon{contain:size}

@media(min-width:701px) and (max-height:650px){
 .journey-atlas{gap:2px}
 .journey-atlas .atlas-label,.journey-atlas #journeyPlace{font-size:14px;line-height:1.4}
 #journeyGlobe{min-height:64px}
 #journeyDay{font-size:25px}
 .journey-globe-controls button{min-height:28px;padding:2px 8px}
}