/*
 * De vormtaal van Nachtoog, voor het web.
 *
 * Dezelfde waarden als in de app (mobile/src/theme/tokens.ts). Dat is geen
 * netheid maar het punt: wie deze pagina bedient en daarna de app opent, moet
 * hetzelfde ding herkennen. Het ene verkoopt het andere.
 *
 * Deze pagina kent één schema, en dat is met opzet. Een pagina over de
 * nachthemel in lichte modus is een tegenspraak; er is hier dus geen
 * `prefers-color-scheme`-blok en geen omschakelaar. Elke kleur staat er wel
 * expliciet, zodat de pagina op elke achtergrond heel blijft.
 *
 * De kleurlogica in één zin: rood is het gereedschap, oker is de vijand.
 * Sterrenkijkers werken met rood licht omdat het de donkeradaptatie spaart, dus
 * is alles wat je kunt aanraken rood. Okergoud is voorbehouden aan de
 * lichtvervuiling zelf — op de kaart, in de grafieken, in de gloed boven de
 * stad. Die twee raken elkaar nergens.
 */

:root {
  --nacht: #05070f;
  --nacht-hoog: #0b0f1c;
  --rand: rgba(226, 232, 245, 0.12);
  --rand-fel: rgba(226, 232, 245, 0.26);

  --licht: #eef1f7;
  --gedempt: #8b95ad;

  --rood: #ff4d3d;
  --rood-diep: #c0281c;
  --rood-waas: rgba(255, 77, 61, 0.12);

  --oker: #db9815;
  --oker-heet: #f6dcaa;
  --diepzee: #163e54;
  --wad: #2e6a5c;

  /*
   * Fraunces en geen didone.
   *
   * Bodoni stond hier eerst en was onleesbaar: een didone leeft van het verschil
   * tussen dikke en haarfijne halen, en op een donkere grond verdwijnen die
   * haarlijnen — licht op donker vreet dunne vormen op. Zo'n letter is voor
   * zwart op wit getekend. Fraunces heeft karakter zonder haarlijnen, houdt
   * stand op 1 rem én op 5 rem, en past bij het onderwerp: het is de warme,
   * licht eigenzinnige vorm van een oude atlasplaat in plaats van de kille
   * scherpte van een modeblad.
   */
  --kop: "Fraunces", "Iowan Old Style", Georgia, serif;
  --tekst: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cijfer: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --max: 72rem;
  --lees: 38rem;
  --ronding: 4px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--nacht);
}

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

body {
  margin: 0;
  background: var(--nacht);
  color: var(--licht);
  font: 400 17px/1.7 var(--tekst);
  padding-bottom: 5rem;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rood); text-underline-offset: 3px; }
a:hover { color: var(--oker-heet); }

:focus-visible { outline: 2px solid var(--rood); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--kop);
  /* Op een donkere grond oogt elke letter dunner dan hij is; vandaar zwaarder
     dan je op wit zou kiezen. */
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.2rem; }
h3 { font-family: var(--tekst); font-size: 1.06rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
p { margin: 0 0 1.1rem; max-width: var(--lees); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { padding-block: clamp(4rem, 10vw, 8rem); }

/* Het opschrift boven een sectie: klein, gespatieerd, in het rood van het
   gereedschap. Het draagt een nummer alleen waar de volgorde iets betekent. */
.opschrift {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--cijfer);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rood);
  margin: 0 0 1.4rem;
  max-width: none;
}
.opschrift::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.inleiding { color: var(--gedempt); font-size: 1.06rem; }

/* ------------------------------------------------------------------- balk -- */

