/* ==========================================================================
   Hard IJs
   Kleur, font, ruimte en beweging komen uit assets/tokens.css (gegenereerd uit
   het Hard IJs-designsystem). Hier staan geen eigen waarden, alleen layout.
   NAAM, BYLINE, DOMEIN en de URL's staan bovenin main.js.
   Breekpunten (custom properties werken niet in media queries):
   640px = --hi-breekpunt-sm, 960px = --hi-breekpunt-md, 1280px = --hi-breekpunt-lg
   ========================================================================== */

/* Voorstel, nog niet in het designsystem: één koude steunkleur. De kleur van
   het ijs in de foto, lichter. Regel: wit is voor taal, ijsblauw is voor alles
   wat telt of wijst (mono-labels, cijfers, vierkanten, iconen). Rood blijft
   de punt en de ene knop. Bij akkoord hoort dit token in tokens.json. */
:root {
  --hi-ijsblauw: #9BD3E6;
  --hi-ijsblauw-35: rgba(155, 211, 230, 0.35);
}

/* Basis ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hi-ijs);
  color: var(--hi-ijswit);
  font-family: var(--hi-font-sans);
  font-size: var(--hi-body-md-size);
  line-height: var(--hi-body-md-line);
  font-weight: var(--hi-body-md-weight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Korrel op 0,04 over alles: zwart is niet plat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image: url('assets/korrel.svg');
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: var(--hi-h2-weight); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--hi-ijswit);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--hi-container-max) + 2 * var(--hi-gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--hi-gutter-mobile);
}
@media (min-width: 960px) {
  .wrap { padding-inline: var(--hi-gutter-desktop); }
}

/* Typografie ------------------------------------------------------------- */

.display-xl {
  /* 22vw op mobiel, begrensd zodat de naam altijd binnen de gutters past */
  font-size: min(var(--hi-display-xl-size-mobiel), calc((100vw - 2 * var(--hi-gutter-mobile)) / 4.2));
  line-height: var(--hi-display-xl-line);
  font-weight: var(--hi-display-xl-weight);
  letter-spacing: var(--hi-display-xl-tracking);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .display-xl { font-size: var(--hi-display-xl-size); }
}

h2 {
  font-size: var(--hi-h2-size);
  line-height: var(--hi-h2-line);
  font-weight: var(--hi-h2-weight);
  letter-spacing: var(--hi-h2-tracking);
  max-width: var(--hi-container-reading);
  text-wrap: balance;
}

.niets {
  margin-top: var(--hi-space-9);
  font-size: var(--hi-display-lg-size);
  line-height: var(--hi-display-lg-line);
  font-weight: var(--hi-display-lg-weight);
  letter-spacing: var(--hi-display-lg-tracking);
}

h3 {
  font-size: var(--hi-h3-size);
  line-height: var(--hi-h3-line);
  font-weight: var(--hi-h3-weight);
  letter-spacing: var(--hi-h3-tracking);
}

.label,
h2.label,
h3.label {
  font-family: var(--hi-font-mono);
  font-size: var(--hi-label-size);
  line-height: var(--hi-label-line);
  font-weight: var(--hi-label-weight);
  letter-spacing: var(--hi-label-tracking);
  text-transform: uppercase;
  color: var(--hi-ijsblauw);
}
/* Bronnen en legenda blijven op de achtergrond */
.bewijs-tekst .label,
.legenda { color: var(--hi-rijp-55); }

.kicker {
  font-family: var(--hi-font-mono);
  font-size: var(--hi-kicker-size);
  line-height: var(--hi-kicker-line);
  font-weight: var(--hi-kicker-weight);
  letter-spacing: var(--hi-kicker-tracking);
  color: var(--hi-rijp-75);
}
.kicker .tekstlink { color: var(--hi-ijswit); }

.tekst {
  max-width: var(--hi-container-reading);
  margin-top: var(--hi-space-6);
}
p, li { text-wrap: pretty; }

.meetregel {
  max-width: var(--hi-container-reading);
  margin-top: var(--hi-space-6);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
  color: var(--hi-rijp-55);
}

/* Links en knoppen --------------------------------------------------------
   Hover: de onderstreep tekent van links naar rechts in dur-fast. Geen
   kleurwissel, behalve de rode knop (punt naar punt-diep). */

.streep {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: var(--hi-space-1);
  transition: background-size var(--hi-dur-fast) var(--hi-ease);
}
a:hover .streep,
a:focus-visible .streep,
button:hover .streep,
button:focus-visible .streep { background-size: 100% 1px; }

