/* Nordlys, the website: a star atlas of the sky over a new tab.
   Plate black under ivory chart ink, hairline graticules, Bodoni capitals for
   the plates and Schibsted Grotesk for everything read. One lamp red, by law
   only for the main action and what is live. The sky itself is the product's
   own engine on #bg-canvas, behind the whole page. */

@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --plate: #07080c;
  --plate-2: #0d0f15;
  --ink: #e9e4d4;
  --ink-2: rgb(233 228 212 / 0.76);
  --ink-3: rgb(233 228 212 / 0.6);
  --hair: rgb(233 228 212 / 0.14);
  --hair-2: rgb(233 228 212 / 0.26);
  --lamp: #ff6a4d;
  --lamp-hover: #ff8166;
  --lamp-ink: #1c0802;
  /* The sky's colours: the engine reads these (a plate sets its own). */
  --shader-1: #35d6c0;
  --shader-2: #5b6cff;
  --shader-3: #9d4edd;
  --display: "Bodoni Moda", "Bodoni 72", Didot, serif;
  --text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 5vw, 76px);
  --nav-h: 68px;
  /* The planisphere's window, set in pixels by site.js; these hold until then. */
  --cx: 66%;
  --cy: 52%;
  --r: min(36vh, 27vw);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.on-phone { display: none; }

html {
  background: var(--plate);
  color: var(--ink);
  color-scheme: dark;
  scrollbar-color: rgb(233 228 212 / 0.3) var(--plate);
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  font: 400 1.0625rem/1.6 var(--text);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
  overflow-x: clip;
}

::selection { background: var(--ink); color: var(--plate); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
img, video, svg { display: block; max-width: 100%; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }

.skip {
  position: fixed; left: 16px; top: 16px; z-index: 30;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--plate); font-weight: 600; text-decoration: none;
  translate: 0 -180%;
}
.skip:focus-visible { translate: none; }

/* ── The sky ───────────────────────────────────────────────────────── */
#bg-canvas { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; display: block; }
.dip { position: fixed; inset: 0; z-index: -1; background: var(--plate); opacity: 0; pointer-events: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.lamp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.45rem; border: 0; border-radius: 999px;
  background: var(--lamp); color: var(--lamp-ink);
  font-weight: 650; font-size: 1rem; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 28px -16px rgb(0 0 0 / 0.9);
  transition: background-color 0.25s ease, transform 0.5s var(--ease-out);
}
.lamp:hover { background: var(--lamp-hover); }
.lamp:active { transform: scale(0.98); }
.lamp.small { min-height: 38px; padding: 0 1.05rem; font-size: 0.9375rem; }
.lamp.big { min-height: 60px; padding: 0 2.1rem; font-size: 1.125rem; }

.quiet {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.32em; text-decoration-color: var(--hair-2);
  transition: text-decoration-color 0.25s ease;
}
.quiet:hover { text-decoration-color: var(--ink); }
.quiet svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.note { color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; }

