/* ==========================================================================
   Dokter Dhaenens — design tokens
   Palette taken from the original site: soft sky blue on near-black type.
   ========================================================================== */

:root {
    --ink: #1a171b;
    --ink-soft: #4a4750;
    --ink-faint: #7b7883;

    --sky: #8dc6e8;
    --sky-tint: #e4eef3;
    --sky-wash: #f2f7fa;
    --sky-deep: #2b6f96;
    --sky-deeper: #1f5372;

    --paper: #ffffff;
    --sand: #f7f8f9;
    --line: #e3e8ec;

    --radius: 4px;
    --radius-lg: 10px;
    --shadow: 0 1px 2px rgb(26 23 27 / 0.05), 0 8px 24px -12px rgb(26 23 27 / 0.15);
    --shadow-lift: 0 2px 4px rgb(26 23 27 / 0.06), 0 16px 40px -16px rgb(26 23 27 / 0.22);

    --measure: 68ch;
    --shell: 1140px;
    --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em;
    color: var(--ink);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    /* Dutch compounds like "Baarmoederhalsbehandeling" outrun narrow cards. */
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem); font-weight: 400; }
h4 { font-size: 1.1rem; font-weight: 500; }

p { margin: 0 0 1.15em; }

a {
    color: var(--sky-deep);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
    color: var(--sky-deeper);
    text-decoration: underline;
}

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

img { max-width: 100%; height: auto; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

blockquote {
    margin: 1.75rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid var(--sky);
    color: var(--ink);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.55;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: 0.4em; }

strong { color: var(--ink); font-weight: 600; }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    transition: top 0.15s ease;
}

.skip-link:focus { top: 1rem; color: #fff; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.shell--narrow { max-width: 820px; }

.section { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.section--sand { background: var(--sand); }
.section--wash { background: var(--sky-wash); }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2.25rem; }
.prose h3, .prose h4 { margin-top: 1.75rem; }
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }

.stack-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink);
}

.u-mt-sm { margin-top: 1.25rem; }
.u-mt-md { margin-top: 2rem; }
.u-mt-lg { margin-top: 2.75rem; }
.u-mb-0 { margin-bottom: 0; }

.eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sky-deep);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn:focus-visible { text-decoration: none; }

.btn--primary {
    background: var(--sky-deep);
    border-color: var(--sky-deep);
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--sky-deeper);
    border-color: var(--sky-deeper);
    color: #fff;
}

.btn--ghost {
    /* Slightly opaque rather than transparent so it holds up over hero photos. */
    background: rgb(255 255 255 / 0.85);
    border-color: var(--line);
    color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: #fff;
    border-color: var(--sky-deep);
    color: var(--sky-deep);
}

.btn--on-dark {
    background: transparent;
    border-color: rgb(255 255 255 / 0.45);
    color: #fff;
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--sky-deeper);
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.arrow-link::after {
    content: "\2192";
    transition: transform 0.15s ease;
}

.arrow-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Site header
   ========================================================================== */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.masthead .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.9rem;
}

/* Former standalone top bar, now stacked above the nav links in the same
   column — so the logo can run the full height of the header instead of
   being pushed down by a full-width row. */
.masthead__nav-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.masthead__contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 1.5rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.masthead__contact a { color: var(--sky-deep); }

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover { text-decoration: none; color: var(--ink); }

/* The practice's own wordmark (200 × 79). display:block avoids the few
   pixels of inline whitespace an <img> normally sits on, which was throwing
   off vertical centering against the text next to it. */
.brand__logo {
    display: block;
    flex: none;
    width: auto;
    height: 68px;
}

.brand__divider {
    flex: none;
    align-self: flex-end;
    width: 1px;
    height: 51px;
    background: var(--line);
}

.brand__text { align-self: flex-end; }

.brand__name {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
}

