:root {
  --bg: #07060b;
  --ink: #efeae2;
  --muted: #a39fb0;
  --amber: #eca054;
  --violet: #8a5cff;
  --line: rgba(239, 234, 226, 0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; font-weight: 300; scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.bar { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; background: linear-gradient(to bottom, rgba(7,6,11,.75), rgba(7,6,11,0)); }
.bar-mark { height: 14px; max-width: 42vw; object-fit: contain; object-position: left; opacity: 0; transition: opacity .6s; }
.bar.solid .bar-mark { opacity: 1; }
.bar nav { display: flex; gap: 26px; align-items: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bar nav a:hover { color: var(--ink); }
.pill { border: 1px solid var(--amber); color: var(--amber) !important; padding: 7px 14px; border-radius: 999px; }

section[data-scroll] { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.hero { height: 280vh; }
.hero-img { position: absolute; inset: -4%; background-size: cover; background-position: center; will-change: transform, filter; }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(7,6,11,0) 35%, rgba(7,6,11,.75) 100%); }
.hero-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78vw, 1100px); opacity: 0; }
.hero-mark img { width: 100%; filter: drop-shadow(0 0 18px rgba(236,160,84,.55)); }
.hint { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }

.statement { height: 260vh; background: var(--bg); }
.statement .sticky { display: flex; align-items: center; justify-content: center; padding: 0 8vw; }
.lines { max-width: 1100px; font-size: clamp(28px, 4.2vw, 64px); line-height: 1.18; font-weight: 400; letter-spacing: -.01em; }
.lines span { display: block; opacity: .12; transition: opacity .25s linear; }
.lines span:nth-child(3) { color: var(--amber); }

