/* Light and depth. Same art direction (full-bleed photograph, dark, Newsreader, pixels); less flat.
   1. Colour from the photograph: --shade (its own shadow colour) replaces the one teal-black in every scrim and panel,
      --tint (a light version of its strongest colour) marks small things. Set by tint.js, eased by @property.
   2. Film grain over everything and a soft vignette on the photograph.
   3. Panels are glass over the blurred photograph, not boxes on a black void.
   4. More typographic contrast. */
@property --shade{syntax:'<color>';inherits:true;initial-value:#050f11}
@property --tint{syntax:'<color>';inherits:true;initial-value:#bfe6dc}
:root{--shade:#050f11;--tint:#bfe6dc;transition:--shade 1.4s var(--ease),--tint 1.4s var(--ease)}
:root{--sh-90:color-mix(in srgb,var(--shade) 90%,transparent);--sh-75:color-mix(in srgb,var(--shade) 75%,transparent);--sh-55:color-mix(in srgb,var(--shade) 55%,transparent);--sh-35:color-mix(in srgb,var(--shade) 35%,transparent);--sh-15:color-mix(in srgb,var(--shade) 15%,transparent);
 --glass:color-mix(in srgb,var(--shade) 72%,transparent);--edge:color-mix(in srgb,var(--tint) 22%,transparent)}
body,.scene,.home{background:var(--shade)}

/* 1. scrims in the photograph's own shadow colour */
.scene::after{background:linear-gradient(0deg,var(--sh-75),var(--sh-35) 90px,var(--sh-15) 170px,transparent 250px)}
.scene[data-tone=bright]:not([data-ink=dark])::after{background:linear-gradient(0deg,var(--sh-90),var(--sh-55) 90px,var(--sh-35) 170px,var(--sh-15) 230px,transparent 300px)}
.caption h1::before{background:radial-gradient(closest-side,var(--sh-75),var(--sh-35) 55%,transparent)}
.scene[data-tone=bright]:not([data-ink=dark]) .caption h1::before{background:radial-gradient(closest-side,var(--sh-75),var(--sh-35) 45%,transparent)}
.site-head::before{background:linear-gradient(var(--sh-90),var(--sh-55) 55%,transparent)}
.site-head::after{background:linear-gradient(var(--sh-75),var(--sh-55) 30px,var(--sh-35) 60px,var(--sh-15) 95px,transparent)}
body[data-top=bright] .site-head::after{background:linear-gradient(var(--sh-90),var(--sh-75) 30px,var(--sh-55) 60px,var(--sh-35) 85px,var(--sh-15) 104px,transparent)}
.chapter-footer{background:linear-gradient(transparent,var(--sh-90) 60%)}
.carded .scene::after{background:radial-gradient(ellipse 70% 62% at 20% 80%,var(--sh-90),transparent 72%),linear-gradient(180deg,var(--sh-35),transparent 25%,transparent 35%,var(--sh-90) 85%)}
.minimap::before{background:radial-gradient(ellipse at center,var(--sh-75),transparent 70%)}
@media(max-width:700px){.scene:not(.is-fit)::after{background:linear-gradient(180deg,var(--sh-35),transparent 20%,transparent 58%,var(--sh-35) 70%,var(--sh-75) 84%,var(--sh-90))}.scene.scene[data-tone=bright]:not([data-ink=dark]):not(.is-fit)::after{background:linear-gradient(180deg,var(--sh-55),transparent 20%,transparent 54%,var(--sh-55) 68%,var(--sh-90) 82%,var(--shade))}}

/* 2. a soft vignette on the photograph, and grain over everything */
.scene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 48%,transparent 58%,var(--sh-35) 85%,var(--sh-55));transition:opacity var(--t2)}
.clean-view .scene::before{opacity:0}.scene[data-ink=dark]::before{opacity:.35}
body::after{content:"";position:fixed;inset:-60px;z-index:95;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-22px,14px)}33%{transform:translate(18px,-26px)}50%{transform:translate(-12px,-8px)}67%{transform:translate(26px,20px)}83%{transform:translate(-30px,6px)}100%{transform:translate(0,0)}}

