/* Mono-portaal — prototype. Hub-vormtaal (docs/prototype-styleguide.md):
   Borna, beige canvas, zwevende eilanden, Phosphor regular.
   Alleen het klantlogo verandert per klant. */

@font-face { font-family:'Borna'; src:url('fonts/Borna-Regular.woff2')  format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Borna'; src:url('fonts/Borna-Medium.woff2')   format('woff2'); font-weight:500; font-display:block; }
@font-face { font-family:'Borna'; src:url('fonts/Borna-SemiBold.woff2') format('woff2'); font-weight:600; font-display:block; }

:root{
  --color-bg:#f4f1ec; --color-surface:#fff; --color-surface-sunk:#efeae2; --color-chip:#f0ece5;
  --color-ink:#3b3431; --color-ink-dim:#6b6b6b; --color-ink-faint:#a8a8a8;
  --color-accent:#3a2a22; --color-accent-fg:#efe9e1;
  --color-annotation:#d94f2a; --color-rule:#e3ddd3; --color-highlight:#e5ff11;

  --r-island:28px; --r-card:24px; --r-inner:16px; --r-sm:12px; --r-pill:999px;
  --shadow-island:0 1px 2px rgba(26,22,18,.04), 0 6px 20px rgba(26,22,18,.05);
  --shadow-float:0 4px 12px rgba(26,22,18,.08), 0 18px 48px rgba(26,22,18,.12);

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;

  --fs-xxs:10px; --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:24px; --fs-2xl:34px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  --cat-dev:#3f6f6b; --cat-copy:#b0473a; --cat-ops:#8a6d3b; --cat-strategy:#b5651d;

  --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-reveal:480ms; --dur-reveal-fade:200ms; --stagger:70ms; --dur-rail:420ms;

  --rail-w:72px; --nav-inset:8px; --dock-w:264px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
  font-family:'Borna', ui-sans-serif, system-ui, sans-serif;
  background:var(--color-bg); color:var(--color-ink);
  font-size:var(--fs-base); line-height:1.5;
}
button{ font:inherit; color:inherit; border:none; background:none; cursor:pointer; }
input, textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
.ic{ width:20px; height:20px; display:block; flex:none; }
.ic--sm{ width:16px; height:16px; }

/* ── de zwevende rail — 1:1 uit hub/src/components/Sidebar.css ──────── */
.rail{
  position:fixed; left:var(--nav-inset); top:var(--nav-inset); bottom:var(--nav-inset);
  width:var(--rail-w); background:var(--merkkleur, var(--color-surface)); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); z-index:30;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-4); padding:var(--space-3) 0;
  animation:rail-in var(--dur-rail) var(--ease-out) backwards;
}
.rail .client{ display:grid; place-items:center; width:44px; height:44px; }
/* Het ene merkteken is vierkant, het andere een brede lockup — passend maken,
   nooit oprekken. */
.rail .client img{ width:100%; height:100%; display:block; object-fit:contain; }
.rail .client .merkletter{ font-weight:600; font-size:20px; }

.rail nav{ position:relative; display:flex; flex-direction:column; gap:6px; }
/* De actieve markering is één los pil-element dat naar de nieuwe positie
   animeert (dezelfde Instagram-truc als motion's layoutId in de hub). */
.rail nav .active-pill{
  position:absolute; left:0; top:0; width:48px; height:48px; z-index:0;
  background:var(--color-ink); border-radius:var(--r-sm);
  transform:translateY(calc(var(--i, 0) * 54px));
  transition:transform var(--dur-slow) var(--ease-out);
}
.rail nav button{
  position:relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:var(--r-sm);
  color:var(--color-ink-dim);
  transition:background 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color:transparent;
}
.rail nav button > svg{ position:relative; z-index:1; }
.rail nav button.on{ color:var(--color-bg); }
@media (hover:hover) and (pointer:fine){
  .rail nav button:hover{ background:rgba(26,22,18,.06); color:var(--color-ink); }
  .rail nav button.on:hover{ background:transparent; color:var(--color-bg); }
  .rail nav button:hover .tip, .rail nav button:focus-visible .tip{
    opacity:1; transform:translateY(-50%) translateX(0);
  }
}

/* Draagt het portaal de merkkleur van de klant (`merkkleur` in klant.json), dan
   wordt de rail zwart: het merkteken van de klant in zijn eigen kleur, de iconen
   wit, en de actieve pil precies andersom — wit vlak, icoon in de merkkleur.
   Zonder merkkleur blijft de rail wit en verandert er niets. */
.rail[data-merk]{ background:var(--color-ink-deep, #1a1a1a); }
.rail[data-merk] nav .active-pill{ background:#fff; }
.rail[data-merk] nav button{ color:rgba(255,255,255,.72); }
.rail[data-merk] nav button.on{ color:var(--merkkleur); }
/* Het klantmerk is één vlak, dus een masker geeft 'm de merkkleur zonder een
   tweede bestand: de vorm komt uit de svg, de kleur uit klant.json. */
.rail .client .merkmask{
  display:block; width:100%; height:100%;
  background:var(--merkkleur);
  -webkit-mask:var(--merklogo) center/contain no-repeat;
          mask:var(--merklogo) center/contain no-repeat;
}
.rail[data-merk] .client .merkletter{ color:var(--merkkleur); }
/* Het Monostatic-merkteken onderin staat nu op zwart. */
.rail[data-merk] .studio img{ filter:brightness(0) invert(1); }
@media (hover:hover) and (pointer:fine){
  .rail[data-merk] nav button:hover{ background:rgba(255,255,255,.14); color:#fff; }
  .rail[data-merk] nav button.on:hover{ background:transparent; color:var(--merkkleur); }
}
/* Hover-tooltip — zwarte pill rechts van het icoon. */
.tip{
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
  padding:6px 12px; border-radius:8px; white-space:nowrap;
  pointer-events:none; opacity:0; z-index:40;
  transition:opacity 120ms ease, transform 120ms ease;
}
/* Het Monostatic-merkteken claimt de omgeving als de onze — zelfde gebaar als in
   de ilumae-portal: klein, onderaan, en op hover vertelt het waar je bent. */
.rail .studio{
  position:relative; margin-top:auto; display:grid; place-items:center;
  width:44px; height:44px; opacity:.55;
  transition:opacity var(--dur-base) linear;
}
.rail .studio:hover{ opacity:1; }
.rail .studio img{ display:block; width:29px; height:auto; }
.rail .studio::after{
  content:attr(data-label);
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xs); font-weight:var(--fw-medium);
  padding:6px 12px; border-radius:10px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) linear;
}
.rail .studio:hover::after{ opacity:1; }

/* ── de tweede kolom (submenu) ──────────────────────────── */
.sub{
  position:fixed; left:calc(2 * var(--nav-inset) + var(--rail-w));
  top:var(--nav-inset); bottom:var(--nav-inset);
  width:var(--dock-w); background:var(--color-surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-island); z-index:20; padding:var(--space-4) var(--space-3);
  display:flex; flex-direction:column; gap:var(--space-1);
  animation:dock-in var(--dur-base) var(--ease-out);
}
.sub[hidden]{ display:none; }
.sub h2{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); padding:0 var(--space-2) var(--space-2); }
.sub a{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sub a:hover{ background:var(--color-chip); color:var(--color-ink); }
.sub a.on{ background:var(--color-chip); color:var(--color-ink); font-weight:var(--fw-semibold); }

/* ── chroom rechtsboven ─────────────────────────────────── */
.chrome{
  position:fixed; top:var(--space-4); right:var(--space-5); z-index:25;
  display:flex; align-items:center; gap:var(--space-2);
}
.chrome .bel{
  position:relative; width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--color-surface); box-shadow:var(--shadow-island);
  display:grid; place-items:center; color:var(--color-ink-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.chrome .bel:hover{ color:var(--color-ink); }
.chrome .badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--color-ink); color:var(--color-bg);
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); line-height:1;
}
.chrome .av{
  width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--color-ink); color:var(--color-bg);
  display:grid; place-items:center; font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  cursor:pointer;
}

