/* Hallmark · theme: custom, Bunkerlijst richting B Lijst · genre: modern-minimal · signature: the real MS Aries bunkerlijst read into order lines per supplier, once, on load · deal: manual */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V3 · weakest: V, a light document page sits close to many B2B pages; the read list in the hero is what sets it apart */
/* Hallmark · dismissed 58 · the brief asks for seven sections of plain Dutch copy, and the read list in the hero is the product shown, not prose */
/* Hallmark · dismissed F15 · the column gaps follow the content: the list, the ledger and the form rows carry different widths */
/* The bunkerlijst.nl site, built from design/bunkerlijst/richting-b. Bunkerlijst, richting B "Lijst": the list as it is mailed today, read into an order per supplier. Paper, ruled lines,
   one family (Atkinson Hyperlegible Next) with its mono sibling for the raw list, a yellow tick where the app read a line. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2?v=18b2a1a39a") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/assets/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2?v=2706b1ee4f") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --romp: #0e2a47;
  --staal: #18395b;
  --wit: #fbfcfd;
  --papier: #fbfaf7;
  --mist: #eef1f4;
  --lijn: #d5dbe2;
  --lijn-sterk: #8a95a3;
  --inkt: #172636;
  --grijs: #4a5868;
  --geel: #f5c518;
  --geel-zacht: #fdf3c4;
  --oranje: #8f5300;
  --groen: #1e7a3c;
  --fout: #b42318;
  --focus: #0b63ce;
  --schaduw: rgba(14, 42, 71, 0.1);
  --kop-grond: #f6f8fa;
  --fout-zacht: #fdecea;

  --tekst: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --sectie: clamp(72px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip; font: 400 1.125rem/1.55 var(--tekst); color: var(--inkt); background: var(--wit);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--geel); color: var(--romp); }
img, picture { max-width: 100%; height: auto; display: block; }
a { color: var(--romp); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--romp); color: var(--wit); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One calm type scale (body 18, h3 22, h2 35, h1 55 at full width), one weight below the heaviest: a heading is at most two
   lines at 1440 px (test/smoke.spec.ts), and its text sits directly under it, never in a column on the other side. */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--romp); }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4375rem); letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.1875rem); max-width: 30ch; }
