/*
 * Stoffertje: the look of the WordPress (Oxygen) site. Lato for text, Nunito for headings, purples #5603ad and #8367c7.
 * Sections: 1 tokens, 2 base, 3 layout (container, header and menus, footer, post column, page wrappers),
 * 4 components (page title, byline, author box, table of contents, article rows, pagination, content blocks:
 * contact cards, team), 5 content (the Markdown in .content: headings, paragraphs, lists, images, links to other
 * articles, tables), 6 pages (post, page, category, author, home, 404).
 * Breakpoints, as on WordPress: 1120px, 991px (menu button), 767px, 479px.
 */

/* 1. Tokens */

:root {
    --purple: oklch(39.94% 0.2180 294.42);        /* #5603ad */
    --purple-light: oklch(58.46% 0.1440 295.01);  /* #8367c7 */
    --blue: oklch(56.36% 0.1797 254.05);          /* #0074db: links (nudged inside sRGB) */
    --blue-dark: oklch(51.37% 0.1640 255.29);     /* #0d65c2: LinkedIn icon in the author box */
    --orange: oklch(67.92% 0.2148 39.28);         /* #ff5805: table header (nudged inside sRGB) */
    --orange-tint: oklch(93.98% 0.0329 46.40);    /* #ffe5d9: table row on hover */
    --coral: oklch(71.45% 0.1788 22.70);          /* #ff6d6d: menu close cross on hover */
    --teal: oklch(61.89% 0.0995 185.36);          /* #26998e: author box border */
    --red: red;                                   /* the page you are on, in the phone menu */
    --white: white;                               /* keywords: render exactly as #fff and #000 */
    --black: black;
    --text: oklch(37.15% 0 none);                 /* #404040 */
    --heading: oklch(32.11% 0 none);              /* #333 */
    --grey-dark: oklch(54.86% 0 none);            /* #717171 */
    --grey: oklch(69.93% 0 none);                 /* #9e9e9e: menu, byline */
    --grey-mid: oklch(75.40% 0 none);             /* #afafaf */
    --grey-button-hover: oklch(86.07% 0 none);    /* #d1d1d1 */
    --grey-light: oklch(89.14% 0 none);           /* #dbdbdb: footer text, lines under rows */
    --grey-border: oklch(89.75% 0 none);          /* #ddd */
    --grey-button: oklch(90.06% 0 none);          /* #dedede */
    --grey-band: oklch(93.70% 0 none);            /* #eaeaea: home bands */
    --grey-pill: oklch(94.91% 0 none);            /* #eee */
    --grey-stripe: oklch(96.42% 0 none);          /* #f3f3f3 */
    --grey-soft: oklch(97.91% 0 none);            /* #f8f8f8 */

    --font-text: Lato, sans-serif;
    --font-heading: Nunito, sans-serif;
    --text-2xs: 0.75rem;    /* 12px */
    --text-xs: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-m: 1.125rem;     /* 18px */
    --text-l: 1.25rem;      /* 20px */
    --text-xl: 1.3125rem;   /* 21px */
    --text-2xl: 1.375rem;   /* 22px */
    --text-3xl: 1.5rem;     /* 24px */
    --text-4xl: 1.875rem;   /* 30px */
    --text-5xl: 2.25rem;    /* 36px */
    --leading: 1.6;
    --leading-loose: 1.65;
    --leading-snug: 1.5;
    --leading-compact: 1.4;
    --leading-title: 1.2;
    --leading-tight: 1.1;
    --leading-none: 1;

    --space-4: 4px;
    --space-5: 5px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-15: 15px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-22: 22px;
    --space-30: 30px;
    --space-40: 40px;
    --space-48: 48px;
    --space-75: 75px;       /* WordPress's section padding */
    --space-paragraph: 25.6px; /* a blank line between paragraphs on WordPress pages */

    --gutter: 20px;
    --width-page: 1120px;
    --logo-size: 200px;
    --row-image: 222px;     /* the photo in a list of articles */

    --radius-s: 10px;
    --radius-l: 30px;
    --radius-xl: 50px;
    --radius-round: 50%;

    --shadow-panel: 0 8px 24px color-mix(in oklch, var(--black) 8%, transparent);
    --shadow-table: 0 4px 8px color-mix(in oklch, var(--black) 10%, transparent);
    --shadow-card: 0 10px 30px color-mix(in oklch, var(--black) 10%, transparent);

    --duration: 0.2s;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 2. Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* overflow-x clips headings with Dutch compounds wider than a phone (see below) instead of scrolling the page. */
body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--text);
    background: var(--white);
    overflow-x: clip;
}

img { max-inline-size: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }

