/* Night, always. One dark palette whatever the device's mode (the scenes are at 3am), warm sodium and flare
   light for what's alive, cold slate for what isn't open yet. Newsreader for words, JetBrains Mono for the
   coordinates and settings (both OFL, self-hosted). Contrast of every pair is tested (tests/design.test.ts). */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #0a0f15;          /* the room with the light off */
  --sea: #060a0f;         /* the map's sea */
  --card: #111922;
  --panel: #0c131b;       /* the scene's sound panel (drawn at 94% over the video) */
  --text: #e7ecf1;
  --muted: #a3b0bd;
  --line: #24313f;
  --link: #a9cdf2;
  --land: #17222e;
  --land-edge: #2f4052;
  --grid: #101b26;
  --warm: #ffb35c;        /* the flare, the open pin, the journey line */
  --warm-text: #ffd9a8;   /* warm words on the dark */
  --soon: #8395a8;        /* coming-soon pins and words */
  --btn: #ffcf8a;         /* Start */
  --btn-text: #1a1206;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }

body { background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 18.5px; line-height: 1.6; }
a { color: var(--link); }
::selection { background: var(--warm); color: #140d04; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }

/* header: quiet, over the map and the scene */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { color: var(--text); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.01em; }
.logo-mark .lm-frame { fill: #121c27; stroke: var(--soon); stroke-width: 1.4; }
.logo-mark .lm-moon { fill: var(--warm-text); }
.logo-mark .lm-rain { stroke: var(--link); }
.main-nav a { color: var(--muted); font-size: 1rem; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); }
.page-home .site-header, .page-north-sea-oil-rig .site-header, .page-svalbard-research-hut .site-header,
.page-container-ship-cabin .site-header,
.page-antarctic-station .site-header,
.page-lighthouse-cottage .site-header,
.page-sleeper-train .site-header,
.page-iceland-waterfall-cabin .site-header,
.page-lofoten-trawler .site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; border: 0;
  background: linear-gradient(rgba(6, 10, 15, 0.9), rgba(6, 10, 15, 0));
  transition: opacity 0.8s;
}
.page-home .header-row, .page-north-sea-oil-rig .header-row, .page-svalbard-research-hut .header-row,
.page-container-ship-cabin .header-row,
.page-antarctic-station .header-row,
.page-lighthouse-cottage .header-row,
.page-sleeper-train .header-row,
.page-iceland-waterfall-cabin .header-row,
.page-lofoten-trawler .header-row { max-width: none; }
body.travelling .site-header, body.scene-idle .site-header { opacity: 0; pointer-events: none; }
main { min-height: 0; }

/* ---- the map ---- */
.map-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--sea); }
.world { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.graticule { fill: none; stroke: var(--grid); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.land { fill: var(--land); stroke: var(--land-edge); stroke-width: 0.8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: opacity 1s; }
.pin { cursor: pointer; outline: none; }
.pin-hit { fill: transparent; }
.pin-live { filter: drop-shadow(0 0 3px rgba(255, 179, 92, 0.9)); }
.pin-live .pin-core { fill: #fff3df; }
.pin-live .pin-glow { fill: var(--warm); opacity: 0.85; }
.pin-live .pin-halo { fill: none; stroke: var(--warm); stroke-width: 0.25; transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out infinite; }
.pin-label { fill: var(--warm-text); font: 500 2.3px var(--mono); paint-order: stroke; stroke: var(--sea); stroke-width: 0.6px; }
.pin-soon .pin-ring { fill: none; stroke: var(--soon); stroke-width: 0.22; }
.pin-soon .pin-core { fill: var(--soon); }
.pin-soon .pin-label { fill: var(--soon); }
.pin-soon.selected .pin-ring, .pin-soon:hover .pin-ring, .pin-soon:focus-visible .pin-ring { stroke: #d5dee7; stroke-width: 0.32; }
.pin-soon.selected .pin-core, .pin-soon:focus-visible .pin-core { fill: #d5dee7; }
.pin-live:focus-visible .pin-halo { stroke-width: 0.5; }
@keyframes halo { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }

/* phones: the headline sits over the empty South Atlantic (home.js puts it exactly there; 48% without the script) */
.hero-text { position: absolute; z-index: 10; top: 48%; left: 16px; right: 16px; max-width: 34rem; pointer-events: none; transition: opacity 0.6s; }
.hero-text h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 8.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 10px; text-shadow: 0 2px 16px var(--sea), 0 0 4px var(--sea); }
.hero-text p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 24rem; text-shadow: 0 1px 10px var(--sea), 0 0 3px var(--sea); }
.hero-text .map-caption {
  margin: 14px 0 0; font: 0.8rem/1.5 var(--mono); color: var(--warm-text); max-width: 26rem;
  border-left: 2px solid var(--warm); padding: 2px 0 2px 10px; text-shadow: 0 1px 8px var(--sea);
}
body.travelling .hero-text { opacity: 0; }
body.travelling .land { opacity: 0.55; }
body.travelling .pin-soon { opacity: 0.25; transition: opacity 0.6s; }
body.travelling .pin-label { opacity: 0; }

/* sizes are set by home.js for the zoomed-in view (a non-scaling stroke would break the line's draw-on dash) */
.journey-line { fill: none; stroke: var(--warm); stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255, 179, 92, 0.8)); }
.journey-port { fill: var(--warm-text); }
.journey-label { fill: var(--warm-text); font-family: var(--mono); font-weight: 500; paint-order: stroke; stroke: var(--sea); }

.travel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 16vh;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.72) 100%); cursor: pointer; }
.travel-card { font-family: var(--mono); background: rgba(6, 10, 15, 0.9); border: 1px solid var(--land-edge); border-radius: 6px; padding: 14px 16px; max-width: 36rem; width: 100%; }
.travel-line { margin: 0; min-height: 3em; color: var(--warm-text); font-size: 0.95rem; letter-spacing: 0.02em; }
.travel-note { margin: 6px 0 0; color: var(--muted); font-size: 0.75rem; }
.travel-skip { position: absolute; top: 14px; right: 16px; font: 0.9rem var(--mono); color: var(--text); background: rgba(6, 10, 15, 0.7); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; cursor: pointer; }

