/* JOW website theme; the member portal loads portal.css on top. No build step.

   Concept: the speech balloon from the logo. Buttons, labels and photo frames
   have three round corners and one sharp corner at the bottom left. Light and
   dark mode share one set of role tokens. */

@layer reset, base, layout, components, sections, utilities;

/* Bricolage Grotesque, self-hosted (SIL Open Font License). One variable
   file per subset carries the weight and optical-size axes. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand palette, handbook page 04 */
    --navy: #1E2B47;
    --green: #4C8B4F;
    --green-dark: #3D7341;
    --green-light: #9BD497;
    --terra: #D0583F;
    --terra-soft: #F09A82;
    --sand: #F5F0E8;
    --grey: #5B6478;
    --white: #FFFFFF;

    /* Terracotta for button fills. The brand value reaches only 4.08:1 with
       white text, which the handbook allows for large or bold type only. This
       one is 6% deeper and reaches 4.61:1, so a button label passes WCAG AA at
       any size. Dots and accents keep the brand value. */
    --terra-btn: #C4503A;
    --terra-btn-hover: #AE4330;

    /* Roles, light mode */
    --bg: var(--sand);
    --surface: var(--white);
    --surface-2: #EBE4D7;
    --text: var(--navy);
    --heading: var(--navy);
    --muted: var(--grey);
    --accent: var(--green-dark);
    --dot: var(--terra);
    --line: rgba(30, 43, 71, 0.13);
    --line-strong: rgba(30, 43, 71, 0.3);
    --focus: var(--navy);
    --field-bg: var(--white);
    --field-border: rgba(30, 43, 71, 0.55);
    --navy-block: var(--navy);
    --btn-navy-bg: var(--navy);
    --btn-navy-fg: var(--sand);
    --btn-navy-hover: #2C3D63;
    --shadow: 0 22px 48px -28px rgba(30, 43, 71, 0.5);
    --shadow-sm: 0 2px 10px -4px rgba(30, 43, 71, 0.18);
    --video-bg: #0D1322;

    /* Type, handbook page 05: one family for everything */
    --font: 'Bricolage Grotesque', Arial, sans-serif;
    --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.15625rem);
    --fs-lead: clamp(1.1875rem, 1.1rem + 0.42vw, 1.375rem);
    --fs-h1: clamp(2.5rem, 1.7rem + 3.7vw, 4.5rem);
    --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 2.875rem);
    --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    --fs-small: 0.9375rem;
    --fs-label: 0.8125rem;

    --wrap: 1200px;
    --wrap-narrow: 760px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* The balloon: three round corners, one sharp one bottom left */
    --sharp: 5px;
    --r-card: 22px;
    --r-photo: clamp(22px, 1rem + 2.4vw, 48px);

    color-scheme: light;
}

/* Dark mode follows the visitor's system setting, unless they picked a theme
   with the toggle (stored as data-theme on <html>). The two blocks below must
   stay identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #121A2C;
        --surface: #18223A;
        --surface-2: #22304F;
        --text: var(--sand);
        --heading: var(--sand);
        --muted: #B4BCCD;
        --accent: var(--green-light);
        --dot: var(--terra-soft);
        --line: rgba(245, 240, 232, 0.13);
        --line-strong: rgba(245, 240, 232, 0.32);
        --focus: var(--green-light);
        --field-bg: #121A2C;
        --field-border: rgba(245, 240, 232, 0.45);
        --navy-block: var(--navy);
        --btn-navy-bg: var(--sand);
        --btn-navy-fg: var(--navy);
        --btn-navy-hover: var(--white);
        --shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.65);
        --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #121A2C;
    --surface: #18223A;
    --surface-2: #22304F;
    --text: var(--sand);
    --heading: var(--sand);
    --muted: #B4BCCD;
    --accent: var(--green-light);
    --dot: var(--terra-soft);
    --line: rgba(245, 240, 232, 0.13);
    --line-strong: rgba(245, 240, 232, 0.32);
    --focus: var(--green-light);
    --field-bg: #121A2C;
    --field-border: rgba(245, 240, 232, 0.45);
    --navy-block: var(--navy);
    --btn-navy-bg: var(--sand);
    --btn-navy-fg: var(--navy);
    --btn-navy-hover: var(--white);
    --shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.65);
    --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd,
    ul,
    ol {
        margin: 0;
    }

    ul[class],
    ol[class] {
        list-style: none;
        padding: 0;
    }

    img,
    svg,
    video,
    picture {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    a {
        color: inherit;
    }

    [hidden] {
        display: none !important;
    }
}

@layer base {
    html {
        background: var(--bg);
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font);
        font-size: var(--fs-body);
        font-optical-sizing: auto;
        line-height: 1.62;
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
    }

    h1,
    h2,
    h3,
    h4 {
        color: var(--heading);
        font-weight: 800;
        line-height: 1.06;
        letter-spacing: -0.02em;
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    h1 {
        font-size: var(--fs-h1);
        line-height: 1;
        letter-spacing: -0.032em;
    }

    h2 {
        font-size: var(--fs-h2);
        letter-spacing: -0.026em;
    }

    h3 {
        font-size: var(--fs-h3);
        line-height: 1.2;
        letter-spacing: -0.012em;
    }

    h4 {
        font-size: 1.125rem;
        line-height: 1.3;
        letter-spacing: -0.005em;
    }

    /* Page titles may hyphenate (editors type no &shy;), but only where real
       word parts remain: "Najaars-bijeenkomst", never "Najaarsbij-eenkomst". */
    h1,
    h2 {
        hyphens: auto;
        hyphenate-limit-chars: 12 7 9;
        -webkit-hyphenate-limit-before: 7;
        -webkit-hyphenate-limit-after: 9;
    }

    p {
        text-wrap: pretty;
    }

    strong,
    b {
        font-weight: 700;
    }

    a {
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }

    ::selection {
        background: var(--green-light);
        color: var(--navy);
    }

    :focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 3px;
        border-radius: 6px;
    }

    .skip {
        position: absolute;
        left: 1rem;
        top: -4rem;
        z-index: 999;
        background: var(--navy);
        color: var(--sand);
        padding: 0.75rem 1.25rem;
        border-radius: 14px 14px 14px var(--sharp);
        font-weight: 700;
        text-decoration: none;
    }

    .skip:focus {
        top: 1rem;
        outline-color: var(--green-light);
    }

    /* On video, photos and the dialog backdrop a navy ring disappears. */
    .video-btn,
    .video-frame,
    .hero__media,
    .dialog {
        --focus: var(--green-light);
    }

    /* The header sticks, so an anchor has to land below it. */
    [id] {
        scroll-margin-top: 6rem;
    }

    /* Long e-mail addresses and URLs may break instead of sticking out. */
    a,
    .info-list span,
    .rows div span {
        overflow-wrap: anywhere;
    }
}