/* Oxygen leaves Dutch compounds intact, including words wider than a phone column. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--heading);
    overflow-wrap: normal;
}
h1, h2 { font-size: var(--text-5xl); }
h3, h4 { font-size: var(--text-3xl); }
h5, h6 { font-size: var(--text-m); }

:focus-visible { outline: max(2px, 0.08em) solid currentColor; outline-offset: 0.25em; }

/* 3. Layout */

/* .container stays a block: its titles shrink-wrap (inline-block) and its margins collapse as on WordPress. */
.container { max-inline-size: var(--width-page); margin-inline: auto; padding-inline: var(--gutter); }

/* Header: two links left and right of the logo in a purple diamond. */
.site-header { position: relative; z-index: 10; background: var(--white); }
.main-nav {
    display: grid;
    grid-template-columns: 1fr var(--logo-size) 1fr;
    align-items: center;
    max-inline-size: var(--width-page);
    block-size: 66.6px;
    margin-inline: auto;
}
.nav-side { display: flex; align-items: center; block-size: 100%; }
.nav-left { justify-content: flex-end; padding-inline-end: 32px; }
.nav-right { justify-content: flex-start; padding-inline-start: 68px; }
.nav-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--grey);
    cursor: pointer;
    transition: color var(--duration);
}
.nav-dropdown[open] > .nav-link { color: var(--purple-light); }
/* The grey of the menu is too light for a focus ring; the ring takes the hover purple. */
.nav-link:focus-visible, .nav-dropdown-panel a:focus-visible { outline-color: var(--purple-light); }
.nav-line { inline-size: 2px; block-size: 24px; margin-inline: 35px; }
.nav-left .nav-line { margin-inline: 32px var(--space-6); }
.nav-dropdown { position: relative; padding-inline: var(--space-30); }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown-panel {
    position: absolute;
    z-index: 2;
    inset-block-start: 100%;
    inset-inline-start: var(--space-30);
    display: flex;
    flex-direction: column;
    padding-block: var(--space-4) var(--space-10);
    background: var(--white);
    box-shadow: var(--shadow-panel);
    white-space: nowrap;
}
.nav-dropdown-panel a { padding-block: var(--space-10) 0; padding-inline: var(--space-16); color: var(--grey); }
.logo { position: relative; justify-self: center; align-self: start; inline-size: var(--logo-size); block-size: 67px; }
/* The colors mix in sRGB, as the hex gradient did; oklch stops would otherwise mix in oklab. */
.logo::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -100px;
    inline-size: var(--logo-size);
    block-size: var(--logo-size);
    transform: rotate(45deg);
    background: radial-gradient(in srgb, var(--purple-light), var(--purple));
    border: 10px solid;
    border-block-color: var(--purple-light) var(--purple);
    border-inline-color: var(--purple-light) var(--purple);
}
.logo img {
    position: absolute;
    inset-inline-start: 59px;
    inset-block-start: 13px;
    inline-size: 80px;
    opacity: 0.7;
    transition: opacity var(--duration);
}
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover, .nav-dropdown-panel a:hover { color: var(--purple-light); }
    .logo:hover::before { transform: scale(1.05) rotate(45deg); }
    .logo:hover img { opacity: 1; }
}
.logo:active::before { transform: scale(0.97) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
    .logo::before { transition: transform var(--duration); }
}

/* Phones and tablets: a grey menu button at the top right. Open, the menu covers the screen in grey, centred, in
   spaced capitals; the button becomes a purple cross a little lower down, as on WordPress. Equal padding above and
   below keeps the items in the middle of the screen; a menu taller than the screen starts below the cross and scrolls. */
