:root {
  --night: #080a0c;
  --cobble: #11161a;
  --cobble-soft: #182027;
  --zinc: #879aa5;
  --zinc-pale: #b7c6cb;
  --lamp: #e5b85c;
  --lamp-hot: #fff0bc;
  --cafe: #f0a85d;
  --cream: #f7edcf;
  --ink: #0b0c0d;
  --display: 'Instrument Serif', serif;
  --body: 'Manrope', sans-serif;
  --header-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--night); color-scheme: dark; }
html {
  scrollbar-color: rgba(229,184,92,.46) #07090a;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #07090a; }
html::-webkit-scrollbar-thumb { border: 3px solid #07090a; border-radius: 99px; background: linear-gradient(var(--zinc), var(--lamp)); }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #182128 0, transparent 29rem),
    linear-gradient(180deg, #090c0f 0%, #07090a 76%, #111921 100%);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: clip;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

a { color: inherit; }
button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,240,188,.18); }
a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,240,188,.14); }
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { orphans: 3; widows: 3; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
::selection { background: var(--lamp); color: var(--ink); }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--lamp-hot);
  color: var(--ink);
  padding: .75rem 1rem;
  border-radius: 2px;
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--lamp-hot); outline-offset: 5px; }

#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: .28;
}

.wet-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(104deg, transparent 16%, rgba(180,210,219,.025) 16.2%, transparent 16.7%),
    linear-gradient(88deg, transparent 68%, rgba(197,217,220,.02) 68.2%, transparent 68.8%);
}

.cursor-lamp {
  position: fixed;
  z-index: 2;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cursor-x, -1000px) - 50%), calc(var(--cursor-y, -1000px) - 50%), 0);
  background: radial-gradient(circle, rgba(255,231,165,.1) 0, rgba(229,184,92,.045) 28%, transparent 67%);
  opacity: 0;
  transition: opacity .35s;
  mix-blend-mode: screen;
}
body.lantern-on .cursor-lamp { opacity: 1; }

.site-header {
  height: var(--header-h);
  padding: 0 clamp(1.25rem, 4vw, 4.75rem);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(8,10,12,.88), transparent);
  transition: background-color .3s, border-color .3s;
  color: var(--zinc-pale);
}
body.is-scrolled .site-header {
  background: rgba(8,10,12,.92);
  border-bottom: 1px solid rgba(183,198,203,.08);
  backdrop-filter: blur(10px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.36rem;
  letter-spacing: .01em;
}
.wordmark-mark {
  width: 12px;
  height: 18px;
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset 0 0 8px var(--lamp), 0 0 12px rgba(229,184,92,.4);
  transition: border-color .3s, box-shadow .4s, background-color .3s;
}
.wordmark:hover .wordmark-mark,
.wordmark:focus-visible .wordmark-mark { border-color: var(--lamp-hot); background: rgba(229,184,92,.18); box-shadow: inset 0 0 10px var(--lamp-hot), 0 0 20px rgba(229,184,92,.7); }
.site-header nav { display: flex; align-items: center; gap: clamp(.35rem, 2vw, 2rem); }
.site-header nav a,
.lantern-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--zinc-pale);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header nav a { padding: 0 .5rem; }
.site-header nav a { transition: color .25s, text-shadow .25s; }
.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--lamp-hot); text-shadow: 0 0 1.2rem rgba(229,184,92,.36); }
.lantern-toggle {
  gap: .6rem;
  border: 1px solid rgba(183,198,203,.2);
  border-radius: 2rem;
  background: rgba(12,16,19,.42);
  padding: 0 1rem;
  cursor: pointer;
}
.lantern-toggle span { width: 7px; height: 7px; border-radius: 50%; background: var(--zinc); transition: background-color .3s, box-shadow .3s; }
.lantern-toggle b { font: inherit; }
.lantern-toggle:hover { color: var(--lamp-hot); border-color: rgba(229,184,92,.48); background: rgba(38,31,20,.58); }
.lantern-toggle[aria-pressed="true"] { color: var(--lamp-hot); border-color: rgba(229,184,92,.5); }
.lantern-toggle[aria-pressed="true"] span { background: var(--lamp-hot); box-shadow: 0 0 14px 4px rgba(229,184,92,.45); }

.route-meter {
  position: fixed;
  right: clamp(.8rem, 2.1vw, 2.5rem);
  top: 50%;
  z-index: 28;
  transform: translateY(-50%);
  height: 34vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: rgba(183,198,203,.56);
  font-size: .55rem;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}
.route-line { position: relative; width: 1px; flex: 1; background: rgba(183,198,203,.16); overflow: hidden; }
.route-line i { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--route-progress, 0)); background: linear-gradient(var(--lamp-hot), var(--cafe)); }

main { position: relative; z-index: 5; }
.lamp-pool {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
}
.lamp-pool::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse calc(var(--pool-size) * .62) var(--pool-size) at var(--pool-x) var(--pool-y), rgba(255,246,211,.24) 0 2%, rgba(235,192,105,.17) 17%, rgba(109,86,48,.085) 39%, rgba(45,45,38,.03) 55%, transparent 69%),
    radial-gradient(ellipse 22rem 9rem at var(--pool-x) 83%, rgba(191,211,215,.055), transparent 74%);
  transform: translateY(var(--cadence, 0px));
}
.lamp-pool::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(96deg, transparent 0 44%, rgba(180,199,204,.035) 44.2%, transparent 44.5%),
    repeating-linear-gradient(170deg, rgba(255,255,255,.014) 0 1px, transparent 1px 11px);
}