/* 3. glass: menus and panels float over the photograph, which stays visible, blurred, behind them */
.menu{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid #ffffff1c;box-shadow:0 24px 70px #0009,inset 0 1px 0 #ffffff14;border-radius:3px}
.menu button{position:relative;transition:color .2s,background .2s}.menu button:hover{background:#ffffff0c}
.menu button:hover::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--tint)}
dialog::backdrop,.photo-dialog::backdrop,.jp-dialog::backdrop,.ending::backdrop{background:var(--sh-75);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.ending,.jp-dialog,.place-dialog,.compare-dialog{background:linear-gradient(170deg,color-mix(in srgb,var(--shade) 70%,#1d3438),var(--shade) 70%);border:1px solid #ffffff17;box-shadow:0 40px 120px #000a,inset 0 1px 0 #ffffff12}
.jp-head,.place-head{background:transparent}
.load-status,#restore-interface,#watch-stop{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:#ffffff22}
.marker span,.mm-card,.mcard{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* small things in the photograph's colour */
.caption .eyebrow{display:inline-flex;align-items:center;gap:9px}
.caption .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--tint) 60%,#fff);box-shadow:0 0 10px var(--tint),0 0 0 1px #0006}
.scene-nav button:not(:disabled):hover{background:color-mix(in srgb,var(--tint) 22%,transparent);border-color:var(--tint)}
.chapter[aria-current=true] .chapter-thumb::after{border-color:var(--tint);box-shadow:inset 0 0 0 1px var(--tint)}
.marker::before{border-color:color-mix(in srgb,var(--tint) 80%,#fff)}
#watch-bar{background:var(--tint)}
:focus-visible{outline-color:var(--tint)}

/* 4. type with more contrast: the settled title stays a title, the count reads like a page number */
.caption h1{font-size:clamp(30px,2.9vw,46px);font-weight:360;letter-spacing:-.03em}
.caption p{font-size:16px}
#scene-count{display:flex;align-items:baseline;gap:6px;font:500 var(--lab-size) var(--label);letter-spacing:.1em}
#scene-count b{font:italic 340 30px/1 var(--serif);letter-spacing:-.03em;text-transform:none}
.jcard h2{font-size:clamp(40px,5.4vw,84px)}
@media(max-width:850px){.caption h1{font-size:28px}#scene-count b{font-size:24px}}
/* the small words over the photograph keep a tight dark edge, so they still read on white spray or bright sky without a bigger scrim */
.scene:not([data-ink=dark]) .scene-actions button,.scene:not([data-ink=dark]) #scene-count,.ix-now,.ix-n,.ix-c{text-shadow:0 0 1px var(--shade),0 0 3px var(--shade),0 0 6px var(--shade),0 0 10px var(--sh-75)}
.ix-c{color:#d2ded9}
/* on a pale photograph the focus ring turns dark like the words */
.scene[data-ink=dark] :focus-visible,body[data-topink=dark]:not(.at-home) .site-head :focus-visible{outline-color:#0b2023}

.home::before{background:linear-gradient(var(--sh-90),var(--sh-75) 30px,var(--sh-55) 64px,var(--sh-35) 96px,var(--sh-15) 124px,transparent)}
/* the wall: a tile you point at comes up off the page */
.f{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}.tiles .f:hover,.tiles .f:focus-visible{z-index:2;transform:translateY(-3px);box-shadow:0 18px 40px #000a,0 0 0 1px var(--edge)}

@media(prefers-reduced-motion:reduce){body::after{animation:none}:root{transition:none}}
/* on a pale photograph the dark count reads by itself; a box behind the big numeral only looked like a sticker */
.scene[data-ink=dark] #scene-count{background:none;padding:0}
.chapter-thumb{background:color-mix(in srgb,var(--shade) 80%,#3a5559)}