/* Tekstlink: onderstreep 1px op 4px afstand; bij hover tekent de volle lijn erover */
.tekstlink .streep {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--hi-rijp-55), var(--hi-rijp-55));
  background-size: 0% 1px, 100% 1px;
}
.tekstlink:hover .streep,
.tekstlink:focus-visible .streep { background-size: 100% 1px, 100% 1px; }

.knop {
  display: inline-block;
  padding: var(--hi-space-3) var(--hi-space-4);
  border: 1px solid var(--hi-ijswit);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow);
  color: var(--hi-ijswit);
  font-size: var(--hi-body-md-size);
  font-weight: var(--hi-h2-weight);
}
@media (min-width: 960px) {
  .knop { padding: var(--hi-space-3) var(--hi-space-5); }
}

/* De ene rode knop. Tekst op body-lg bold: ijswit op punt haalt 4,0:1 en telt zo als grote tekst. */
.knop-rood {
  border-color: var(--hi-punt);
  background: var(--hi-punt);
  font-size: var(--hi-body-lg-size);
  transition: background-color var(--hi-dur-fast) var(--hi-ease), border-color var(--hi-dur-fast) var(--hi-ease);
}
.knop-rood:hover,
.knop-rood:active {
  border-color: var(--hi-punt-diep);
  background: var(--hi-punt-diep);
}
.knop-rood:focus-visible { box-shadow: 0 0 0 var(--hi-space-1) var(--hi-punt-was); }

/* Blok 1: hero op de ijsfoto --------------------------------------------- */

.hero {
  position: relative;
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Full-bleed. Iets uitvergroot vanuit linksonder, zodat de scheur boven de naam
   langs loopt en de tekst op het rustige deel staat. Onderaan vloeit de foto
   over in het ijs van de pagina (wens van Patrick; het merkboek zegt nog: geen
   verloop over de foto). */
.hero-foto {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: 0% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.78) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.16) 91%, transparent 100%);
}

/* Het picture-element ligt als laag achter de tekst en doet zo niet mee in de
   flex-verdeling van de hero (met display: contents doet het source-element dat wel) */
.hero picture {
  position: absolute;
  inset: 0;
}

/* Staand scherm: de uitsnede vult de hero precies, de scheur loopt schuin boven de naam
   langs, en het vervagen begint lager zodat het lichtere ijs achter de naam zichtbaar blijft */
@media (max-aspect-ratio: 2/3) {
  .hero-foto {
    width: 100%;
    height: 100%;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.45) 85%, rgba(0, 0, 0, 0.16) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.45) 85%, rgba(0, 0, 0, 0.16) 94%, transparent 100%);
  }
}

.hero-boven,
.hero-woorden { position: relative; }

.hero-boven {
  display: flex;
  justify-content: space-between;
  gap: var(--hi-space-4);
  padding-top: var(--hi-space-5);
}
@media (min-width: 960px) {
  .hero-boven { padding-top: var(--hi-space-6); }
}

.hero-woorden {
  padding-top: var(--hi-space-9);
  padding-bottom: var(--hi-space-7);
}
@media (min-width: 960px) {
  .hero-woorden { padding-top: var(--hi-space-11); }
}

/* De punt is een vierkant, geen punt-teken */
.punt {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.05em;
  background: var(--hi-punt);
  vertical-align: baseline;
}

.onderregel {
  margin-top: var(--hi-space-5);
  max-width: var(--hi-container-reading);
  font-size: var(--hi-body-lg-size);
  line-height: var(--hi-body-lg-line);
  font-weight: var(--hi-body-lg-weight);
  color: var(--hi-rijp-75);
  text-wrap: balance;
}

.acties {
  margin-top: var(--hi-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-4) var(--hi-space-5);
}

/* Blokken ---------------------------------------------------------------- */

.blok {
  padding-block: var(--hi-space-9);
  border-bottom: 1px solid var(--hi-rijp-14);
}
.blok-slot {
  border-bottom: 0;
  padding-bottom: var(--hi-space-12);
}
@media (min-width: 960px) {
  .blok { padding-block: var(--hi-space-10); }
  .blok-slot { padding-bottom: var(--hi-space-12); }
}

/* Regels met een lijn erboven: een lijn vervangt een kader */
.regels { max-width: var(--hi-container-reading); }
.regels li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-4);
}
.regels li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }

/* Blok 2: het bewijs, als beeld in plaats van als los getal ---------------- */

.bewijs {
  margin-top: var(--hi-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hi-space-8);
}
.bewijs-item {
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--hi-rijp-14);
  padding-top: var(--hi-space-5);
}

