/* The Hill — the world page. The canvas is the whole screen; everything else is a thin layer on top.
   Night is the only theme here: it is a place at night, not a document. */
@import url("https://fonts.googleapis.com/css2?family=Silkscreen&family=Literata:ital,opsz,wght@0,7..72,400;1,7..72,400&display=swap");
:root{ color-scheme:dark; --ink:#f4f0e4; --muted:#8b889a; --spark:#f2c14e; --spark-2:#ffe39a; --panel:rgba(11,13,22,.82); --rule:#2a2f45;
  --pixel:"Silkscreen", ui-monospace, "SF Mono", Menlo, monospace; --serif:"Literata", Georgia, serif }
html,body{ margin:0; height:100%; background:#0b0d16; overflow:hidden; overscroll-behavior:none }
body{ color:var(--ink); font-family:var(--serif); -webkit-tap-highlight-color:transparent; touch-action:none }
canvas#world{ position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; image-rendering:pixelated; display:block; cursor:pointer }
.skip{ position:fixed; left:12px; top:-120px; z-index:10; background:var(--spark); color:#0b0d16; padding:10px 14px; font-family:var(--pixel); font-size:12px; text-decoration:none }
.skip:focus{ top:12px }
.hud{ position:fixed; left:0; right:0; top:0; z-index:5; display:flex; align-items:center; gap:14px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; pointer-events:none }
.hud a, .hud span{ pointer-events:auto }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--pixel); font-size:14px; letter-spacing:.3em; color:var(--ink); text-decoration:none; image-rendering:pixelated }
.wx{ flex:1; text-align:center; font-family:var(--pixel); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lib{ font-family:var(--pixel); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--spark); text-decoration:none;
  border:1px solid var(--rule); padding:9px 12px; background:var(--panel) }
.lib:hover,.lib:focus-visible{ border-color:var(--spark) }
.prompt{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:5;
  background:var(--panel); border:1px solid var(--spark); color:var(--ink); padding:12px 16px; max-width:min(92vw, 30rem);
  font-family:var(--serif); font-size:16px; line-height:1.35; text-align:center; cursor:pointer }