.mobile-menu { display: none; }
@media (width <= 991px) {
    .main-nav { display: none; }
    .site-header { block-size: 60px; }
    .mobile-menu { display: block; position: absolute; inset-block-start: 0; inset-inline-end: 0; }
}
.mobile-menu > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 60px;
    block-size: 60px;
    background: var(--grey-button);
    cursor: pointer;
    transition: background-color var(--duration);
}
.mobile-menu > summary:active { transform: scale(0.97); }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary svg { inline-size: 28px; block-size: 28px; fill: var(--black); }
.mobile-menu-open, .mobile-menu[open] .mobile-menu-close { display: flex; }
.mobile-menu-close, .mobile-menu[open] .mobile-menu-open { display: none; }
.mobile-menu[open] > summary { position: fixed; z-index: 31; inset-block-start: var(--space-20); inset-inline-end: 0; }
.mobile-menu > summary .mobile-menu-close svg { fill: var(--purple); transition: fill var(--duration); }
.mobile-menu-panel {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    padding-block: 90px;
    padding-inline: var(--gutter);
    overflow: auto;
    background: var(--grey-pill);
}
.mobile-menu-panel a, .mobile-menu-panel summary {
    display: block;
    padding-block: var(--space-8);
    padding-inline: var(--space-12);
    font-weight: 900;
    line-height: 2;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--heading);
    cursor: pointer;
    transition: color var(--duration), background-color var(--duration);
}
.mobile-menu-panel details { min-inline-size: 193px; }
.mobile-menu-panel details[open] { background: var(--grey-border); }
.mobile-menu-panel details summary { list-style: none; }
.mobile-menu-panel details summary::-webkit-details-marker { display: none; }
.mobile-menu-panel details summary svg {
    inline-size: 22px;
    block-size: 22px;
    margin-inline-start: 2px;
    vertical-align: -4px;
    fill: var(--heading);
}
.mobile-menu-panel details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
    .mobile-menu > summary:hover { background: var(--grey-button-hover); }
    .mobile-menu > summary:hover .mobile-menu-close svg { fill: var(--coral); }
    .mobile-menu-panel a:hover, .mobile-menu-panel summary:hover { background: var(--grey-border); color: var(--purple); }
}
.mobile-menu-panel a[aria-current="page"] { color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
    .mobile-menu > summary { transition: background-color var(--duration), transform 160ms var(--ease-out); }
    .mobile-menu-panel details summary svg { transition: transform var(--duration); }
}

/* Footer: purple gradient (mixed in sRGB, as before), four columns, small legal links (Oxygen template 59). */
.site-footer {
    margin-block-start: 60px;
    padding-block-start: var(--space-20);
    background-image: linear-gradient(50deg in srgb, var(--purple), var(--purple-light));
    color: var(--grey-light);
}
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-20); }
.footer-grid :where(p) { margin-block: 0 var(--space-4); }
.footer-grid a { margin-block-end: var(--space-12); color: var(--grey-light); transition: color var(--duration); }
.footer-brand {
    margin-block-end: var(--space-5);
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--white);
}
.footer-title {
    margin-block-end: var(--space-12);
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--white);
}
.site-footer address { font-style: normal; }
.site-footer address a { display: inline; margin: 0; color: var(--blue); }
.socials { display: flex; margin-block: 0 -10px; margin-inline: -10px; }
.socials a {
    display: flex;
    inline-size: 40px;
    block-size: 40px;
    margin-block: 0 var(--space-10);
    margin-inline: 0 var(--space-10);
    align-items: center;
    justify-content: center;
}
.socials a:active { transform: scale(0.97); }
.socials svg { inline-size: 20px; block-size: 20px; fill: var(--grey-light); transition: fill var(--duration); }
.footer-bottom { padding-block: var(--space-20); padding-inline: var(--space-40); }
.footer-bottom nav { display: flex; padding-block-start: var(--space-5); }
.footer-bottom nav a {
    margin-inline-end: var(--space-16);
    font-size: var(--text-2xs);
    color: var(--grey-light);
    transition: color var(--duration);
}
.footer-bottom p { margin-block: var(--space-8) var(--space-12); font-size: var(--text-2xs); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
    .footer-grid a:hover, .footer-bottom nav a:hover { color: var(--white); text-decoration: underline; }
    .socials a:hover svg { fill: var(--white); }
}
@media (prefers-reduced-motion: no-preference) {
    .socials a { transition: color var(--duration), transform 160ms var(--ease-out); }
}
@media (width <= 767px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div { align-items: center; text-align: center; }
    .footer-grid > div > p:not([class]) { text-align: start; }
    .footer-bottom nav { align-items: center; justify-content: center; text-align: center; }
    .footer-bottom p { text-align: center; }
}

/* Posts: the article in a 65% column, slightly left of centre, as on WordPress. The empty space under the author
   box is WordPress's: its post section's padding and an empty section (295px). */
.post-layout {
    max-inline-size: var(--width-page);
    margin-inline: auto;
    padding-block: 95px 185px;
    padding-inline: var(--gutter);
}
.post { inline-size: 65%; margin-inline-start: 20%; padding-inline: var(--gutter); }
@media (width <= 991px) {
    /* The post keeps WordPress's 40px on each side on phones. */
    .post-layout { padding-block: 115px 225px; }
    .post { inline-size: 100%; margin-inline-start: 0; }
}

/* Pages, category pages and the author's article list. */
.archive, .page { padding-block: var(--space-75) var(--space-15); }

/* 4. Components */

/* Titles of pages, category pages and the author page: large, with a thin purple line under it. On WordPress a title
   as wide as its longest word could run into the page's side margin ("Toegankelijkheid" is 367px on a 390px phone);
   here it may use that 20px too. Longer words keep the source theme's natural wrapping. */