/* Het paneel onder de bel en de avatar. Eén vorm voor allebei: ze hangen op
   dezelfde plek en gaan op dezelfde manier weer dicht. */
.chrome-paneel{
  position:fixed; top:calc(var(--space-4) + 48px); right:var(--space-5); z-index:60;
  width:min(360px, calc(100vw - 2 * var(--space-4)));
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-float);
  padding:var(--space-4); animation:fade var(--dur-base) var(--ease-out);
}
.chrome-paneel h3{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.chrome-paneel__sub{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:2px; }
.chrome-paneel__leeg{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-2); line-height:1.5; }
.chrome-paneel__lijst{ display:flex; flex-direction:column; margin-top:var(--space-3); }
.chrome-paneel__rij{
  display:block; padding:var(--space-3); border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.chrome-paneel__rij:hover{ background:var(--color-chip); }
.chrome-paneel__rij b{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); display:block; }
.chrome-paneel__rij p{ font-size:var(--fs-xs); color:var(--color-ink-dim); margin-top:2px; line-height:1.45; }
.chrome-paneel__rij small{ font-size:var(--fs-xxs); color:var(--color-ink-faint); }

@media (max-width: 860px){
  .chrome-paneel{ top:calc(var(--space-3) + 48px); right:var(--space-3); left:var(--space-3); width:auto; }
}

/* ── canvas ─────────────────────────────────────────────── */
.page{
  margin-left:calc(var(--nav-inset) + var(--rail-w) + var(--space-3));
  padding:var(--space-6) var(--space-6) var(--space-8);
  transition:margin-left var(--dur-base) var(--ease-out);
}
.page.with-sub{ margin-left:calc(2 * var(--nav-inset) + var(--rail-w) + var(--dock-w) + var(--space-3)); }
.wrap{ max-width:1200px; margin-inline:auto; }

.screen-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.screen-header h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); line-height:1; letter-spacing:-.02em; }
.screen-header p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }
.who{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); }
.who .av{
  width:30px; height:30px; border-radius:var(--r-pill); background:var(--color-ink);
  color:var(--color-bg); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
}

/* ── de begroeting ──────────────────────────────────────── */
.hi{
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  margin:var(--space-6) 0 var(--space-5);
}
.hi .lottie{ width:44px; height:44px; flex:none; }
.hi .lottie svg{ display:block; }
.hi h1{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); letter-spacing:-.02em; line-height:1; }

/* ── het vraagveld ──────────────────────────────────────── */
.ask{
  width:min(740px,100%); margin:0 auto var(--space-7);
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
}
.ask textarea{
  border:none; outline:none; resize:none; background:transparent;
  font-size:var(--fs-base); line-height:1.5; min-height:84px;
}
.ask textarea::placeholder{ color:var(--color-ink-faint); }
.ask .row{ display:flex; justify-content:flex-end; }
.go{
  width:40px; height:40px; border-radius:var(--r-pill); background:var(--color-ink); color:var(--color-bg);
  display:grid; place-items:center; flex:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.go:hover:not(:disabled){ transform:translateX(2px); }
.go:disabled{ opacity:.45; cursor:default; }

/* ── bord ───────────────────────────────────────────────── */
.section{ border-top:1px solid var(--color-rule); padding-top:var(--space-4); }
.section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.section-header h2{ font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--color-ink-dim); }

/* het archief — één tik, geen verlamde vierde kolom */
.archive{ border-top:1px solid var(--color-rule); margin-top:var(--space-6); padding-top:var(--space-4); }
.archive summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); color:var(--color-ink-dim);
}
.archive summary::-webkit-details-marker{ display:none; }
.archive summary .chev{ display:grid; transform:rotate(90deg); transition:transform var(--dur-fast) var(--ease-out); }
.archive[open] summary .chev{ transform:rotate(-90deg); }
.archive summary .n{
  background:var(--color-ink); color:var(--color-bg); border-radius:var(--r-pill);
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); padding:2px 8px;
}
.archive ul{ list-style:none; margin-top:var(--space-4); }
.archive li{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--color-rule);
  font-size:var(--fs-sm);
}
.archive li:first-child{ border-top:none; }
.archive li span{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); }
.pebbles{ display:flex; gap:var(--space-1); }
.pebble{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  padding:var(--space-1) var(--space-3); border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease-out);
}
.pebble.on{ background:var(--color-surface); color:var(--color-ink); box-shadow:var(--shadow-island); }

.board{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); align-items:start; }
.col > header{ display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-1) var(--space-3); }
.col > header b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.col > header .n{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.stack{ display:flex; flex-direction:column; gap:var(--space-4); }

.tile{
  display:block; width:100%; text-align:left;
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-4); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.tile h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); line-height:1.35; }
.tile p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-1); }
.tile .meta{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint); }
.tile .meta .r{ margin-left:auto; }
.cat{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.dot{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--color-ink-faint); flex:none; }
.dot.comm{ background:var(--cat-copy); } .dot.op{ background:var(--cat-ops); } .dot.tech{ background:var(--cat-dev); }
/* Het soort punt: een stil randje, geen gekleurd blok. Het is een feit over de
   kaart, niet een waarschuwing. Alleen 'idee' en 'signaal' wijken af, want dat
   zijn de twee die niet vanzelf werk worden en dat mag je zien. */
.soort{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-dim);
  border:1px solid var(--color-rule);
  padding:1px 8px; border-radius:var(--r-pill); flex:none;
}
.soort--idee{ border-color:var(--cat-strategy); color:var(--cat-strategy); }
.soort--signaal{ border-color:var(--cat-ops); color:var(--cat-ops); }

/* De draad waar een punt bij hoort. Staat boven de meta-regel, want het is geen
   etiket maar een verwijzing: hier hangt meer aan. */
.draad{ display:flex; align-items:center; gap:6px; margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-dim); }
.draad b{ font-weight:var(--fw-medium); }
.draad .n{ color:var(--color-ink-faint); }