h3 { font-size: 1.375rem; letter-spacing: -0.01em; }
p { margin: 0; max-width: 64ch; }
p + p { margin-top: 0.9em; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 8px;
  font: 700 1.0625rem/1 var(--tekst); text-decoration: none; background: var(--romp); color: var(--wit); border: 2px solid var(--romp);
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 80ms ease-out;
}
.knop:hover { background: var(--staal); border-color: var(--staal); }
.knop--lijn { background: transparent; color: var(--romp); }
.knop--lijn:hover { background: var(--mist); border-color: var(--romp); }
.knop:active { transform: translateY(1px); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.knop--klein { min-height: 44px; padding: 0 16px; font-size: 1rem; }

/* Header */
.top { border-bottom: 1px solid var(--lijn); background: var(--wit); }
.top__in { display: flex; align-items: center; gap: 40px; min-height: 76px; }
.top__merk { display: flex; align-items: center; min-height: 48px; }
.top__merk img { height: 32px; width: auto; }
.top__nav { display: flex; gap: 28px; margin-left: auto; }
.top__nav a { text-decoration: none; font-weight: 600; color: var(--inkt); padding: 12px 0; border-bottom: 2px solid transparent; }
.top__nav a:hover { border-bottom-color: var(--romp); }

/* Hero: headline, the sentence and the action directly under it, the list being read below. */
.held { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: var(--papier); border-bottom: 1px solid var(--lijn); }
.held h1 { max-width: 22ch; }
.held__zin { font-size: 1.25rem; margin-top: 20px; }
.held__acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.lezen { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border: 1px solid var(--lijn-sterk); border-radius: 12px; background: var(--wit); overflow: hidden; }
.lezen__titel { font-size: 0.9375rem; font-weight: 700; color: var(--grijs); padding: 16px 24px 16px; }
.lezen__lijst { border-right: 1px solid var(--lijn-sterk); background: var(--wit); }
.ruw { list-style: none; margin: 0; padding: 0 0 12px; font: 400 1rem/1.4 var(--mono); }
.ruw li { position: relative; padding: 8px 24px 8px 56px; border-top: 1px solid var(--lijn); min-height: 46px; display: flex; align-items: center; }
.ruw li::before {
  /* the tick the app sets on a line it has read */
  content: ""; position: absolute; left: 22px; width: 18px; height: 18px; top: calc(50% - 9px); border-radius: 4px; background: var(--geel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2a47' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ruw .ruw__kop { padding-left: 24px; font-weight: 700; }
.ruw .ruw__kop::before { content: none; }
.lezen__bestelling { background: var(--papier); padding-bottom: 12px; }
.lev + .lev { margin-top: 8px; }
.lev__naam { display: flex; justify-content: space-between; gap: 16px; padding: 8px 24px; font-weight: 800; color: var(--romp); border-top: 2px solid var(--romp); background: var(--wit); }
.lev__naam span { font-weight: 400; color: var(--grijs); }
.regels { list-style: none; margin: 0; padding: 0; }
.regels li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 24px; border-top: 1px solid var(--lijn); }
.regel__aantal { font-weight: 800; text-align: right; }
.regel__product { font-weight: 600; }
.regel__eenheid { color: var(--grijs); font-size: 1rem; white-space: nowrap; }
.regel__let, .regel__goed { display: block; font-style: normal; font-weight: 400; font-size: 0.9375rem; }
.regel__let { color: var(--oranje); }
.regel__goed { color: var(--groen); }
.lezen figcaption { grid-column: 1 / -1; padding: 16px 24px; border-top: 1px solid var(--lijn-sterk); font-size: 0.9375rem; color: var(--grijs); background: var(--wit); }

/* The one orchestrated moment: each raw line ticks, then its order line lands. Already visible without the class. */
@keyframes tik { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes land { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* The order of the reading: a raw line and its order line share a number (classes, since the CSP allows no inline styles). */
.r0 { --i: 0; } .r1 { --i: 1; } .r2 { --i: 2; } .r3 { --i: 3; } .r4 { --i: 4; } .r5 { --i: 5; } .r6 { --i: 6; } .r7 { --i: 7; } .r8 { --i: 8; } .r9 { --i: 9; }
@media (prefers-reduced-motion: no-preference) {
  .ruw li::before { animation: tik 260ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(500ms + var(--i) * 220ms); }
  .regels li { animation: land 420ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(640ms + var(--i) * 220ms); }
}

/* Sections */
.sectie { padding: var(--sectie) 0; }
.sectie--mist { background: var(--mist); }
.scherm { border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.scherm--telefoon { border-radius: 12px; }

/* How it works: a ledger, the same three columns per step. */
.grootboek { list-style: none; margin: 48px 0 0; padding: 0; border-top: 2px solid var(--romp); }
.stap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; padding: 40px 0; border-bottom: 1px solid var(--lijn); align-items: start; }
.stap__wie { display: flex; align-items: baseline; gap: 12px; }
.stap__nr { font: 700 1rem/1 var(--mono); color: var(--grijs); }
.stap .scherm--telefoon { max-width: 260px; }
.stap__beeld { min-width: 0; }
.stap__feiten { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn-sterk); border-radius: 12px; background: var(--papier); }
.stap__feiten li { padding: 16px 20px; font-weight: 600; }
.stap__feiten li + li { border-top: 1px solid var(--lijn); }

/* Offline */
.offline { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.offline .scherm { max-width: 360px; }
.offline h2 { margin-bottom: 16px; }

/* Costs */
.kosten { display: grid; gap: 40px; }
.kosten__tekst h2 { margin-bottom: 16px; }
.kosten__budget { box-shadow: 0 10px 28px var(--schaduw); border: 0; }
.kosten__rol { padding: 4px 4px 28px; margin: -4px -4px -28px; }
.kosten__rol:focus-visible { outline-offset: -2px; }

/* For whom */
.wie { width: 100%; margin-top: 40px; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn-sterk); border-radius: 12px; overflow: hidden; }
.wie th, .wie td { text-align: left; padding: 16px 24px; border-top: 1px solid var(--lijn); vertical-align: top; }
.wie thead th { border-top: 0; background: var(--kop-grond); font-size: 0.9375rem; color: var(--grijs); }
.wie tbody th { font-weight: 700; color: var(--romp); width: 24%; }
.wie td:nth-child(2) { width: 16%; color: var(--grijs); }

/* Demo request: the form as a sheet with ruled lines, like the list it replaces. */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.demo h2 { margin-bottom: 16px; }
.blad {
  background: var(--papier); border: 1px solid var(--lijn-sterk); border-radius: 12px; padding: 8px 32px 32px;
}
.blad__kop { font-weight: 700; font-size: 1.25rem; letter-spacing: 0; color: var(--romp); padding: 20px 0 12px; border-bottom: 2px solid var(--romp); }
.veld { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 1px solid var(--lijn); padding: 8px 0; }
.veld label { font-weight: 700; }
.veld input {
  font: inherit; min-height: 48px; padding: 0 12px; border: 0; border-bottom: 2px solid var(--lijn-sterk); border-radius: 4px 4px 0 0;
  background: var(--wit); color: var(--inkt);
}
.veld input:disabled { background: var(--mist); cursor: not-allowed; }
.veld input:hover { border-bottom-color: var(--romp); }
.veld input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.veld--fout input { border-bottom-color: var(--fout); background: var(--fout-zacht); }
.blad .knop { margin-top: 28px; }
.veld__fout { grid-column: 2; margin: 0; color: var(--fout); font-weight: 600; font-size: 1rem; }
.veld--val { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.blad__privacy { margin-top: 16px; font-size: 1rem; color: var(--grijs); }
.blad__melding { margin-top: 16px; font-weight: 600; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--lijn-sterk); background: var(--wit); }
.blad__melding:focus { outline: none; }
.blad__melding--fout { border-color: var(--fout); background: var(--fout-zacht); color: var(--fout); }
.blad__melding--goed { border-color: var(--groen); }
.blad--verstuurd .veld, .blad--verstuurd .knop, .blad--verstuurd .blad__privacy { display: none; }

/* Text pages: privacy, thanks, not found */
.sectie--tekst { padding-top: clamp(48px, 7vw, 96px); }
.tekst { max-width: 72ch; }
.tekst h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); margin-bottom: 32px; }
.tekst h2 { font-size: 1.375rem; margin: 40px 0 12px; }
.tekst .knop { margin-top: 12px; }

/* Footer */
.voet { border-top: 1px solid var(--lijn); padding: 48px 0 56px; background: var(--papier); }
.voet__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 40px; align-items: center; }
.voet__in img { height: 26px; width: auto; }
.voet__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.voet__nav a { padding: 12px 0; color: var(--inkt); text-decoration: none; }
.voet__nav a:hover { text-decoration: underline; }
.voet__bron { grid-column: 1 / -1; font-size: 0.875rem; color: var(--grijs); }