/* De afleveringen in cijfer-stijl: 1, 2 en 3 staan er, de rest komt nooit */
.strip {
  margin-top: var(--hi-space-4);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  /* Een spatie in mono is een hele letterbreedte: trek de getallen naar elkaar toe */
  word-spacing: -0.3em;
  color: var(--hi-ijsblauw);
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.strip-uit::after {
  content: attr(data-rest);
  color: var(--hi-ijsblauw-35);
}

/* De telling: twintig vierkanten, de vorm van de punt. Gevuld luistert, leeg niet. */
.telling {
  margin-top: var(--hi-space-5);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--hi-space-2);
}
.telling span {
  aspect-ratio: 1;
  background: var(--hi-ijsblauw);
  transition: opacity var(--hi-dur-fast) var(--hi-ease);
  transition-delay: calc(var(--hi-dur-reveal) / 20 * var(--i, 0));
}
.telling .leeg,
.sleutel.leeg {
  background: none;
  border: 1px solid var(--hi-ijsblauw-35);
}
/* Telt één keer op als het blok in beeld komt (main.js) */
.telling.wacht span {
  opacity: 0;
  transition: none;
}
@media (min-width: 640px) {
  .telling {
    grid-template-columns: repeat(20, 1fr);
    gap: var(--hi-space-3);
  }
}

.legenda {
  margin-top: var(--hi-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-2);
}
.sleutel {
  width: var(--hi-space-3);
  height: var(--hi-space-3);
  background: var(--hi-ijsblauw);
}
.legenda .sleutel.leeg { margin-left: var(--hi-space-4); }

.bewijs-tekst {
  margin-top: var(--hi-space-6);
  display: grid;
  gap: var(--hi-space-4) var(--hi-space-7);
}
.bewijs-tekst h3,
.bewijs-tekst p { max-width: var(--hi-container-reading); }
@media (min-width: 960px) {
  /* Links de uitspraak met de bron er direct onder, rechts de uitleg */
  .bewijs-tekst {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--hi-space-3);
  }
  .bewijs-tekst .label { grid-column: 1; }
  .bewijs-tekst p:not(.label) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.slot-tekst { margin-top: var(--hi-space-8); }

/* Iconen: alleen rechte lijnen en vierkanten, de vormen van de kras en de punt.
   Lijn 1,5px, geen rondingen, geen vulling behalve het kleine vierkant. */
.icoon {
  display: block;
  width: var(--hi-space-7);
  height: var(--hi-space-7);
  margin-bottom: var(--hi-space-5);
  fill: none;
  stroke: var(--hi-ijsblauw);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* De lijn blijft 1,5px, hoe groot het icoon ook staat */
.icoon * { vector-effect: non-scaling-stroke; }
.icoon .vol {
  fill: var(--hi-ijsblauw);
  stroke: none;
}

/* Gevuld vierkant voor doen, leeg voor laten */
.merk {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  background: var(--hi-ijsblauw);
  vertical-align: 0.08em;
}
.merk.leeg {
  background: none;
  border: 1px solid var(--hi-ijsblauw);
}

/* Blok 3: drie kolommen -------------------------------------------------- */

.kolommen {
  margin-top: var(--hi-space-6);
  display: grid;
}
.kolommen article {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-7);
}
.kolommen article:last-child { padding-bottom: 0; }
.kolommen p {
  margin-top: var(--hi-space-4);
  max-width: var(--hi-container-reading);
}
@media (min-width: 960px) {
  .kolommen {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--hi-rijp-14);
  }
  .kolommen article {
    border-top: 0;
    padding: var(--hi-space-6) var(--hi-space-5) 0;
  }
  .kolommen article + article { border-left: 1px solid var(--hi-rijp-14); }
  .kolommen article:first-child { padding-left: 0; }
  .kolommen article:last-child { padding-right: 0; }
}

/* Cijferrijen: getal links, wat het zegt in het midden, wat het voor jullie
   betekent rechts. Op het raster van drie kolommen, een lijn per rij. */
.cijferrijen {
  margin-top: var(--hi-space-8);
  container-type: inline-size;
}
.cijferrijen li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-6);
  display: grid;
  gap: var(--hi-space-3);
}
.cijferrijen li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }
.cijfer {
  display: block;
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hi-ijsblauw);
}
.rij-stelling,
.rij-uitleg { max-width: var(--hi-container-reading); }
.rij-uitleg { color: var(--hi-rijp-75); }
@media (min-width: 960px) {
  .cijferrijen li {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: start;
  }
  .rij-stelling,
  .rij-uitleg {
    padding-left: var(--hi-space-5);
    padding-top: var(--hi-space-3);
  }
  .cijfer { font-size: min(var(--hi-cijfer-size), calc((100cqi / 3 - var(--hi-space-5)) / 1.9)); }
}
.cijferrijen + .meetregel { margin-top: var(--hi-space-4); }