.page-title {
    display: inline-block;
    max-inline-size: calc(100% + var(--gutter));
    margin-block: 0 var(--space-18);
    font-size: 3rem;
    font-weight: 600;
    border-block-end: 1px solid var(--purple);
}

/* Byline under a post's title. */
.byline { display: flex; align-items: center; padding-block: var(--space-5); }
.byline img {
    inline-size: 60px;
    block-size: 60px;
    margin-inline-end: var(--space-6);
    border-radius: var(--radius-round);
    object-fit: cover;
}
.byline p { margin: 0; padding-inline-start: var(--space-16); font-size: var(--text-xs); color: var(--grey); }
.byline a { font-weight: 600; color: var(--grey); transition: color 0.1s ease-in-out; }
@media (hover: hover) and (pointer: fine) {
    .byline a:hover { color: var(--purple); }
}
@media (width <= 479px) {
    .byline { flex-direction: column; align-items: flex-start; padding-inline-end: var(--gutter); }
    .byline p { inline-size: 90%; margin-block-start: 9px; padding-inline-end: var(--space-6); text-align: center; }
}

/* The author box under each post. */
.author-box {
    display: flex;
    gap: var(--space-15);
    margin-block: 0 50px;
    padding: var(--space-30);
    border: 0.5px solid color-mix(in oklch, var(--teal) 39%, transparent);
    border-radius: var(--radius-l);
}
.author-box-photo { display: flex; flex-direction: column; align-items: center; flex: 0 0 168px; }
.author-box-photo img {
    inline-size: 168px;
    block-size: 168px;
    margin-block-end: var(--space-15);
    border-radius: var(--radius-round);
    object-fit: cover;
}
.author-box-photo svg { inline-size: 29px; block-size: 34px; fill: var(--blue-dark); }
.author-box-role {
    inline-size: fit-content;
    margin-block: 0 var(--space-4);
    font-size: var(--text-xs);
    color: var(--grey);
    border-block-end: 1px solid var(--purple);
}
.author-box-name { display: block; }
.author-box-name h4 { font-size: var(--text-4xl); line-height: var(--leading); transition: color var(--duration); }
.author-box-bio { margin-block: var(--space-16); color: var(--grey); }
@media (hover: hover) and (pointer: fine) {
    .author-box-name:hover h4 { color: var(--purple); }
}
@media (width <= 479px) {
    .author-box { flex-direction: column; gap: 0; }
    .author-box-photo { flex-direction: row; flex-basis: auto; align-items: center; }
    .author-box-photo img { inline-size: 200px; block-size: 200px; margin-block: 0 var(--space-15); margin-inline: 0 var(--space-40); }
}

/* Table of contents: grey box, "1 -" numbers and "a." letters. */
.toc {
    margin-block-end: var(--space-20);
    padding: var(--space-20);
    border: 1px solid var(--grey-border);
    border-radius: 12px;
    background: var(--grey-soft);
}
.toc h2 { margin-block: 0 var(--space-12); font-size: var(--text-4xl); line-height: var(--leading-loose); }
.toc ol { list-style: none; counter-reset: item; margin: 0; padding-inline-start: var(--space-40); }
.toc > ol { margin-block: 1em; }
.toc li { position: relative; margin-block-end: 0.6em; font-size: 0.9em; }
.toc > ol > li::before {
    counter-increment: item;
    content: counter(item) "  -";
    position: absolute;
    inset-inline-start: -0.8em;
    font-weight: 800;
}
.toc ol ol { counter-reset: subitem; margin-block-start: var(--space-6); }
.toc ol ol > li::before {
    counter-increment: subitem;
    content: counter(subitem, lower-alpha) ". ";
    position: absolute;
    inset-inline-start: -0.4em;
}
.toc a { padding-inline-start: 0.9em; color: var(--heading); }
.toc a:focus { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
    .toc a:hover { text-decoration: underline; }
}

