@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@import url("ds/colors.css");
@import url("ds/typography.css");
@import url("ds/spacing.css");
@import url("ds/shape.css");
@import url("ds/elevation.css");
@import url("ds/motion.css");
@import url("ds/base.css");

/* ─────────────────────────────────────────────────────────────
   Documents Under Control — site layer on top of the R.P. tokens
   ───────────────────────────────────────────────────────────── */

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

/* Leeskolom breder dan de R.P.-standaard van 760px: de posts bevatten
   veel brede tabellen en codeblokken. */
:root{--page-narrow:940px;--page-max:1400px}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-body);min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto}

.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.narrow{max-width:var(--page-narrow)}
.eyebrow{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);display:block}
.mono{font-family:var(--font-mono);font-size:var(--size-caption);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.lead{font:var(--text-lead);color:var(--text-body);max-width:62ch}
.quiet-link{border-bottom:0}
.rule{border:0;border-top:var(--rule);margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-5);top:var(--space-5);z-index:99;background:var(--surface-page);padding:var(--space-3) var(--space-5);border:var(--rule-strong)}

/* ── Header ─────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:20;background:var(--surface-page);border-bottom:var(--rule);transition:box-shadow var(--duration-base) var(--ease-standard)}
.site-head[data-scrolled="1"]{box-shadow:var(--shadow-1)}
.site-head__in{height:72px;display:flex;align-items:center;gap:var(--space-8)}
.logo{display:flex;align-items:center;gap:var(--space-4);border-bottom:0;color:var(--text-strong)}
.logo__mark{width:34px;height:auto;color:var(--text-strong);flex:none}
.logo__bar{width:1px;height:30px;background:var(--border-default);flex:none}
.logo__type{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;color:var(--text-strong);max-width:9ch}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-7)}
.nav a{border-bottom:0;font:var(--text-label);color:var(--text-body);padding:var(--space-2) 0;border-top:2px solid transparent;border-bottom:2px solid transparent}
.nav a:hover{color:var(--text-strong)}
.nav a[aria-current]{color:var(--text-strong);border-bottom-color:var(--signal-500)}
.theme-btn{width:var(--control-sm);height:var(--control-sm);display:grid;place-items:center;background:none;border:var(--rule);border-radius:var(--radius-control);color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.theme-btn:hover{border-color:var(--border-strong);color:var(--text-strong)}
.theme-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
[data-theme="inverse"] .theme-btn__sun,.theme-btn__moon{display:none}
[data-theme="inverse"] .theme-btn__moon{display:block}
.theme-btn__sun{display:block}

/* ── Hero ───────────────────────────────────────────────── */
.hero{padding-block:var(--space-14) var(--space-12)}
.hero h1{font:var(--text-display-2);letter-spacing:var(--tracking-display);margin:var(--space-5) 0 var(--space-6);max-width:20ch}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);margin-top:var(--space-8);align-items:center}
.shear-rule{width:96px;height:8px;background:var(--signal-500);transform:var(--shear-transform);margin-bottom:var(--space-9)}

/* ── Sections ───────────────────────────────────────────── */
.section{padding-block:var(--section-y);border-top:var(--rule)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-7);margin-bottom:var(--space-9)}
.section__head h2{font:var(--text-h2);letter-spacing:var(--tracking-heading)}

/* ── Featured ───────────────────────────────────────────── */
.featured{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-11);align-items:start}
.featured h3{font:var(--text-h1);letter-spacing:var(--tracking-heading);margin:var(--space-5) 0 var(--space-5);max-width:24ch}
.featured h3 a{border-bottom:0}
.featured h3 a:hover{color:var(--text-link-hover)}

/* ── Hatch placeholder / images ─────────────────────────── */
.hatch{background:var(--surface-sunken);border:var(--rule);position:relative;overflow:hidden}
.hatch::after{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(60deg,transparent 0 9px,var(--border-hairline) 9px 10px)}
.hatch--16x9{aspect-ratio:16/9}
.hatch--portrait{aspect-ratio:4/5}
.hatch__label{position:absolute;left:var(--space-5);bottom:var(--space-4);z-index:1;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-faint)}

/* ── Post list ──────────────────────────────────────────── */
.post-list{border-top:var(--rule)}
.post-row{display:grid;grid-template-columns:132px 1fr auto;gap:var(--space-7);padding:var(--space-7) 0;border-bottom:var(--rule);align-items:baseline;transition:var(--transition-control)}
.post-row:hover .post-row__title{color:var(--text-link-hover)}
.post-row__title{font:var(--text-h3);letter-spacing:var(--tracking-heading);color:var(--text-strong);border-bottom:0;display:block;transition:var(--transition-control)}
.post-row__desc{margin-top:var(--space-3);color:var(--text-muted);font:var(--text-body-small);max-width:70ch}
.post-row__tags{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end;max-width:260px}