.brand__sub {
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- navigation ---------------------------------------------------------- */

.nav { display: flex; align-items: center; gap: 1.75rem; }

.nav__list {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__list li { margin: 0; }

.nav__link {
    position: relative;
    display: block;
    padding-block: 0.35rem;
    color: var(--ink);
    font-size: 0.92rem;
    text-decoration: none;
}

.nav__link:hover { text-decoration: none; color: var(--sky-deep); }

.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--sky);
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--sky-deep); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.subnav {
    background: var(--sky-wash);
    border-bottom: 1px solid var(--line);
}

.subnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    margin: 0;
    padding: 0.7rem 0;
    list-style: none;
    font-size: 0.85rem;
}

.subnav__list li { margin: 0; }
.subnav__list a { color: var(--ink-soft); }
.subnav__list a[aria-current="page"] { color: var(--sky-deep); font-weight: 600; }

/* --- mobile menu (CSS only) ---------------------------------------------- */

/* The checkbox stays in the accessibility tree (`.visually-hidden`, not
   `display: none`) so the menu can be opened from the keyboard. */
.menu-btn {
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.menu-btn__bars {
    position: relative;
    display: block;
    width: 16px;
    height: 2px;
    background: var(--ink);
}

.menu-btn__bars::before,
.menu-btn__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: var(--ink);
}

.menu-btn__bars::before { top: -5px; }
.menu-btn__bars::after { top: 5px; }

.menu-toggle:focus-visible + .menu-btn {
    outline: 2px solid var(--sky-deep);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .menu-btn { display: inline-flex; }

    .brand__divider,
    .brand__name,
    .brand__sub,
    .masthead__contact { display: none; }

    /* Dissolve the column so it stops sitting between the brand and the right
       edge as an empty flex item — otherwise `space-between` parks the menu
       button in the middle of the header. */
    .masthead__nav-col { display: contents; }

    .nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        padding: 0.75rem 1.25rem 1.25rem;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .nav__list li + li { border-top: 1px solid var(--line); }
    .nav__link { padding-block: 0.75rem; font-size: 1rem; }
    .nav__link::after { display: none; }

    /* `.nav` sits inside `.masthead__nav-col`, so it is a nephew of the
       checkbox rather than a sibling — match through the column. */
    .menu-toggle:checked ~ .masthead__nav-col .nav { display: block; }
    .masthead .shell { position: relative; }

    .subnav__list { gap: 0.35rem 1.25rem; font-size: 0.8rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    background: linear-gradient(160deg, var(--sky-tint) 0%, var(--sky-wash) 45%, #fff 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -8%;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgb(141 198 232 / 0.5), transparent 62%);
    pointer-events: none;
}

.hero .shell {
    position: relative;
    z-index: 1;
    padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
}

.hero__inner { max-width: 44rem; }

.hero h1 { margin-bottom: 0.35rem; }

.hero__sub {
    display: block;
    margin-bottom: 1.5rem;
    font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
    font-weight: 300;
    color: var(--sky-deep);
    letter-spacing: 0.02em;
}

.hero__text {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 40rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* Heroes without call-to-action buttons leave the container empty. */
.hero__actions:empty,
.hero__text:empty { display: none; }

.hero--compact .shell { padding-block: clamp(2.5rem, 1.75rem + 4vw, 4.25rem); }

/* --- photo hero ---------------------------------------------------------- */

/* `--hero-image` is set inline per page by the x-hero component. The scrim keeps
   the copy readable over the photo while letting it show through on the right. */
.hero--photo {
    background:
        linear-gradient(
            100deg,
            rgb(255 255 255 / 0.96) 0%,
            rgb(255 255 255 / 0.92) 30%,
            rgb(255 255 255 / 0.62) 52%,
            rgb(255 255 255 / 0.18) 78%,
            rgb(255 255 255 / 0.06) 100%
        ),
        var(--hero-image) center / cover no-repeat,
        var(--sky-wash);
}

.hero--photo::after { display: none; }

.hero--photo .shell { padding-block: clamp(4rem, 2rem + 8vw, 8rem); }
.hero--photo.hero--compact .shell { padding-block: clamp(3rem, 1.75rem + 5vw, 5.5rem); }

/* On narrow screens the photo sits behind the full column, so the scrim has to
   cover the whole width instead of fading out to the right. */
@media (max-width: 800px) {
    .hero--photo {
        background:
            linear-gradient(
                180deg,
                rgb(255 255 255 / 0.88) 0%,
                rgb(255 255 255 / 0.82) 55%,
                rgb(255 255 255 / 0.68) 100%
            ),
            var(--hero-image) center / cover no-repeat,
            var(--sky-wash);
    }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    padding: 1.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.card { color: inherit; text-decoration: none; }

a.card:hover,
a.card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--sky);
    text-decoration: none;
}

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card > :last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: 1.1rem; }

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--sky-tint);
    color: var(--sky-deeper);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- treatment tiles ----------------------------------------------------- */