/* Lists of articles (category, author and "Populair" pages): photo left, title and byline right, grey line under. */
.post-row {
    display: flex;
    align-items: center;
    margin-block-end: var(--space-20);
    padding-block-end: var(--space-20);
    border-block-end: 2px solid var(--grey-light);
}
.post-row img {
    display: block;
    inline-size: var(--row-image);
    block-size: 125px;
    margin-inline-end: var(--space-20);
    border-radius: var(--radius-s);
    object-fit: cover;
}
.post-row h3 { margin: 0; font-size: var(--text-2xl); line-height: var(--leading); transition: color 0.3s; }
.post-rows .post-row-meta { margin-block: 0 var(--space-12); font-size: var(--text-base); color: var(--text); }
/* The author's name and the date each stay on one line in a narrow column, as on WordPress. */
.post-row-meta span { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
    .post-row a:hover h3 { color: var(--purple-light); }
}
@media (width <= 767px) {
    /* Category pages put the photo above the title. */
    .post-row { flex-direction: column; align-items: flex-start; }
    .post-row img { margin-block: 0 var(--space-15); margin-inline: 0; }
    /* "Populair" and the author page keep a 222px photo beside the title, as WordPress did; long words keep the
       source theme's wrapping. */
    :is(.page-content, .author-list) .post-row { flex-direction: row; align-items: center; }
    :is(.page-content, .author-list) .post-row > a { flex: 0 0 var(--row-image); margin-inline-end: var(--space-20); }
    :is(.page-content, .author-list) .post-row > div { flex: 0 1 auto; min-inline-size: auto; }
    :is(.page-content, .author-list) .post-row img { inline-size: 100%; margin: 0; }
}
@media (width <= 479px) {
    /* Category pages use smaller author and date lines on phones; "Populair" and the author page do not. */
    .post-rows .post-row-meta { font-size: var(--text-xs); }
    :is(.page-content, .author-list) .post-rows .post-row-meta { font-size: var(--text-base); }
}

/* Page links of the category and author pages (templates/pagination.html.twig). */
.pagination { display: flex; flex-wrap: wrap; font-size: var(--text-2xs); }

/* Content block: contact cards (address, phone, e-mail). */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-40);
    margin-block: var(--space-20) var(--space-30);
    margin-inline: var(--space-20);
}
.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-48);
    padding-inline: 36px;
    background: var(--white);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.contact-card svg { inline-size: 36px; block-size: 36px; margin-block-end: var(--space-12); fill: var(--purple); }
.contact-card h2 {
    margin-block: 0 var(--space-8);
    font-family: var(--font-text);
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    color: var(--purple);
    text-transform: uppercase;
}
.contact-card address { font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--heading); }
.contact-card a { font-size: var(--text-xs); font-weight: 700; color: var(--heading); letter-spacing: 0.15em; }
@media (width <= 767px) {
    .contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Content block: the team (photo, name, role, bio, links). The role uses the secondary purple of the Oxygen theme. */
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-40); margin-block: 19px 64px; }
.team-member { inline-size: 320px; }
.team-member img { display: block; inline-size: 300px; block-size: 300px; margin-block: 0 var(--space-12); object-fit: cover; }
.team-member h3 { margin-block: 0 var(--space-12); font-size: var(--text-4xl); font-weight: 500; line-height: var(--leading-none); }
.team-member h3 a { color: var(--heading); transition: color var(--duration); }
.team-role { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-compact); color: var(--purple-light); }
.page-content .team-member p { margin-block: 0 var(--space-12); }
.page-content .team-member p:not([class]) { margin: 0; font-weight: 500; line-height: var(--leading-compact); color: var(--heading); }
.team-member > a { display: block; }
.team-socials { display: flex; gap: var(--space-6); margin-block: var(--space-12) calc(-1 * var(--space-6)); }
.team-social {
    display: inline-flex;
    inline-size: 24px;
    block-size: 24px;
    margin-block-end: var(--space-6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--purple);
}
.team-social:focus-visible { outline-color: var(--purple); }
.team-social:active { transform: scale(0.97); }
.team-social svg { inline-size: 12px; block-size: 12px; fill: var(--white); }
@media (hover: hover) and (pointer: fine) {
    .team-member h3 a:hover { color: var(--purple); }
}
@media (prefers-reduced-motion: no-preference) {
    .team-social { transition: transform 160ms var(--ease-out); }
}
@media (width <= 991px) {
    .team { margin-block-end: var(--space-6); }
    .team-member { inline-size: 100%; padding-inline: var(--space-20); }
}
@media (width <= 767px) {
    /* Phones centre the team, as WordPress did. */
    .team-member { text-align: center; }
    .team-member img { margin-inline: auto; }
    .team { margin-block-end: -34px; }
}

/* 5. Content: the Markdown of posts, pages and the author biography. Element rules sit in :where(), so a component
   inside the content (table of contents, article rows, content blocks) wins without depending on the order. */

.content :where(h2) { margin-block: var(--space-20) var(--space-12); margin-inline: 0; font-size: var(--text-4xl); line-height: var(--leading-loose); }
.content :where(h3) { margin-block: var(--space-18) var(--space-10); margin-inline: 0; font-size: var(--text-3xl); line-height: var(--leading-snug); }
.content :where(h4) { margin-block: var(--space-16) var(--space-8); margin-inline: 0; font-size: var(--text-xl); }
.content :where(p) { margin-block: 0 1em; margin-inline: 0; }
/* A long web address in the text breaks instead of widening the page on narrow phones. */
.content :where(p, li) { overflow-wrap: break-word; }
/* An image on its own line is centred, like WordPress's aligncenter; an image inside a line of text stays inline. */
.content :where(p > img:only-child), .content > :where(img) { display: block; margin-block: 0 var(--space-20); margin-inline: auto; }
.content :where(blockquote) { margin-block: 1em; margin-inline: 0; padding-block: var(--space-4); padding-inline: var(--space-20); border-inline-start: 4px solid var(--purple); }
.content :where(blockquote cite) { font-size: 0.9375rem; color: var(--grey-dark); }