/* Twee kolommen: doen en laten */
.kolommen .regels { margin-top: var(--hi-space-4); }
@media (min-width: 960px) {
  .kolommen-2 { grid-template-columns: repeat(2, 1fr); }
}
.kolommen-2 { margin-top: var(--hi-space-8); }

/* Blok 4: niet voor ------------------------------------------------------ */

.niet-voor { margin-top: var(--hi-space-8); }
.niet-voor .regels { margin-top: var(--hi-space-3); }

/* Blok 5: stappen -------------------------------------------------------- */

.stappen {
  margin-top: var(--hi-space-6);
  counter-reset: stap;
  display: grid;
}
.stappen li {
  counter-increment: stap;
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5) var(--hi-space-7);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--hi-space-4);
  align-items: baseline;
  align-content: start;
}
.stappen li:last-child { padding-bottom: 0; }
/* Nummer in cijfer-stijl op rijp-30, de kop ernaast, de tekst eronder */
.stappen li::before {
  content: counter(stap);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-cijfer-size);
  line-height: var(--hi-cijfer-line);
  font-weight: var(--hi-cijfer-weight);
  letter-spacing: var(--hi-cijfer-tracking);
  color: var(--hi-ijsblauw-35);
}
.stappen p {
  grid-column: 1 / -1;
  margin-top: var(--hi-space-4);
  max-width: var(--hi-container-reading);
}
@media (min-width: 640px) {
  .stappen {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--hi-space-7);
  }
}
@media (min-width: 1280px) {
  .stappen { grid-template-columns: repeat(4, 1fr); }
  .stappen li,
  .stappen li:last-child { padding-bottom: 0; }
}

/* Blok 6: na een jaar ---------------------------------------------------- */

.opbrengst { margin-top: var(--hi-space-6); }

/* Blok 8: de check, op het tweede vlak ----------------------------------- */

.check {
  background: var(--hi-ijs-2);
  padding: var(--hi-space-6);
}

.vragen { margin-top: var(--hi-space-6); }
.vragen li {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hi-space-4);
}
.vragen li:last-child { border-bottom: 1px solid var(--hi-rijp-14); }
.vragen p { max-width: var(--hi-container-reading); }
@media (min-width: 960px) {
  .vragen li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--hi-space-7);
  }
}

.janee { display: none; }
.js .janee {
  display: flex;
  flex: none;
  gap: var(--hi-space-3);
}
.janee button {
  appearance: none;
  min-width: var(--hi-space-9);
  padding: var(--hi-space-3) var(--hi-space-5);
  border: 1px solid var(--hi-rijp-14);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow);
  background: transparent;
  color: var(--hi-ijswit);
  font: inherit;
  font-weight: var(--hi-h2-weight);
  cursor: pointer;
}
.janee button:hover { border-color: var(--hi-rijp-30); }
.janee button[aria-pressed="true"] {
  background: var(--hi-ijswit);
  border-color: var(--hi-ijswit);
  color: var(--hi-ijs);
}

/* Het antwoord verschijnt met een fade, zonder verschuiving */
.uitkomst {
  margin-top: var(--hi-space-6);
  min-height: var(--hi-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hi-space-4) var(--hi-space-5);
}
.uitkomst-tekst {
  font-size: var(--hi-h3-size);
  line-height: var(--hi-h3-line);
  font-weight: var(--hi-h3-weight);
  letter-spacing: var(--hi-h3-tracking);
}
.js .uitkomst > * { animation: verschijn var(--hi-dur-default) var(--hi-ease); }
@keyframes verschijn { from { opacity: 0; } }

/* Footer ----------------------------------------------------------------- */

.voet {
  border-top: 1px solid var(--hi-rijp-14);
  padding-block: var(--hi-space-7);
  font-size: var(--hi-body-sm-size);
  line-height: var(--hi-body-sm-line);
}
.voet-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hi-space-4) var(--hi-space-6);
}
.voet-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hi-space-3) var(--hi-space-5);
  font-family: var(--hi-font-mono);
  font-size: var(--hi-label-size);
  line-height: var(--hi-label-line);
  font-weight: var(--hi-label-weight);
}
.voet-links a { padding-block: var(--hi-space-2); }

/* Minder beweging: alles staat meteen ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .streep,
  .knop-rood,
  .telling span { transition: none; }
  .js .uitkomst > * { animation: none; }
}