.balk {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(5, 7, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
.balk .wrap { display: flex; align-items: center; gap: 1rem; min-height: 60px; }

.merk {
  font-family: var(--kop);
  font-size: 1.22rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: 0.005em;
  color: var(--licht);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* Het oog: een rode stip in een ring. Klein genoeg om merk te zijn en niet
   illustratie, en het is dezelfde vorm als het pictogram van de app. */
.merk::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--rood);
  box-shadow: inset 0 0 0 3px var(--nacht), inset 0 0 0 6px var(--rood);
  flex: none;
}

.balk nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.9rem;
}
.balk nav a, .balk nav button {
  color: var(--gedempt);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.balk nav a:hover, .balk nav button:hover { color: var(--licht); }

.taalknop {
  border: 1px solid var(--rand-fel) !important;
  border-radius: 999px;
  padding: 0.22rem 0.7rem !important;
  font-family: var(--cijfer) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  color: var(--licht) !important;
}
.taalknop:hover { border-color: var(--rood) !important; color: var(--rood) !important; }

@media (max-width: 46rem) { .balk .verbergklein { display: none; } }

/* ------------------------------------------------------------------- held -- */

/*
 * De held is de hemel zelf.
 *
 * Hier stond eerst de satellietkaart als achtergrond met de kop eroverheen. Dat
 * werkte niet: de kop lag dwars over het drukste deel van het beeld, en beeld en
 * tekst vochten om dezelfde plek. Erger nog, ze zeiden niet hetzelfde — de foto
 * toonde lichtvervuiling van bovenaf terwijl de zin over sterren ging.
 *
 * Nu is de achtergrond de hemel boven de bezoeker zelf, live gerekend op zijn
 * eigen Bortle-klasse, en zegt de kop letterlijk wat er te zien is. Het beeld ís
 * de zin. En het lost de leesbaarheid vanzelf op: een vervuilde hemel is boven
 * bijna zwart, dus daar staat de tekst, terwijl de okeren koepel onderaan blijft
 * waar hij in het echt ook zit.
 */
.held {
  position: relative;
  min-height: min(94vh, 56rem);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.held-hemel {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
}

/* Een lichte doffing over het bovenste deel, zodat de tekst ook staat als er
   toevallig een heldere ster achter een letter valt. */
.held::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(5, 7, 15, 0.82) 0%, rgba(5, 7, 15, 0.5) 46%, rgba(5, 7, 15, 0) 82%),
    linear-gradient(to bottom, rgba(5, 7, 15, 0.5) 0%, transparent 30%);
}

.held h1 { max-width: 16ch; }
.held h1 em {
  font-style: normal;
  color: var(--oker-heet);
  white-space: nowrap;
}
.held .inleiding { margin-top: 1.6rem; max-width: 32rem; font-size: 1.12rem; }
.held .inleiding strong { color: var(--licht); font-weight: 600; }

.bijschrift {
  margin: 2.5rem 0 0;
  font-family: var(--cijfer);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gedempt);
  max-width: 30rem;
}

/* ------------------------------------------------------------- de kaart -- */

/*
 * De kaart hoort hier, als data — niet achter de kop als behang. Hier mag ze
 * groot en ongestoord zijn, en zegt het onderschrift wat je ziet.
 */
.kaartblok { border-block: 1px solid var(--rand); background: var(--nacht-hoog); }
.kaartbeeld {
  margin: 2.5rem 0 0;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  overflow: hidden;
}
.kaartbeeld img { width: 100%; }
.kaartbeeld figcaption {
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--rand);
  font-family: var(--cijfer);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--gedempt);
}

/* --------------------------------------------------------------- knoppen -- */

.winkels { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.winkel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--rand-fel);
  border-radius: 999px;
  background: rgba(238, 241, 247, 0.04);
  color: var(--licht);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.winkel:hover { border-color: var(--rood); background: var(--rood-waas); color: var(--licht); }
.winkel svg { width: 20px; height: 20px; flex: none; }
.winkel span { display: flex; flex-direction: column; line-height: 1.15; font-size: 0.95rem; font-weight: 500; }
.winkel small { font-family: var(--cijfer); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedempt); }
.winkel[aria-disabled="true"] { cursor: default; }

.voetnoot {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--gedempt);
  max-width: 30rem;
}

/* --------------------------------------------------- de hemel van de lezer -- */

/*
 * Het hart van de pagina, en tegelijk een echt onderdeel van de app.
 *
 * Links de hemel boven je huis, rechts de hemel op rijafstand. Allebei op
 * dezelfde sterren gerekend, alleen met een andere grensmagnitude — precies wat
 * de Bortle-schaal betekent. Beweren dat het donkerder is werkt niet; dit laat
 * het zien.
 */
.hemelblok { background: var(--nacht-hoog); border-block: 1px solid var(--rand); }

.hemelkop { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 2.5rem; }
@media (min-width: 58rem) { .hemelkop { grid-template-columns: 1fr auto; } }