/* Posts use the browser's spacing as WordPress did: 1em around paragraphs and lists, none around headings. */
.post-content { display: flow-root; font-size: 1.1875rem; line-height: var(--leading-loose); }
.post-content :where(p) { margin-block: 1em; }
.post-content :where(h2, h3) { margin: 0; line-height: var(--leading-loose); }
.post-content :where(ol) { margin-block: 1em; padding-inline-start: var(--space-40); }
.post-content :where(ul) { margin-block: 1em; list-style: none; padding-inline-start: var(--space-20); }
.post-content :where(ul li) { position: relative; padding-inline-start: var(--space-30); margin-block-end: var(--space-20); }
.post-content :where(ul li)::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.8333em;
    inline-size: 8px;
    block-size: 8px;
    background: var(--purple);
}
/* Links to other articles: a grey pill with a small "open" icon. */
.post-content a[href^="/"]:not(.toc a) {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    padding-block: 2px;
    padding-inline: var(--space-8) 25px;
    border-radius: 8px;
    background: var(--grey-pill);
    color: var(--black);
    font-weight: 700;
}
.post-content a[href^="/"]:not(.toc a)::before {
    content: '';
    position: absolute;
    inset-inline-end: var(--space-6);
    inset-block-start: 50%;
    inline-size: 15px;
    block-size: 15px;
    transform: translateY(-50%);
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNxdWFyZS1hcnJvdy1vdXQtdXAtcmlnaHQiPjxwYXRoIGQ9Ik0yMSAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmg2Ii8+PHBhdGggZD0ibTIxIDMtOSA5Ii8+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PC9zdmc+') center / contain no-repeat;
}
.post-content a[href^="/"]:not(.toc a):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .post-content a[href^="/"]:not(.toc a):hover { background: var(--grey-border); }
}
@media (prefers-reduced-motion: no-preference) {
    .post-content a[href^="/"]:not(.toc a) { transition: transform 160ms var(--ease-out); }
}

/* Tables: white card with an orange header row, striped rows. A table wider than the column (long words in many
   columns) scrolls sideways in its own frame (div.table-scroll, added in _toc.html.twig) instead of widening the
   page; the frame leaves room for the table's shadow. From 1120px up such a table runs into the empty space right of
   the column, as on WordPress (the widest, 856px, still ends 88px before the edge of a 1280px screen). */
.table-scroll { overflow-x: auto; margin-block: 0 var(--space-8); margin-inline: -10px; padding-block: 0 var(--space-12); padding-inline: var(--space-10); }
@media (width >= 1120px) { .table-scroll { overflow-x: visible; } }
/* 20px after a table, as on WordPress: the frame's padding and margin make the gap, so the next paragraph or list
   adds no margin of its own (it could not fold into the padding). */
.post-content .table-scroll + * { margin-block-start: 0; }
.content :where(table) {
    inline-size: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-table);
}
.content :where(th) { padding-block: var(--space-12); padding-inline: var(--space-15); background: var(--orange); color: var(--white); font-weight: 700; text-align: start; }
.content :where(td) { padding-block: var(--space-12); padding-inline: var(--space-15); border-block-end: 1px solid var(--grey-border); }
.content :where(tbody tr:nth-child(even)) { background: var(--grey-stripe); }
@media (hover: hover) and (pointer: fine) {
    .content :where(tbody tr):hover { background: var(--orange-tint); }
}
@media (width <= 767px) {
    .content :where(th, td) { padding-block: var(--space-8); padding-inline: var(--space-10); font-size: var(--text-xs); }
}

/* Pages: WordPress separated their paragraphs with blank lines (25.6px), with 16px around each text block and none
   around the headings. */
.page-content :where(p) { margin-block: var(--space-16); }
.page-content :where(p + p) { margin-block-start: var(--space-paragraph); }
.page-content > :where(p:first-child:not(.page-intro)) { margin-block-start: 0; }
.page-content :where(h2) { margin: 0; font-size: var(--text-4xl); line-height: var(--leading); }
/* Oxygen rich-text blocks start a paragraph introducing a list directly under the heading. */
.page-content :where(h2 + p:has(+ ol)) { margin-block-start: 0; }
.page-content :where(ul, ol) { padding-inline-start: var(--space-40); }
/* A photo on a page (Over ons) sits 12px under the intro and 13px above the next heading. */
.page-content :where(p:has(> img:only-child)) { margin-block: 0 13px; }
.page-content :where(p > img:only-child) { margin-block-end: 0; border-radius: 25px; }