/* ── The index along the top ───────────────────────────────────────── */
.index {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, translate 0.6s var(--ease-out);
}
.index.is-solid { background: var(--plate); border-bottom-color: var(--hair); }
/* The lamp is the opening's own button; up here it is drawn in ink until that one has gone. */
.index .lamp { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.index .lamp:hover { background: rgb(233 228 212 / 0.08); }
.index.is-lit .lamp { background: var(--lamp); color: var(--lamp-ink); box-shadow: none; }
.index.is-lit .lamp:hover { background: var(--lamp-hover); }
.index.is-away, .index.is-hush { translate: 0 -110%; }
.index-home {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 600 0.9375rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s ease;
}
.index.is-solid .index-home { opacity: 1; }
.index nav { display: flex; gap: clamp(16px, 2.4vw, 34px); margin-left: auto; }
.index nav a { color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; transition: color 0.2s ease; }
.index nav a:hover { color: var(--ink); }

/* ── The opening: plate I ──────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.plate-dim {
  position: absolute; inset: 0;
  background: rgb(7 8 12 / 0.86);
  -webkit-mask: radial-gradient(circle var(--rw, var(--r)) at var(--cx) var(--cy), transparent calc(var(--rw, var(--r)) - 1px), #000 calc(var(--rw, var(--r)) + 0.5px));
  mask: radial-gradient(circle var(--rw, var(--r)) at var(--cx) var(--cy), transparent calc(var(--rw, var(--r)) - 1px), #000 calc(var(--rw, var(--r)) + 0.5px));
}
.graticule { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.graticule circle, .graticule line { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; }

.hero-copy {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + clamp(28px, 7vh, 88px));
  width: min(34rem, 38vw);
}
.hero h1 { font-weight: inherit; }
.atlas-title {
  display: block;
  font: 500 clamp(3.4rem, 7vw, 6rem)/0.9 var(--display);
  font-optical-sizing: auto; letter-spacing: 0.07em; text-transform: uppercase;
  margin-left: -0.04em;
}
.atlas-line { display: block; margin-top: 1.1rem; font: 500 clamp(1.3rem, 1.9vw, 1.7rem)/1.22 var(--text); letter-spacing: -0.012em; text-wrap: balance; }
.hero .lede { margin-top: 1.1rem; max-width: 33ch; color: var(--ink-2); font-size: 1.125rem; line-height: 1.55; }

.hero-act {
  position: absolute; left: var(--gutter); bottom: clamp(28px, 7vh, 72px);
  display: grid; gap: 0.9rem; max-width: 30rem;
}
.hero-act .actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-act .note { max-width: 40ch; }

.planisphere {
  position: absolute; left: var(--cx); top: var(--cy);
  width: calc(var(--r) * 2 + 96px); height: calc(var(--r) * 2 + 96px);
  translate: -50% -50%;
}
.ring { width: 100%; height: 100%; overflow: visible; cursor: grab; touch-action: pan-y; }
.ring:active { cursor: grabbing; }
.ring:focus-visible { outline: none; }
.ring:focus-visible .ring-edge { stroke: var(--ink); stroke-width: 1.5; }
.ring .ring-edge { fill: none; stroke: var(--hair-2); stroke-width: 1; }
.ring .tick { stroke: var(--ink-3); stroke-width: 1; }
.ring .tick.hour { stroke: var(--ink-2); }
.ring .tick.major { stroke: var(--ink); stroke-width: 1.25; }
.ring text { fill: var(--ink-2); font: 500 12px var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ring .knob { fill: var(--lamp); }
.ring .knob-line { stroke: var(--lamp); stroke-width: 1.5; }
.ring .now-mark { fill: var(--ink); }
.now {
  position: absolute; left: 50%; bottom: -8px; translate: -50% 100%;
  min-height: 36px; padding: 0 0.9rem; border: 1px solid var(--hair-2); border-radius: 999px;
  background: rgb(7 8 12 / 0.7); color: var(--ink); font-size: 0.875rem;
}
.now:hover { border-color: var(--ink); }

.readout {
  position: absolute; margin: 0;
  font: 500 0.8125rem/1.35 var(--text); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--ink); text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.readout-key { color: var(--ink-3); margin-right: 0.35em; }
.readout-plate { right: var(--gutter); top: calc(var(--nav-h) + 18px); }
.readout-time { right: var(--gutter); bottom: clamp(28px, 7vh, 72px); }
.readout-hint { right: var(--gutter); bottom: calc(clamp(28px, 7vh, 72px) - 22px); color: var(--ink-2); }
.readout time { font-weight: 600; }

/* ── Constellations ────────────────────────────────────────────────── */
.chart { position: relative; min-height: 100svh; display: grid; align-content: end; padding: 0 var(--gutter) 14vh; }
.constellations { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constellations .line { fill: none; stroke: rgb(233 228 212 / 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.constellations .star { fill: #fff; }
.constellations .glow { fill: url(#star-glow); }
.constellations .label { fill: var(--ink-2); font: 500 13px var(--text); letter-spacing: 0.02em; }
.constellations .folder { fill: var(--ink); font: italic 500 26px var(--display); }
.chart-copy { position: relative; max-width: 38rem; }
.chart-copy h2 { font: 500 clamp(2.1rem, 3.8vw, 3.4rem)/1.08 var(--display); letter-spacing: -0.012em; text-shadow: 0 2px 28px rgb(0 0 0 / 0.55); }
.chart-copy p { margin-top: 1.1rem; max-width: 40ch; color: var(--ink); font-size: 1.125rem; text-shadow: 0 1px 16px rgb(0 0 0 / 0.7); }

/* ── Observe: the real extension ───────────────────────────────────── */
.observe { position: relative; background: var(--plate); padding: 20vh var(--gutter) 14vh; border-top: 1px solid var(--hair); }
.observe-head { max-width: 44rem; margin-bottom: 8vh; }
.observe-head h2 { font: 500 clamp(2.3rem, 4.2vw, 3.8rem)/1.02 var(--display); letter-spacing: -0.015em; }
.observe-head p { margin-top: 1rem; color: var(--ink-2); max-width: 46ch; font-size: 1.125rem; }
.observe-grid { display: grid; grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.chapters { list-style: none; padding: 0; }
.chapter { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; opacity: 0.72; transition: opacity 0.6s var(--ease-out); }
.chapter:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
.chapter[aria-current="true"] { opacity: 1; }
.chapter h3 { font: 500 clamp(1.7rem, 2.5vw, 2.35rem)/1.1 var(--display); letter-spacing: -0.01em; }
.chapter p { color: var(--ink-2); max-width: 36ch; }
.chapter .quiet { align-self: flex-start; }

.deck { position: sticky; top: calc(var(--nav-h) + 3vh); }
.deck-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border: 1px solid var(--hair-2); border-radius: 14px; background: #000;
}
.deck-frame iframe {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0;
  transform-origin: 0 0; scale: var(--scale, 0.5); pointer-events: none; opacity: 0; transition: opacity 0.8s ease;
}
.deck.is-live .deck-frame iframe { opacity: 1; }
.deck.is-using .deck-frame iframe { pointer-events: auto; }
.deck-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s ease; }
.deck.is-live .deck-still { opacity: 0; }
/* The demo's page shows through where it draws nothing, so the page's sky can
   stand in for its own while the new tab fills the screen on its way in. Its
   page names no colour scheme, which is light, and the frame must say the same:
   a frame whose scheme differs gets an opaque backdrop from the browser. */
.deck-frame iframe { color-scheme: light; }
.deck-frame.is-full { transform-origin: 50% 50%; background: transparent; border-color: transparent; }
.deck-frame.is-full .deck-still, .deck-frame.is-full .deck-use { visibility: hidden; }
.deck-use {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0;
  min-height: 40px; padding: 0 1.1rem; border: 1px solid var(--hair-2); border-radius: 999px;
  background: rgb(7 8 12 / 0.82); color: var(--ink); font-size: 0.9375rem;
  opacity: 0; transition: opacity 0.4s ease, translate 0.5s var(--ease-out);
}
.deck.is-live .deck-use { opacity: 1; }
.deck.is-using .deck-use { opacity: 0; pointer-events: none; translate: -50% 10px; }
.deck-open { display: none; }

.dock { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 14px; }
.dock-views { display: inline-flex; padding: 3px; border: 1px solid var(--hair-2); border-radius: 999px; }
.dock-views button {
  min-height: 36px; padding: 0 0.95rem; border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); font-size: 0.9375rem; transition: background-color 0.25s ease, color 0.25s ease;
}
.dock-views button[aria-selected="true"] { background: var(--ink); color: var(--plate); }
.dock-field { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 0.875rem; }
.dock-field select {
  appearance: none; min-height: 38px; padding: 0 2.1rem 0 0.8rem;
  border: 1px solid var(--hair-2); border-radius: 10px; color: var(--ink); font-size: 0.9375rem;
  background: var(--plate-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6 6 7.6 9 4.6' fill='none' stroke='%23e9e4d4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 12px;
}
.dock-field select:hover { border-color: var(--ink-3); }
.dock-more { min-height: 38px; padding: 0 0.9rem; border: 1px solid var(--hair-2); border-radius: 10px; background: none; color: var(--ink); font-size: 0.9375rem; }
.dock-more:hover { border-color: var(--ink-3); }
.deck-note { margin-top: 12px; color: var(--ink-3); font-size: 0.875rem; }

/* ── The nine plates ───────────────────────────────────────────────── */
.plates { position: relative; }
.plates-head { min-height: 72vh; display: grid; align-content: end; gap: 1rem; padding: 0 var(--gutter) 12vh; }
.plates-head h2 { font: 500 clamp(2.5rem, 5vw, 4.6rem)/1 var(--display); letter-spacing: -0.015em; text-shadow: 0 2px 30px rgb(0 0 0 / 0.5); }
.plates-head p { max-width: 42ch; font-size: 1.125rem; text-shadow: 0 1px 16px rgb(0 0 0 / 0.7); }
/* The list rides down the section on its own track, so it leaves with the last plate. */
.rail-track { position: absolute; inset: 0 0 0 auto; z-index: 2; pointer-events: none; }
.plate-rail {
  position: sticky; top: calc(var(--nav-h) + 18vh);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-right: var(--gutter); pointer-events: auto;
}
.plate-rail a {
  display: flex; align-items: baseline; gap: 10px; padding: 3px 0;
  color: var(--ink-2); font-size: 0.8125rem; text-decoration: none; text-shadow: 0 1px 10px rgb(0 0 0 / 0.8);
  transition: color 0.3s ease;
}
.plate-rail a span { width: 2.6em; text-align: right; font: italic 500 0.95rem var(--display); }
.plate-rail a:hover { color: var(--ink); }
.plate-rail a[aria-current="true"] { color: var(--ink); }
.plate-rail a[aria-current="true"] span { color: var(--lamp); }
/* The sky changes as a plate crosses the middle of the window. Its words sit
   half a window down, so they come up from the bottom edge just then, and the
   plate is taller than the window, so the words before have gone. */
.plate { position: relative; min-height: 120svh; display: grid; align-content: start; gap: 0.8rem; padding: 50lvh var(--gutter) 0; }
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgb(7 8 12 / 0.5), rgb(7 8 12 / 0) 60%),
    linear-gradient(to left, rgb(7 8 12 / 0.5), rgb(7 8 12 / 0) 24%);
}
/* The last sky fades into the plate before the catalogue, as the colophon's does. */
.plates::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36vh; pointer-events: none;
  background: linear-gradient(to bottom, rgb(7 8 12 / 0), var(--plate));
}
.plate h3 {
  position: relative; display: flex; align-items: baseline; gap: 0.32em; flex-wrap: wrap;
  font: 500 clamp(2.2rem, 5vw, 4.6rem)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 2px 34px rgb(0 0 0 / 0.5);
}
.plate .numeral { font-style: italic; font-size: 0.46em; color: var(--ink-2); }
.plate p { position: relative; max-width: 32ch; font-size: 1.1875rem; text-shadow: 0 1px 16px rgb(0 0 0 / 0.75); }

/* ── The catalogue ─────────────────────────────────────────────────── */
.catalogue { background: var(--plate); padding: 20vh var(--gutter) 16vh; border-top: 1px solid var(--hair); }
.catalogue h2 { font: 500 clamp(2.3rem, 4.2vw, 3.8rem)/1.02 var(--display); letter-spacing: -0.015em; }
.catalogue-lede { margin: 1rem 0 8vh; color: var(--ink-2); font-size: 1.125rem; }
.catalogue table { width: 100%; max-width: 58rem; border-collapse: collapse; }
.catalogue thead th { padding: 0 24px 14px 0; color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; text-align: left; }
.catalogue tbody th, .catalogue td { padding: 22px 24px 22px 0; border-top: 1px solid var(--hair); text-align: left; vertical-align: baseline; }
.catalogue tbody th { width: 13rem; font: 500 1.6rem/1.15 var(--display); letter-spacing: -0.01em; }
.catalogue td { color: var(--ink-2); max-width: 60ch; }
.catalogue td:last-child { width: 9rem; color: var(--ink-3); font-size: 0.9375rem; }

/* ── The film ──────────────────────────────────────────────────────── */
.tour { background: var(--plate); padding: 4vh var(--gutter) 18vh; }
.tour h2 { font: 500 clamp(2rem, 3.4vw, 3rem)/1.05 var(--display); letter-spacing: -0.012em; margin-bottom: 6vh; }
.tour-frame { max-width: 76rem; border: 1px solid var(--hair-2); border-radius: 14px; overflow: hidden; background: #000; }
.tour-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ── Colophon ──────────────────────────────────────────────────────── */
.colophon { position: relative; min-height: 100svh; display: grid; align-content: center; gap: 7vh; padding: 16vh var(--gutter); }
.colophon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--plate), rgb(7 8 12 / 0) 26%, rgb(7 8 12 / 0) 80%, var(--plate)),
    radial-gradient(120% 90% at 20% 60%, rgb(7 8 12 / 0.62), rgb(7 8 12 / 0.18) 70%);
}
.colophon > * { position: relative; }
.colophon h2 { font: 500 clamp(2.8rem, 6vw, 5.6rem)/1.02 var(--display); letter-spacing: -0.015em; text-shadow: 0 2px 34px rgb(0 0 0 / 0.5); }
.colophon h2 span { display: block; }
.colophon-act { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; max-width: 70rem; }
.steps li { padding-top: 16px; border-top: 1px solid var(--hair-2); color: var(--ink-2); text-shadow: 0 1px 14px rgb(0 0 0 / 0.7); }
.steps b { color: var(--ink); font-weight: 600; }
.colophon-foot { color: var(--ink-2); }

/* ── Questions ─────────────────────────────────────────────────────── */
.notes { background: var(--plate); padding: 18vh var(--gutter) 16vh; border-top: 1px solid var(--hair); }
.notes h2 { font: 500 clamp(2.3rem, 4.2vw, 3.8rem)/1.02 var(--display); letter-spacing: -0.015em; margin-bottom: 6vh; }
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 500 1.25rem/1.3 var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.4px 14px no-repeat;
  transition: rotate 0.4s var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 22px; max-width: 62ch; color: var(--ink-2); }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding: 36px var(--gutter) 44px; background: var(--plate); border-top: 1px solid var(--hair);
  color: var(--ink-3); font-size: 0.9375rem;
}
.footer p { display: inline-flex; align-items: center; gap: 10px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer a:hover { color: var(--ink); }

/* ── Smaller screens ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .observe-grid { grid-template-columns: 1fr; }
  .chapters { order: 2; }
  .chapter, .chapter:first-child { min-height: 0; padding: 36px 0; opacity: 1; justify-content: flex-start; }
  .deck { position: relative; top: 0; }
  .steps { grid-template-columns: 1fr; max-width: 40rem; }
}

@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .index nav { display: none; }
  .on-desk { display: none; }
  .on-phone { display: inline; }
  .hero { min-height: 0; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 28px; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .planisphere { order: 2; }
  .hero .lede { order: 3; margin-top: 0; }
  .hero-act { order: 4; }
  .readout-plate { order: 5; }
  .readout-time { order: 6; }
  .readout-hint { order: 7; }
  .atlas-title { font-size: clamp(3rem, 14vw, 4.4rem); }
  .planisphere { position: relative; left: auto; top: auto; translate: none; width: calc(var(--r) * 2 + 80px); height: calc(var(--r) * 2 + 80px); margin: 0 auto; }
  .hero-act { position: static; }
  .readout { position: static; }
  .chart { min-height: 100svh; }
  .constellations .label { font-size: 22px; }
  .constellations .folder { font-size: 40px; }
  .observe { padding-top: 14vh; }
  .deck-frame { aspect-ratio: 3 / 4; }
  .deck-frame iframe { width: 100%; height: 100%; scale: none; }
  .deck-use { display: none; }
  .deck-open { display: inline-flex; position: absolute; left: 50%; bottom: 20px; translate: -50% 0; }
  .deck.is-open .deck-open { display: none; }
  .deck.is-open .deck-frame iframe { pointer-events: auto; }
  .dock-views button { min-height: 44px; }
  .catalogue table, .catalogue tbody, .catalogue tr, .catalogue th, .catalogue td { display: block; width: auto; }
  .catalogue thead { display: none; }
  .catalogue tbody tr { padding: 20px 0; border-top: 1px solid var(--hair); }
  .catalogue tbody th, .catalogue td { padding: 0; border: 0; }
  .catalogue tbody th { margin-bottom: 6px; }
  .catalogue td:last-child { width: auto; margin-top: 6px; }
  .plate-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
  .chapter { opacity: 1; }
}