.lamp-fixture { position: absolute; left: calc(var(--pool-x) - 21rem); top: 2vh; width: 16rem; height: 58vh; opacity: .78; transform: translateY(var(--cadence, 0px)); }
.lamp-fixture--right { left: auto; right: calc(100% - var(--pool-x) - 16rem); }
.lamp-fixture::before { content: ''; position: absolute; left: 7.7rem; top: 5rem; bottom: 0; width: 3px; background: linear-gradient(#26343d, #11171b); box-shadow: 1px 0 rgba(183,198,203,.22); }
.lamp-fixture::after { content: ''; position: absolute; left: 5.8rem; top: 4rem; width: 4rem; height: 1.1rem; background: #11171b; border: 1px solid #40505a; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
.lamp-fixture i { position: absolute; left: 6.45rem; top: .8rem; width: 2.8rem; height: 3.7rem; border: 2px solid #354650; border-radius: 48% 48% 28% 28%; background: radial-gradient(circle at 50% 58%, #fff9d9 0 8%, #f0bd5d 35%, #553d1f 70%); box-shadow: 0 0 28px rgba(229,184,92,.72), 0 0 84px rgba(229,184,92,.32); }
.lamp-fixture b { position: absolute; left: 6.9rem; top: 0; width: 1.9rem; height: .8rem; background: #1c282f; border-radius: 70% 70% 0 0; }

.hero { min-height: 112svh; padding: 10rem clamp(1.5rem, 9vw, 9rem) 6rem; }
.lamp-fixture--hero { left: 18%; top: 1%; height: 72%; opacity: .62; }
.hero-copy { max-width: 67rem; margin-left: 18%; padding-top: 3rem; }
.kicker {
  display: flex;
  gap: 2rem;
  margin: 0 0 2.2rem;
  color: var(--zinc-pale);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.kicker span:first-child { color: var(--lamp-hot); }
h1, h2, p { text-wrap: pretty; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .88; letter-spacing: -.038em; font-kerning: normal; }
h1 { margin: 0; font-size: clamp(5rem, 10.4vw, 10.4rem); }
h1 em { display: block; margin-left: .66em; color: var(--lamp-hot); font-weight: 400; }
.hero-deck { max-width: 34rem; margin: 2.8rem 0 2.5rem 42%; color: #d6d5c8; font-size: 1.06rem; }
.begin-walk {
  margin-left: 42%;
  width: fit-content;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--lamp-hot);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,240,188,.45);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.begin-walk i { font-family: var(--display); font-size: 1.4rem; font-style: normal; transition: transform .25s; }
.begin-walk:hover i { transform: translateY(.35rem); }
.hero-coordinate { position: absolute; left: clamp(1.5rem, 4vw, 4.75rem); bottom: 4rem; display: flex; gap: 1.3rem; color: rgba(183,198,203,.65); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-coordinate span + span::before { content: '·'; margin-right: 1.3rem; color: var(--lamp); }
.margin-note { position: absolute; right: 7.5%; top: 36%; width: 10rem; color: rgba(183,198,203,.48); font-family: var(--display); font-size: 1rem; font-style: italic; line-height: 1.25; transform: rotate(4deg); }

.darkness { position: relative; min-height: 46svh; color: rgba(183,198,203,.28); overflow: hidden; }
.darkness small { position: absolute; font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; }
.darkness--cat small { left: 62%; bottom: 22%; }
.cat { position: absolute; left: 67%; bottom: 27%; width: 44px; height: 22px; border-radius: 60% 48% 38% 50%; background: #020303; box-shadow: 0 12px 20px #000; }
.cat::before { content: ''; position: absolute; left: -13px; bottom: 7px; width: 21px; height: 4px; border-radius: 50%; background: #020303; transform: rotate(-27deg); }
.cat::after { content: ''; position: absolute; right: 1px; top: -10px; border-left: 8px solid transparent; border-right: 2px solid transparent; border-bottom: 13px solid #020303; }
.cat i { position: absolute; right: 3px; top: 3px; width: 2px; height: 2px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 5px var(--lamp); }

.pool-content { position: relative; width: min(90%, 66rem); margin-inline: auto; z-index: 2; }
.pool-content--narrow { width: min(76%, 54rem); margin-left: 23%; }
.pool-content--right { width: min(72%, 58rem); margin-left: 44%; padding-right: 8%; }
.time-stamp { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.8rem; color: var(--zinc-pale); font-size: .63rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.time-stamp span { color: var(--lamp-hot); font-family: var(--display); font-size: 1.5rem; font-weight: 400; letter-spacing: .02em; }
.time-stamp::before { content: ''; width: 2.8rem; height: 1px; background: rgba(229,184,92,.6); }
.pool-content h2, .sound-intro h2, .bridge h2, .dawn h2 { margin: 0 0 2.2rem; font-size: clamp(4rem, 7.3vw, 7.8rem); color: #f4e8c7; }
.prose-grid { max-width: 51rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); color: #d0d3ce; }
.prose-grid p { margin: 0; }
blockquote { max-width: 35rem; margin: 2.6rem 0 0 22%; color: var(--lamp-hot); font-family: var(--display); font-size: 1.52rem; font-style: italic; line-height: 1.3; }
.chair-silhouette { position: absolute; right: 13%; bottom: 12%; width: 100px; height: 120px; opacity: .58; }
.chair-silhouette::before, .chair-silhouette::after { content: ''; position: absolute; top: 37px; width: 3px; height: 78px; background: #030405; }
.chair-silhouette::before { left: 24px; transform: rotate(6deg); }
.chair-silhouette::after { right: 22px; transform: rotate(-6deg); }
.chair-silhouette i { position: absolute; left: 16px; top: 31px; width: 64px; height: 38px; border: 3px solid #030405; transform: skewY(-6deg); }
.chair-silhouette b { position: absolute; left: 25px; top: 0; width: 51px; height: 44px; border: 3px solid #030405; }
.chair-silhouette span { position: absolute; inset: auto 2px 0 0; height: 1px; background: #020303; box-shadow: 0 4px 16px 5px #000; }

.darkness--roofs { min-height: 54svh; }
.darkness--roofs small { right: 20%; top: 33%; }
.roofline { position: absolute; inset: auto 0 0; height: 38%; display: flex; align-items: end; opacity: .5; }
.roofline i { flex: 1; height: 65%; background: #050708; clip-path: polygon(0 32%, 35% 32%, 45% 0, 55% 32%, 100% 32%, 100% 100%, 0 100%); }
.roofline i:nth-child(2) { height: 90%; }
.roofline i:nth-child(3) { height: 52%; }
.roofline i:nth-child(4) { height: 78%; }

.window-ledger { list-style: none; padding: 0; margin: 0; max-width: 42rem; }
.window-ledger li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: start; padding: 1.1rem 0; border-top: 1px solid rgba(229,184,92,.18); }
.window-ledger li:last-child { border-bottom: 1px solid rgba(229,184,92,.18); }
.window-ledger span { color: var(--lamp); font-family: var(--display); font-size: 1.6rem; }
.window-ledger p { margin: .3rem 0 0; color: #c9ceca; }

.bridge { position: relative; min-height: 122svh; overflow: hidden; display: grid; place-items: center; padding: 9rem 8vw 17rem; background: linear-gradient(#080b0e 0 53%, #0d171d 53% 100%); }
.bridge::before { content: ''; position: absolute; left: -5%; right: -5%; top: 51.5%; height: 7px; background: #1b272e; box-shadow: 0 -2px #42525a, 0 18px 28px #030506; transform: rotate(-1deg); }
.bridge-copy { position: relative; z-index: 3; max-width: 68rem; width: 100%; }
.bridge-copy h2 { max-width: 54rem; }
.bridge-copy > p:last-child { max-width: 33rem; margin-left: 50%; color: #c6ced0; }
.bridge-sky { position: absolute; inset: 0 0 45%; overflow: hidden; }
.bridge-sky i { position: absolute; bottom: 0; width: 2px; height: 60%; background: #1b272e; box-shadow: 0 0 0 1px rgba(135,154,165,.12); }
.bridge-sky i::before { content: ''; position: absolute; left: -1.4rem; top: 15%; width: 2.8rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(circle, #fff2b8 0 8%, #d8a84e 38%, transparent 70%); filter: blur(.2px); }
.bridge-sky i:nth-child(1) { left: 18%; }
.bridge-sky i:nth-child(2) { left: 51%; height: 76%; }
.bridge-sky i:nth-child(3) { left: 82%; height: 52%; }
.river { position: absolute; inset: 54% 0 0; overflow: hidden; background: linear-gradient(#0c161b, #071014); }
.river::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(176deg, transparent 0 13px, rgba(135,154,165,.09) 14px, transparent 16px); }
.river::after { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 18rem 5rem at var(--touch-x, 32%) var(--touch-y, 67%), rgba(255,226,157,.17), rgba(135,154,165,.07) 35%, transparent 72%); transition: opacity 1s cubic-bezier(.16,.72,.25,1); }
.river span { position: absolute; top: calc(var(--n) * 12% + 8%); left: calc(var(--n) * 13%); width: calc(15% + var(--n) * 2%); height: 3px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(240,190,95,.65), transparent); filter: blur(1px); transform: translateX(var(--river-shift, 0px)) scaleX(calc(.7 + var(--n) * .08)); }
.river span:nth-child(1) { --n: 1; }
.river span:nth-child(2) { --n: 2; }
.river span:nth-child(3) { --n: 3; }
.river span:nth-child(4) { --n: 4; }
.river span:nth-child(5) { --n: 5; }
.river span:nth-child(6) { --n: 6; }
.bridge-whisper { position: absolute; bottom: 9%; left: 50%; z-index: 3; color: rgba(183,198,203,.6); font-family: var(--display); font-style: italic; font-size: 1.1rem; }
.river-touch {
  position: absolute;
  inset: 54% 0 0;
  z-index: 5;
  border: 0;
  padding: 0;
  color: #d7d9ce;
  background: transparent;
  cursor: crosshair;
}
.river-touch span {
  position: absolute;
  left: 8vw;
  top: 16%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid rgba(229,184,92,.42);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .25s, border-color .25s, text-shadow .25s;
}
.river-touch span::before { content: ''; width: 7px; height: 7px; border: 1px solid var(--lamp); border-radius: 50%; box-shadow: 0 0 0 0 rgba(229,184,92,0); transition: box-shadow .35s, background-color .35s; }
.river-touch::before,
.river-touch::after {
  content: '';
  position: absolute;
  left: var(--touch-x, 32%);
  top: var(--touch-y, 38%);
  width: 3rem;
  aspect-ratio: 4 / 1;
  border: 1px solid rgba(255,226,157,.58);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  pointer-events: none;
}
.river-touch::after { width: 5rem; border-color: rgba(135,178,192,.42); }
.river-touch:hover span { color: var(--lamp-hot); border-color: var(--lamp-hot); text-shadow: 0 0 1.2rem rgba(229,184,92,.35); }
.river-touch:hover span::before,
.river-touch[aria-pressed="true"] span::before { background: var(--lamp-hot); box-shadow: 0 0 14px 5px rgba(229,184,92,.28); }
.river-touch:focus-visible { outline: 0; }
.river-touch:focus-visible span { outline: 2px solid var(--lamp-hot); outline-offset: 6px; }
.bridge.river-rippling .river-touch::before { animation: river-ring 1.55s cubic-bezier(.12,.64,.22,1) both; }
.bridge.river-rippling .river-touch::after { animation: river-ring 1.75s .12s cubic-bezier(.12,.64,.22,1) both; }
.bridge.river-touched .river::after { opacity: 1; }
.river-reply {
  position: absolute;
  right: 8vw;
  top: 70%;
  z-index: 5;
  max-width: 20rem;
  margin: 0;
  opacity: 0;
  color: #dbe1dc;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-align: right;
  transform: translateY(.7rem);
  transition: opacity .8s .18s cubic-bezier(.22,.72,.24,1), transform .8s .18s cubic-bezier(.22,.72,.24,1);
  pointer-events: none;
}
.river-reply span,
.river-reply em { display: block; }
.river-reply em { color: var(--lamp-hot); font-weight: 400; }
.bridge.river-touched .river-reply { opacity: 1; transform: none; }
@keyframes river-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(8); } }

.sound-catalogue { min-height: 135svh; padding: 9rem 7vw; display: block; }
.sound-intro { width: min(90%, 64rem); margin: 12vh auto 0; }
.sound-intro > p:last-child { color: #c7cbc7; margin-left: 43%; }
.sounds { position: relative; width: min(92%, 80rem); height: 38rem; margin: -1rem auto 0; }
.sound { position: absolute; color: rgba(247,237,207,.8); font-family: var(--display); line-height: .9; }
.sound--xl { left: 3%; top: 17%; font-size: clamp(3.6rem, 8vw, 8rem); color: var(--lamp-hot); }
.sound--sm { right: 7%; top: 1%; font-size: 1rem; font-family: var(--body); }
.sound--md { left: 42%; top: 48%; font-size: clamp(2rem, 4vw, 4.4rem); }
.sound--xs { left: 14%; bottom: 9%; font-family: var(--body); font-size: .72rem; letter-spacing: .06em; }
.sound--lg { right: 3%; bottom: 11%; max-width: 31rem; font-size: clamp(2.7rem, 5vw, 5.2rem); }
.sound--whisper { right: 13%; top: 30%; max-width: 13rem; color: rgba(183,198,203,.48); font-size: 1.2rem; font-style: italic; }

.darkness--bus { min-height: 50svh; }
.darkness--bus small { right: 20%; bottom: 12%; }
.bus-ghost { position: absolute; right: -8rem; bottom: 19%; width: 42rem; height: 8rem; border-radius: 1rem 2rem .4rem .4rem; background: #030405; border-top: 1px solid #172127; transform: skewX(-4deg); box-shadow: 0 24px 35px #000; }
.bus-ghost b { position: absolute; left: 3rem; top: 1rem; color: rgba(218,78,58,.42); font-size: 1rem; letter-spacing: .1em; }
.bus-ghost i { position: absolute; top: 2rem; width: 3.5rem; height: 2.6rem; background: rgba(223,190,117,.08); border: 1px solid rgba(135,154,165,.08); }
.bus-ghost i:nth-of-type(1) { left: 10rem; box-shadow: 5rem 0 rgba(223,190,117,.06), 10rem 0 rgba(223,190,117,.09), 15rem 0 rgba(223,190,117,.05); }
.bus-ghost i:nth-of-type(2) { display: none; }
.bus-ghost span { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: rgba(156,39,24,.3); box-shadow: 0 0 17px rgba(225,64,43,.4); }

.bus-badge { width: fit-content; margin: 0 0 1.7rem; padding: .5rem .7rem; color: #f7d8cb; background: #8f2b22; font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.bus-badge span { padding-left: .65rem; margin-left: .5rem; border-left: 1px solid rgba(255,255,255,.34); font-weight: 500; }
.large-prose { max-width: 41rem; color: #d1d1c8; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.42; }
.route-cameo { max-width: 36rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.7rem; }
.route-cameo div { border-top: 1px solid rgba(229,184,92,.28); padding-top: .7rem; }
.route-cameo dt { color: var(--zinc); font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; }
.route-cameo dd { margin: .2rem 0 0; color: var(--lamp-hot); font-family: var(--display); font-size: 1.4rem; }
.darkness--pause { min-height: 64svh; }
.darkness--pause small { left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }

.bakery { min-height: 128svh; }
.bakery::before { background: radial-gradient(circle var(--pool-size) at var(--pool-x) var(--pool-y), rgba(255,229,161,.29), rgba(240,168,93,.18) 24%, rgba(120,67,30,.08) 48%, transparent 72%); }
.window-glow { position: absolute; right: 6%; top: 12%; width: 42%; height: 72%; border: 1px solid rgba(255,214,151,.25); background: linear-gradient(132deg, rgba(255,212,143,.34), rgba(154,75,27,.12)); box-shadow: 0 0 8rem rgba(240,168,93,.2), -10rem 7rem 15rem rgba(240,168,93,.09); clip-path: polygon(6% 0, 100% 2%, 95% 100%, 0 95%); }
.window-glow::before, .window-glow::after { content: ''; position: absolute; background: rgba(54,35,25,.72); }
.window-glow::before { left: 33%; top: 0; width: 4px; height: 100%; }
.window-glow::after { left: 0; right: 0; top: 48%; height: 4px; }
.window-glow i { position: absolute; left: 14%; bottom: 8%; width: 18%; height: 7%; border-radius: 50%; background: #d49b5a; box-shadow: 7rem 1rem #d49b5a, 14rem -.5rem #d49b5a; filter: blur(.3px); }
.bakery-copy { z-index: 3; margin-left: 38%; }
.bakery-copy h2 { color: #fff1c9; text-shadow: 0 1px 40px rgba(239,169,92,.32); }
.bakery-copy > p:not(.time-stamp):not(.large-prose) { max-width: 32rem; color: #e0d8c3; }
.bread-note { width: fit-content; display: grid; grid-template-columns: auto auto; gap: .1rem 1.4rem; margin-top: 2.2rem; padding: 1rem 1.25rem; border-left: 2px solid var(--cafe); background: rgba(50,31,21,.62); }
.bread-note span { color: #d4bda0; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }
.bread-note span:last-child { grid-column: 1 / -1; }
.bread-note strong { color: var(--lamp-hot); font-family: var(--display); font-size: 1.4rem; font-weight: 400; }
.warmth-note { position: absolute; left: 11%; bottom: 18%; color: rgba(255,225,177,.62); font-family: var(--display); font-size: 1.05rem; font-style: italic; transform: rotate(-5deg); }

.dawn { position: relative; min-height: 114svh; padding: 13rem 9vw 7rem; overflow: hidden; background: linear-gradient(180deg, #0a0e12 0%, #1a2831 50%, #5f7180 87%, #9f9585 100%); }
.dawn::before { content: ''; position: absolute; inset: 30% -10% -25%; background: radial-gradient(ellipse at 70% 80%, rgba(239,191,133,.45), transparent 44%), repeating-linear-gradient(174deg, transparent 0 20px, rgba(216,225,219,.06) 21px, transparent 23px); }
.dawn-line { position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: rgba(203,216,217,.22); box-shadow: 0 30px 70px rgba(240,188,134,.1); }
.dawn-copy { position: relative; max-width: 70rem; z-index: 2; }
.dawn-copy h2 { max-width: 62rem; color: #f3e8d1; }
.dawn-copy > p:last-child { max-width: 34rem; margin-left: 47%; color: #e0e2db; }
.log-end { position: absolute; left: 9vw; bottom: 8rem; z-index: 2; display: grid; }
.log-end p { margin: 0; color: #d9c9b3; font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; }
.log-end strong { font-family: var(--display); font-size: 3.5rem; font-weight: 400; line-height: 1; }
.log-end span { color: #d6dbd7; font-size: .7rem; }
.walk-again { position: absolute; right: 9vw; bottom: 8rem; z-index: 2; min-height: 48px; display: inline-flex; align-items: center; gap: 1rem; color: #fff1cf; text-decoration: none; border-bottom: 1px solid rgba(255,241,207,.5); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; }
.walk-again,
.begin-walk { transition: color .25s, border-color .25s, text-shadow .25s; }
.walk-again:hover,
.walk-again:focus-visible,
.begin-walk:hover,
.begin-walk:focus-visible { color: #fff8df; border-color: #fff8df; text-shadow: 0 0 1.25rem rgba(229,184,92,.42); }

footer { position: relative; z-index: 6; min-height: 10rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3rem clamp(1.4rem, 5vw, 5rem); background: #080a0c; color: #9eabad; border-top: 1px solid rgba(183,198,203,.12); font-size: .65rem; letter-spacing: .08em; }
footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem 2rem; }
footer a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 5px; }
footer a:hover { color: var(--lamp-hot); }

.load-in .hero-copy > *, .load-in .hero-coordinate, .load-in .margin-note { animation: arrive .9s both cubic-bezier(.22,.75,.2,1); }
.load-in .hero-copy > *:nth-child(2) { animation-delay: .1s; }
.load-in .hero-copy > *:nth-child(3) { animation-delay: .2s; }
.load-in .hero-copy > *:nth-child(4) { animation-delay: .3s; }
.load-in .hero-coordinate { animation-delay: .44s; }
.load-in .margin-note { animation-delay: .55s; }
@keyframes arrive { from { opacity: .01; transform: translateY(18px); } }
.load-in .site-header > * { animation: header-arrive .8s .02s both cubic-bezier(.22,.75,.2,1); }
.load-in .site-header nav { animation-delay: .18s; }
.load-in .hero::before { animation: pool-ignite 1.45s .04s both cubic-bezier(.16,.72,.2,1); }
.load-in .lamp-fixture--hero i { animation: lamp-ignite 1.25s .08s both cubic-bezier(.16,.72,.2,1); }
@keyframes header-arrive { from { opacity: 0; transform: translateY(-.65rem); } }
@keyframes pool-ignite { from { opacity: .02; filter: saturate(.45) brightness(.5); } to { opacity: 1; filter: none; } }
@keyframes lamp-ignite { from { filter: brightness(.2); box-shadow: 0 0 0 rgba(229,184,92,0); } }

.route-time,
.hero-coordinate,
.time-stamp,
.route-cameo,
.bread-note,
.log-end,
.kicker { font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .site-header { padding-inline: 1.4rem 2rem; }
  .site-header nav a { display: none; }
  .route-meter { right: .65rem; }
  .hero { padding-inline: 2rem; }
  .hero-copy { margin-left: 7%; transform: translateY(-7vh); }
  .hero-deck, .begin-walk { margin-left: 27%; }
  .margin-note { right: 8%; top: 62%; }
  .pool-content--narrow { width: 75%; margin-left: 13%; }
  .pool-content--right { width: 72%; margin-left: 28%; padding-right: 3rem; }
  .lamp-fixture { opacity: .44; }
  .chair-silhouette { right: 5%; }
  .bridge-copy > p:last-child, .dawn-copy > p:last-child { margin-left: 37%; }
  .bakery-copy { margin-left: 26%; width: 70%; }
  .window-glow { right: -7%; width: 60%; }
}

@media (max-width: 600px) {
  body { font-size: 14px; line-height: 1.62; }
  .site-header { padding-inline: 1rem; background: rgba(8,10,12,.9); border-bottom: 1px solid rgba(183,198,203,.07); backdrop-filter: blur(9px); }
  .wordmark { font-size: 1.18rem; }
  .lantern-toggle { width: 44px; padding: 0; justify-content: center; }
  .lantern-toggle span { width: 8px; height: 8px; }
  .lantern-toggle { font-size: 0; }
  .route-meter { display: none; }
  .cursor-lamp { width: 20rem; }
  .hero { min-height: 100svh; padding: 7.5rem 1.25rem 4rem; align-items: center; }
  .hero-copy { margin: 0; padding-top: 1rem; transform: translateY(-4vh); }
  .kicker { gap: .8rem; margin-bottom: 1.5rem; font-size: .51rem; letter-spacing: .11em; }
  h1 { font-size: clamp(4.1rem, 20vw, 5.4rem); line-height: .86; }
  h1, h2 { letter-spacing: -.027em; }
  h1 em { margin: .1em 0 0 .2em; }
  .hero-deck { margin: 2.1rem 0 1.6rem 13%; max-width: 19rem; font-size: .92rem; }
  .begin-walk { margin-left: 13%; }
  .hero-coordinate { left: 1.25rem; right: 1.25rem; bottom: 1.7rem; gap: .45rem; justify-content: space-between; font-size: .48rem; letter-spacing: .07em; }
  .hero-coordinate span + span::before { display: none; }
  .margin-note { display: none; }
  .lamp-fixture--hero { left: 7%; top: 4%; }
  .darkness { min-height: 35svh; }
  .darkness--cat small { left: auto; right: 7%; }
  .cat { left: auto; right: 22%; }
  .lamp-pool { min-height: 112svh; }
  .lamp-pool::before { background: radial-gradient(circle 28rem at var(--pool-x) var(--pool-y), rgba(255,240,188,.2), rgba(229,184,92,.1) 35%, transparent 72%); }
  .lamp-fixture { left: 2%; top: 1%; transform: scale(.75); transform-origin: top left; }
  .lamp-fixture--right { left: auto; right: -4rem; transform-origin: top right; }
  .pool-content,
  .pool-content--narrow,
  .pool-content--right { width: auto; margin: 0; padding: 6rem 1.35rem 4rem 2.7rem; }
  .time-stamp { gap: .7rem; margin-bottom: 1.1rem; font-size: .52rem; letter-spacing: .1em; }
  .time-stamp::before { width: 1.4rem; }
  .time-stamp span { font-size: 1.25rem; }
  .pool-content h2, .sound-intro h2, .bridge h2, .dawn h2 { margin-bottom: 1.5rem; font-size: clamp(3.45rem, 16vw, 4.6rem); line-height: .89; }
  .prose-grid { display: block; }
  .prose-grid p + p { margin-top: 1rem; }
  blockquote { margin: 1.7rem 0 0 12%; font-size: 1.3rem; }
  .chair-silhouette { right: 0; bottom: 4%; transform: scale(.7); }
  .darkness--roofs { min-height: 42svh; }
  .darkness--roofs small { right: 9%; top: 39%; }
  .roofs .pool-content { padding-top: 4rem; }
  .window-ledger li { grid-template-columns: 3.2rem 1fr; padding: .75rem 0; }
  .window-ledger span { font-size: 1.3rem; }
  .bridge { min-height: 112svh; padding: 7rem 1.35rem 12rem 2.7rem; place-items: start center; align-content: center; }
  .bridge-copy > p:last-child { margin: 0 0 0 13%; }
  .bridge-whisper { left: auto; right: 8%; bottom: 8%; }
  .river-touch span { left: 2.7rem; top: 28%; }
  .river-reply { right: 1.35rem; top: 71%; max-width: 13rem; font-size: 1.05rem; }
  .sound-catalogue { min-height: 128svh; padding: 6rem 1rem; }
  .sound-intro { width: auto; margin: 12vh 1.5rem 0; }
  .sound-intro > p:last-child { margin-left: 12%; }
  .sounds { width: 100%; height: 30rem; }
  .sound--xl { left: 2%; top: 17%; font-size: 3.7rem; }
  .sound--sm { right: 3%; top: 2%; }
  .sound--md { left: 18%; top: 48%; font-size: 2.4rem; }
  .sound--xs { left: 5%; bottom: 19%; max-width: 11rem; }
  .sound--lg { right: 1%; bottom: 1%; max-width: 16.5rem; font-size: 2.65rem; text-align: right; }
  .sound--whisper { right: 5%; top: 32%; max-width: 9rem; font-size: 1rem; }
  .bus-ghost { right: -22rem; transform: scale(.75) skewX(-4deg); }
  .bus-stop .pool-content { padding-top: 4rem; }
  .route-cameo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
  .route-cameo div:last-child { grid-column: 1 / -1; }
  .route-cameo dd { font-size: 1.1rem; }
  .darkness--pause { min-height: 45svh; }
  .darkness--pause small { white-space: normal; width: 15rem; text-align: center; }
  .bakery { min-height: 125svh; }
  .bakery::before { background: radial-gradient(circle 34rem at 60% 51%, rgba(255,229,161,.31), rgba(240,168,93,.17) 38%, transparent 75%); }
  .window-glow { inset: 18% -46% auto auto; width: 96%; height: 66%; opacity: .78; }
  .bakery-copy { width: auto; margin: 0; padding-top: 6rem; }
  .warmth-note { left: 6%; bottom: 6%; }
  .bread-note { max-width: 100%; }
  .dawn { min-height: 100svh; padding: 7.5rem 1.35rem 4rem 2.7rem; }
  .dawn-copy > p:last-child { margin: 0 0 0 12%; }
  .log-end { left: 2.7rem; bottom: 6.1rem; }
  .log-end strong { font-size: 2.7rem; }
  .log-end span { max-width: 15rem; }
  .walk-again { right: 1.35rem; bottom: 2.5rem; }
  footer { align-items: flex-start; flex-direction: column; padding: 2.2rem 1.35rem; }
  footer p { margin: 0; }
  footer nav { justify-content: flex-start; gap: .1rem 1.2rem; }
}

/* Pass 2 — light behaves like a place, not a section background. */
.warmth-spill,
.carried-lamp,
.footfall {
  position: fixed;
  pointer-events: none;
}
.warmth-spill {
  inset: 0;
  z-index: 10;
  opacity: var(--warmth-spill, 0);
  background:
    radial-gradient(ellipse 76% 105% at 102% 60%, rgba(255,181,91,.2), rgba(164,80,33,.07) 41%, transparent 71%),
    linear-gradient(90deg, transparent 50%, rgba(255,208,131,.035));
  mix-blend-mode: screen;
  transition: opacity .18s linear;
}
.cursor-lamp {
  z-index: 12;
  width: 40rem;
  background:
    radial-gradient(circle at center, rgba(255,247,214,.13) 0 4%, rgba(240,197,105,.09) 19%, rgba(229,184,92,.035) 47%, transparent 68%);
}
.carried-lamp {
  z-index: 11;
  left: 50%;
  bottom: -15rem;
  width: min(40rem, 145vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,244,204,.17), rgba(230,181,82,.08) 31%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .45s ease;
}
.carried-lamp i {
  position: absolute;
  left: 50%;
  bottom: 14.5rem;
  width: 1.25rem;
  height: 1.75rem;
  border: 1px solid rgba(255,240,188,.7);
  border-radius: 50% 50% 30% 30%;
  transform: translateX(-50%);
  background: #d6a84e;
  box-shadow: 0 0 18px 7px rgba(229,184,92,.35);
}
body.lantern-on .carried-lamp { opacity: 1; }

.footfall {
  left: 50%;
  bottom: 1.15rem;
  z-index: 29;
  display: flex;
  align-items: center;
  gap: .35rem;
  opacity: 0;
  transform: translate(-50%, .7rem);
  transition: opacity .2s, transform .2s;
}
.footfall i {
  width: 5px;
  height: 11px;
  border-radius: 60% 45% 55% 40%;
  background: rgba(255,235,180,.64);
  transform: rotate(16deg) translateY(2px);
  box-shadow: 0 0 8px rgba(229,184,92,.36);
}
.footfall i:nth-child(2) { transform: rotate(-16deg) translateY(-2px); opacity: .5; }
.footfall span { margin-left: .25rem; color: rgba(224,227,219,.62); font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; }
body.is-walking .footfall { opacity: 1; transform: translate(-50%, 0); }
body.step-right .footfall i:first-child { opacity: .35; }
body.step-right .footfall i:nth-child(2) { opacity: 1; }

.lamp-pool::before { opacity: .2; transition: opacity .85s cubic-bezier(.22,.72,.24,1), transform .12s linear; }
.lamp-pool::after { opacity: .58; transition: opacity .85s ease; }
.lamp-pool .pool-content,
.lamp-pool .sound-intro,
.lamp-pool .sounds,
.lamp-pool .hero-copy,
.lamp-pool .hero-coordinate,
.lamp-pool .margin-note,
.lamp-pool .chair-silhouette,
.lamp-pool .window-glow,
.lamp-pool .warmth-note,
.lamp-pool .bakery-sign {
  opacity: .14;
  transform: translateY(2rem);
  transition: opacity .9s cubic-bezier(.22,.72,.24,1), transform .9s cubic-bezier(.22,.72,.24,1);
}
.lamp-pool.is-in-pool::before { opacity: 1; }
.lamp-pool.is-in-pool::after { opacity: 1; }
.lamp-pool.is-in-pool .pool-content,
.lamp-pool.is-in-pool .sound-intro,
.lamp-pool.is-in-pool .sounds,
.lamp-pool.is-in-pool .hero-copy,
.lamp-pool.is-in-pool .hero-coordinate,
.lamp-pool.is-in-pool .margin-note,
.lamp-pool.is-in-pool .chair-silhouette,
.lamp-pool.is-in-pool .window-glow,
.lamp-pool.is-in-pool .warmth-note,
.lamp-pool.is-in-pool .bakery-sign { opacity: 1; transform: translateY(0); }

.lamp-pool::after {
  background:
    linear-gradient(96deg, transparent 0 44%, rgba(180,199,204,.04) 44.15%, transparent 44.5%),
    radial-gradient(ellipse 82% 14% at 50% 91%, transparent 43%, rgba(154,178,183,.025) 43.4%, transparent 44%),
    radial-gradient(ellipse 56% 10% at 43% 88%, transparent 40%, rgba(229,184,92,.02) 40.5%, transparent 41%),
    repeating-linear-gradient(170deg, rgba(255,255,255,.017) 0 1px, transparent 1px 11px);
}
.lamp-pool:not(.hero)::selection { background: var(--lamp-hot); }

.darkness {
  background:
    radial-gradient(ellipse 30% 70% at 50% 50%, rgba(31,39,43,.13), transparent 72%),
    linear-gradient(#060809, #040506 46%, #07090a);
}
.darkness::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle 18rem at 50% 58%, rgba(235,197,111,.07), transparent 70%);
  transition: opacity .55s;
}
.darkness small { z-index: 2; opacity: .48; transition: opacity .4s, color .4s; }
body.lantern-on .darkness::after { opacity: 1; }
body.lantern-on .darkness small { opacity: 1; color: rgba(225,216,187,.62); }
.darkness--cat { min-height: 56svh; }
.darkness--pause { min-height: 72svh; }

.hero::before {
  background:
    radial-gradient(ellipse 25rem 53rem at 48% 35%, rgba(255,247,215,.25), rgba(225,181,88,.13) 26%, rgba(96,80,52,.055) 49%, transparent 71%),
    radial-gradient(ellipse 35rem 8rem at 49% 83%, rgba(151,176,183,.075), transparent 72%);
}
.hero h1 { text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2rem 5rem rgba(0,0,0,.46); }
.hero h1 em { text-shadow: 0 0 3rem rgba(229,184,92,.12); }
.hero-deck { border-left: 1px solid rgba(229,184,92,.35); padding-left: 1.35rem; }
.hero-coordinate { font-variant-numeric: tabular-nums; }

.time-stamp { font-variant-numeric: tabular-nums; }
.time-stamp span { text-shadow: 0 0 1.7rem rgba(229,184,92,.28); }
.pool-content h2,
.sound-intro h2,
.bridge h2,
.dawn h2 { line-height: .84; text-shadow: 0 1.25rem 3rem rgba(0,0,0,.4); }
.prose-grid,
.window-ledger p,
.bridge-copy > p:last-child,
.sound-intro > p:last-child,
.large-prose,
.bakery-copy > p,
.dawn-copy > p:last-child { color: #d7dad4; }

.sounds { list-style: none; padding: 0; }
.sound { text-shadow: 0 .7rem 2rem rgba(0,0,0,.62); }
.sound--whisper { color: rgba(201,211,210,.72); }
.sound--xs { color: rgba(228,225,207,.76); }

.bridge::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: -4%;
  right: -4%;
  top: 48%;
  height: 4rem;
  border-top: 3px double rgba(91,111,122,.42);
  border-bottom: 1px solid rgba(3,5,6,.9);
  background: repeating-linear-gradient(90deg, transparent 0 8rem, rgba(31,44,51,.9) 8rem 8.18rem);
  transform: rotate(-1deg);
  box-shadow: 0 1.5rem 2.6rem rgba(0,0,0,.8);
}
.bridge-copy { z-index: 4; }
.bridge-whisper { z-index: 4; }
.river span { box-shadow: 0 0 1rem rgba(240,190,95,.16); }

.bakery { isolation: isolate; }
.bakery::after {
  background:
    linear-gradient(104deg, transparent 0 42%, rgba(255,217,150,.07) 42.2%, transparent 43%),
    repeating-linear-gradient(170deg, rgba(255,236,199,.025) 0 1px, transparent 1px 11px);
}
.bakery-sign {
  position: absolute;
  right: 9%;
  top: 17%;
  z-index: 4;
  color: rgba(255,235,195,.64);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  line-height: .8;
  letter-spacing: .06em;
  text-align: right;
  transform: rotate(-1deg);
}
.bakery-sign span { color: rgba(242,209,164,.48); font-family: var(--body); font-size: .48rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.bread-note { box-shadow: 0 1.2rem 4rem rgba(43,19,7,.34); }

footer {
  min-height: 13rem;
  background:
    radial-gradient(circle 16rem at 84% 0, rgba(229,184,92,.045), transparent 72%),
    #07090a;
}
footer a { text-decoration-color: rgba(183,198,203,.42); transition: color .25s, text-decoration-color .25s; }
footer a:hover,
footer a:focus-visible { color: var(--lamp-hot); text-decoration-color: var(--lamp-hot); }

@media (max-width: 900px) and (min-width: 601px) {
  .lamp-pool.hero.is-in-pool .hero-copy { transform: translateY(-11vh); }
  .hero::before { background: radial-gradient(ellipse 22rem 46rem at 45% 34%, rgba(255,247,215,.24), rgba(225,181,88,.12) 29%, transparent 72%); }
  .bakery-sign { right: 4%; }
}

@media (max-width: 600px) {
  .lantern-toggle { width: auto; min-width: 66px; padding-inline: .75rem; font-size: .52rem; }
  .lantern-toggle b { display: inline; }
  .lantern-toggle span { width: 7px; height: 10px; border: 1px solid currentColor; border-radius: 50% 50% 25% 25%; background: rgba(135,154,165,.45); }
  .footfall { bottom: .7rem; }
  .footfall span { display: none; }
  .hero { padding-top: 6.8rem; }
  .lamp-pool.hero.is-in-pool .hero-copy { transform: translateY(-4vh); }
  .hero::before { background: radial-gradient(ellipse 19rem 38rem at 43% 38%, rgba(255,247,215,.23), rgba(225,181,88,.13) 31%, transparent 73%); }
  .hero-deck { padding-left: 1rem; }
  .lamp-pool::before { opacity: .12; }
  .lamp-pool.is-in-pool::before { opacity: 1; }
  .lamp-pool .pool-content,
  .lamp-pool .sound-intro,
  .lamp-pool .sounds { transform: translateY(1.15rem); }
  .lamp-pool.is-in-pool .pool-content,
  .lamp-pool.is-in-pool .sound-intro,
  .lamp-pool.is-in-pool .sounds { transform: none; }
  .darkness--cat { min-height: 48svh; }
  .darkness--pause { min-height: 56svh; }
  .bakery-sign { right: 5%; top: 17%; font-size: 1.25rem; opacity: .4 !important; }
  .window-glow { opacity: .66; }
  footer { min-height: 17rem; }
}

@media (hover: none) { .cursor-lamp { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #rain { display: none; }
  .lamp-pool::before, .lamp-fixture { transform: none !important; }
  .lamp-pool::before,
  .lamp-pool::after,
  .lamp-pool .pool-content,
  .lamp-pool .sound-intro,
  .lamp-pool .sounds,
  .lamp-pool .hero-copy,
  .lamp-pool .hero-coordinate,
  .lamp-pool .margin-note,
  .lamp-pool .chair-silhouette,
  .lamp-pool .window-glow,
  .lamp-pool .warmth-note,
  .lamp-pool .bakery-sign { opacity: 1 !important; transform: none !important; }
  .footfall { display: none; }
}