@media (max-width: 1000px) {
  .top__nav { display: none; }
  .top__in { justify-content: space-between; }
  .lezen, .offline, .demo { grid-template-columns: minmax(0, 1fr); }
  .lezen__lijst { border-right: 0; border-bottom: 1px solid var(--lijn-sterk); }
  .stap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .top__in { min-height: 64px; gap: 12px; }
  .top__merk img { height: 26px; }
  .held__acties .knop { flex: 1 1 100%; }
  .ruw li { padding-left: 48px; font-size: 0.9375rem; }
  .ruw li::before { left: 18px; }
  .regels li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; }
  .regel__eenheid { grid-column: 2; }
  .lev__naam, .lezen__titel, .lezen figcaption { padding-inline: 16px; }
  .wie thead { display: none; }
  .wie, .wie tbody, .wie tr, .wie th, .wie td { display: block; width: auto !important; }
  .wie tr { border-top: 1px solid var(--lijn); padding: 16px 16px; }
  .wie th, .wie td { border: 0; padding: 4px 0; }
  .veld { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .veld__fout { grid-column: 1; }
  .blad { padding: 8px 16px 24px; }
  .blad .knop { width: 100%; }
  .voet__in { grid-template-columns: minmax(0, 1fr); }
  /* The budget screen stays readable on a phone: it scrolls sideways inside its own box instead of shrinking. */
  .kosten__rol { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
  .kosten__rol .kosten__budget { width: 900px; max-width: none; }
}