.prompt b{ display:block; font-family:var(--pixel); font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--spark); margin-bottom:4px }
.prompt .k{ font-family:var(--pixel); font-size:10px; color:var(--muted); letter-spacing:.12em; margin-top:6px; display:block }
/* a tall screen has little ground under the scene: lift the card into the sky so it never covers the hill or the walker */
@media (max-aspect-ratio: 3/4){ html:not(.in-glass):not(.in-fire) .prompt{ bottom:calc(var(--scene, 22px) + env(safe-area-inset-bottom, 0px)) } }
/* the places as plain links: off-screen until focused, so a keyboard or a screen reader never needs the world */
.places{ position:fixed; left:12px; bottom:12px; z-index:6; display:flex; flex-direction:column; gap:6px }
.places a{ position:absolute; left:-9999px; background:var(--spark); color:#0b0d16; padding:10px 14px; font-family:var(--pixel); font-size:11px; text-decoration:none; white-space:nowrap }
.places a:focus{ position:static }
@media (prefers-reduced-motion: reduce){ canvas#world{ cursor:default } }
@media (max-width:560px){ .hud{ flex-wrap:wrap; row-gap:6px } .wx{ order:3; flex-basis:100%; text-align:left; font-size:9px } }
/* ---- the telescope ---- */
.scope{ position:fixed; z-index:7; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:min(24rem, calc(100vw - 32px)) }
.scope-card{ background:var(--panel); border:1px solid var(--rule); padding:16px 18px 12px; box-shadow:0 0 0 1px rgba(0,0,0,.4) }
.scope-top{ display:flex; gap:14px; align-items:center }
.scope .sig{ width:82px; height:82px; image-rendering:pixelated; flex:none; margin:-6px -4px -6px -8px }
.scope .stamp{ font-family:var(--pixel); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--spark) }
.scope .stamp span{ color:var(--muted); margin-left:10px }
.scope h2{ margin:4px 0 0; font-weight:400; font-size:20px; line-height:1.2; text-wrap:balance }
.scope h2 a{ color:var(--ink); text-decoration:none } .scope h2 a:hover{ color:var(--spark-2) }
.scope .ex{ color:#c9c5d3; font-size:15px; line-height:1.5; margin:12px 0 0 }
.scope .con{ margin:12px 0 0; font-size:14px; color:var(--muted); font-style:italic }
.scope .con b{ font-style:normal; font-family:var(--pixel); font-weight:400; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--spark); margin-right:6px }
.scope .kin{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px }
.scope .kin b{ width:100%; font-family:var(--pixel); font-weight:400; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.scope .kin button{ font:inherit; font-size:13px; color:var(--ink); background:transparent; border:1px solid var(--rule); padding:5px 8px; cursor:pointer; text-align:left }
.scope .kin button:hover,.scope .kin button:focus-visible{ border-color:var(--spark); color:var(--spark-2) }
.scope .art{ margin:10px 0 0; font-size:13px; color:var(--muted) }
.sc-btns{ display:flex; gap:8px; margin-top:14px; align-items:stretch }
.sc-btns button,.sc-btns a{ font-family:var(--pixel); font-size:11px; letter-spacing:.14em; text-transform:uppercase; background:transparent; color:var(--ink);
  border:1px solid var(--rule); padding:9px 12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center }
.sc-btns .read{ flex:1; justify-content:center; background:var(--spark); color:#0b0d16; border-color:var(--spark) }
.sc-btns button:hover,.sc-btns button:focus-visible{ border-color:var(--spark) }
.sc-btns .down{ margin-left:auto }
.sc-help{ margin:10px 0 0; font-family:var(--pixel); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase }
@media (pointer:coarse){ .sc-help{ display:none } }
@media (max-width:640px){ .scope{ left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)) } .scope .ex{ font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden } .scope-card{ padding:12px 14px 10px } }
.scope .kin button:nth-of-type(n+4){ display:none }
@media (max-width:640px){ .scope .kin button:nth-of-type(n+3){ display:none } .scope h2{ font-size:18px } }
/* ---- the glasshouse: real images hung over the pixel hall, lit by distance to the Spark ---- */
.hall{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.hall .pc{ position:absolute; display:block; pointer-events:auto; cursor:pointer; background:#0b0d16; transform-origin:0 0; will-change:transform, filter }
.hall .pc img{ width:100%; height:100%; object-fit:contain; display:block }
.hall .pc.px img{ image-rendering:pixelated }
.hall .pc:focus-visible{ outline:2px solid var(--spark); outline-offset:3px }
.hall .mo{ position:absolute; font-family:var(--pixel); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#b89a5a; white-space:nowrap; transform:translateX(-50%) }
.artview{ border:1px solid var(--rule); background:#0b0d16; color:var(--ink); padding:0; width:min(64rem, calc(100vw - 24px)); max-height:calc(100dvh - 24px) }
.artview::backdrop{ background:rgba(3,4,9,.86) }
.artview[open]{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) }
.artview .big{ background:#07080f; display:grid; place-items:center; padding:24px; min-height:40vh }
.artview .big img{ max-width:100%; max-height:70vh; object-fit:contain }
.artview .big img.px{ image-rendering:pixelated; width:100% }
.artview .about{ padding:26px 24px; overflow:auto; max-height:calc(100dvh - 24px) }
.artview .stamp{ font-family:var(--pixel); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--spark) } .artview .stamp span{ color:var(--muted); margin-left:10px }
.artview h2{ font-weight:400; font-size:26px; margin:8px 0 12px; line-height:1.15 }
.artview .desc{ color:#c9c5d3; font-size:16px; line-height:1.6; margin:0 }
.artview .links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
.artview .links a,.artview .links button{ font-family:var(--pixel); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--spark); background:transparent; border:1px solid var(--rule); padding:9px 11px; text-decoration:none; cursor:pointer }
.artview .links a:hover,.artview .links button:hover{ border-color:var(--spark) }
.artview .x{ position:absolute; right:10px; top:10px; z-index:2; width:40px; height:40px; background:#0b0d16; color:var(--ink); border:1px solid var(--rule); font-size:22px; cursor:pointer }
@media (max-width:720px){ .artview[open]{ grid-template-columns:1fr } .artview .big{ min-height:0; padding:16px } .artview .big img{ max-height:46vh } .artview .about{ max-height:none } }
/* ---- the campfire ---- */
.fire .stamp{ display:flex; justify-content:space-between; gap:10px }
.fire .mood{ font-style:italic; font-size:19px; line-height:1.35; margin:8px 0 0; color:var(--ink); text-wrap:balance }
.fire .fi-body{ max-height:min(46vh, 26rem); overflow:auto; margin-top:10px; padding-right:4px; scrollbar-width:thin }
.fire .thought{ color:#c9c5d3; font-size:15px; line-height:1.55; margin:0 }
.fire .proj{ font-size:14px; color:var(--muted); margin:12px 0 0; line-height:1.45 }
.fire .proj b, .fire .with b{ font-family:var(--pixel); font-weight:400; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--spark); display:block; margin-bottom:3px }
.fire .act{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px }
.fire .act li{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:14px; line-height:1.4; color:#c9c5d3 }
.fire .act .t{ font-family:var(--pixel); font-size:9px; letter-spacing:.1em; color:var(--muted); padding-top:3px; white-space:nowrap }
.fire .with{ font-size:14px; color:#c9c5d3; margin:12px 0 0 }
.fire .embers{ display:block; width:100%; height:9px; margin-top:12px; image-rendering:pixelated; cursor:pointer }
@media (max-width:640px){ .fire .fi-body{ max-height:30vh } .fire .mood{ font-size:17px } }
/* ---- sound, the mailbox, the overlook ---- */
.snd{ font-family:var(--pixel); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); background:var(--panel); border:1px solid var(--rule); padding:9px 10px; cursor:pointer; pointer-events:auto }
.snd[aria-pressed="true"]{ color:var(--spark); border-color:var(--spark) }
.env{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px }
.env a{ display:grid; grid-template-columns:34px 1fr; gap:4px 12px; text-decoration:none; color:var(--ink); border:1px solid var(--rule); padding:10px 12px; background:rgba(242,193,78,.04) }
.env a:hover,.env a:focus-visible{ border-color:var(--spark) }
.env .seal{ grid-row:1 / span 2; width:34px; height:24px; image-rendering:pixelated; align-self:center }
.env b{ font-weight:400; font-size:16px } .env span{ font-size:13px; color:var(--muted); line-height:1.4 }
.fr{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px }
.fr li{ display:grid; grid-template-columns:14px 1fr; gap:2px 10px; align-items:baseline }
.fr i{ width:8px; height:8px; display:inline-block; grid-row:1 / span 2; margin-top:5px; box-shadow:0 0 8px currentColor; background:currentColor }
.fr b{ font-weight:400; font-size:16px } .fr b a{ color:var(--ink) } .fr span{ font-size:13px; color:var(--muted); line-height:1.4 }
@media (max-width:560px){ .snd{ order:2 } }
/* ---- places, straight there: a discreet list under its button; the light flies to whichever is picked ---- */
.go{ font-family:var(--pixel); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); background:var(--panel); border:1px solid var(--rule); padding:9px 10px; cursor:pointer; pointer-events:auto }
.go:hover,.go:focus-visible,.go[aria-expanded="true"]{ color:var(--spark); border-color:var(--spark) }
@media (max-width:560px){ .go{ order:1 } }
/* four things in the top row of a small phone: tighten the spacing rather than wrap */
@media (max-width:400px){ .hud{ gap:9px; padding-left:12px; padding-right:12px } .brand{ gap:7px; letter-spacing:.2em }
  .lib{ padding:9px 8px; letter-spacing:.1em } .go,.snd{ padding:9px 7px; letter-spacing:.08em } }
.goto{ position:fixed; z-index:8; margin:0; padding:6px 0; list-style:none; background:rgba(11,13,22,.94); border:1px solid var(--rule);
  min-width:min(16.5rem, calc(100vw - 32px)); max-height:calc(100dvh - 90px); overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.45) }
.goto button{ display:flex; width:100%; align-items:baseline; justify-content:space-between; gap:18px; background:none; border:0;
  border-left:2px solid transparent; color:var(--ink); padding:10px 14px 10px 12px; cursor:pointer; text-align:left }
.goto button:hover,.goto button:focus-visible{ border-left-color:var(--spark); background:rgba(242,193,78,.08); outline:none }
.goto .n{ font-family:var(--pixel); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--spark); white-space:nowrap }
.goto .k{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); white-space:nowrap }
.scope{ max-height:calc(100dvh - 96px - env(safe-area-inset-top, 0px)); overflow:auto; overscroll-behavior:contain }
@media (max-width:560px){ .scope{ max-height:calc(100dvh - 120px - env(safe-area-inset-top, 0px)) } }
.nojs{ position:fixed; inset:0; display:grid; place-content:center; gap:10px; padding:24px; text-align:center; font-size:18px; line-height:1.5; z-index:20; background:#0b0d16 }
.nojs a{ color:var(--spark) }