.meenemen h2{ display:flex; align-items:center; gap:var(--space-2); }
.meenemen ul{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-3); }
.meenemen li{ border-left:2px solid var(--color-rule); padding-left:var(--space-3); }
.meenemen li p{ font-size:var(--fs-sm); line-height:1.55; }
.meenemen li small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.concept-soort{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.concept-soort .label{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.flag{ display:flex; align-items:center; gap:6px; margin-top:var(--space-3); font-size:var(--fs-xs); font-weight:var(--fw-medium); }
.flag mark{ background:var(--color-highlight); color:var(--color-ink); padding:1px 6px; border-radius:var(--r-sm); }
.empty{ border-radius:var(--r-card); padding:var(--space-4); font-size:var(--fs-sm); color:var(--color-ink-faint); text-align:center; }

/* ── modal ──────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; background:rgba(26,22,18,.28); z-index:60;
  display:grid; place-items:center; padding:var(--space-5);
  animation:fade var(--dur-base) var(--ease-out);
}
@keyframes fade{ from{ opacity:0 } }
.modal{
  width:min(680px,100%); max-height:88vh; overflow:auto;
  background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-float);
  padding:var(--space-5); animation:rise var(--dur-base) var(--ease-out);
}
/* Een uiting op ware grootte heeft meer nodig dan een gesprek in een venster. */
.modal:has(.groot){ width:min(1100px,100%); }
@keyframes rise{ from{ opacity:0; transform:translateY(12px) } }
.modal .eyebrow{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); color:var(--color-ink-dim); margin-bottom:var(--space-3); }
.modal h2{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1.2; letter-spacing:-.01em; }
.modal .quote{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }
.brieftekst{ font-size:var(--fs-base); line-height:1.6; margin-top:var(--space-4); }
.muted{ font-size:var(--fs-sm); color:var(--color-ink-faint); }
.flip{ display:grid; transform:rotate(180deg); }
.sunk{
  background:var(--color-surface-sunk); border-radius:var(--r-inner);
  padding:var(--space-3) var(--space-4); margin-top:var(--space-4);
  font-size:var(--fs-sm); color:var(--color-ink-dim);
  display:flex; gap:var(--space-2); align-items:flex-start;
}
.sunk b{ color:var(--color-ink); font-weight:var(--fw-medium); }
.q{ margin-top:var(--space-5); }
.q > p{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:var(--space-2); }
.opts{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.opt{
  font-size:var(--fs-sm); padding:var(--space-2) var(--space-3); border-radius:var(--r-pill);
  border:1.5px solid var(--color-rule); transition:border-color var(--dur-fast) var(--ease-out);
}
.opt:hover{ border-color:var(--color-ink-faint); }
.opt.on{ border-color:var(--color-ink); background:var(--color-ink); color:var(--color-bg); font-weight:var(--fw-medium); }
.opt-other{ display:none; width:100%; margin-top:var(--space-2); }
.opt-other.show{ display:block; }
.opt-other input{
  width:100%; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm);
}
.modal .actions{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.btn{
  font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:var(--space-2) var(--space-4);
  border-radius:var(--r-pill); border:1.5px solid transparent;
  display:inline-flex; align-items:center; gap:var(--space-2);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--solid{ background:var(--color-ink); color:var(--color-bg); }
.btn--solid:hover{ background:var(--color-accent); color:var(--color-accent-fg); }
.btn--ghost{ border-color:var(--color-rule); }
.btn--ghost:hover{ border-color:var(--color-ink); }
/* Wegzetten is de lichtste van de drie, maar wel een knop: zonder rand en
   onderstreept. Eerst stond hij faint en tegen de rechterrand geduwd, en toen
   zag niemand hem staan. Zachter dan de rest mag; onzichtbaar niet. */
.btn--stil{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:3px; }
.btn--stil:hover{ color:var(--color-ink); }
.modal .actions .note{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-left:auto; }

/* ── verzoek-detail ─────────────────────────────────────── */
.back{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-4); }
.back:hover{ color:var(--color-ink); }
.detail{ display:grid; grid-template-columns:1fr 300px; gap:var(--space-4); align-items:start; }
.island{ background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-island); padding:var(--space-5); }
.island + .island{ margin-top:var(--space-4); }
.island h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin-bottom:var(--space-3); }
.island h1{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); line-height:1.2; letter-spacing:-.01em; }
.island .quote{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); }

.side dl > div{ padding:var(--space-3) 0; border-top:1px solid var(--color-rule); }
.side dl > div:first-child{ border-top:none; padding-top:0; }
.side dt{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-bottom:2px; }
.side dd{ font-size:var(--fs-sm); }

.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:22px 1fr; gap:var(--space-3); }
.step .rail-dot{ display:flex; flex-direction:column; align-items:center; }
.step .rail-dot i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--color-rule); margin-top:5px; }
.step .rail-dot span{ flex:1; width:1.5px; background:var(--color-rule); }
.step.done .rail-dot i{ background:var(--color-ink); }
.step.now .rail-dot i{ background:var(--color-ink); box-shadow:0 0 0 4px var(--color-chip); }
.step .txt{ padding-bottom:var(--space-4); }
.step:last-child .txt{ padding-bottom:0; }
.step b{ font-size:var(--fs-sm); font-weight:var(--fw-medium); display:block; }
.step small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.thread{ display:flex; flex-direction:column; gap:var(--space-4); }
.msg{ display:grid; grid-template-columns:32px 1fr; gap:var(--space-3); }
.msg .av{ width:32px; height:32px; border-radius:var(--r-pill); background:var(--color-chip); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-ink-dim); }
.msg.us .av{ background:var(--color-ink); color:var(--color-bg); }
.msg .b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.msg .b small{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-left:var(--space-2); }
.msg .b p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:2px; }
.reply{ display:flex; gap:var(--space-2); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-rule); }
.reply input{ flex:1; background:var(--color-surface-sunk); border:none; outline:none; border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm); }
/* Weghalen hoort bij je eigen bericht, niet bij de draad: klein, onder de
   tekst, en alleen zolang het venster open staat. */
.msg-intrek{ font-size:var(--fs-xs); padding:0; margin-top:var(--space-1); }

/* Een genoemde naam is geen link maar wel een aanwijzing: hij hoort op te
   vallen in een grijze regel, meer niet. */
.tagnaam{ color:var(--color-ink); font-weight:var(--fw-semibold); }
/* De kiezer hangt onder het veld, binnen het island: hij komt en gaat met wat
   je typt, dus hij mag geen ruimte innemen als hij dicht is. */
.reply{ position:relative; }
.tagkiezer{
  /* Boven het veld: onder staat de knop voor de stand, en die mag niet
     wegvallen achter een lijstje dat verschijnt terwijl je typt. */
  position:absolute; left:0; bottom:calc(100% + var(--space-1)); z-index:5; min-width:220px;
  background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--r-inner);
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:var(--space-1); display:flex; flex-direction:column;
}
/* display:flex wint van het hidden-attribuut, dus dat moet er expliciet
   overheen. Zonder deze regel staat er een leeg pilletje boven het veld. */
.tagkiezer[hidden]{ display:none; }
.tagkiezer button{ display:flex; align-items:baseline; gap:var(--space-2); text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--r-inner); }
.tagkiezer button:hover{ background:var(--color-surface-sunk); }
.tagkiezer b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.tagkiezer small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

/* De stand staat bij Status en is daar te zetten: drie standen naast elkaar,
   de huidige ingevuld. Geen knop die ergens anders in het scherm zweeft. */
.standkeuze{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:2px; }
.standkeuze button{
  font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:var(--space-1) var(--space-3);
  border-radius:var(--r-pill); border:1.5px solid var(--color-rule); color:var(--color-ink-dim);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.standkeuze button:hover:not([aria-pressed="true"]){ border-color:var(--color-ink); color:var(--color-ink); }
.standkeuze button[aria-pressed="true"]{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-bg); }
.standkeuze button[disabled]{ opacity:.5; }