/* 6. Pages */

/* Post. */
.post-categories { margin: 0; font-size: var(--text-2xs); color: var(--grey-light); }
.post-categories a { color: var(--grey-mid); }
.post h1 {
    margin-block: 0 var(--space-18);
    font-size: 2.875rem;
    font-weight: 800;
    line-height: var(--leading-tight);
    text-transform: capitalize;
}
.kicker {
    margin-block: var(--space-22) var(--space-10);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--heading);
}
.featured { display: block; inline-size: 725px; border-radius: 20px; }
.affiliate-note { margin-block: var(--space-12); font-size: var(--text-2xs); font-style: italic; color: var(--grey); }
@media (hover: hover) and (pointer: fine) {
    .post-categories a:hover { color: var(--purple); }
}

/* Page: an optional intro line, and the "Populair" list 75px under the title, as on WordPress. */
.page .page-title { margin-block-end: var(--space-15); }
.page-content .page-intro { margin-block: 0 var(--space-16); font-size: var(--text-2xl); color: var(--heading); }
.page-content > .post-rows:first-child { margin-block-start: var(--space-75); }
@media (width <= 991px) {
    /* The team page: the intro moves 80px down (WordPress's section padding). */
    .page-intro:has(+ .team) { margin-block-start: 81px; }
}
@media (width <= 767px) {
    .page-intro:has(+ .team) { text-align: center; }
}

/* Category page: a name that wraps (on phones) is centred, as on WordPress. */
.archive .page-title { text-align: center; }
.list-title { margin-block: 0 var(--space-5); font-size: var(--text-3xl); }
.archive:not(.author-list) > .list-title:first-of-type { margin-block-start: 38px; }
@media (width <= 767px) {
    .list-title { margin-block-end: 25px; }
}

/* Author page (Oxygen template 63): photo and name, the biography, then the author's articles. */
.author-hero { display: flex; align-items: center; padding-block: var(--space-75); }
.author-hero img {
    flex: 0 0 auto;
    inline-size: 200px;
    block-size: 200px;
    margin-inline-end: 37px;
    border-radius: var(--radius-round);
    object-fit: cover;
}
.author-hero h1 { line-height: var(--leading-title); }
.author-hero p { margin: 0; color: var(--heading); }
.author-hero .author-role { margin-block-end: var(--space-15); font-weight: 500; }
.author-hero .author-expertise { margin-block-end: var(--space-8); }
.author-expertise span { display: inline-block; }
.author-about h2 { margin: 0; font-size: var(--text-4xl); line-height: var(--leading); }
.author-about p { margin-block: var(--space-16); }
.author-about > p + p { margin-block-start: 32px; }
/* WordPress put the biography's paragraphs straight under their headings, after an empty line under the intro. */
.author-about h3 { margin: 0; font-size: var(--text-3xl); line-height: var(--leading); }
.author-about h3 + p { margin: 0; }
.author-about h2 + p + h3 { margin-block-start: 73px; }
.author-list { padding-block-start: 41px; }
.author-more { margin-block: 0 var(--space-22); font-size: var(--text-4xl); }
.author-about h2 span, .author-more span { display: inline-block; }