.places { height: 600vh; background: var(--bg); }
.place { position: absolute; inset: 0; opacity: 0; }
.place .img { position: absolute; inset: -3%; background-size: cover; background-position: center; will-change: transform; }
.place-label { position: absolute; left: 6vw; bottom: 8vh; display: flex; flex-direction: column; gap: 10px; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.place-label .idx { font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.place-label .name { font-size: clamp(34px, 6vw, 88px); letter-spacing: .45em; font-weight: 300; }

.listen { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16vh 8vw;
  background: radial-gradient(ellipse at 50% 120%, rgba(138,92,255,.28), rgba(7,6,11,0) 60%), var(--bg); }
.listen h2 { font-size: clamp(36px, 6vw, 84px); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; }
.listen p { margin-top: 18px; color: var(--muted); font-size: 18px; }
.actions { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn { border: 1px solid var(--line); padding: 14px 24px; border-radius: 999px; font-size: 14px; letter-spacing: .08em; transition: border-color .2s, background .2s; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--amber); color: #1a1008; border-color: var(--amber); font-weight: 500; }

footer { border-top: 1px solid var(--line); padding: 48px 8vw 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.foot-icon { width: 44px; height: 44px; border-radius: 50%; }
.small { font-size: 12px; letter-spacing: .06em; }

/* place pages: /places/ and /places/<slug>/ ; each page sets --accent to its scene colour */
.bar-home { display: flex; }
.place-page .bar { background: rgba(7,6,11,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(239,234,226,.06); }
.place-label a { pointer-events: auto; }
.enter { font-size: 12px; letter-spacing: .3em; color: var(--ink); border-bottom: 1px solid var(--amber); padding-bottom: 4px; align-self: flex-start; }
.label { font-size: 12px; font-weight: 400; letter-spacing: .35em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.in { opacity: 1; transform: none; }

.p-hero { height: 210vh; }
.p-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,6,11,.85) 0%, rgba(7,6,11,0) 45%); }
.p-title { position: absolute; left: 6vw; bottom: 9vh; right: 6vw; display: flex; flex-direction: column; gap: 12px; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.p-title .idx { font-size: 12px; letter-spacing: .3em; color: var(--accent); }
.p-title .name { font-size: clamp(40px, 8vw, 120px); font-weight: 300; letter-spacing: .4em; line-height: 1; position: relative; }
.p-title .meta { font-size: 15px; letter-spacing: .08em; color: var(--muted); }
.glitch .name { animation: jolt .9s steps(2, end) 1; }
.glitch .name::before, .glitch .name::after { content: attr(data-text); position: absolute; inset: 0; opacity: .8; }
.glitch .name::before { color: var(--accent); transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); animation: slice .9s steps(3, end) 1 forwards; }
.glitch .name::after { color: #7ff; transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); animation: slice .9s steps(3, end) .12s 1 forwards; }
@keyframes jolt { 0% { transform: translateX(-4px); } 30% { transform: translateX(6px); } 60% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes slice { 0% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; } }

.p-intro { padding: 22vh 8vw 14vh; display: flex; justify-content: center; }
.p-intro p { max-width: 1050px; font-size: clamp(24px, 3.1vw, 44px); line-height: 1.3; font-weight: 400; letter-spacing: -.005em; }

.p-memory, .p-log, .p-sounds { padding: 10vh 8vw; display: flex; flex-direction: column; align-items: center; }
.p-memory .label, .p-log .label, .p-sounds .label { width: min(680px, 100%); }
.p-memory .text { width: min(680px, 100%); font-size: 20px; line-height: 1.75; color: #d9d4cc; }
.p-memory .text p + p { margin-top: 1.25em; }
.p-memory .text p:first-child { font-size: 26px; line-height: 1.45; color: var(--ink); }
.p-memory .text a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.p-memory .by { font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--accent) !important; margin-top: 2.2em !important; }

.log { width: min(680px, 100%); border: 1px solid var(--line); border-left: 2px solid var(--accent); background: rgba(255,255,255,.025);
  padding: 26px 28px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.9; color: #cfcad8; }
.log-title { color: var(--accent); letter-spacing: .08em; margin-bottom: 10px; }
.log ol { list-style: none; }
.log li { display: flex; gap: 22px; min-height: 1.9em; }
.log time { color: var(--muted); flex: none; }
.log.typing li { visibility: hidden; }
.log.typing li.on { visibility: visible; }
.log li.cur span::after { content: "▌"; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.p-sounds ul { width: min(680px, 100%); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.p-sounds li { border-top: 1px solid var(--line); padding-top: 14px; font-size: 17px; color: #d9d4cc; position: relative; }
.p-sounds li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--accent); }

.p-cta { padding: 16vh 8vw; text-align: center; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 22%, transparent), rgba(7,6,11,0) 60%), var(--bg); }
.p-cta h2 { font-size: clamp(30px, 5vw, 64px); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; }
.p-cta p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.p-cta .btn.primary { background: var(--accent); border-color: var(--accent); color: #0d0a08; }

.p-nav { display: grid; grid-template-columns: 1fr 1fr; }
.p-tile, .pl-tile { position: relative; display: block; overflow: hidden; }
.p-tile { aspect-ratio: 16 / 7; }
.p-tile .img, .pl-tile .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s ease, filter 1.2s ease; filter: brightness(.7); }
.p-tile:hover .img, .pl-tile:hover .img { transform: scale(1.05); filter: brightness(1); }
.p-tile-label, .pl-label { position: absolute; left: 32px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.p-tile-label .idx, .pl-label .idx { font-size: 11px; letter-spacing: .3em; color: var(--accent); }
.p-tile-label .name { font-size: clamp(22px, 3vw, 40px); letter-spacing: .35em; font-weight: 300; }

.pl-head { background: linear-gradient(to bottom, rgba(7,6,11,.62), var(--bg) 96%), url('/assets/halo_small.webp') center 30% / cover;
  padding: 28vh 8vw 10vh; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.pl-head .eyebrow { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--amber); }
.pl-head h1 { font-size: clamp(44px, 9vw, 140px); font-weight: 300; letter-spacing: .4em; margin-right: -.4em; }
.pl-head p { max-width: 720px; font-size: 19px; line-height: 1.7; color: var(--muted); }
.pl-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10vh; }
.pl-tile { aspect-ratio: 21 / 8; }
.pl-label { left: 6vw; bottom: 8%; }
.pl-label .name { font-size: clamp(30px, 5.5vw, 80px); letter-spacing: .4em; font-weight: 300; }
.pl-label .meta { font-size: 14px; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 700px) {
  .p-title .name { letter-spacing: .22em; }
  .p-memory .text { font-size: 18px; }
  .p-memory .text p:first-child { font-size: 22px; }
  .log { padding: 20px 16px; font-size: 12.5px; }
  .log li { gap: 12px; }
  .p-sounds ul { grid-template-columns: 1fr; }
  .p-nav { grid-template-columns: 1fr; }
  .p-tile-label, .pl-label { left: 16px; bottom: 16px; }
  .pl-tile { aspect-ratio: 16 / 10; }
  .pl-label .name { letter-spacing: .22em; }
  .pl-head h1 { letter-spacing: .2em; margin-right: -.2em; }
}

@media (max-width: 700px) {
  .bar { padding: 14px 16px; }
  .bar nav { gap: 14px; font-size: 11px; }
  .bar nav a:not(.pill):not([href="/places/"]) { display: none; }
  .bar-mark { height: auto; width: 40vw; }
  .hero-mark { width: 88vw; }
  .place-label .name { letter-spacing: .25em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .statement, .places { height: auto; }
  .sticky { position: relative; height: auto; min-height: 100vh; }
  .hero-mark, .place, .lines span { opacity: 1 !important; }
  .place { position: relative; height: 100vh; }
  .p-hero { height: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}