/* ── Post table (archive) ────────────────────────────────── */
.post-table{width:100%;border-collapse:collapse;text-align:left}
.post-table caption{text-align:left;padding-bottom:var(--space-4);color:var(--text-muted)}
.post-table thead th{height:36px;padding:0 var(--space-5);background:var(--ink-025);border-bottom:var(--rule);font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-medium)}
[data-theme="inverse"] .post-table thead th{background:var(--surface-inset)}
.post-table thead th:first-child{width:132px}
.post-table td,.post-table tbody th{height:var(--hit-min);padding:var(--space-4) var(--space-5);border-bottom:var(--rule);vertical-align:middle;font-weight:var(--weight-regular)}
.post-table tbody tr{transition:var(--transition-control)}
.post-table tbody tr:hover{background:var(--state-hover)}
.post-table time{color:var(--text-muted);white-space:nowrap}
.post-table tbody th a{font:var(--text-label);font-size:var(--size-body);color:var(--text-strong);border-bottom:0}
.post-table tbody tr:hover th a{color:var(--text-link-hover)}
.post-table__topic{width:200px;text-align:right}
.post-table__topic a{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:0}
.post-table__topic a:hover{color:var(--text-strong)}
@media (max-width:700px){
  .post-table thead{position:absolute;left:-9999px}
  .post-table tr{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-5);padding:var(--space-5) 0;border-bottom:var(--rule);align-items:baseline}
  .post-table td,.post-table tbody th{height:auto;padding:0;border:0}
  .post-table tbody th{grid-column:1 / -1;order:2}
  .post-table__topic{width:auto;order:1}
}

/* ── Tags ───────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 var(--space-4);border:var(--rule);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;transition:var(--transition-control)}
a.tag{border-bottom:1px solid var(--border-hairline)}
a.tag:hover{border-color:var(--border-strong);color:var(--text-strong)}
.tag--on{border-color:var(--border-strong);color:var(--text-strong)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.tag-cloud .tag{height:32px;font-size:var(--size-caption);text-transform:none;letter-spacing:0}
.tag-cloud .tag b{font-weight:var(--weight-medium);color:var(--text-faint);margin-left:var(--space-3);font-family:var(--font-mono)}

/* ── About block ────────────────────────────────────────── */
.about{display:grid;grid-template-columns:2fr 7fr;gap:var(--space-11);align-items:start}
.about p+p{margin-top:var(--space-5)}
.about__links{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-7)}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);height:var(--control-md);padding:0 var(--space-6);background:var(--surface-inverse);color:var(--text-inverse);border:0;border-radius:var(--radius-control);font:var(--text-label);cursor:pointer;transition:var(--transition-control)}
.btn:hover{background:var(--ink-700);color:var(--text-inverse)}
[data-theme="inverse"] .btn:hover{background:var(--ink-100)}
.btn--quiet{background:none;color:var(--text-strong);border:var(--rule)}
.btn--quiet:hover{background:var(--state-hover);color:var(--text-strong);border-color:var(--border-strong)}