.plaatskiezer { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.plaatskiezer label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--cijfer);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.plaatskiezer input {
  width: 14rem;
  max-width: 100%;
  padding: 0.62rem 0.85rem;
  border: 1px solid var(--rand-fel);
  border-radius: var(--ronding);
  background: var(--nacht);
  color: var(--licht);
  font: 400 1rem/1.3 var(--tekst);
}
.plaatskiezer input:focus { border-color: var(--rood); outline: none; }

.knop-zacht {
  padding: 0.62rem 1rem;
  border: 1px solid var(--rand-fel);
  border-radius: var(--ronding);
  background: none;
  color: var(--licht);
  font: 400 0.92rem var(--tekst);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.knop-zacht:hover:not(:disabled) { border-color: var(--rood); color: var(--rood); }
.knop-zacht:disabled { opacity: 0.55; cursor: progress; }

.hemels { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .hemels { grid-template-columns: 1fr 1fr; } }

.hemel {
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  overflow: hidden;
  background: var(--nacht);
  display: flex;
  flex-direction: column;
}
.hemel canvas { display: block; width: 100%; height: clamp(15rem, 32vw, 21rem); }

.hemel-voet {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem 1.15rem;
  border-top: 1px solid var(--rand);
}
.hemel-titel {
  font-family: var(--cijfer);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedempt);
  width: 100%;
}
.hemel-klasse { font-family: var(--kop); font-size: 1.9rem; line-height: 1; }
.hemel-uitleg { font-size: 0.88rem; line-height: 1.5; color: var(--gedempt); flex: 1 1 9rem; min-width: 0; }

/* De hemel boven je huis draagt de kleur van de vijand, die op rijafstand
   de kleur van het gereedschap. Dat is geen versiering: het is dezelfde
   tweedeling als op de kaart. */
.hemel.thuis .hemel-klasse { color: var(--oker); }
.hemel.daar .hemel-klasse { color: var(--rood); }
.hemel.daar { border-color: rgba(255, 77, 61, 0.4); }

.hemel-slot {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--gedempt);
  max-width: none;
}
.hemel-slot strong { color: var(--licht); font-weight: 600; }

/* ------------------------------------------------------------- de cijfers -- */

.rekensom {
  display: grid;
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  margin-block: 2.5rem;
  overflow: hidden;
}
@media (min-width: 46rem) { .rekensom { grid-template-columns: repeat(3, 1fr); } }

.rekensom > div { background: var(--nacht); padding: 1.5rem 1.4rem; }
.rekensom strong {
  display: block;
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--oker);
  font-variant-numeric: tabular-nums;
}
.rekensom span { display: block; margin-top: 0.7rem; font-size: 0.9rem; color: var(--gedempt); }

/* ------------------------------------------------------------- de staven -- */

.staven { display: grid; gap: 0.55rem; margin-top: 2rem; }

.staaf {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  font-size: 0.88rem;
}
.staaf .naam { font-family: var(--cijfer); font-size: 0.76rem; color: var(--gedempt); letter-spacing: 0.06em; }
.staaf .balk { height: 10px; background: rgba(238, 241, 247, 0.07); border-radius: 999px; overflow: hidden; }
.staaf .balk i {
  display: block;
  height: 100%;
  width: var(--deel);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--diepzee), var(--wad));
}
.staaf .cijfer { font-family: var(--cijfer); font-size: 0.82rem; color: var(--licht); font-variant-numeric: tabular-nums; }
.staaf.gekozen .balk i { background: linear-gradient(90deg, var(--wad), var(--rood)); }
.staaf.gekozen .cijfer { color: var(--rood); }

.legenda { margin-top: 1rem; font-size: 0.8rem; color: var(--gedempt); }

/* ------------------------------------------------------------- de troeven -- */