.tile {
    position: relative;
    display: block;
    padding: 2rem 1.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--sky);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.22s ease;
}

.tile:hover,
.tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    text-decoration: none;
}

.tile:hover::before,
.tile:focus-visible::before { transform: scaleY(1); }

.tile__num {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--sky);
}

.tile h3 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.tile p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* The parent treatment, lifted out of the grid and set across the full width so
   the four that belong to it can sit in one even row underneath. Heading and
   copy run side by side, which keeps the block from turning into a tall banner
   on desktop while staying a normal stacked tile on narrow screens. */
.tile--wide {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 2rem;
    background: var(--sky-wash);
    border-color: var(--sky-tint);
}

.tile--wide h3 { margin-bottom: 0; font-size: 1.3rem; }
.tile--wide p { flex: 1 1 22rem; }

/* ==========================================================================
   Notices & highlights
   ========================================================================== */

.notice {
    padding: 1.5rem 1.75rem;
    background: var(--sky-wash);
    border-left: 3px solid var(--sky);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.notice > :last-child { margin-bottom: 0; }
.notice h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }

.notice--warn {
    background: #fdf6ec;
    border-left-color: #e0a458;
}

.banner {
    padding: clamp(2rem, 1.5rem + 2vw, 3rem);
    background: var(--sky-deeper);
    border-radius: var(--radius-lg);
    color: rgb(255 255 255 / 0.78);
    text-align: center;
}

