@font-face { font-family:Outfit; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/fonts/outfit/outfit-latin-variable.woff2') format('woff2'); }
.carla-chapter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; padding:48px 0; border-top:1px solid var(--book-rule); }
.case-book-page .carla-chapter h2 { margin:0 0 14px; }
.case-book-page .carla-chapter h3 { margin:0 0 20px; color:var(--book-muted); font-size:1.1rem; font-weight:500; line-height:1.5; }
.case-book-page .carla-chapter p { max-width:68ch; }
.carla-chapter figure { margin:0; }
.carla-stage-media { display:grid; gap:28px; min-width:0; }
.carla-chapter img { display:block; width:100%; max-height:720px; object-fit:contain; }
.carla-chapter figcaption { padding-top:12px; font-size:.85rem; line-height:1.5; color:var(--book-muted); }
.carla-timelapses { grid-column:1 / -1; min-width:0; }
.case-book-page .carla-timelapses h3 { color:var(--book-ink); font-size:1.5rem; font-weight:600; }
.carla-timelapse-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; }
.carla-timelapse-grid video { display:block; width:100%; height:auto; aspect-ratio:14 / 9; object-fit:contain; background:var(--book-ink); }
@media(max-width:760px) { .carla-chapter { grid-template-columns:1fr; gap:24px; padding:36px 0; } .carla-timelapse-grid { grid-template-columns:1fr; } }

/* The chapter rail follows the making, rather than animating every section. */
html.carla-story-ready { scroll-behavior:smooth; overflow-x:clip; }
.case-book-page { overflow-x:clip; }
.case-book-page ::selection { background:var(--book-accent); color:var(--book-surface); }
.case-book-page .carla-story-nav { position:sticky; top:80px; z-index:3; padding-top:8px; background:var(--book-paper); }
.carla-story-nav ol { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.carla-story-nav li { margin:0; }
.case-book-page #main-content .carla-story-nav a { display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:8px 4px; color:var(--book-muted); font-size:.9rem; line-height:1.4; text-decoration:none; transition:color 150ms,background-color 150ms; }
.carla-story-nav a > span:first-child { font-variant-numeric:tabular-nums; font-size:.75rem; }
.case-book-page #main-content .carla-story-nav a:hover { color:var(--book-accent); background:var(--book-surface); }
.case-book-page #main-content .carla-story-nav a[aria-current] { color:var(--book-surface); background:var(--book-accent); }
.case-book-page #main-content .carla-story-nav a:focus-visible { outline-offset:-4px; outline-color:var(--book-ink); transition:none; }
.case-book-page #main-content .carla-story-nav a[aria-current]:focus-visible { outline-color:var(--book-surface); }
.carla-story-progress { height:2px; background:var(--book-rule); }
.carla-story-progress span { display:block; height:100%; background:var(--book-accent); transform:scaleX(0); transform-origin:left; }
.case-book-page #main-content h2[id^="hoofdstuk-"] { scroll-margin-top:184px; }
.case-book-page #main-content .case-book-index a[aria-current] { color:var(--book-accent); }
.carla-grabpot [hidden] { display:none !important; }
.carla-grabpot-controls { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid var(--book-rule); }
.carla-grabpot-controls button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; flex:1; padding:12px 16px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--book-muted); font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; transition:color 150ms,background-color 150ms; }
.carla-grabpot-controls button:hover { background:var(--book-surface); color:var(--book-accent); }
.carla-grabpot-controls button[aria-pressed="true"] { color:var(--book-accent); border-bottom-color:var(--book-accent); }
.carla-grabpot-controls button:focus-visible { outline:3px solid var(--book-accent); outline-offset:-4px; }
.carla-grabpot.is-interactive .carla-grabpot-stage { position:relative; aspect-ratio:3 / 4; max-height:720px; overflow:hidden; background:var(--book-paper); }
.carla-grabpot.is-interactive .carla-grabpot-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
@media(min-width:961px) {
  .carla-chapter { gap:48px 64px; padding:64px 0; }
  .carla-chapter-2 > div:first-child,.carla-chapter-4 > div:first-child { grid-column:2; grid-row:1; }
  .carla-chapter-2 > figure,.carla-chapter-4 > figure { grid-column:1; grid-row:1; }
  .carla-chapter-5 { grid-template-columns:1fr; gap:20px; }
  .carla-chapter-5 > div:first-child { max-width:760px; }
  .carla-chapter-5 .carla-stage-media { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start; }
}
@media(min-width:961px) and (min-height:721px) {
  .carla-chapter-3 { align-items:stretch; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .carla-print-copy > div { position:sticky; top:184px; }
}
@media(max-width:760px) {
  .case-book-page .carla-story-nav { top:72px; padding-top:4px; }
  .case-book-page #main-content .carla-story-nav a { flex-direction:column; gap:2px; min-height:62px; font-size:.72rem; padding:6px 0; }
  .carla-story-nav a > span:first-child { font-size:.8rem; font-weight:600; }
  .carla-grabpot-controls button { padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  html.carla-story-ready { scroll-behavior:auto; }
  .carla-story-nav a,.carla-grabpot-controls button { transition:none; }
}