/* ── context & lab ──────────────────────────────────────── */
.prose{ max-width:720px; }
.prose h3{ font-size:var(--fs-base); font-weight:var(--fw-semibold); margin:var(--space-5) 0 var(--space-2); }
.prose h3:first-child{ margin-top:0; }
.prose p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-2); }
.prose ul{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2); }
.prose li{ font-size:var(--fs-sm); color:var(--color-ink-dim); padding-left:var(--space-4); text-indent:calc(-1 * var(--space-4)); }
.prose li::before{ content:'— '; color:var(--color-ink-faint); }
.prose li b{ color:var(--color-ink); font-weight:var(--fw-medium); }

.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--space-3); }
.sw i{ display:block; height:64px; border-radius:var(--r-inner); }
.sw b{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium); margin-top:var(--space-2); }
.sw small{ font-size:var(--fs-xs); color:var(--color-ink-faint); }

.grid-img{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-3); }
.ph{
  aspect-ratio:4/3; border-radius:var(--r-inner); background:var(--color-surface-sunk);
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-3);
  font-size:var(--fs-xs); color:var(--color-ink-dim);
}
.ph b{ font-weight:var(--fw-medium); color:var(--color-ink); display:block; font-size:var(--fs-sm); }

/* Bronmateriaal is een la, geen bord: brede kaarten, want de naam van een
   rapport is lang en moet leesbaar blijven. */
.bronnen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-4); align-items:start; }

.lab{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-4); }
.lab .card{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lab .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
.icon-chip{ width:40px; height:40px; border-radius:var(--r-pill); background:var(--color-chip); display:grid; place-items:center; margin-bottom:var(--space-2); }
.lab .card b{ font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.lab .card p{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
.lab .card span{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:auto; padding-top:var(--space-3); }

@media (max-width:980px){
  .board{ grid-template-columns:1fr; gap:var(--space-5); }
  .detail{ grid-template-columns:1fr; }
  .page{ padding:var(--space-5) var(--space-4) var(--space-7); }
}

/* ── motion — uit hub/src/styles/motion.css ─────────────────────────
 * Twee animaties over hetzelfde element: de fade lineair (een opacity die
 * "vertraagt" ziet niemand), de opkomst van +50px naar 0 ease-out — dáár zit
 * het gevoel. backwards, niet both: anders wint de eindtransform van :hover. */
.reveal-stagger > *{
  animation:
    reveal-fade var(--dur-reveal-fade) linear backwards,
    reveal-drop var(--dur-reveal) var(--ease-out) backwards;
}
.reveal-stagger{ --reveal-base:120ms; }
.reveal-stagger > *:nth-child(1){ animation-delay:calc(var(--reveal-base) + 0 * var(--stagger)), calc(var(--reveal-base) + 0 * var(--stagger)); }
.reveal-stagger > *:nth-child(2){ animation-delay:calc(var(--reveal-base) + 1 * var(--stagger)), calc(var(--reveal-base) + 1 * var(--stagger)); }
.reveal-stagger > *:nth-child(3){ animation-delay:calc(var(--reveal-base) + 2 * var(--stagger)), calc(var(--reveal-base) + 2 * var(--stagger)); }
.reveal-stagger > *:nth-child(4){ animation-delay:calc(var(--reveal-base) + 3 * var(--stagger)), calc(var(--reveal-base) + 3 * var(--stagger)); }
.reveal-stagger > *:nth-child(5){ animation-delay:calc(var(--reveal-base) + 4 * var(--stagger)), calc(var(--reveal-base) + 4 * var(--stagger)); }
.reveal-stagger > *:nth-child(6){ animation-delay:calc(var(--reveal-base) + 5 * var(--stagger)), calc(var(--reveal-base) + 5 * var(--stagger)); }
/* Een trap die dóórloopt tot item twintig is geen choreografie meer. */
.reveal-stagger > *:nth-child(n + 7){ animation-delay:calc(var(--reveal-base) + 6 * var(--stagger)), calc(var(--reveal-base) + 6 * var(--stagger)); }

@keyframes reveal-fade{ from{ opacity:0 } to{ opacity:1 } }
/* Van onderen omhoog: de blokken komen op hun plek toe, ze vallen er niet in. */
@keyframes reveal-drop{ from{ transform:translateY(50px) } to{ transform:none } }
@keyframes rail-in{ from{ transform:translateX(-110%) } to{ transform:none } }
@keyframes dock-in{ from{ transform:translateX(-340px); opacity:0 } to{ transform:none; opacity:1 } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── galerij: flyers en mails ────────────────────────────── */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--space-4); }
.work{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* De lift hoort bij de klik: hij staat op .work omdat élke .work nu een knop of
   een link is. Komt er ooit een kaart zonder bestemming, dan hoort die lift
   daar niet op. */
.work{ cursor:pointer; text-align:left; }
.work:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); }
/* Waar de klik heen gaat, in de voet van de kaart — zodat je het ziet zonder
   te hoeven hoveren. */
.work .b .foot .werk-open{
  margin-left:auto; color:var(--color-ink-dim);
  text-decoration:underline; text-underline-offset:2px;
}
.work:hover .b .foot .werk-open{ color:var(--color-ink); }

/* ── één uiting op ware grootte ──────────────────────────── */
.groot{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:var(--space-5); align-items:start; }
.groot__beeld{
  background:var(--color-surface-sunk); border-radius:var(--r-card); overflow:hidden;
  display:grid; place-items:center; max-height:72vh;
}
.groot__beeld img{ max-width:100%; max-height:72vh; object-fit:contain; display:block; }
.groot__b h2{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); }
.groot__b > p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:var(--space-2); line-height:1.55; }
.groot__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint); }
.groot__blader{ display:flex; gap:var(--space-1); margin-left:auto; }
@media (max-width:860px){
  .groot{ grid-template-columns:1fr; gap:var(--space-4); }
  .groot__beeld, .groot__beeld img{ max-height:46vh; }
  .groot__blader{ margin-left:0; }
}
.work .shot{
  aspect-ratio:3/4; background:var(--color-surface-sunk); overflow:hidden;
  display:grid; place-items:start center;
}
.work .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.work .shot.mail img{ object-fit:cover; }
.work .b{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); flex:1; }
/* De datum staat bóven de titel, niet in de voet: bij twee flyers die op
   elkaar lijken is "welke is de nieuwste" de eerste vraag. */
.work .b .datum{
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint);
}
.work .b b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.work .b p{ font-size:var(--fs-xs); color:var(--color-ink-dim); }
.work .b .foot{
  display:flex; align-items:center; gap:var(--space-2);
  margin-top:auto; padding-top:var(--space-3); font-size:var(--fs-xs); color:var(--color-ink-faint);
}
.work .b .foot a{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }
.work .b .foot a:hover{ color:var(--color-ink); }
.stat{ font-size:var(--fs-xxs); font-weight:var(--fw-semibold); padding:2px 8px; border-radius:var(--r-pill); background:var(--color-chip); color:var(--color-ink-dim); }
.stat.def{ background:var(--color-ink); color:var(--color-bg); }
.stat.wacht{ background:var(--color-highlight); color:var(--color-ink); }