.troeven { display: grid; gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--ronding); overflow: hidden; }
@media (min-width: 44rem) { .troeven { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .troeven { grid-template-columns: repeat(3, 1fr); } }

.troef { background: var(--nacht); padding: 1.9rem 1.7rem; }
.troef h3 { color: var(--licht); margin-bottom: 0.7rem; }
.troef p { font-size: 0.92rem; color: var(--gedempt); margin-bottom: 0.7rem; }
.troef p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- de kaarten -- */

.schermenrij {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 24rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
@media (min-width: 60rem) {
  .schermenrij { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
.scherm { margin: 0; scroll-snap-align: start; }
.scherm img { border: 1px solid var(--rand); border-radius: var(--ronding); }
.scherm figcaption { margin-top: 0.85rem; font-size: 0.86rem; color: var(--gedempt); }

/* --------------------------------------------------------------- de prijs -- */

.prijzen { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 46rem) { .prijzen { grid-template-columns: 1fr 1fr; align-items: start; } }

.prijs { border: 1px solid var(--rand); border-radius: var(--ronding); padding: 1.9rem 1.7rem; }
.prijs.uitgelicht { border-color: rgba(255, 77, 61, 0.42); background: var(--rood-waas); }
.prijs h3 { color: var(--licht); }
.prijs .bedrag {
  font-family: var(--kop);
  font-size: 2.8rem;
  line-height: 1.1;
  margin: 0.5rem 0 1.2rem;
  color: var(--licht);
}
.prijs .bedrag small { font-family: var(--cijfer); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedempt); display: block; margin-top: 0.3rem; }
.prijs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.prijs li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; color: var(--gedempt); }
.prijs li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--rood); }

/* -------------------------------------------------------------- de vragen -- */

.faq { margin-top: 2.5rem; border-top: 1px solid var(--rand); }
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 500;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cijfer);
  color: var(--rood);
  font-size: 1.1rem;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--rood); }
.faq p { font-size: 0.94rem; color: var(--gedempt); padding-right: 2.5rem; }
.faq details p:last-of-type { padding-bottom: 1.2rem; }

/* ---------------------------------------------------------------- het slot -- */

.slot { text-align: center; border-top: 1px solid var(--rand); }
.slot h2 { max-width: 20ch; margin-inline: auto; }
.slot .winkels { justify-content: center; }

/* --------------------------------------------------------------- de maker -- */

.maker { border-top: 1px solid var(--rand); }
.makerblok { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 44rem) { .makerblok { grid-template-columns: auto 1fr; gap: 3rem; } }
.jaartal {
  font-family: var(--kop);
  font-size: 3.6rem;
  line-height: 0.9;
  color: var(--rood);
}
.jaartal small { display: block; font-family: var(--cijfer); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gedempt); margin-bottom: 0.5rem; }
.makerblok p { color: var(--gedempt); }
.makerblok strong { color: var(--licht); }

/* ----------------------------------------------------------------- de voet -- */

.voet { border-top: 1px solid var(--rand); padding-block: 3rem 4rem; font-size: 0.86rem; color: var(--gedempt); }
.voet .wrap { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .voet .wrap { grid-template-columns: repeat(3, 1fr); } }
.voet p { margin: 0; max-width: none; }
.voet strong { color: var(--licht); }
.voet a { color: var(--gedempt); }
.voet a:hover { color: var(--rood); }
.voet .bronnen { grid-column: 1 / -1; border-top: 1px solid var(--rand); padding-top: 1.5rem; font-size: 0.78rem; line-height: 1.65; }

/* ---------------------------------------------------------- vaste onderbalk -- */

.vasteoproep {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(5, 7, 15, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rand);
  padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom, 0px));
}
.vasteoproep .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vasteoproep .zin { flex: 1 1 12rem; margin: 0; font-size: 0.92rem; max-width: none; }
.vasteoproep .zin small { display: block; color: var(--gedempt); font-size: 0.78rem; }
.vasteoproep .winkels { margin: 0; }

/*
 * De balk verschijnt pas als de held uit beeld is.
 *
 * De tijdlijn hangt aan de held en niet aan de balk zelf: die staat `fixed` en
 * is dus altijd in beeld, waardoor een tijdlijn op zichzelf meteen op het
 * eindpunt zou staan. De `:has()` eromheen zorgt dat de hele regel alleen geldt
 * op een pagina mét held — anders zou de balk in zijn beginstand blijven staan
 * en dus nooit verschijnen.
 */
@supports (animation-timeline: --x) and (selector(:has(*))) {
  body:has(.held) { timeline-scope: --heldzicht; }
  body:has(.held) .held { view-timeline: --heldzicht block; }
  body:has(.held) .vasteoproep {
    opacity: 0;
    transform: translateY(100%);
    animation: oproepIn linear both;
    animation-timeline: --heldzicht;
    animation-range: exit 30% exit 95%;
  }
  @keyframes oproepIn {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.enkel-voorlezen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}