/* Home page: the sizes and spacing of the WordPress home (Oxygen page 17). */
.home-hero { padding-block: var(--space-75); background: var(--grey-band); text-align: center; }
.home-hero h2 { margin-block-start: 97px; font-size: 3.3125rem; font-weight: 800; }
.home-section { position: relative; padding-block: var(--space-75); }
/* The section titles are centred as blocks; a title that wraps (on phones) reads from the left, as on WordPress. */
.home-section > .container { display: flex; flex-direction: column; align-items: center; }
.home-wave { position: absolute; inset-inline-start: 0; inset-block-start: -1px; inline-size: 100%; transform: scaleY(-1); }
.home-wave-red { block-size: 110px; color: var(--purple); }
.home-wave-grey { block-size: 100px; color: var(--grey-band); }
.home-wave-about { block-size: 70px; color: var(--grey-band); transform: scale(-1, -1); }
.home-kicker { margin: 0; font-size: var(--text-2xl); color: var(--heading); }
.home-title { margin-block: 0 var(--space-16); font-size: 2.5rem; border-block-end: 1px solid var(--purple); }
.home-featured-section { padding-block: 165px 138px; }
.home-featured { display: flex; inline-size: 100%; }
.home-featured-card { inline-size: 60%; margin-block-end: 35px; padding: var(--space-20); }
.home-featured-card img { display: block; inline-size: 100%; border-radius: var(--radius-xl); }
.home-featured-card h3 { margin-block-start: var(--space-22); text-align: center; font-size: var(--text-4xl); transition: color var(--duration); }
.home-about { padding-block-start: var(--space-75); background: var(--grey-band); }
.home-about-row { display: flex; }
.home-about-intro { inline-size: 50%; text-align: start; }
.home-about-intro h2 { margin: 0; font-size: 3.4375rem; font-weight: 800; border-block-end: 4px solid var(--purple); }
.home-about-intro p { margin-block: 24px 0; color: var(--heading); }
.home-about-intro p + p { margin-block-start: var(--space-paragraph); }
.home-about-items { display: flex; flex-direction: column; align-items: flex-end; inline-size: 50%; }
.home-about-items > div { display: flex; flex-direction: column; align-items: flex-start; inline-size: 60%; margin-block-end: var(--space-30); }
.home-about-items h4 { font-size: var(--text-xl); border-block-end: 1px solid var(--purple); }
.home-about-items p { inline-size: 100%; margin-block: 9px var(--space-10); color: var(--heading); }
.home-about-items > div > a { font-weight: 700; text-decoration: underline; }
.home-categories-section { padding-block-start: 160px; }
.home-categories { display: flex; flex-wrap: wrap; justify-content: center; inline-size: 100%; }
.home-categories a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    min-inline-size: 20%;
    block-size: 150px;
    margin-block: var(--space-20);
    margin-inline: var(--space-15);
    padding-inline: var(--space-10);
    border: 3px solid var(--purple);
    border-radius: var(--radius-xl);
    color: var(--purple);
    font-family: var(--font-heading);
    font-size: var(--text-m);
    text-align: center;
    transition: border-width 0.3s;
}
.home-categories svg { inline-size: 60px; block-size: 60px; fill: var(--purple); }
.home-latest { display: flex; flex-wrap: wrap; inline-size: 100%; }
.home-latest-card { inline-size: 33.33%; margin-block-end: var(--space-48); padding: var(--space-10); }
.home-latest-image { position: relative; display: block; margin-block-end: var(--space-16); }
.home-latest-image img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.home-latest-date {
    position: absolute;
    inset-block-start: 1em;
    inset-inline-end: 1em;
    padding-block: 0.7em;
    padding-inline: 1em;
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--black) 50%, transparent);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
}
/* The 6.4px under the title is WordPress's empty meta line, which it hid from 1120px down. */
.home-latest-title {
    display: block;
    margin-block-end: 6.4px;
    font-size: var(--text-l);
    font-weight: 600;
    line-height: var(--leading-title);
    color: var(--black);
    text-transform: capitalize;
}
/* The footer follows the last list directly, as on WordPress. */
main:has(.home-latest-section) + .site-footer { margin-block-start: 0; }
@media (hover: hover) and (pointer: fine) {
    .home-featured-card a:hover h3, .home-latest-title:hover { color: var(--purple); }
    .home-categories a:hover { transform: scale(1.05); border-width: 4px; }
}
.home-categories a:active { transform: scale(0.97); }
@media (prefers-reduced-motion: no-preference) {
    .home-categories a { transition: transform 0.3s, border-width 0.3s; }
}
@media (width <= 1120px) {
    .home-latest-card { inline-size: 50%; }
    .home-latest-title { margin-block-end: 0; }
}
@media (width <= 991px) {
    /* WordPress's empty second column then sits under the article and adds its padding (40px). */
    .home-featured-section { padding-block-end: 178px; }
    .home-featured { flex-direction: column; align-items: center; }
    .home-featured-card { inline-size: 100%; }
    .home-about-items { inline-size: 100%; }
    /* The category buttons stack, full width. */
    .home-categories { flex-direction: column; }
}
@media (width <= 767px) {
    .home-latest-card { inline-size: 100%; }
}
@media (width <= 479px) {
    .home-about-row { flex-direction: column; }
    .home-about-intro, .home-about-items { inline-size: 100%; }
    .home-about-items { align-items: flex-start; margin-block-start: 41px; }
    .home-about-items > div { inline-size: 100%; }
    .home-featured-card { padding-block-end: 0; }
    .home-featured-card h3 { font-size: var(--text-l); }
    .home-about-intro h2 { font-size: 2rem; }
    .home-about-intro p:first-of-type { margin-block-start: var(--space-16); }
    .home-categories a { inline-size: 100%; max-inline-size: 266px; margin-block: var(--space-20); margin-inline: auto; }
}

/* 404: one centred purple line (the footer's own 60px margin makes up WordPress's 75px under it). */
.not-found { padding-block: 175px var(--space-15); text-align: center; }
.not-found h1 { inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; text-align: start; }