/* Abeel — inner pages (Zo werken we, Privacy, 404). Load after abeel.css.
 * Same tokens and type as the home page. There is no film behind these pages,
 * so the header is always on paper and all type is Inkt on Papier.
 */


/* ---------- header: always solid ---------- */
.site-header.is-page {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 1px 0 var(--rule);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--afterimage); text-decoration-thickness: 2px; text-underline-offset: .32em; }
.site-footer a[aria-current="page"] { color: var(--fg); }

/* ---------- page head ---------- */
/* the title is one long Dutch word on the privacy page: it must never be wider than the phone */
.page-head h1 { font-size: min(var(--step-4), 12.4vw); line-height: .98; }
.page-head .lede { margin-top: 1.4rem; }
.page-head .updated { margin-top: 1.6rem; }
.page-head .updated time { white-space: nowrap; }
.page-head .draft-note { margin-top: 1.2rem; }

/* ---------- document: contents beside the text ---------- */
.doc { padding-bottom: clamp(5rem, 10vw, 9rem); align-items: start; }
.toc { position: sticky; top: calc(4.25rem + env(safe-area-inset-top, 0px) + 2.2rem); padding-top: .15rem; }
.toc ol { list-style: none; margin: .8rem 0 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a {
  display: block; margin-left: -1px; padding: .32rem 0 .32rem 1rem;
  border-left: 1px solid transparent; font-size: 1rem; line-height: 1.3;
  color: var(--fg-soft); text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.toc a:hover, .toc a:focus-visible { color: var(--fg); border-left-color: var(--fg); }

.doc-body { display: grid; align-content: start; }
.doc-body > .intro { font-size: var(--step-1); line-height: 1.42; max-width: 36rem; margin-bottom: .4rem; }
.doc-section { margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.doc-body > .doc-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-section > h2 { font-size: var(--step-2); line-height: 1.04; margin-bottom: 1.5rem; }
.doc .prose strong { font-weight: 600; color: var(--fg); }

/* trust page rules (Waar we ons aan houden): the promise dot of the home page (ink, with its afterimage) */
.nevers { gap: 0; border-top: 1px solid var(--fg); }
.nevers p { position: relative; padding: 1.1rem 0 1.1rem 2.2rem; border-bottom: 1px solid var(--rule); }
.nevers p:last-child { border-bottom: 0; }
.nevers p::before {
  content: ""; position: absolute; left: 0; top: 1.62rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--fg); box-shadow: .36rem 0 0 0 var(--afterimage);
}

/* privacy: the what / why / basis rows */
.facts { margin-top: 0; max-width: 38rem; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
.prose + .facts { margin-top: 1.5rem; }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }
.facts dt { font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.02rem; }
.facts dd { font-size: var(--step-0); }
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
}
.processors { list-style: none; padding: 0 !important; gap: 0 !important; border-top: 1px solid var(--rule); }
.processors li { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.processors li:last-child { border-bottom: 0; padding-bottom: 0; }

/* faq sits in the text column */
.doc .faq { max-width: 40rem; }
.doc .faq summary { font-size: clamp(1.18rem, 1.1rem + .35vw, 1.4rem); }
.doc .faq .answer p { color: var(--fg); }

@media (max-width: 820px) {
  .toc { position: static; margin-bottom: .6rem; }
  .toc ol { columns: 1; }
  .doc { row-gap: 2.2rem; }
}

/* ---------- Zo werken we: the demo video (29 Sept) ----------
 * A 16:9 frame under the page title. Until the demo exists it shows the hero poster (made with AI, so it
 * carries the label, as the hero does) with "Demovideo volgt binnenkort." in the film type. The <video>
 * has no src yet and is hidden: give it a src in site/src/trust.html (see the comment there) and this CSS
 * shows the video with its own controls and hides the "coming soon" layer. Nothing else changes. */
.demo-wrap { margin-bottom: clamp(3rem, 7vw, 6rem); }
.demo { margin: 0; max-width: 64rem; }
.demo-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--abeelgroen); }
.demo-video { display: block; width: 100%; height: 100%; background: #0d120f; }
.demo-video:not([src]) { display: none; }
.demo-video[src] + .demo-soon { display: none; }
.demo-soon { position: absolute; inset: 0; }
.demo-soon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.demo-soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 28, 23, .36), rgba(20, 28, 23, .12) 38%, rgba(20, 28, 23, 0) 62%); pointer-events: none; }
.demo-note {
  position: absolute; z-index: 1; left: clamp(1.1rem, 4.5%, 3rem); top: 50%; transform: translateY(-50%);
  max-width: 11ch; margin: 0;
  font-family: var(--film); font-weight: 440; font-size: clamp(1.8rem, 1rem + 3.4vw, 4.4rem); line-height: .98;
  color: var(--film-white); -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill;
  text-shadow: var(--film-shadow); letter-spacing: .008em; text-wrap: balance;
}
.demo-credit {
  position: absolute; z-index: 1; right: clamp(.8rem, 2.5%, 1.4rem); bottom: clamp(.6rem, 2%, 1.1rem); margin: 0;
  font-size: .85rem; letter-spacing: .02em; color: var(--film-white);
  -webkit-text-stroke: var(--film-edge) var(--inkt); paint-order: stroke fill; text-shadow: 0 1px 8px rgba(10, 16, 12, .35);
}
.demo figcaption { margin-top: .8rem; }

/* ---------- Zo werken we: step by step, in the text column ---------- */
.doc-steps { margin-top: 1.6rem; gap: 2rem clamp(1.2rem, 2.5vw, 2.4rem); }
.doc-steps li::before { font-size: var(--step-2); }
.doc .timing { margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.doc .timing strong { font-weight: 600; }
.doc-more { margin-top: 1.6rem; }

/* ---------- 404: a quiet page ---------- */
.missing .page-head { min-height: calc(100svh - 17rem); padding-bottom: clamp(4rem, 9vw, 8rem); }
.missing .page-head h1 { font-size: min(var(--step-3), 12vw); max-width: 20ch; }
.missing-link { margin-top: 2rem; font-size: var(--step-1); }

@media print {
  .toc { display: none; }
  .doc .faq details { break-inside: avoid; }
}