.lede{ font-size:var(--fs-sm); color:var(--color-ink-dim); max-width:640px; margin-bottom:var(--space-5); }
.lede b{ color:var(--color-ink); font-weight:var(--fw-medium); }

/* de koppeling met ons eigen werk */
.link-hub{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-xs); color:var(--color-ink-dim);
}
.link-hub:hover{ color:var(--color-ink); }
.side .bron{ font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-3); line-height:1.5; }

/* ── beeldbank: mappen en assets ─────────────────────────── */
.work.map{ display:block; }
/* Vier beelden als collage: de kaart moet in één blik laten zien wat voor
   reeks het is. Vullend en uit het midden gesneden, zonder rand eromheen —
   een beeld dat klein in een grijs vlak zweeft zegt niets. */
.mapshot{
  aspect-ratio:16/10; background:var(--color-surface);
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;
  color:var(--color-ink-faint); overflow:hidden;
}
.mapshot span{ display:block; width:100%; height:100%; overflow:hidden; }
.mapshot img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* Minder dan vier: laat ze de ruimte vullen in plaats van een gat te laten. */
.mapshot > span:only-child{ grid-column:1 / -1; grid-row:1 / -1; }
.mapshot > span:first-child:nth-last-child(2), .mapshot > span:first-child:nth-last-child(2) ~ span{ grid-row:1 / -1; }
.mapshot > span:first-child:nth-last-child(3){ grid-row:1 / -1; }

.assets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-4); }
.asset{ display:flex; flex-direction:column; gap:var(--space-2); }
.asset > span{
  aspect-ratio:4/3; background:var(--color-surface); border-radius:var(--r-inner);
  box-shadow:var(--shadow-island); display:grid; place-items:center; padding:var(--space-4);
  overflow:hidden;
}
.asset > span.foto{ padding:0; }
.asset img{ max-width:100%; max-height:100%; object-fit:contain; }
.asset > span.foto img{ width:100%; height:100%; object-fit:cover; }
.asset figcaption{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.section-header .stat{ margin-left:auto; }

/* ── Cmd-K — zelfde jas als hub/src/components/SearchPalette.css ─────── */
.cmdk__scrim{
  position:fixed; inset:0; z-index:2000;
  background:rgba(26,22,18,.3); backdrop-filter:blur(2px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:11vh 16px 16px; animation:fade var(--dur-fast) var(--ease-out);
}
.cmdk{ width:min(680px,100%); display:flex; flex-direction:column; gap:14px;
  animation:fade var(--dur-fast) var(--ease-out); }
.cmdk__bar{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--color-surface); border-radius:var(--r-island);
  box-shadow:var(--shadow-float); color:var(--color-ink-faint);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
.cmdk__bar:focus-within{ box-shadow:var(--shadow-float), 0 0 0 3px rgba(217,79,42,.12); }
.cmdk__input{
  flex:1; border:0; outline:0; background:none;
  font-size:var(--fs-lg); letter-spacing:-.3px; color:var(--color-ink);
}
.cmdk__input::placeholder{ color:var(--color-ink-faint); }
.cmdk__kbd{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold); line-height:1;
  color:var(--color-ink-dim); background:rgba(26,22,18,.06); border-radius:6px;
}
.cmdk__panel{ background:var(--color-surface); border-radius:var(--r-island); box-shadow:var(--shadow-float); overflow:hidden; }
.cmdk__list{ max-height:52vh; overflow-y:auto; padding:6px; }
.cmdk__group + .cmdk__group{ border-top:1px solid var(--color-rule); }
.cmdk__grouphead{
  margin:10px 12px 6px; font-size:var(--fs-xxs); font-weight:var(--fw-medium);
  color:var(--color-ink-faint);
}
/* Geen transitie op de rij: de highlight moet de pijltoets bijhouden, niet
   ernaartoe faden. Hover is een muisgebaar en mag wel zacht. */
.cmdk__row{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:10px 12px; text-align:left; border-radius:var(--r-sm); color:var(--color-ink);
}
.cmdk__row:hover{ transition:background var(--dur-fast) var(--ease-out); background:var(--color-bg); }
.cmdk__row.is-active{ background:var(--color-bg); }
.cmdk__rowicon{
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(26,22,18,.05); color:var(--color-ink-dim);
}
.cmdk__row.is-active .cmdk__rowicon{ background:var(--color-ink); color:var(--color-bg); }
.cmdk__rowmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cmdk__rowtitle{
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmdk__rowtitle mark{ background:var(--color-highlight); color:var(--color-ink); border-radius:2px; padding:0 1px; }
.cmdk__rowsub{ font-size:var(--fs-xs); color:var(--color-ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk__pill{
  flex:none; padding:4px 11px; font-size:var(--fs-xxs); font-weight:var(--fw-semibold);
  color:var(--color-ink-dim); background:var(--color-chip); border-radius:var(--r-pill); white-space:nowrap;
}
.cmdk__empty{ padding:28px 16px; text-align:center; color:var(--color-ink-dim); font-size:var(--fs-sm); }
.cmdk__foot{
  display:flex; align-items:center; gap:var(--space-3);
  padding:10px 16px; border-top:1px solid var(--color-rule);
  font-size:var(--fs-xxs); color:var(--color-ink-faint);
}

/* ── de bouwstenen van UP zelf ───────────────────────────
 * Alles hieronder toont UP's eigen ontwerp, dus hier geldt hún letter en hún
 * kleur — gescoped in .up, zodat het portaal eromheen van ons blijft. */
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-regular.ttf');   font-weight:400; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-medium.ttf');    font-weight:500; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-demibold.ttf');  font-weight:600; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-bold.ttf');      font-weight:700; font-display:block; }
@font-face { font-family:'TT Norms Pro'; src:url('assets/up/fonts/tt-norms-pro-extrabold.ttf'); font-weight:800; font-display:block; }
.up{ font-family:'TT Norms Pro', 'Helvetica Neue', Arial, sans-serif; font-synthesis:none; }

.blok{ margin-top:var(--space-6); }
.blok:first-of-type{ margin-top:0; }
.blok > h2{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-ink-dim);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--color-rule); margin-bottom:var(--space-4);
}
.blok > p.uitleg{ font-size:var(--fs-sm); color:var(--color-ink-dim); max-width:640px; margin:calc(-1 * var(--space-2)) 0 var(--space-4); }
.blok > p.uitleg code, .mono{
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.92em;
  background:var(--color-chip); border-radius:4px; padding:1px 5px;
}
.sub-h{ font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--color-ink-faint); margin:var(--space-4) 0 var(--space-3); }

/* tokens */
.tok{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--space-3); }
.tok .kaart{
  background:var(--color-surface); border-radius:var(--r-inner); box-shadow:var(--shadow-island);
  padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2);
}
.tok .vlak{ height:56px; border-radius:var(--r-sm); border:1px solid var(--color-rule); }
.tok b{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); font-weight:var(--fw-medium); }
.tok small{ font-size:var(--fs-xs); color:var(--color-ink-faint); font-family:ui-monospace, "SF Mono", Menlo, monospace; }