@layer layout {
    .wrap {
        width: min(100% - (var(--gutter) * 2), var(--wrap));
        margin-inline: auto;
    }

    .wrap--narrow {
        width: min(100% - (var(--gutter) * 2), var(--wrap-narrow));
        margin-inline: auto;
    }

    .section {
        padding-block: var(--section-y);
    }

    .section--tight {
        padding-block: calc(var(--section-y) * 0.55);
    }

    .section--flush-top {
        padding-top: 0;
    }

    .section--surface {
        background: var(--surface);
    }

    .cols {
        display: grid;
        gap: clamp(1rem, 2.4vw, 1.75rem);
    }

    @media (min-width: 720px) {
        .cols--2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .cols--3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1000px) {
        .cols--3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Text next to a photo. The photo column is the narrow one. */
    .split {
        display: grid;
        gap: clamp(2rem, 5vw, 5rem);
        align-items: center;
    }

    @media (min-width: 880px) {
        .split {
            grid-template-columns: 5fr 6fr;
        }

        .split--flip {
            grid-template-columns: 6fr 5fr;
        }

        .split--flip > :first-child {
            order: 2;
        }

        /* The first column is the wide one: a large photo, or text next to a small logo. */
        .split--wide-first {
            grid-template-columns: 6fr 5fr;
        }
    }

    /* Content with a side card */
    .detail {
        display: grid;
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: start;
    }

    @media (min-width: 960px) {
        .detail {
            grid-template-columns: minmax(0, 1fr) 380px;
        }

        .detail__aside {
            position: sticky;
            top: 6.5rem;
        }
    }

    .flow > * + * {
        margin-top: 1.1em;
    }

    .flow > :is(h2, h3) + * {
        margin-top: 0.75em;
    }

    .flow > * + :is(h2, h3) {
        margin-top: 1.8em;
    }

    .flow > .label + * {
        margin-top: 0;
    }
}

@layer components {
    /* The terracotta full stop after a short heading, handbook page 05. */
    .dot {
        color: var(--dot);
    }

    .label {
        display: block;
        margin-bottom: 0.9rem;
        color: var(--accent);
        font-size: var(--fs-label);
        font-weight: 500;
        letter-spacing: 0.14em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .lead {
        font-size: var(--fs-lead);
        line-height: 1.5;
        max-width: 38em;
    }

    .small {
        font-size: 1rem;
    }

    .sect-head {
        max-width: 46rem;
        margin-bottom: clamp(2rem, 4vw, 3.25rem);
    }

    .sect-head > h2 + p {
        margin-top: 1rem;
    }

    .btn {
        --btn-bg: var(--terra-btn);
        --btn-fg: var(--white);
        --btn-border: transparent;
        --btn-hover: var(--terra-btn-hover);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55em;
        min-height: 3rem;
        padding: 0.7em 1.35em;
        border: 2px solid var(--btn-border);
        border-radius: 1.5rem 1.5rem 1.5rem var(--sharp);
        background: var(--btn-bg);
        color: var(--btn-fg);
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn:hover {
        background: var(--btn-hover);
    }

    .btn svg {
        width: 1.15em;
        height: 1.15em;
        flex: none;
        transition: transform 0.2s ease;
    }

    .btn:hover svg.arrow {
        transform: translateX(3px);
    }

    .btn--navy {
        --btn-bg: var(--btn-navy-bg);
        --btn-fg: var(--btn-navy-fg);
        --btn-hover: var(--btn-navy-hover);
    }

    .btn--ghost {
        --btn-bg: transparent;
        --btn-fg: var(--text);
        --btn-border: var(--line-strong);
        --btn-hover: color-mix(in srgb, var(--text) 7%, transparent);
    }

    .btn--ghost:hover {
        border-color: var(--text);
    }

    .btn--sm {
        min-height: 2.75rem;
        padding: 0.5em 1.05em;
        font-size: 1rem;
    }

    .btn--lg {
        min-height: 3.5rem;
        padding: 0.85em 1.6em;
        font-size: 1.125rem;
    }

    .btn--block {
        width: 100%;
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .link {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: var(--accent);
        font-weight: 700;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.25em;
        transition: text-decoration-color 0.2s ease;
    }

    .link:hover {
        text-decoration-color: currentColor;
    }

    .link svg {
        width: 1em;
        height: 1em;
        flex: none;
        transition: transform 0.2s ease;
    }

    .link:hover svg {
        transform: translateX(3px);
    }

    /* A link inside running text stays inline, arrow included. */
    p .link,
    li .link {
        display: inline;
    }

    p .link svg,
    li .link svg {
        display: inline-block;
        margin-left: 0.3em;
        vertical-align: -0.12em;
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.3em 0.85em 0.32em;
        border-radius: 1rem 1rem 1rem var(--sharp);
        background: var(--green-dark);
        color: var(--white);
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    .pill--navy {
        background: var(--btn-navy-bg);
        color: var(--btn-navy-fg);
    }

    .pill--quiet {
        background: transparent;
        color: var(--muted);
        box-shadow: inset 0 0 0 1.5px var(--line-strong);
    }

    .card {
        padding: clamp(1.5rem, 3vw, 2.25rem);
        border-radius: var(--r-card);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .section--surface .card {
        background: var(--bg);
        box-shadow: none;
    }

    .card > h3 + p {
        margin-top: 0.5rem;
    }

    .card--quiet,
    .section--surface .card--quiet {
        background: transparent;
        box-shadow: inset 0 0 0 1.5px var(--line-strong);
    }

    .card__icon {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        margin-bottom: 1.25rem;
        border-radius: 1.1rem 1.1rem 1.1rem var(--sharp);
        background: var(--navy-block);
        color: var(--green-light);
    }

    .card__icon svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    /* The navy balloon: the next meeting, calls to action. Handbook page 06. */
    .balloon-card {
        padding: clamp(1.6rem, 3.5vw, 2.5rem);
        border-radius: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) var(--sharp);
        box-shadow: var(--shadow);
    }

    .photo {
        position: relative;
        aspect-ratio: var(--ratio, 4 / 5);
        overflow: hidden;
        border-radius: var(--r-photo) var(--r-photo) var(--r-photo) var(--sharp);
        background: var(--surface-2);
    }

    .photo > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--pos, 50% 40%);
    }

    .photo--sm {
        --r-photo: clamp(16px, 0.6rem + 1.4vw, 26px);
    }

    /* The second balloon from the logo, peeking out behind the photo: "the
       other person in the conversation". Use it once per page at most. */
    .peek {
        position: relative;
        isolation: isolate;
        padding: clamp(0.75rem, 2vw, 1.25rem) 0 0 clamp(0.75rem, 2vw, 1.25rem);
    }

    .peek::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 30%;
        max-width: 8.5rem;
        aspect-ratio: 1;
        border-radius: 46% 46% 46% var(--sharp);
        background: var(--terra);
    }

    .caption {
        margin-top: 0.75rem;
        color: var(--muted);
        font-size: var(--fs-small);
    }

    /* Empty photo spot: a portrait that still has to be taken */
    .photo--empty {
        display: grid;
        place-items: center;
    }

    .photo--empty > span {
        display: grid;
        justify-items: center;
        gap: 0.4rem;
        color: var(--muted);
        font-size: 0.875rem;
        font-weight: 500;
    }

    .photo--empty b {
        display: grid;
        place-items: center;
        width: 4.25rem;
        height: 4.25rem;
        border-radius: 1.6rem 1.6rem 1.6rem var(--sharp);
        background: var(--navy-block);
        color: var(--green-light);
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .video-frame {
        position: relative;
        overflow: hidden;
        border-radius: var(--r-photo) var(--r-photo) var(--r-photo) var(--sharp);
        background: var(--video-bg);
    }

    /* Safari does not clip a playing video to its frame's rounded corners
       (overflow: hidden), so the video carries the same corners itself. */
    .video-frame > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    .video-frame > video:focus-visible {
        outline-offset: -4px;
    }

    .video-frame--portrait {
        aspect-ratio: 9 / 16;
    }

    .video-frame--wide {
        aspect-ratio: 16 / 9;
    }

    .video-frame--wide > video {
        object-fit: contain;
    }

    .video-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        min-height: 2.75rem;
        padding: 0.45em 1em;
        border: 0;
        border-radius: 1.3rem 1.3rem 1.3rem var(--sharp);
        background: rgba(18, 26, 44, 0.74);
        color: var(--sand);
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background-color 0.2s ease;
    }

    .video-btn:hover {
        background: rgba(18, 26, 44, 0.92);
    }

    .video-btn svg {
        width: 1.1em;
        height: 1.1em;
        flex: none;
    }

    .video-frame__controls {
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.9rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Play/pause icon swap, driven by data-paused on the button */
    .video-btn .i-play,
    .video-btn[data-paused="true"] .i-pause {
        display: none;
    }

    .video-btn[data-paused="true"] .i-play {
        display: block;
    }

    .video-btn--icon {
        justify-content: center;
        width: 2.75rem;
        padding: 0;
    }

    /* Without JavaScript these buttons cannot do anything. */
    html:not(.js) .video-btn {
        display: none;
    }

    .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.4rem;
        color: var(--text);
        font-size: var(--fs-small);
        font-weight: 500;
    }

    .meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .meta svg {
        width: 1.15rem;
        height: 1.15rem;
        flex: none;
        color: var(--accent);
    }

    .meta--stack {
        flex-direction: column;
        gap: 0.55rem;
    }

    .date {
        display: grid;
        place-content: center;
        justify-items: center;
        flex: none;
        width: 5.25rem;
        height: 5.5rem;
        border-radius: 1.6rem 1.6rem 1.6rem var(--sharp);
        background: var(--navy-block);
        color: var(--sand);
        line-height: 1;
        text-align: center;
    }

    .date b {
        font-size: 2.1rem;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .date span {
        margin-top: 0.3rem;
        color: var(--green-light);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .date--past {
        background: var(--surface-2);
        color: var(--text);
    }

    .date--past span {
        color: var(--muted);
    }

    .ticks {
        display: grid;
        gap: 0.85rem;
    }

    .ticks li {
        display: grid;
        grid-template-columns: 1.6rem 1fr;
        gap: 0.75rem;
        align-items: start;
    }

    .ticks svg {
        width: 1.6rem;
        height: 1.6rem;
        padding: 0.3rem;
        border-radius: 0.8rem 0.8rem 0.8rem 3px;
        background: var(--green-dark);
        color: var(--white);
        margin-top: 0.1rem;
    }

    .info-list {
        display: grid;
    }

    .info-list li {
        display: grid;
        grid-template-columns: 6rem 1fr;
        gap: 1rem;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--line);
        font-size: var(--fs-small);
    }

    .info-list li:first-child {
        padding-top: 0;
    }

    .info-list li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .info-list b {
        color: var(--muted);
        font-weight: 500;
    }

    .form {
        display: grid;
        gap: 1.25rem;
    }

    .form__row {
        display: grid;
        gap: 1.25rem;
    }

    @media (min-width: 640px) {
        .form__row--2 {
            grid-template-columns: 1fr 1fr;
        }
    }

    .field {
        display: grid;
        align-content: start;
        gap: 0.45rem;
    }

    .field label {
        font-weight: 700;
        font-size: var(--fs-small);
    }

    .field label small {
        color: var(--muted);
        font-weight: 500;
        font-size: inherit;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        min-height: 3.1rem;
        padding: 0.75rem 0.95rem;
        border: 1.5px solid var(--field-border);
        border-radius: 14px;
        background: var(--field-bg);
        color: var(--text);
        font-size: 1rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .field textarea {
        resize: vertical;
        min-height: 8rem;
        line-height: 1.5;
    }

    .field ::placeholder {
        color: var(--muted);
        opacity: 1;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        /* Transparent, not none: forced-colors mode drops the box-shadow ring
           but paints this outline, so the focus stays visible there. */
        outline: 2px solid transparent;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    .field__hint {
        color: var(--muted);
        font-size: 0.875rem;
    }

    .check {
        display: grid;
        grid-template-columns: 1.25rem 1fr;
        gap: 0.75rem;
        align-items: start;
        font-size: var(--fs-small);
    }

    .check input {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.15rem 0 0;
        accent-color: var(--accent);
    }

    .field [aria-invalid="true"],
    .check [aria-invalid="true"] {
        border-color: var(--terra-btn);
        box-shadow: 0 0 0 1px var(--terra-btn);
    }

    .honeypot {
        position: absolute;
        left: -9999px;
    }

    /* Rendered while empty, so screen readers already know the live region. */
    .form__note:empty {
        position: absolute;
        padding: 0;
        background: none;
    }

    .form__note {
        padding: 1rem 1.2rem;
        border-radius: 16px 16px 16px var(--sharp);
        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
        color: var(--text);
        font-weight: 500;
    }
}

@layer sections {
    .header {
        position: sticky;
        top: 0;
        z-index: 50;
        transition: box-shadow 0.25s ease;
    }

    .header.is-stuck {
        box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
    }

    .header__inner {
        display: flex;
        align-items: center;
        gap: clamp(0.4rem, 2vw, 0.75rem);
        min-height: 4.25rem;
    }

    .logo {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        margin-right: auto;
        padding-block: 0.5rem;
        border-radius: 8px;
    }

    /* Sized by width so it can give way on very narrow screens. The handbook's
       minimum for this logo is 160px wide. */
    .logo img {
        width: clamp(160px, 12rem + 6vw, 300px);
        max-width: 100%;
        height: auto;
    }

    .nav {
        display: flex;
        align-items: center;
        gap: clamp(0.25rem, 1.4vw, 1.1rem);
    }

    /* "Inloggen"/"Doe mee" or "Mijn JOW": html.is-member is set before first paint (layout) and confirmed by theme.js. */
    .is-member [data-nav-guest],
    html:not(.is-member) [data-nav-member] {
        display: none !important;
    }

    .nav a:not(.btn) {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.55rem 0.35rem;
        color: var(--text);
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .nav a:not(.btn):hover {
        color: var(--green-light);
    }

    .nav a[aria-current="page"]:not(.btn)::after {
        content: "";
        position: absolute;
        left: 0.35rem;
        right: 0.35rem;
        bottom: 0.15rem;
        height: 3px;
        border-radius: 3px 3px 3px 1px;
        background: var(--green-light);
    }

    .nav svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .nav .btn {
        margin-left: 0.4rem;
    }

    /* Theme toggle: moon in light mode, sun in dark mode */
    .theme-toggle {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        border: 1.5px solid var(--line-strong);
        border-radius: 1.4rem 1.4rem 1.4rem var(--sharp);
        background: transparent;
        color: var(--text);
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    .theme-toggle:hover {
        border-color: var(--green-light);
        color: var(--green-light);
    }

    .theme-toggle svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .theme-toggle .i-sun,
    [data-theme="dark"] .theme-toggle .i-moon {
        display: none;
    }

    [data-theme="dark"] .theme-toggle .i-sun {
        display: block;
    }

    /* Without JavaScript the toggle cannot do anything. */
    html:not(.js) .theme-toggle {
        display: none;
    }

    .nav-toggle {
        display: none;
    }

    @media (max-width: 1023.98px) {
        .nav-toggle {
            display: grid;
            place-content: center;
            gap: 5px;
            flex: none;
            width: 2.75rem;
            height: 2.75rem;
            border: 1.5px solid var(--line-strong);
            border-radius: 1.4rem 1.4rem 1.4rem var(--sharp);
            background: transparent;
            cursor: pointer;
        }

        .nav-toggle span:not(.visually-hidden) {
            display: block;
            width: 1.15rem;
            height: 2px;
            border-radius: 2px;
            background: var(--text);
            transition: transform 0.25s ease, opacity 0.2s ease;
        }

        .nav-toggle[aria-expanded="true"] span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .nav-toggle[aria-expanded="true"] span:nth-child(2) {
            opacity: 0;
        }

        .nav-toggle[aria-expanded="true"] span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .nav {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            max-height: calc(100dvh - 4.25rem);
            overflow-y: auto;
            padding: 0.5rem var(--gutter) 1.5rem;
            border-top: 1px solid var(--line);
            background: var(--navy-block);
            box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.7);
        }

        .nav.is-open {
            display: flex;
        }

        .nav a:not(.btn) {
            padding: 0.95rem 0;
            border-bottom: 1px solid var(--line);
            font-size: 1.1875rem;
        }

        .nav a[aria-current="page"]:not(.btn)::after {
            left: auto;
            right: 0;
            top: 50%;
            bottom: auto;
            width: 0.6rem;
            height: 0.6rem;
            transform: translateY(-50%);
        }

        .nav .btn {
            margin: 1.25rem 0 0;
        }

        /* JavaScript off: show the menu as a plain list, never hidden. */
        html:not(.js) .nav {
            position: static;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.25rem 1.25rem;
            border: 0;
            box-shadow: none;
            padding: 0 0 0.75rem;
        }

        html:not(.js) .nav a:not(.btn) {
            padding: 0.5rem 0;
            border: 0;
            font-size: 1rem;
        }

        html:not(.js) .nav-toggle {
            display: none;
        }

        html:not(.js) .header__inner {
            flex-wrap: wrap;
        }
    }

    /* An explicit height, not aspect-ratio plus max-height: that combination
       turns the max-height into a max-width and the video stops short of the
       right edge on short screens. */
    .hero__media {
        position: relative;
        overflow: hidden;
        height: min(75vw, 70vh);
        border-radius: 0 0 clamp(40px, 9vw, 150px) 0;
        background: var(--video-bg);
    }

    @media (min-width: 761px) {
        .hero__media {
            height: max(22rem, min(calc(100vw / 2.03), 70vh));
        }
    }

    .hero__media > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }

    .hero__controls {
        position: absolute;
        inset: auto 0 clamp(0.9rem, 2.4vw, 1.75rem);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    @media (max-width: 599px) {
        .hero__controls [data-ambient-toggle] {
            width: 2.75rem;
            padding: 0;
            justify-content: center;
        }

        .hero__controls [data-ambient-toggle] [data-label] {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
    }

    .hero__intro {
        display: grid;
        gap: clamp(2rem, 4vw, 3rem);
        padding-top: clamp(2.5rem, 5vw, 4rem);
    }

    /* Small screens: the card overlaps the video by a clear step, not a hairline
       gap, and the video controls move up so the card never covers them. */
    @media (max-width: 899px) {
        .hero {
            --hero-overlap: clamp(2.75rem, 10vw, 4rem);
        }

        .hero__intro {
            padding-top: 0;
        }

        .hero__intro .next {
            order: -1;
            margin-top: calc(-1 * var(--hero-overlap));
            position: relative;
            z-index: 2;
        }

        .hero__controls {
            bottom: calc(var(--hero-overlap) + 0.9rem);
        }
    }

    .hero__intro h1 {
        max-width: 11em;
    }

    .hero__intro .lead {
        margin-top: 1.4rem;
    }

    .hero__intro .actions {
        margin-top: 2rem;
    }

    @media (min-width: 900px) {
        .hero__intro {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            align-items: start;
            column-gap: clamp(2.5rem, 5vw, 5rem);
        }

        /* The card slides up over the video: a reply to the big balloon. */
        .hero__intro .next {
            margin-top: calc(-1 * clamp(7rem, 12vw, 11rem));
            position: relative;
            z-index: 2;
        }
    }

    /* Long Dutch compounds ("Najaarsbijeenkomst") would push the dot onto a
       line of its own, so the card title shrinks with the card. */
    .next {
        container-type: inline-size;
    }

    .next__title {
        font-size: min(clamp(1.75rem, 1.3rem + 1.7vw, 2.4rem), 9.5cqi);
        line-height: 1.02;
    }

    .next .meta {
        margin-top: 1.4rem;
        padding-top: 1.4rem;
        border-top: 1px solid var(--line);
    }

    .next .btn {
        margin-top: 1.75rem;
    }

    .next__note {
        margin-top: 0.85rem;
        color: var(--muted);
        font-size: 0.875rem;
        text-align: center;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid var(--line);
    }

    /* Centred, with equal room on both sides of every cell, so a short and
       a long caption still sit on one calm line of numbers. */
    .stats li {
        display: grid;
        align-content: start;
        justify-items: center;
        gap: 0.35rem;
        padding: 1.5rem 1rem;
        border-bottom: 1px solid var(--line);
        text-align: center;
    }

    .stats li:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .stats b {
        color: var(--heading);
        font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .stats span {
        font-size: var(--fs-small);
        line-height: 1.4;
    }

    @media (min-width: 860px) {
        /* One row of equal cells, however many figures there are (up to four). */
        .stats {
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            border-bottom: 1px solid var(--line);
        }

        .stats li,
        .stats li:nth-child(odd) {
            padding: 1.75rem 1.5rem;
            border-bottom: 0;
            border-right: 1px solid var(--line);
        }

        .stats li:last-child {
            border-right: 0;
        }
    }

    .statement {
        max-width: 22em;
        margin-inline: auto;
        font-size: clamp(1.75rem, 1.25rem + 2.3vw, 3rem);
        line-height: 1.12;
        text-align: center;
    }

    .mosaic {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.6rem, 1.4vw, 1rem);
    }

    .mosaic > * {
        aspect-ratio: 3 / 4;
    }

    .mosaic > :first-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }

    /* Small screens show three photos; the rest are one tap away on the
       meeting page, and the section stays a teaser instead of a long scroll. */
    @media (max-width: 859.98px) {
        .mosaic > :nth-child(n + 4) {
            display: none;
        }
    }

    @media (min-width: 860px) {
        .mosaic {
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: clamp(12rem, 20vw, 18rem);
        }

        .mosaic > *,
        .mosaic > :first-child {
            aspect-ratio: auto;
        }

        .mosaic > :nth-child(1) {
            grid-column: 1 / 3;
            grid-row: 1;
        }

        .mosaic > :nth-child(2) {
            grid-column: 3;
            grid-row: 1 / 3;
        }

        .mosaic > :nth-child(3) {
            grid-column: 4;
            grid-row: 1 / 3;
        }

        .mosaic > :nth-child(4) {
            grid-column: 1;
            grid-row: 2;
        }

        .mosaic > :nth-child(5) {
            grid-column: 2;
            grid-row: 2;
        }
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.6rem, 1.4vw, 1rem);
    }

    @media (min-width: 760px) {
        .gallery {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .gallery a {
        display: block;
        aspect-ratio: 2 / 3;
        transition: transform 0.3s ease;
    }

    .gallery a:hover {
        transform: translateY(-3px);
    }

    .gallery .photo {
        height: 100%;
        aspect-ratio: auto;
    }

    .event {
        display: flex;
        gap: clamp(1rem, 2.5vw, 1.6rem);
        align-items: flex-start;
        padding: clamp(1.25rem, 3vw, 1.85rem);
        border-radius: var(--r-card);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .section--surface .event {
        background: var(--bg);
        box-shadow: none;
    }

    .event:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
    }

    @media (max-width: 519px) {
        .event {
            flex-direction: column;
        }

        .event .date {
            width: 4.5rem;
            height: 4.6rem;
        }

        .event .date b {
            font-size: 1.75rem;
        }
    }

    .event__body {
        display: grid;
        gap: 0.6rem;
        justify-items: start;
        min-width: 0;
    }

    .event__title {
        color: var(--heading);
        font-size: var(--fs-h3);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.012em;
    }

    .event__more {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: var(--accent);
        font-weight: 700;
    }

    .event__more svg {
        width: 1em;
        height: 1em;
        transition: transform 0.2s ease;
    }

    .event:hover .event__more svg {
        transform: translateX(3px);
    }

    .event__thumb {
        display: none;
    }

    @media (min-width: 1100px) {
        .event--with-thumb .event__thumb {
            display: block;
            flex: none;
            width: 8.5rem;
            margin-left: auto;
            aspect-ratio: 4 / 5;
        }
    }

    .timeline {
        display: grid;
    }

    .timeline li {
        position: relative;
        display: grid;
        grid-template-columns: 4.25rem 1fr;
        gap: 1rem;
        padding-bottom: 1.6rem;
    }

    .timeline li::before {
        content: "";
        position: absolute;
        left: 4.25rem;
        top: 0.55rem;
        bottom: -0.2rem;
        width: 2px;
        margin-left: -1px;
        background: var(--line);
    }

    .timeline li:last-child::before {
        display: none;
    }

    .timeline li:last-child {
        padding-bottom: 0;
    }

    .timeline time {
        color: var(--accent);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .timeline div {
        position: relative;
        padding-left: 1.5rem;
    }

    .timeline div::before {
        content: "";
        position: absolute;
        left: calc(-1rem - 0.4rem);
        top: 0.45rem;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 0.4rem 0.4rem 0.4rem 2px;
        background: var(--accent);
        box-shadow: 0 0 0 4px var(--bg);
    }

    .section--surface .timeline div::before {
        box-shadow: 0 0 0 4px var(--surface);
    }

    .timeline p {
        margin-top: 0.25rem;
        font-size: 1rem;
    }

    /* Numbered steps with balloon markers, handbook page 01 */
    .steps {
        display: grid;
        gap: 1.6rem;
        counter-reset: step;
    }

    .steps li {
        display: grid;
        grid-template-columns: 3rem 1fr;
        gap: 1.1rem;
        counter-increment: step;
    }

    .steps li::before {
        content: counter(step);
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: 1.5rem 1.5rem 1.5rem var(--sharp);
        background: var(--navy-block);
        color: var(--green-light);
        font-weight: 800;
        font-size: 1.125rem;
    }

    .steps p {
        margin-top: 0.3rem;
        font-size: 1rem;
    }

    .price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.2rem 0.6rem;
    }

    .price b {
        color: var(--heading);
        font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        line-height: 1;
    }

    .price span {
        color: var(--muted);
        font-weight: 500;
    }

    .price--sm b {
        font-size: 1.6rem;
    }

    .divider {
        height: 1px;
        margin: 1.6rem 0;
        border: 0;
        background: var(--line);
    }

    .faq {
        border-top: 1px solid var(--line);
    }

    .faq details {
        border-bottom: 1px solid var(--line);
    }

    .faq summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.35rem 0;
        color: var(--heading);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.35;
        cursor: pointer;
        list-style: none;
    }

    .faq summary::-webkit-details-marker {
        display: none;
    }

    .faq summary::after {
        content: "";
        flex: none;
        width: 2rem;
        height: 2rem;
        border-radius: 1rem 1rem 1rem 3px;
        background:
            linear-gradient(var(--sand), var(--sand)) center / 0.8rem 2px no-repeat,
            linear-gradient(var(--sand), var(--sand)) center / 2px 0.8rem no-repeat,
            var(--navy-block);
        transition: transform 0.25s ease;
    }

    .faq details[open] summary::after {
        transform: rotate(45deg);
    }

    .faq details > p {
        padding: 0 3rem 1.5rem 0;
    }

    .people {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
    }

    @media (min-width: 760px) {
        .people {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .person .photo {
        --ratio: 4 / 5;
        margin-bottom: 1rem;
    }

    .person h3 {
        font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    }

    .person p {
        margin-top: 0.15rem;
        font-size: var(--fs-small);
    }

    .person__role {
        color: var(--accent);
        font-weight: 700;
    }

    .person--todo h3 {
        color: var(--muted);
    }

    @media (max-width: 759px) {
        .person--help {
            grid-column: 1 / -1;
        }
    }

    .person--help .card {
        display: grid;
        align-content: center;
        gap: 0.75rem;
        height: 100%;
        min-height: 10rem;
    }

    .person--help h3 {
        font-size: var(--fs-h3);
    }

    .empty {
        display: grid;
        gap: 1.25rem;
        justify-items: start;
        padding: clamp(1.75rem, 4vw, 3rem);
        border-radius: var(--r-card);
        background: transparent;
        box-shadow: inset 0 0 0 1.5px var(--line-strong);
    }

    @media (min-width: 760px) {
        .empty {
            grid-template-columns: 1fr auto;
            align-items: center;
        }
    }

    .logos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        gap: clamp(0.75rem, 2vw, 1.25rem);
        padding: 0;
        list-style: none;
    }

    /* A member: the logo (or the initials) on a tile, the name underneath. */
    .member {
        display: grid;
        gap: 0.6rem;
        color: var(--heading);
        text-decoration: none;
    }

    .member__logo {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        padding: 1rem;
        border-radius: var(--r-card) var(--r-card) var(--r-card) var(--sharp);
        background: var(--white);
    }

    .member__logo--text {
        background: var(--navy-block);
        color: var(--sand);
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .member__name {
        font-size: var(--fs-small);
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        overflow-wrap: anywhere;
    }

    a.member:hover .member__name,
    a.member:focus-visible .member__name {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    /* Any logo, tall or wide, fits the 3:2 tile, centred, without stretching it. */
    .member__logo img {
        position: absolute;
        inset: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        object-fit: contain;
        object-position: center;
    }

    .partners {
        display: grid;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        place-items: center;
        padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
        border-radius: var(--r-card) var(--r-card) var(--r-card) var(--sharp);
        background: var(--white);
    }

    .partners img {
        width: min(100%, 24rem);
    }

    .cta-video {
        display: grid;
        gap: clamp(2.5rem, 6vw, 5rem);
        align-items: center;
    }

    .cta-video__media {
        width: min(100%, 19rem);
        margin-inline: auto;
    }

    @media (min-width: 820px) {
        .cta-video__media {
            width: min(100%, 23rem);
        }

        .page-head .cta-video__media {
            width: min(100%, 19rem);
        }

        .cta-video {
            grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
        }

        .cta-video .peek {
            justify-self: end;
            margin-inline: 0;
        }
    }

    .cta {
        display: grid;
        gap: 2rem;
        align-items: end;
    }

    .cta p {
        margin-top: 1rem;
        max-width: 34em;
    }

    @media (min-width: 860px) {
        .cta {
            grid-template-columns: 1fr auto;
        }
    }

    .page-head {
        padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
    }

    .page-head .lead {
        margin-top: 1.25rem;
    }

    .page-head .meta {
        margin-top: 1.5rem;
    }

    .page-head--split .wrap {
        display: grid;
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center;
    }

    @media (min-width: 880px) {
        .page-head--split .wrap {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        }
    }

    .crumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        color: var(--muted);
        font-size: 0.875rem;
    }

    .crumbs a {
        color: var(--muted);
        text-decoration: none;
    }

    .crumbs a:hover {
        color: var(--text);
        text-decoration: underline;
    }

    .page-head .pill {
        display: flex;
        width: fit-content;
        margin-bottom: 1.1rem;
    }

    /* Members area (portal) */
    .app {
        display: grid;
        gap: 2rem;
        align-items: start;
    }

    @media (min-width: 900px) {
        .app {
            grid-template-columns: 15rem minmax(0, 1fr);
        }

        .app__side {
            position: sticky;
            top: 6.5rem;
        }
    }

    .side-nav {
        display: grid;
        gap: 0.25rem;
    }

    @media (max-width: 899px) {
        .side-nav {
            display: flex;
            gap: 0.5rem;
            overflow-x: auto;
            padding: 0.3rem;
            margin: -0.3rem;
        }
    }

    .side-nav a {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem 0.95rem;
        border-radius: 1.2rem 1.2rem 1.2rem var(--sharp);
        color: var(--text);
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }

    .side-nav a:hover {
        background: var(--surface);
    }

    .side-nav a[aria-current="page"] {
        background: var(--btn-navy-bg);
        color: var(--btn-navy-fg);
    }

    .side-nav svg {
        width: 1.15rem;
        height: 1.15rem;
        flex: none;
    }

    .panel {
        padding: clamp(1.4rem, 3vw, 2rem);
        border-radius: var(--r-card);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .panel + .panel {
        margin-top: 1.25rem;
    }

    .panel--quiet {
        background: transparent;
        box-shadow: inset 0 0 0 1.5px var(--line-strong);
    }

    .panel__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .rows {
        display: grid;
    }

    .rows li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    .rows li:first-child {
        padding-top: 0;
    }

    .rows li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .rows div span {
        color: var(--muted);
        font-size: var(--fs-small);
    }

    .login {
        width: min(100%, 28rem);
        margin-inline: auto;
    }

    .footer {
        padding-block: clamp(3.5rem, 7vw, 5.5rem) 1.75rem;
        font-size: var(--fs-small);
    }

    .footer__grid {
        display: grid;
        gap: 2.5rem 2rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__brand,
    .footer__grid > :last-child {
        grid-column: 1 / -1;
    }

    @media (min-width: 900px) {
        .footer__grid {
            grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
        }

        .footer__brand,
        .footer__grid > :last-child {
            grid-column: auto;
        }
    }

    .footer__logo {
        width: 11.5rem;
    }

    .footer__brand p {
        margin-top: 1.25rem;
        max-width: 18em;
        color: var(--muted);
    }

    .footer h2 {
        margin-bottom: 1rem;
        color: var(--green-light);
        font-size: var(--fs-label);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .footer ul {
        display: grid;
        gap: 0.15rem;
        padding: 0;
        list-style: none;
    }

    .footer li {
        color: var(--muted);
    }

    .footer li a {
        display: inline-block;
        padding-block: 0.4rem;
        color: var(--text);
        text-decoration: none;
    }

    .footer li a:hover {
        color: var(--green-light);
        text-decoration: underline;
    }

    .socials {
        display: flex;
        gap: 0.6rem;
        margin-top: 1.5rem;
    }

    .socials a {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 1.4rem 1.4rem 1.4rem var(--sharp);
        background: var(--navy-block);
        color: var(--sand);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .socials a:hover {
        background: var(--green-light);
        color: var(--navy);
    }

    .socials svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    .on-navy .socials a {
        background: rgba(245, 240, 232, 0.1);
    }

    .footer__bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem 2rem;
        margin-top: clamp(3rem, 6vw, 4.5rem);
        padding-top: 1.5rem;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.875rem;
    }

    .footer__bottom a {
        color: var(--text);
    }

    /* Dialogs: video with sound, photo lightbox */
    .dialog {
        width: min(100% - 2rem, 70rem);
        max-width: none;
        max-height: none;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--sand);
        overflow: visible;
    }

    .dialog::backdrop {
        background: rgba(10, 14, 24, 0.86);
    }

    .dialog__close {
        position: absolute;
        right: 0;
        bottom: calc(100% + 0.75rem);
    }

    .dialog .video-frame {
        aspect-ratio: 16 / 9;
        max-height: calc(100dvh - 8rem);
        margin-inline: auto;
    }

    .dialog--photo {
        width: fit-content;
    }

    /* Sized by the photo itself, so landscape and portrait both show whole. */
    .dialog--photo .photo {
        aspect-ratio: auto;
        min-width: min(16rem, 100vw - 2rem);
        min-height: 10rem;
    }

    .dialog--photo .photo > img {
        display: block;
        width: auto;
        height: auto;
        max-width: calc(100vw - 2rem);
        max-height: calc(100dvh - 12rem);
        object-fit: contain;
    }

    .dialog__nav {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
}

@layer utilities {
    /* A navy context. Everything inside picks up the "on navy" values,
       so links, labels and buttons need no separate variants. */
    .on-navy {
        --text: var(--sand);
        --heading: var(--sand);
        --muted: #C6CCD8;
        --accent: var(--green-light);
        --dot: var(--terra-soft);
        --line: rgba(245, 240, 232, 0.16);
        --line-strong: rgba(245, 240, 232, 0.36);
        --focus: var(--green-light);
        --btn-navy-bg: var(--sand);
        --btn-navy-fg: var(--navy);
        --btn-navy-hover: var(--white);
        background-color: var(--navy-block);
        color: var(--text);
    }

    .mt-1 { margin-top: 0.5rem; }
    .mt-2 { margin-top: 1rem; }
    .mt-3 { margin-top: 1.75rem; }
    .mt-4 { margin-top: 3rem; }
    .mb-2 { margin-bottom: 1rem; }
    .center { text-align: center; }

    .h3 {
        font-size: var(--fs-h3);
        line-height: 1.2;
        letter-spacing: -0.012em;
    }

    .h4 {
        font-size: 1.125rem;
        line-height: 1.3;
        letter-spacing: -0.005em;
    }

    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Reveal on scroll, only once theme.js has run (it sets html.reveal), so a
   script that fails to load never leaves the page blank. Unlayered so the
   reveal states win; keep [data-reveal] off elements with a hover transform. */
@media (prefers-reduced-motion: no-preference) {
    .reveal [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--delay, 0s);
    }

    .reveal [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .event:hover,
    .gallery a:hover {
        transform: none;
    }
}

/* Forced colours drop box-shadows, which are the only edge of the outlined blocks. */
@media (forced-colors: active) {
    .card--quiet,
    .panel--quiet,
    .pill--quiet,
    .empty {
        border: 1px solid CanvasText;
    }
}

@media print {
    :root,
    :root[data-theme="dark"],
    :root:not([data-theme="light"]),
    .on-navy {
        --bg: var(--white);
        --surface: var(--white);
        --surface-2: var(--sand);
        --text: var(--navy);
        --heading: var(--navy);
        --muted: var(--grey);
        --accent: var(--green-dark);
        --dot: var(--terra);
        --line: rgba(30, 43, 71, 0.2);
        --line-strong: rgba(30, 43, 71, 0.3);
        --navy-block: var(--white);
        background: var(--white);
        color: var(--navy);
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .header,
    .hero__controls,
    .video-frame__controls,
    .theme-toggle {
        display: none;
    }

    /* Navy tiles print white, so their light text goes dark, with a line
       around. Filled buttons and pills print as outlines: browsers drop
       backgrounds by default, which would leave white text on white. */
    .member__logo--text,
    .date,
    .socials a,
    .card__icon,
    .photo--empty b,
    .steps li::before {
        color: var(--heading);
        box-shadow: inset 0 0 0 1px var(--line);
    }

    .date span {
        color: var(--muted);
    }

    .btn {
        --btn-bg: transparent;
        --btn-fg: var(--text);
        --btn-border: var(--line-strong);
    }

    .pill {
        background: none;
        color: var(--text);
        box-shadow: inset 0 0 0 1px var(--line-strong);
    }
}