/* ── Article ────────────────────────────────────────────── */
.article-head{padding-block:var(--space-12) var(--space-9)}
.article-head h1{font:var(--text-display-2);letter-spacing:var(--tracking-display);font-size:clamp(34px,4.4vw,56px);margin:var(--space-5) 0 var(--space-6)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-8);padding-top:var(--space-5);border-top:var(--rule)}
.breadcrumb{display:flex;gap:var(--space-3);align-items:center;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.breadcrumb a{border-bottom:0;color:var(--text-muted)}
.breadcrumb a:hover{color:var(--text-link-hover)}

/* ── Prose (rendered markdown) ──────────────────────────── */
.prose{max-width:var(--page-narrow);font:var(--text-lead);color:var(--text-body)}
.prose>*+*{margin-top:var(--space-6)}
.prose h2{font:var(--text-h2);letter-spacing:var(--tracking-heading);margin-top:var(--space-12);padding-top:var(--space-6);border-top:var(--rule)}
.prose h3{font:var(--text-h3);letter-spacing:var(--tracking-heading);margin-top:var(--space-9)}
.prose h4{font:var(--text-h4);margin-top:var(--space-8)}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:var(--space-5)}
.prose a{color:var(--text-link);border-bottom:1px solid var(--signal-500)}
.prose a:hover{color:var(--text-link-hover)}
.prose strong{color:var(--text-strong);font-weight:var(--weight-semibold)}
.prose ul,.prose ol{padding-left:var(--space-7);margin-top:var(--space-5)}
.prose li+li{margin-top:var(--space-3)}
.prose li>ul,.prose li>ol{margin-top:var(--space-3)}
.prose li::marker{color:var(--text-faint)}
.prose blockquote{margin:var(--space-9) 0;padding:var(--space-2) 0 var(--space-2) var(--space-8);border-left:2px solid var(--signal-500);font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-medium);line-height:1.4;letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.prose blockquote p+p{margin-top:var(--space-4)}
.prose blockquote cite{display:block;margin-top:var(--space-4);font:var(--text-body-small);font-style:normal;color:var(--text-muted)}
.prose code{background:var(--surface-inset);border:var(--rule);border-radius:var(--radius-xs);padding:1px 5px;font-size:.86em;color:var(--text-strong)}
.prose pre{background:var(--surface-inverse);color:var(--ink-100);border-radius:var(--radius-sm);padding:var(--space-7);overflow-x:auto;font:var(--text-code);line-height:1.65;margin-top:var(--space-6);position:relative}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:13px}
[data-theme="inverse"] .prose pre{background:var(--ink-950);border:var(--rule)}
.prose pre[data-lang]::before{content:attr(data-lang);position:absolute;top:0;right:0;padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-400)}
.prose figure{margin:var(--space-10) 0}
.prose figure img{display:block;width:100%;border:var(--rule);border-radius:var(--radius-sm)}
.prose figcaption{margin-top:var(--space-4);font:var(--text-body-small);color:var(--text-muted)}
.prose hr{border-top:var(--rule);margin:var(--space-11) 0}
.prose table{width:100%;border-collapse:collapse;font:var(--text-body-small);margin-top:var(--space-7);display:block;overflow-x:auto}
.prose thead th{text-align:left;background:var(--surface-inset);font:var(--text-label);color:var(--text-strong);white-space:nowrap}
.prose th,.prose td{padding:var(--space-4) var(--space-5);border-bottom:var(--rule);vertical-align:top}
.prose td:first-child{color:var(--text-strong)}
.prose tbody tr:last-child td{border-bottom:0}
.prose table code{white-space:nowrap}
.prose .num,.prose td[align="right"],.prose th[align="right"]{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.prose kbd{border:var(--rule);border-bottom-width:2px;border-radius:var(--radius-sm);padding:1px 6px;font-size:.8em;background:var(--surface-inset)}

/* ── Article footer ─────────────────────────────────────── */
.author-card{display:grid;grid-template-columns:88px 1fr;gap:var(--space-7);align-items:start;padding:var(--space-8);border:var(--rule);border-radius:var(--radius-card);margin-top:var(--space-12)}
.author-card img,.author-card .hatch{width:88px;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);margin-top:var(--space-9);border-top:var(--rule);padding-top:var(--space-7)}
.pager__item{border-bottom:0;display:block}
.pager__item:last-child{text-align:right}
.pager__item span{display:block;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.pager__item strong{font:var(--text-h4);color:var(--text-strong);font-weight:var(--weight-semibold)}
.pager__item:hover strong{color:var(--text-link-hover)}

/* ── Footer ─────────────────────────────────────────────── */
.site-foot{margin-top:auto;background:var(--ink-900);color:var(--ink-200);padding:var(--space-12) 0 var(--space-9)}
.site-foot a{color:var(--paper);border-bottom-color:var(--signal-500)}
.site-foot a:hover{color:var(--signal-400)}
.site-foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-11)}
.site-foot__grid h3{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--space-5)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.site-foot .logo__type,.site-foot .logo__mark{color:var(--paper)}
.site-foot__bottom{margin-top:var(--space-11);padding-top:var(--space-5);border-top:1px solid rgb(255 255 255 / .12);display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;font-family:var(--font-mono);font-size:var(--size-micro);color:var(--ink-400)}

/* ── Reveal ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:var(--transition-reveal)}
  .reveal.is-in{opacity:1;transform:none}
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:900px){
  .wrap{padding:0 var(--page-pad-sm)}
  .featured,.about,.site-foot__grid{grid-template-columns:1fr;gap:var(--space-9)}
  .post-row{grid-template-columns:1fr;gap:var(--space-3)}
  .post-row__tags{justify-content:flex-start;max-width:none}
  .hero{padding-block:var(--space-11) var(--space-10)}
  .hero h1{font-size:38px}
  .section{padding-block:var(--space-11)}
  .nav{gap:var(--space-5)}
  .nav a{font-size:var(--size-caption)}
  .prose{font-size:var(--size-body)}
  .pager{grid-template-columns:1fr}
  .pager__item:last-child{text-align:left}
}
@media (max-width:600px){
  .logo__type{font-size:10px}
  .article-head h1{font-size:30px}
  .author-card{grid-template-columns:1fr}
}