.rij{
  display:grid; grid-template-columns:180px 1fr; gap:var(--space-4); align-items:baseline;
  padding:var(--space-3) 0; border-top:1px solid var(--color-rule);
}
.rij:first-child{ border-top:none; }
.rij dt{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.rij dd{ min-width:0; }
.rij .meta{ display:block; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:4px; }

/* componenten-vitrine */
.vitrine{
  background:var(--color-surface); border-radius:var(--r-card); box-shadow:var(--shadow-island);
  padding:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center;
}
.vitrine.donker{ background:#1A1A1A; }
.vitrine.kolom{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.proef{ display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.proef > figcaption{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xxs); color:var(--color-ink-faint); }

/* UP-knoppen, exact de tokens: pill 41px, 10/24, 3px outline */
.up-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border-radius:41px;
  font-size:16px; font-weight:800; line-height:1.25; letter-spacing:-.32px;
}
.up-btn--solid{ background:#1A1A1A; color:#fff; }
.up-btn--outline{ background:transparent; color:#1A1A1A; box-shadow:inset 0 0 0 3px #1A1A1A; }
.up-btn--icon{ width:40px; height:40px; padding:0; justify-content:center; border-radius:9999px; }
/* Een <img> erft geen currentColor, dus een zwart pictogram verdwijnt op een
   zwarte knop. Als masker wél: het vlak is currentColor, het bestand de vorm. */
.up-ico{
  display:inline-block; width:18px; height:18px; flex:none;
  background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;
}
.up-btn--icon .up-ico{ width:20px; height:20px; }
.icoon-vak .up-ico{ width:32px; height:32px; color:#1A1A1A; }

.up-badge{
  display:inline-block; padding:6px 14px; border-radius:41px;
  background:#FF3A00; color:#1A1A1A; font-weight:800; letter-spacing:-.02em; font-size:15px;
}
.up-badge--ink{ background:#1A1A1A; color:#fff; }
.up-badge--outline{ background:transparent; color:#FF3A00; box-shadow:inset 0 0 0 2px #FF3A00; }
.up-badge--groot{ font-size:24px; padding:10px 24px; }

.up-price{
  width:104px; height:104px; border-radius:9999px; background:#FF3A00; color:#1A1A1A;
  display:grid; place-content:center; text-align:center; line-height:1;
}
.up-price--ink{ background:#1A1A1A; color:#fff; }
.up-price--groot{ width:150px; height:150px; }
.up-price b{ font-size:34px; font-weight:700; font-feature-settings:"lnum" 1; letter-spacing:-.02em; }
.up-price--groot b{ font-size:48px; }
.up-price sup{ font-size:.55em; font-weight:800; vertical-align:super; }
.up-price span{ display:block; font-size:11px; font-weight:600; margin-top:5px; }
.up-price--groot span{ font-size:14px; }

.up-dotted{ width:100%; height:3px; background-image:radial-gradient(circle, #1A1A1A 1px, transparent 1.2px); background-size:9px 3px; }
.up-dotted.licht{ background-image:radial-gradient(circle, #fff 1px, transparent 1.2px); }

.logo-vak{
  background:var(--color-surface); border:1px solid var(--color-rule); border-radius:var(--r-inner);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
  align-items:flex-start; justify-content:space-between; min-height:132px;
}
.logo-vak.donker{ background:#1A1A1A; border-color:#1A1A1A; }
.logo-vak img{ max-width:100%; max-height:52px; }
.logo-vak figcaption{ font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:var(--fs-xxs); color:var(--color-ink-faint); }
.logo-vak.donker figcaption{ color:#989898; }
.logo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3); }

.icoon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:var(--space-3); }
.icoon-vak{
  aspect-ratio:1; background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--r-sm); display:grid; place-items:center; padding:var(--space-3);
}
.icoon-vak img{ width:32px; height:32px; }
.patroon{ height:120px; border-radius:var(--r-inner); border:1px solid var(--color-rule); background-repeat:repeat; background-size:120px; }

/* Wat het moet opleveren. Mono vult het in, de klant stelt bij: een vraag erbij
   maakt er weer een formulier van, een ingevuld voorstel niet. */
.doel{ margin-top:var(--space-4); }
.doel > p{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:var(--space-2); }
.doel input{
  width:100%; background:var(--color-surface-sunk); border:none; outline:none;
  border-radius:var(--r-inner); padding:var(--space-3); font-size:var(--fs-sm);
}
.doel input:focus{ box-shadow:0 0 0 2px var(--color-ink); }
.doel > small{ display:block; font-size:var(--fs-xs); color:var(--color-ink-faint); margin-top:var(--space-2); }
.doel--vast{
  display:flex; gap:var(--space-3); align-items:baseline;
  margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--color-rule);
}
.doel--vast > p{ font-size:var(--fs-xs); color:var(--color-ink-faint); font-weight:var(--fw-regular); margin:0; flex:none; }
.doel--vast > span{ font-size:var(--fs-sm); }

/* Mono die nadenkt. De wachttijd is echt (een modelaanroep duurt seconden),
   dus die verbergen we niet — we laten zien dat er iets gebeurt. */
.denk{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) 0 var(--space-3); color:var(--color-ink-dim); font-size:var(--fs-sm); }
.denk .pulse{ display:flex; gap:5px; }
.denk .pulse i{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--color-ink-faint); animation:blip 1.1s infinite ease-in-out; }
.denk .pulse i:nth-child(2){ animation-delay:.15s; }
.denk .pulse i:nth-child(3){ animation-delay:.3s; }
@keyframes blip{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
.modal .quote{ font-size:var(--fs-sm); color:var(--color-ink-faint); }

.toast{
  position:fixed; left:50%; bottom:var(--space-5); transform:translateX(-50%);
  background:var(--color-ink); color:var(--color-bg); z-index:3000;
  padding:var(--space-3) var(--space-4); border-radius:var(--r-pill);
  font-size:var(--fs-sm); box-shadow:var(--shadow-float);
  animation:fade var(--dur-base) var(--ease-out);
}

.opleveringen{ list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.opleveringen li{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--fs-sm); }
.opleveringen li small{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-ink-faint); }
.opleveringen li a{ text-decoration:underline; text-underline-offset:2px; color:var(--color-ink-dim); }

/* ── meetings: een verticale tijdlijn, nieuwste boven ───────
 * Zelfde stip-en-lijn als de voortgang bij een verzoek, maar met een eiland
 * per gesprek: datum erboven, titel, waar het over ging, wie erbij waren en
 * de ingangen naar het deck en het verslag. Een los deck krijgt hetzelfde
 * kaartje, met het soort-label erbij. */
.tijdlijn{ list-style:none; display:flex; flex-direction:column; max-width:720px; }
.tijdlijn li{ display:grid; grid-template-columns:22px 1fr; gap:var(--space-4); }
.tijdlijn .rail-dot{ display:flex; flex-direction:column; align-items:center; }
.tijdlijn .rail-dot i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--color-ink); margin-top:5px; flex:none; }
.tijdlijn .rail-dot span{ flex:1; width:1.5px; background:var(--color-rule); }
.tijdlijn .gesprek{ padding-bottom:var(--space-5); min-width:0; }
.tijdlijn li:last-child .gesprek{ padding-bottom:0; }
.tijdlijn .datum{ display:block; font-size:var(--fs-xs); color:var(--color-ink-dim); margin-bottom:var(--space-2); }
.tijdlijn .island{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.tijdlijn .island h2{ margin:0; }
.tijdlijn .island p{ font-size:var(--fs-sm); color:var(--color-ink-dim); }

/* Deck en verslag naast elkaar; op een telefoon onder elkaar zodra het niet
   meer past. De knoppen dragen hun eigen ruimte, dus geen marge op .btn. */
.acties{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.aanwezig{ display:flex; align-items:center; gap:var(--space-2); }

/* ── mobiel — een eigen app, geen versmalde desktop ─────────
 * De grens is 860px, net als in de hub. De rail wordt een zwevende pill-bar
 * onderaan, het submenu een horizontale strook onder de kop, en het bord één
 * kolom. Desktop blijft daarbij precies zoals hij was. */
@media (max-width: 860px) {
  .rail{
    position:fixed; top:auto; left:0; right:0;
    bottom:calc((6px + env(safe-area-inset-bottom, 0px)));
    width:max-content; max-width:calc(100% - 24px); margin-inline:auto; height:auto;
    flex-direction:row; gap:2px; padding:6px 8px;
    border-radius:var(--r-pill);
    background:color-mix(in srgb, var(--color-surface) 90%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
    border:1px solid color-mix(in srgb, var(--color-surface) 55%, transparent);
    box-shadow:var(--shadow-float);
    animation:rail-in-mobiel var(--dur-rail) var(--ease-out) backwards;
  }
  @keyframes rail-in-mobiel{ from{ transform:translateY(140%) } to{ transform:none } }
  .rail .client, .rail .studio{ display:none; }
  .rail nav{ flex-direction:row; gap:2px; }
  /* Op mobiel staat de rail horizontaal, dus schuift de pil zijwaarts. */
  .rail nav .active-pill{ height:44px; width:52px; border-radius:var(--r-pill); transform:translateX(calc(var(--i, 0) * 54px)); }
  .rail nav button{ width:52px; height:44px; border-radius:var(--r-pill); }
  .tip{ display:none; }

  /* Het submenu: geen tweede kolom maar een strook die meescrollt. */
  .sub{
    position:static; width:auto; height:auto; inset:auto;
    flex-direction:row; overflow-x:auto; gap:var(--space-2);
    /* Onder de zwevende knoppen door, en dan mag de pagina er strak op volgen. */
    padding:var(--space-7) var(--space-4) 0; margin:0;
    border-radius:0; background:transparent; box-shadow:none; animation:none;
    scrollbar-width:none;
  }
  .sub::-webkit-scrollbar{ display:none; }
  .sub h2{ display:none; }
  .sub a{
    flex:none; background:var(--color-surface); box-shadow:var(--shadow-island);
    border-radius:var(--r-pill); padding:var(--space-2) var(--space-3); white-space:nowrap;
  }
  .sub a.on{ background:var(--color-ink); color:var(--color-bg); }

  /* Alles begint onder de zwevende knoppen rechtsboven. */
  .page{ margin-left:0; padding:var(--space-7) var(--space-4) var(--space-9); }
  .page.with-sub{ margin-left:0; padding:var(--space-4) var(--space-4) var(--space-9); }

  .chrome{ top:var(--space-3); right:var(--space-3); }
  /* De begroeting begint onder de knoppen rechtsboven, niet eronderdoor. */
  .hi{ margin:var(--space-3) 0 var(--space-4); gap:var(--space-2); flex-wrap:wrap; }
  .hi h1{ font-size:var(--fs-xl); }
  .hi .lottie{ width:30px; height:30px; }
  .ask{ width:100%; padding:var(--space-3); margin-bottom:var(--space-6); }
  .ask textarea{ min-height:64px; }

  .screen-header{ margin-bottom:var(--space-4); }
  .screen-header h1{ font-size:var(--fs-xl); }
  .board{ grid-template-columns:1fr; gap:var(--space-5); }
  .pebbles{ overflow-x:auto; scrollbar-width:none; }
  .pebbles::-webkit-scrollbar{ display:none; }
  .pebble{ flex:none; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:var(--space-3); }
  .board{ padding-bottom:var(--space-8); }

  .detail{ grid-template-columns:1fr; }
  /* Status en voortgang eerst: wie op zijn telefoon kijkt wil weten hoe het
     ervoor staat, niet de hele briefing herlezen. */
  .detail > div:last-child{ order:-1; }
  .island{ padding:var(--space-4); }
  .modal{ padding:var(--space-4); max-height:92vh; }
  .modal .actions{ flex-wrap:wrap; }
  .modal .actions .note{ margin-left:0; width:100%; }
  .gallery, .assets, .grid-img, .swatches, .tok{ grid-template-columns:1fr 1fr; }
  .tijdlijn li{ gap:var(--space-3); }
  .tijdlijn .gesprek{ padding-bottom:var(--space-4); }
  .lab{ grid-template-columns:1fr; }
  .rij{ grid-template-columns:1fr; gap:var(--space-1); }
  .cmdk__scrim{ padding:6vh 12px 12px; }
  .toast{ bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 520px) {
  .gallery, .assets, .grid-img, .swatches, .tok{ grid-template-columns:1fr; }
}

/* Labels op een beeldreeks: wat het is, wat je ermee mag, of het nog klopt. */
.merken{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.merken.groot{ margin:0 0 var(--space-4); gap:var(--space-2); }
.merk{
  font-size:var(--fs-xxs); font-weight:var(--fw-medium);
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--color-chip); color:var(--color-ink-dim);
}
.merken.groot .merk{ font-size:var(--fs-xs); padding:5px 12px; }
.merk.ok{ background:#E8F0E6; color:#2C6E2C; }
.merk.let{ background:var(--color-highlight); color:var(--color-ink); }
.merk.nee{ background:var(--color-annotation); color:#fff; }
.work.reeks{ display:block; }
/* Nog geen beeld in de hub: geen grijs vlak met een icoontje, maar een kaart
   die zegt wat er mist en waar het staat. */
.mapshot .leeg{
  grid-column:1 / -1; grid-row:1 / -1; display:grid; place-items:center; align-content:center;
  gap:var(--space-1); background:var(--color-surface); color:var(--color-ink-faint);
  border:1px dashed var(--color-rule); border-radius:var(--r-inner); text-align:center;
}
.mapshot .leeg b{ font-size:var(--fs-sm); color:var(--color-ink); }
.mapshot .leeg span{ font-size:var(--fs-xs); }
.reeks-meta{ margin-top:var(--space-4); }
.reeks-meta > div{ display:grid; grid-template-columns:150px 1fr; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--color-rule); }
.reeks-meta dt{ font-size:var(--fs-xs); color:var(--color-ink-faint); }
.reeks-meta dd{ font-size:var(--fs-sm); }
.reeks-meta a{ text-decoration:underline; text-underline-offset:2px; }

/* ── docs: een feitenpagina moet te scannen zijn ──────────
 * Koppen met een lijn erboven markeren de secties, tabellen dragen de harde
 * gegevens, en een definitie zet de term voorop. */
.prose{ max-width:760px; }
.prose > *:first-child{ margin-top:0; }
.prose h2{
  font-size:var(--fs-lg); font-weight:var(--fw-semibold);
  margin:var(--space-6) 0 var(--space-3);
  padding-top:var(--space-4); border-top:1px solid var(--color-rule);
}
/* De streep boven een h2 scheidt twee secties. Begint de tekst er juist mee
   (een verslag doet dat), dan scheidt hij niets en hangt hij los in het
   eiland. */
.prose > h2:first-child{ padding-top:0; border-top:0; }
.prose h3{
  font-size:var(--fs-base); font-weight:var(--fw-semibold);
  margin:var(--space-5) 0 var(--space-2);
}
.prose h4{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-ink-faint);
  margin:var(--space-4) 0 var(--space-2);
}
.prose p{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-bottom:var(--space-3); line-height:1.6; }
.prose p.lede{ font-size:var(--fs-base); color:var(--color-ink); margin-bottom:var(--space-4); }
.prose p.letop{
  font-size:var(--fs-sm); color:var(--color-ink);
  background:var(--color-surface-sunk); border-radius:var(--r-inner);
  padding:var(--space-3) var(--space-4); margin:var(--space-3) 0 var(--space-4);
}
.prose hr{ border:0; border-top:1px solid var(--color-rule); margin:var(--space-5) 0; }

.prose ul.lijst{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin:0 0 var(--space-4); }
.prose ul.lijst li{
  font-size:var(--fs-sm); color:var(--color-ink-dim); line-height:1.55;
  padding-left:var(--space-4); text-indent:calc(-1 * var(--space-4));
}
.prose ul.lijst li::before{ content:'— '; color:var(--color-ink-faint); }
/* Een definitie: term links, uitleg rechts. Op smal scherm onder elkaar. */
.prose ul.lijst li.def{
  display:grid; grid-template-columns:190px 1fr; gap:var(--space-3);
  padding:var(--space-2) 0; text-indent:0;
  border-top:1px solid var(--color-rule);
}
.prose ul.lijst li.def::before{ content:none; }
.prose ul.lijst li.def .term{ font-weight:var(--fw-medium); color:var(--color-ink); }

.tabel-wrap{ margin:0 0 var(--space-4); overflow-x:auto; }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.prose th{
  text-align:left; font-size:var(--fs-xs); font-weight:var(--fw-medium);
  color:var(--color-ink-faint); padding:0 var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--color-rule); white-space:nowrap;
}
.prose td{
  padding:var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--color-rule); color:var(--color-ink-dim); vertical-align:top;
}
.prose td:first-child{ color:var(--color-ink); font-weight:var(--fw-medium); white-space:nowrap; }
.prose tr:last-child td{ border-bottom:none; }
.prose a{ text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){
  .prose ul.lijst li.def{ grid-template-columns:1fr; gap:2px; }
  .prose th, .prose td{ font-size:var(--fs-xs); }
}

/* Concepten uit het gesprek: zichtbaar, maar duidelijk nog niet ingediend. */
.concepten .section-header h2{ display:flex; align-items:center; gap:var(--space-2); }
.tile.concept{ border:1px dashed var(--color-rule); box-shadow:none; background:transparent; }
.tile.concept p{ margin-top:var(--space-2); }
.concept-acties{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.concept-acties .btn{ font-size:var(--fs-xs); padding:var(--space-1) var(--space-3); }


/* ── Merktekens in een galerij ─────────────────────────────────────────────
   Een vel vult zijn kader; een merkteken past erin. Zonder dit sneed
   object-fit:cover de brede lockup tot een paar letters. De vlakken zijn de
   klantkleuren, nodig om een wit merkteken zichtbaar te maken. Die kleuren
   staan hier niet: app.js zet ze als --vlak-<naam> uit de huisstijl van de
   klant, anders staat er een klantkleur in de stylesheet van álle portalen. */

.work .shot--merk{ place-items:center; padding:var(--space-5); }
.work .shot--merk img{ width:100%; height:100%; object-fit:contain; object-position:center; }

/* ── narrowcasting: schermen als beheer ──────────────────────────────────
   Elk scherm is een kaart met de uiting op ware verhouding (9:16), de staat
   eronder en de knop om 'm om te zetten. Geen archief maar bediening. */
.tvgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:var(--space-3); margin-top:var(--space-3); }
/* De kaart ligt op z'n kant: het scherm links op ware verhouding, de bediening
   ernaast. Zo blijft de rij laag en vult hij de breedte. */
.tvkaart{ background:var(--color-surface); border-radius:var(--r-card); overflow:hidden;
          box-shadow:var(--shadow-island); display:grid; grid-template-columns:132px 1fr; }
.tvbeeld{ aspect-ratio:9 / 16; background:#111; }
.tvbeeld img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tvkaart figcaption{ padding:var(--space-3); display:flex; flex-direction:column; gap:8px; }
.tvkaart figcaption b{ font-size:var(--fs-md, 20px); font-weight:var(--fw-medium); }
.tvkaart .uiting{ font-size:var(--fs-sm); color:var(--color-ink-dim); }
.tvvoet{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--space-2); font-size:var(--fs-xs); flex-wrap:wrap; }
.tvvoet .staat{ display:inline-flex; align-items:center; gap:6px; color:var(--color-ink-dim); }
.tvvoet .staat::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--color-ink-faint); }
.tvvoet .staat.aan::before{ background:#3f9142; }
.tvvoet .tvlink{ color:var(--color-ink-dim); text-decoration:underline; text-underline-offset:2px; }
.tvvoet .tvlink:hover{ color:var(--color-ink); }
.tvvoet .tvcfg{ margin-left:auto; font-size:var(--fs-xs); padding:6px 14px; }

/* De carrousel per scherm: wat er in welke volgorde langskomt, en hoe lang. */
.tvlijst{ list-style:none; display:grid; gap:6px; margin-top:4px; }
.tvlijst li{ display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); color:var(--color-ink-dim); }
.tvlijst .n{ width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:6px;
             background:var(--color-chip); color:var(--color-ink); font-weight:var(--fw-medium); font-size:11px; }
.tvlijst .t{ color:var(--color-ink); }
.tvlijst .s{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* ── huisstijl uit de store: paren, beeld, toon (elke klant met tokens) ── */
.paren{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-3); }
.paar{ border-radius:var(--r-card); padding:var(--space-4) var(--space-3) var(--space-3); display:flex; flex-direction:column; gap:6px; min-height:170px; justify-content:flex-end; }
.paar__kop{ font-weight:900; font-size:30px; line-height:1; text-transform:uppercase; letter-spacing:-.01em; }
.paar__tekst{ font-size:var(--fs-sm); }
.paar__meta{ font-size:12px; opacity:.7; }
.beeldrij{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-3); margin:var(--space-3) 0; }
.beeldrij figure{ margin:0; }
.beeldrij img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-card); display:block; }
.beeldrij figcaption{ font-size:var(--fs-sm); color:var(--color-ink-dim); margin-top:8px; }
.welniet{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-3); }
.welniet h3{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-dim); margin-bottom:8px; }
.welniet ul, .regellijst{ margin:0; padding-left:1.1em; }
.welniet li, .regellijst li{ margin:4px 0; }
.regellijst{ margin-top:var(--space-3); }
@media (max-width:720px){ .welniet{ grid-template-columns:1fr; } }
.tvgrid--breed{ grid-template-columns:repeat(auto-fill, minmax(560px, 1fr)); }