.banner h2, .banner p { color: #fff; }
.banner p { color: rgb(255 255 255 / 0.78); max-width: 42rem; margin-inline: auto; }
.banner > :last-child { margin-bottom: 0; }

.pledge {
    padding: 1.35rem 1.75rem;
    background: var(--sky-deeper);
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 300;
    text-align: center;
}

.pledge strong { color: #fff; font-weight: 600; }

/* The practice's dark editorial photo, dimmed with a deep-blue wash (rather
   than near-black) so the line stays readable and the block sits in the
   site's blue palette. */
.pledge--photo {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    background:
        linear-gradient(rgb(31 83 114 / 0.66), rgb(31 83 114 / 0.66)),
        url("/img/praktijk-band.jpg") center / cover no-repeat,
        var(--sky-deeper);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
}

/* ==========================================================================
   Figures
   ========================================================================== */

.figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

/* `.figure`'s margin reset and the `u-mt-*` utilities have equal specificity,
   so without this, whichever is later in the file wins regardless of the
   class order in markup — here that was silently eating the map's top margin. */
.figure.u-mt-lg { margin-top: 2.75rem; }

/* Images placed in an article's Markdown (see App\Blog\ArticleImages). They
   carry `.figure` for the frame, and need their own vertical rhythm inside the
   prose — `.figure` itself resets margin to 0, and this rule wins by coming
   after it rather than by being more specific. */
.article-figure { margin-block: 2.25rem; }
.article-body > .article-figure:first-child { margin-top: 0; }
.article-body > .article-figure:last-child { margin-bottom: 0; }

.figure img {
    display: block;
    width: 100%;
}

.figure figcaption {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 0.85rem;
    line-height: 1.5;
}

.figure--plain {
    border: 0;
    background: none;
    box-shadow: none;
}

.figure--plain img { border-radius: var(--radius-lg); }

/* The static map is nearly square; crop it to a band so it doesn't dominate. */
.figure--map img {
    height: clamp(240px, 28vw, 400px);
    object-fit: cover;
    object-position: 58% 45%;
}


/* Two-column text + figure, with the figure sticking to the top on desktop. */
.media {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3rem);
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.media__body > :last-child { margin-bottom: 0; }

a.figure {
    display: block;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.figure:hover,
a.figure:focus-visible {
    transform: translateY(-3px);
    border-color: var(--sky);
    box-shadow: var(--shadow-lift);
    text-decoration: none;
}

/* --- definition list (FAQ) ----------------------------------------------- */

.faq-list { display: grid; gap: 0.75rem; }

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-item[open] { border-color: var(--sky); }

.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

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

.faq-item > summary::after {
    content: "+";
    flex: none;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--sky-deep);
    transition: transform 0.18s ease;
}

.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > summary:hover { background: var(--sky-wash); }

.faq-item__body {
    padding: 0 1.5rem 1.35rem;
    border-top: 1px solid var(--line);
    padding-top: 1.1rem;
}

.faq-item__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-card {
    padding: 1.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* So a photo bled to the card's edges is clipped by its rounded corners. */
    overflow: hidden;
}

.contact-card > :last-child { margin-bottom: 0; }

/* The photo of the building runs to the card's edges, so it reads as the
   card's own header rather than an image dropped inside it — hence the
   negative margins cancelling the card's padding. */
.contact-card__photo {
    margin: -1.85rem -1.85rem 1.35rem;
}

.contact-card__photo img {
    display: block;
    width: 100%;
}

.contact-card address {
    margin-bottom: 1rem;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink);
}

.data-line {
    display: flex;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
}

.data-line dt {
    flex: none;
    width: 7.5rem;
    color: var(--ink-faint);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.15rem;
}

.data-line dd { margin: 0; color: var(--ink); }

/* ==========================================================================
   Article
   ========================================================================== */

.article-head { border-bottom: 1px solid var(--line); }
.article-head .shell { padding-block: clamp(2.5rem, 1.75rem + 4vw, 4rem); }
.article-head h1 { max-width: 22ch; }

.article-lead {
    max-width: var(--measure);
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.article-body { max-width: var(--measure); }
.article-body h2 { margin-top: 2.5rem; font-size: 1.4rem; font-weight: 500; }
.article-body h3 { margin-top: 2rem; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }

.article-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding-block: clamp(2.75rem, 2rem + 3vw, 4rem) 0;
    background: var(--ink);
    color: rgb(255 255 255 / 0.6);
    font-size: 0.92rem;
}

.site-footer h2 {
    margin-bottom: 1.1rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer a { color: rgb(255 255 255 / 0.78); }
.site-footer a:hover { color: #fff; }

.site-footer address {
    font-style: normal;
    line-height: 1.8;
    color: rgb(255 255 255 / 0.78);
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: 0.55rem; }

.footer-list--nested {
    margin: 0.35rem 0 0.75rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgb(255 255 255 / 0.15);
    list-style: none;
}

.footer-list--nested li { margin-bottom: 0.4rem; font-size: 0.88rem; }

.footer-brand__mark {
    display: block;
    width: auto;
    height: 54px;
    margin-bottom: 1.15rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding-block: 1.4rem;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    font-size: 0.82rem;
}

.footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-bottom li { margin: 0; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .masthead, .subnav, .site-footer, .hero::after { display: none !important; }
    body { color: #000; }
    a { color: #000; text-decoration: underline; }
}