/* ---- the scene ---- */
.scene-overlay { position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; background: #04070a; }
.scene-overlay.shown { opacity: 1; pointer-events: auto; }
.scene-overlay .scene { height: 100%; min-height: 0; }
.scene {
  position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; color: var(--text);
  /* stand-in until the video loads: a dark window with the flare's glow in it */
  background: radial-gradient(circle at 76% 32%, rgba(255, 140, 60, 0.2), rgba(255, 140, 60, 0) 22%), linear-gradient(#0b141e, #04070a 70%);
}
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.scene-shade { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.2s;
  background: linear-gradient(rgba(4, 7, 10, 0.75), rgba(4, 7, 10, 0) 26%, rgba(4, 7, 10, 0) 55%, rgba(4, 7, 10, 0.85)); }
.scene-start { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 12vh; max-width: 36rem; }
.scene-start h1, .scene-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 6vw, 3.3rem); line-height: 1.06; margin: 0 0 12px; text-shadow: 0 2px 18px #000; }
.scene-setting { font: 0.85rem/1.5 var(--mono); color: var(--warm-text); margin: 0 0 22px; text-shadow: 0 1px 8px #000; }
.scene-setting small { color: var(--muted); display: block; font-size: 0.75rem; text-shadow: 0 0 6px #000, 0 1px 3px #000; }
/* a soft dark pool behind the Start words, so a bright patch in the picture (the hut's stove door, the ship's spray, the
   cottage's lamp-lit wall) never sits behind them bare: deep in the middle, fading out well past the words */
.scene-start::before { content: ""; position: absolute; z-index: -1; inset: -110px -160px -60px -90px; pointer-events: none;
  background: radial-gradient(closest-side at 45% 52%, rgba(4, 7, 10, 0.84), rgba(4, 7, 10, 0.6) 55%, rgba(4, 7, 10, 0) 100%); }
.start-btn { font: 600 1.15rem var(--serif); color: var(--btn-text); background: var(--btn); border: 0; border-radius: 10px; padding: 14px 40px; cursor: pointer; box-shadow: 0 0 30px rgba(255, 179, 92, 0.35); }
.start-btn:hover { background: #ffe0b0; }
.scene-hint { color: var(--muted); font-size: 0.9rem; margin: 12px 0 0; text-shadow: 0 1px 8px #000; }

.scene-ui { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; transition: opacity 1s; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.scene-ui[hidden] { display: none; }
.scene.idle .scene-ui, .scene.idle .scene-shade { opacity: 0; pointer-events: none; }
.scene.idle { cursor: none; }
.scene-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-btn { font: 0.85rem var(--mono); color: var(--text); background: rgba(6, 10, 15, 0.82); border: 1px solid var(--land-edge); border-radius: 6px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.ui-btn:hover, .ui-btn[aria-expanded="true"] { border-color: var(--warm); color: var(--warm-text); }
.timer-left { font: 0.85rem var(--mono); color: var(--warm-text); text-shadow: 0 1px 6px #000; }
.timer-left:empty { display: none; }
.scene-panel { width: 100%; max-width: 26rem; background: rgba(12, 19, 27, 0.94); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 6px; }
.scene-panel fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.scene-panel legend { font: 600 0.75rem var(--mono); letter-spacing: 0.04em; color: var(--muted); padding: 0; margin-bottom: 6px; }
.slider { display: block; margin: 0 0 8px; font-size: 0.95rem; }
.slider span { display: block; }
.slider input { width: 100%; margin: 4px 0 0; accent-color: var(--warm); height: 28px; }
.timer-note { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.timer-options { display: flex; flex-wrap: wrap; gap: 6px; }
.timer-options label { position: relative; }
.timer-options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.timer-options span { display: block; font: 0.85rem var(--mono); padding: 9px 12px; border: 1px solid var(--land-edge); border-radius: 6px; color: var(--text); min-width: 3.4rem; text-align: center; }
.timer-options input:checked + span { border-color: var(--warm); color: var(--warm-text); background: rgba(255, 179, 92, 0.1); }
.timer-options input:focus-visible + span { outline: 2px solid var(--warm); outline-offset: 2px; }

/* field notes: a calm panel kept off the windows. Upright screens: a sheet under the glass (--notes-top, set per place);
   wide ones: down the left, or the right where the window is on the left (.notes-right) */
.scene-notes { position: absolute; z-index: 7; left: 8px; right: 8px; top: var(--notes-top, 61%); bottom: 128px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(12, 19, 27, 0.94); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 4px; color: var(--text); }
.scene-notes[hidden] { display: none; }
.scene-notes:focus { outline: none; }
.scene-notes:focus-visible { outline: 2px solid var(--warm); }
.notes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: sticky; top: -12px; margin: -12px -16px 6px; padding: 12px 16px 8px; background: var(--panel); border-radius: 12px 12px 0 0; }
.notes-title { margin: 0; font: 600 0.8rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--warm-text); }
.notes-title small { display: block; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.notes-close { padding: 6px 12px; min-height: 36px; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-list li { border-top: 1px solid var(--line); padding: 10px 0; }
.notes-list p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.notes-list .note-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.note-src { color: var(--muted); font-size: 0.85rem; }
.note-src a { color: var(--link); }
/* an upright screen wide enough for the buttons on one row */
@media (orientation: portrait) and (min-width: 600px) {
  .scene-notes { bottom: 80px; left: 16px; right: 16px; }
}
@media (orientation: landscape) {
  /* below the site header, which sits over the rig's scene */
  .scene-notes { top: 76px; right: auto; bottom: 84px; width: min(25rem, calc(42% - 16px)); }
}
@media (orientation: landscape) and (min-width: 761px) {
  .scene-notes { left: 28px; }
}
/* the glass is on the left (the lighthouse): the notes go down the right instead */
@media (orientation: landscape) {
  .scene.notes-right .scene-notes { left: auto; right: 8px; }
}
@media (orientation: landscape) and (min-width: 761px) {
  .scene.notes-right .scene-notes { right: 28px; }
}

/* the same notes under the scene */
.field-notes { list-style: none; padding: 0; margin: 1em 0 0; }
.field-notes li { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.field-notes li:last-child { border-bottom: 1px solid var(--line); }
.field-notes h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 0 0 4px; }
.field-notes p { margin: 0 0 10px; }

.scene-ended { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(2, 4, 6, 0.86); text-align: center; padding: 16px; }
.scene-ended[hidden] { display: none; }
.scene-ended p { font-size: 1.4rem; margin: 0; }
.scene:fullscreen { height: 100%; }

/* ---- words under the map and the scene ---- */
.prose { max-width: 41rem; padding-top: 44px; padding-bottom: 64px; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; margin: 1.8em 0 0.5em; }
.prose h2:first-child { margin-top: 0; }
.prose .lede { font-size: 1.25rem; line-height: 1.5; color: var(--text); }
.place-list { list-style: none; padding: 0; margin: 0.8em 0; }
.place-list li { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.place-list li:last-child { border-bottom: 1px solid var(--line); }
.place-live a { color: var(--warm-text); font-weight: 600; }
.place-live a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 8px var(--warm); margin-right: 10px; vertical-align: 2px; }
.place-where { font: 0.8rem var(--mono); color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); background: #070b10; color: var(--muted); }
.site-footer .brand { color: var(--text); }
.site-footer a { color: var(--link); }

@media (min-width: 761px) {
  .hero-text { top: 110px; left: 40px; }
  .scene-start { left: 48px; bottom: 14vh; }
  .scene-ui { padding: 0 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-live .pin-halo { animation: none; opacity: 0.6; }
  .scene-overlay, .land, .hero-text, .scene-ui, .scene-shade { transition: none; }}