/* File: public_html/assets/css/site.css
   Purpose: Public site styles, mobile-first. Sections:
     1. Tokens  2. Base  3. Layout (container, header, nav, main, footer)
     4. Components (buttons, bands, cards, news, pagination, gallery, lightbox, tables)
     5. Pages (home, static pages, contacts, contests, news post)  6. Utilities, motion, print
   Brand palette comes from the legacy site (legacy/css/style.css, logo background):
   periwinkle #7f85b9, accent #636baa, text blue #294293, heading blue #13419d,
   lavender #abb6dc, sage #88a693. No external fonts or CDNs; CSP-safe (no inline styles). */

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
    /* Brand: periwinkle / lavender blues (legacy waterbachkovo.com) */
    --brand-50: #f5f6fc;
    --brand-100: #eceefa;
    --brand-200: #dadef3;
    --brand-300: #abb6dc;   /* legacy gradient lavender */
    --brand-500: #7f85b9;   /* legacy header/footer, logo background */
    --brand-600: #636baa;   /* legacy accent, 5.0:1 on white */
    --brand-700: #4b5297;   /* 7.1:1 with white */
    --brand-800: #294293;   /* legacy text blue, 9.2:1 on white */
    --brand-900: #1b2560;   /* deep navy: footer, dark panels */
    --brand-950: #121942;

    /* Nature accent: Rhodope sage / bottle-cap green */
    --green-100: #e9f3ec;
    --green-500: #88a693;   /* legacy sage (decorative only) */
    --green-600: #5fa83f;   /* bottle cap green (decorative only) */
    --green-700: #2f6b3e;   /* text-safe green, 6.4:1 on white */
    --green-200-on-dark: #bfe3c8;

    /* Neutrals */
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-surface: var(--brand-50);
    --color-text: #1e2444;          /* 15:1 on white */
    --color-heading: var(--brand-900);
    --color-text-muted: #545b78;    /* 6.6:1 on white */
    --color-border: #dde1f0;
    --color-link: var(--brand-800);
    --color-link-hover: var(--brand-900);
    --color-error: #b3261e;
    --color-error-bg: #fdecea;
    --color-on-dark: #ffffff;
    --color-on-dark-muted: rgb(255 255 255 / 0.82);

    /* Focus ring: dark on light surfaces, redefined on dark surfaces */
    --focus: var(--brand-800);

    /* Shadows: layered, tinted with the brand navy */
    --shadow-1: 0 1px 2px rgb(27 37 96 / 0.06), 0 2px 8px rgb(27 37 96 / 0.06);
    --shadow-2: 0 2px 4px rgb(27 37 96 / 0.05), 0 10px 24px rgb(27 37 96 / 0.10);
    --shadow-3: 0 4px 10px rgb(27 37 96 / 0.07), 0 22px 44px rgb(27 37 96 / 0.16);
    --shadow-hero: 0 12px 24px -8px rgb(10 14 50 / 0.35), 0 40px 80px -24px rgb(10 14 50 / 0.55);

    /* Radii */
    --radius-1: 0.375rem;
    --radius-2: 0.75rem;
    --radius-3: 1.25rem;
    --radius-pill: 999px;
    --radius: var(--radius-1); /* legacy alias (admin.css) */

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Type */
    --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.625rem);
    --text-display: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem);
    --line-height: 1.65;

    /* Layout */
    --container: 76rem;
    --container-max: var(--container); /* legacy alias */
    --measure: 48rem;
    --main-pad: var(--space-7);
    --header-h: 4.5rem;      /* approx. height of the pinned (compact) header: scroll offsets */
    --wave-h: clamp(1.75rem, 4.5vw, 4rem);

    /* Header (sticky): ink on the periwinkle band, logo sizes, touch targets */
    --header-ink: var(--brand-950);              /* 4.8:1 on --brand-500 */
    --header-line: rgb(18 25 66 / 0.16);
    --header-line-strong: rgb(18 25 66 / 0.4);
    --header-accent: var(--color-white);         /* hover/current underline: 3.5:1 on --brand-500 (non-text, >= 3:1) */
    --header-accent-w: 3px;
    --header-pad: var(--space-2);
    --header-pad-compact: var(--space-2);
    --logo-w: 120px;
    --logo-w-compact: 96px;
    --tap: 2.75rem;
    --tap-lg: 3rem;

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 0.2s;
}

/* =========================================================================
   2. Base
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-3)); /* anchors clear the pinned header */
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p,
ul,
ol {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur) ease;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}

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

strong {
    color: var(--color-heading);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

::selection {
    background: var(--brand-200);
    color: var(--brand-950);
}

/* Visible focus for keyboard users on every interactive element */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius-1);
}

.icon {
    display: inline-block;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

/* =========================================================================
   3. Layout
   ========================================================================= */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -10rem;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--brand-900);
    color: var(--color-white);
    font-weight: 600;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

.skip-link:focus {
    top: var(--space-2);
    color: var(--color-white);
}

/* ---------- Header ----------
   One row: logo, menu, language switch, Facebook. The band colour equals the logo's own
   background (#7f85b9), so the logo sits seamlessly; the menu is plain text on that same
   colour (no bar, pills or buttons). Pinned while scrolling; nav.js adds .is-scrolled to
   compact it. Below 64em (must match nav.js) the menu collapses behind a <details> toggle. */
.site-header {
    --focus: var(--header-ink);
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--brand-500); /* no edge at rest: the home hero continues the band */
    transition: box-shadow var(--dur) ease;
}

.site-header.is-scrolled {
    --logo-w: var(--logo-w-compact);
    --header-pad: var(--header-pad-compact);
    box-shadow: 0 1px 0 rgb(27 37 96 / 0.12), 0 6px 18px rgb(27 37 96 / 0.18);
}

.site-header__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    padding-block: var(--header-pad);
    transition: padding var(--dur) var(--ease);
}

.site-logo {
    display: inline-block;
    flex: none;
    line-height: 0;
    border-radius: var(--radius-1);
}

.site-logo img {
    width: var(--logo-w);
    height: auto;
    transition: width var(--dur) var(--ease);
}

/* Shared text-link treatment: the text scales up slightly and an underline grows in.
   transform keeps the layout still; the current page keeps its underline. */
.site-nav__text,
.lang-switch a {
    position: relative;
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}

.site-nav__text::after,
.lang-switch a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2em;
    height: var(--header-accent-w);
    border-radius: var(--header-accent-w);
    background: var(--header-accent);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
}

/* Tools: language switch + Facebook, plain text and icon on the band */
.site-tools {
    order: 1;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: var(--tap); /* room for the menu toggle */
}

.lang-switch ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Thin divider between BG and EN */
.lang-switch li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.1em;
    vertical-align: middle;
    background: var(--header-line-strong);
}

.lang-switch li {
    display: flex;
    align-items: center;
}

.lang-switch a {
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--tap);
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    color: var(--header-ink);
    border-radius: var(--radius-1);
}

.lang-switch a::after {
    left: var(--space-2);
    right: var(--space-2);
    bottom: 0.6rem;
}

.lang-switch a:hover {
    color: var(--header-ink);
    transform: scale(1.08);
}

.lang-switch a:hover::after,
.lang-switch a[aria-current]::after {
    transform: scaleX(1);
}

.site-facebook {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--header-ink);
    border-radius: var(--radius-1);
}

.site-facebook .icon {
    transition: transform var(--dur) var(--ease);
}

.site-facebook:hover {
    color: var(--header-ink);
}

.site-facebook:hover .icon {
    transform: scale(1.15);
}

/* Menu: <details>/<summary>; open by default so it works without JS (nav.js collapses
   it on narrow screens). The toggle sits at the right end of the logo row. */
.site-menu {
    order: 2;
    flex-basis: 100%;
}

.site-menu__toggle {
    position: absolute;
    top: calc(var(--header-pad) + var(--logo-w) * 0.49 / 2 - var(--tap) / 2); /* logo is 198x97 */
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    cursor: pointer;
    color: var(--header-ink);
    border-radius: var(--radius-1);
    list-style: none;
    transition: top var(--dur) var(--ease);
}

.site-menu__toggle::-webkit-details-marker {
    display: none;
}

/* Hamburger drawn with CSS; becomes an X when open */
.site-menu__icon,
.site-menu__icon::before,
.site-menu__icon::after {
    display: block;
    width: 1.375rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), background-color var(--dur) ease;
}

.site-menu__icon {
    position: relative;
}

.site-menu__icon::before,
.site-menu__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-menu__icon::before { top: -7px; }
.site-menu__icon::after { top: 7px; }

.site-menu[open] .site-menu__icon {
    background-color: transparent;
}

.site-menu[open] .site-menu__icon::before {
    transform: translateY(7px) rotate(45deg);
}

.site-menu[open] .site-menu__icon::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* Narrow: the open menu is a panel of text links in the band colour; it scrolls on its
   own when taller than the screen, because the header is pinned */
.site-nav {
    max-height: calc(100dvh - var(--logo-w) * 0.49 - 3 * var(--header-pad) - 1px);
    margin-top: var(--header-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--header-line);
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list {
    padding-bottom: var(--space-3);
}

.site-nav__item {
    border-bottom: 1px solid var(--header-line);
}

.site-nav__item:last-child {
    border-bottom: 0;
}

/* Links and group triggers (<summary> without JS, <button aria-expanded> with nav.js) */
.site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--tap-lg);
    padding: var(--space-2) var(--space-1);
    color: var(--header-ink);
    font: inherit;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--radius-1);
    cursor: pointer;
    list-style: none;
}

.site-nav__link::-webkit-details-marker {
    display: none;
}

.site-nav__link:hover {
    color: var(--header-ink);
}

.site-nav__link[aria-current] .site-nav__text::after,
.site-nav__item.is-current .site-nav__trigger .site-nav__text::after {
    transform: scaleX(1);
}

.site-nav__short {
    display: none;
}

.site-nav__chevron {
    flex: none;
    width: 0.45em;
    height: 0.45em;
    margin-left: auto;
    margin-right: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.site-nav__group[open] > .site-nav__trigger .site-nav__chevron,
.site-nav__group.is-open > .site-nav__trigger .site-nav__chevron {
    transform: translateY(0.1em) rotate(-135deg);
}

/* Narrow: groups are accordions with indented children */
.site-nav__sub {
    padding: 0 0 var(--space-2) var(--space-4);
}

.site-nav__sub .site-nav__link {
    min-height: var(--tap);
    font-size: var(--text-base);
    font-weight: 500;
}

.site-nav__group.is-enhanced > .site-nav__sub {
    display: none;
}

.site-nav__group.is-enhanced.is-open > .site-nav__sub {
    display: block;
}

/* Hover effect only for real pointers (no stuck hover state on touch) */
@media (hover: hover) {
    .site-nav__link:hover .site-nav__text {
        transform: scale(1.06);
    }

    .site-nav__link:hover .site-nav__text::after {
        transform: scaleX(1);
    }
}

/* ---------- Main ---------- */
.site-main {
    flex: 1 0 auto;
    padding-block: var(--main-pad) var(--space-6);
    overflow-x: clip; /* full-bleed bands extend to 100vw without horizontal scroll */
}

.site-main:focus {
    outline: none;
}

.error-page,
.placeholder-page {
    max-width: var(--measure);
    padding-block: var(--space-6);
}

/* ---------- Footer ---------- */
.site-footer {
    --focus: #ffd166;
    position: relative;
    isolation: isolate;
    margin-top: var(--wave-h);
    color: var(--color-on-dark-muted);
    background: linear-gradient(180deg, var(--brand-900), var(--brand-950));
    font-size: var(--text-sm);
}

/* White wave flowing from the page into the footer */
.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--wave-h);
    background: url("../img/wave.svg") center bottom / 100% 100% no-repeat;
    transform: scaleY(-1);
    transform-origin: center;
    filter: none;
    pointer-events: none;
}

.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--wave-h);
    background: var(--brand-900);
    z-index: -1;
}

.site-footer__inner {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-6) var(--space-5);
}

.site-footer a {
    color: var(--color-white);
    text-decoration-color: rgb(255 255 255 / 0.4);
}

.site-footer a:hover {
    color: var(--brand-200);
    text-decoration-color: currentColor;
}

.footer-brand__logo {
    display: inline-block;
    line-height: 0;
    border-radius: var(--radius-2);
    overflow: hidden;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

.footer-brand__logo img {
    width: 150px;
}

.footer-brand__slogan {
    margin: var(--space-3) 0 var(--space-3);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-white);
}

.footer-facebook {
    margin: 0;
}

.footer-facebook a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    font-weight: 600;
}

.footer-heading {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-300);
}

.footer-nav ul,
.footer-policies ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
}

.footer-nav a,
.footer-policies a {
    display: inline-block;
    padding-block: var(--space-1);
    text-decoration: none;
}

.footer-nav a:hover,
.footer-policies a:hover {
    text-decoration: underline;
}

.footer-copyright {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.14);
    color: var(--color-on-dark-muted);
}

/* ---------- Breakpoints for layout ---------- */
/* Very small phones: the header row only fits logo + language + toggle
   (Facebook stays in the footer) */
@media (max-width: 22.49em) {
    .site-facebook {
        display: none;
    }
}

@media (min-width: 48em) {
    .site-footer__inner {
        grid-template-columns: 1.1fr 1.3fr 1fr;
        column-gap: var(--space-7);
        padding-top: var(--space-7);
    }

    .footer-copyright {
        grid-column: 1 / -1;
    }
}

/* Breakpoint must match nav.js (min-width: 64em). Wide: one row - logo, menu, tools.
   Groups open as dropdown panels (light surface, soft shadow). */
@media (min-width: 64em) {
    .site-header {
        --logo-w: 150px;
        --logo-w-compact: 112px;
        --header-pad: var(--space-3);
    }

    .site-header__inner {
        flex-wrap: nowrap;
        gap: var(--space-4);
    }

    .site-menu {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-menu__toggle {
        display: none;
    }

    /* Modern browsers: show the nav even if the details element is closed */
    .site-menu::details-content {
        content-visibility: visible;
        display: contents;
    }

    .site-tools {
        order: 2;
        margin: 0;
    }

    .site-nav {
        max-height: none;
        margin: 0;
        overflow: visible;
        border: 0;
    }

    .site-nav__list {
        display: flex;
        justify-content: flex-end;
        padding: 0;
    }

    .site-nav__item {
        position: relative;
        border: 0;
    }

    .site-nav__link {
        width: auto;
        min-height: var(--tap);
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-base);
        white-space: nowrap;
    }

    .site-nav__trigger {
        gap: var(--space-2);
    }

    .site-nav__chevron {
        margin: 0;
        width: 0.4em;
        height: 0.4em;
    }

    .site-nav__full {
        display: none;
    }

    .site-nav__short {
        display: inline;
    }

    /* Dropdown panel */
    .site-nav__sub {
        --focus: var(--brand-800);
        --header-accent: currentColor; /* white would vanish on the white panel: brand underline */
        --header-accent-w: 2px;
        position: absolute;
        top: calc(100% + var(--space-2));
        left: 0;
        z-index: 1;
        min-width: 14rem;
        padding: var(--space-2);
        background: var(--color-white);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-3);
    }

    /* Invisible bridge over the gap, so the pointer can travel to the panel */
    .site-nav__sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--space-3);
    }

    .site-nav__sub .site-nav__link {
        padding: var(--space-2) var(--space-3);
        color: var(--brand-900);
    }

    .site-nav__sub .site-nav__link[aria-current] {
        color: var(--brand-800);
    }

    .site-nav__sub .site-nav__link:hover {
        color: var(--brand-800);
        background: var(--brand-50);
    }

    /* With nav.js: fade/slide in (keeps visibility so closed links leave the tab order) */
    .site-nav__group.is-enhanced > .site-nav__sub {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.25rem);
        transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    }

    .site-nav__group.is-enhanced.is-open > .site-nav__sub {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s;
    }
}

@media (min-width: 80em) {
    .site-header {
        --logo-w: 170px;
        --logo-w-compact: 120px;
    }

    .site-header__inner {
        gap: var(--space-5);
    }

    .site-nav__link {
        padding-inline: 0.875rem;
    }

    /* Room for the full labels again */
    .site-nav__full {
        display: inline;
    }

    .site-nav__short {
        display: none;
    }
}

/* =========================================================================
   4. Components
   ========================================================================= */

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.875rem;
    padding: var(--space-2) var(--space-5);
    font: inherit;
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease,
        background-color var(--dur) ease, color var(--dur) ease;
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.btn--primary {
    color: var(--color-white);
    background: linear-gradient(180deg, var(--brand-700), var(--brand-800));
    box-shadow: 0 6px 16px rgb(41 66 147 / 0.3);
}

.btn--primary:hover {
    color: var(--color-white);
    box-shadow: 0 10px 22px rgb(41 66 147 / 0.38);
}

.btn--light {
    color: var(--brand-800);
    background: var(--color-white);
    box-shadow: 0 8px 20px rgb(10 14 50 / 0.25);
}

.btn--light:hover {
    color: var(--brand-900);
    box-shadow: 0 12px 26px rgb(10 14 50 / 0.32);
}

.btn--outline-light {
    color: var(--color-white);
    border-color: rgb(255 255 255 / 0.85);
    background: rgb(255 255 255 / 0.06);
}

.btn--outline-light:hover {
    color: var(--color-white);
    background: rgb(255 255 255 / 0.16);
}

.btn--outline {
    color: var(--brand-800);
    border-color: var(--brand-300);
    background: var(--color-white);
}

.btn--outline:hover {
    color: var(--brand-900);
    border-color: var(--brand-800);
    box-shadow: var(--shadow-1);
}

/* ---------- Full-bleed bands ----------
   The band background is a pseudo-element 100vw wide; the content stays in the
   container. .site-main clips the horizontal overflow. */
.page-head,
.home-hero,
.home-news {
    position: relative;
    isolation: isolate;
}

.page-head::before,
.home-hero::before,
.home-news::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -2;
}

/* Wave at the bottom of hero and page-head bands */
.page-head::after,
.home-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 100vw;
    height: var(--wave-h);
    transform: translateX(-50%);
    background: url("../img/wave.svg") center bottom / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Page head: soft lavender band under the header with the page title */
.page-head {
    margin-top: calc(-1 * var(--main-pad));
    margin-bottom: var(--space-6);
    padding-top: var(--main-pad);
    padding-bottom: calc(var(--wave-h) + var(--space-4));
}

.page-head::before {
    background:
        radial-gradient(60rem 18rem at 85% 0%, rgb(255 255 255 / 0.55), transparent 70%),
        linear-gradient(180deg, var(--brand-200) 0%, var(--brand-100) 55%, var(--brand-50) 100%);
}

.page-head h1 {
    margin: 0;
    max-width: 40ch;
}

.page-head h1::before,
.section-title::before {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-600), var(--green-600));
}

.section-title {
    font-size: var(--text-2xl);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

.section-head .section-title,
.section-head p {
    margin: 0;
}

/* ---------- Quick-link cards (home) ---------- */
.card-list {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}

.card:hover,
.card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}

.card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-100);
}

.card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    transition: transform 0.5s var(--ease);
}

.card:hover .card__media img {
    transform: scale(1.05);
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.card__title {
    margin: 0;
    font-size: var(--text-lg);
}

.card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

/* Stretched link: the whole card is clickable through the title link */
.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-3);
}

.card__title a:focus-visible {
    outline: none;
}

.card__title a:focus-visible::after {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.card__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.card__more {
    display: grid;
    place-items: center;
    align-self: flex-start;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: auto;
    font-weight: 700;
    color: var(--brand-800);
    background: var(--brand-100);
    border-radius: 50%;
    transition: transform var(--dur) var(--ease), background-color var(--dur) ease, color var(--dur) ease;
}

.card:hover .card__more {
    color: var(--color-white);
    background: var(--brand-800);
    transform: translateX(4px);
}

@media (min-width: 40em) {
    .card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-list > :first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64em) {
    .card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-list > :first-child {
        grid-column: span 2;
    }

    /* Featured first card: photo beside the text, height set by the neighbouring card */
    .card-list > :first-child {
        flex-direction: row;
    }

    .card-list > :first-child .card__media {
        position: relative;
        flex: 0 0 58%;
        aspect-ratio: auto;
    }

    .card-list > :first-child .card__media img {
        position: absolute;
        inset: 0;
    }

    .card-list > :first-child .card__body {
        justify-content: center;
        padding: var(--space-6);
    }

    .card-list > :first-child .card__title {
        font-size: var(--text-xl);
    }

    .card-list > :first-child .card__more {
        margin-top: var(--space-3);
    }
}

/* ---------- News and events cards (Feature 04) ---------- */
.news-list {
    display: grid;
    gap: var(--space-5);
    margin: 0 0 var(--space-7);
    padding: 0;
    list-style: none;
}

.news-list > li {
    display: flex; /* equal-height cards in a row */
}

.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}

.news-card:hover,
.news-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}

.news-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--brand-100);
}

.news-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* overrides the width/height ratio: portrait covers are cropped */
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.news-card:hover .news-card__media img {
    transform: scale(1.05);
}

.news-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.news-card__date {
    align-self: flex-start;
    padding: 0.125rem var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--brand-800);
    background: var(--brand-100);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

.news-card__title {
    margin: 0;
    font-size: var(--text-lg);
}

.news-card__title a {
    color: var(--color-heading);
    text-decoration: none;
}

.news-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-3);
}

.news-card__title a:hover {
    text-decoration: underline;
}

.news-card__title a:focus-visible {
    outline: none;
}

.news-card__title a:focus-visible::after {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.news-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.news-card__note {
    margin: auto 0 0;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--green-700);
}

/* Text-only card (no photo): deep brand panel, the date is the visual anchor */
.news-card--text {
    --focus: #ffd166;
    color: var(--color-on-dark);
    border-color: transparent;
    background:
        radial-gradient(22rem 12rem at 100% 0%, rgb(171 182 220 / 0.35), transparent 70%),
        linear-gradient(155deg, var(--brand-700), var(--brand-900));
}

/* Vary the tone of neighbouring text-only cards: periwinkle, deep blue, Rhodope green */
.news-list > li:nth-child(3n+2) .news-card--text {
    background: linear-gradient(155deg, var(--brand-600), var(--brand-800));
}

.news-list > li:nth-child(3n+2) .news-card--text .news-card__excerpt {
    color: var(--color-white); /* 5:1 on the lightest corner (#636baa) */
}

.news-list > li:nth-child(3n) .news-card--text {
    background:
        radial-gradient(22rem 12rem at 100% 0%, rgb(136 166 147 / 0.35), transparent 70%),
        linear-gradient(155deg, var(--green-700), #1d4428);
}

.news-card--text .news-card__body {
    padding: var(--space-6) var(--space-5);
}

.news-card--text .news-card__date {
    padding: 0;
    font-size: var(--text-xl);
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--color-white);
    background: none;
}

.news-card--text .news-card__title a {
    color: var(--color-white);
}

.news-card--text .news-card__excerpt {
    color: var(--color-on-dark-muted);
}

.news-card--text .news-card__note {
    color: var(--green-200-on-dark);
}

.news-empty {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px dashed var(--brand-300);
    border-radius: var(--radius-2);
}

@media (min-width: 40em) {
    .news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .news-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Pagination ---------- */
.pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--brand-800);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
    transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}

.pagination a:hover {
    background: var(--brand-50);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-2);
}

.pagination a[aria-current] {
    color: var(--color-white);
    background: var(--brand-800);
    border-color: var(--brand-800);
    box-shadow: 0 6px 14px rgb(41 66 147 / 0.3);
}

.pagination__gap {
    display: grid;
    place-items: center;
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
}

/* ---------- Gallery: thumbnails linking to full images (lightbox.js enhances) ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.gallery figure {
    margin: 0;
}

.gallery a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-2);
    background: var(--brand-100);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) ease, transform var(--dur) var(--ease);
}

.gallery a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.gallery a:hover img {
    transform: scale(1.06);
}

@media (min-width: 40em) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        gap: var(--space-4);
    }
}

/* ---------- Lightbox (<dialog> created by lightbox.js) ---------- */
.lightbox {
    --focus: #ffd166;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-white);
    background: transparent;
}

.lightbox::backdrop {
    background: rgb(12 16 44 / 0.94);
}

html:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    margin: 0;
    padding: 3.75rem var(--space-4) var(--space-4);
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-1);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
    transition: opacity var(--dur) ease;
}

.lightbox__img.is-loading {
    opacity: 0;
}

.lightbox__caption {
    margin: 0;
    color: var(--color-white);
    text-align: center;
}

.lightbox__counter {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    font-variant-numeric: tabular-nums;
}

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--color-white);
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--dur) ease;
}

.lightbox__btn:hover {
    background: rgb(255 255 255 / 0.26);
}

.lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__prev {
    left: var(--space-2);
}

.lightbox__next {
    right: var(--space-2);
}

.lightbox__btn[hidden] {
    display: none;
}

/* ---------- Data tables ---------- */
.data-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table caption {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 700;
    color: var(--color-heading);
    background: var(--brand-50);
    border-bottom: 1px solid var(--color-border);
}

.data-table th,
.data-table td {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.data-table thead th {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-800);
    background: var(--brand-100);
}

.data-table tbody tr:nth-child(even) {
    background: var(--brand-50);
}

.data-table tbody tr:last-child > * {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: var(--brand-100);
}

.data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Packaging table: shelf-life cell repeated per row for the mobile cards only */
.packaging-table .packaging-table__repeat {
    display: none;
}

/* Packaging table: stacked cards on mobile (headers stay in the DOM, visually hidden) */
@media (max-width: 39.99em) {
    .packaging-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .packaging-table,
    .packaging-table tbody,
    .packaging-table tr,
    .packaging-table th,
    .packaging-table td {
        display: block;
    }

    .packaging-table tbody th[scope="rowgroup"] {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
        color: var(--brand-800);
        background: var(--brand-100);
    }

    .packaging-table tbody tr {
        margin: var(--space-3);
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2);
    }

    .packaging-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        text-align: right;
    }

    .packaging-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        color: var(--brand-800);
    }

    .packaging-table tbody tr > :last-child {
        border-bottom: 0;
    }

    .packaging-table tbody .packaging-table__repeat {
        display: flex;
    }
}

/* ---------- Notes and badges ---------- */
.note,
.news-post__note {
    padding: var(--space-3) var(--space-4);
    background: var(--green-100);
    border-left: 4px solid var(--green-700);
    border-radius: var(--radius-2);
}

.badge {
    display: inline-block;
    padding: 0.0625rem var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius-pill);
}

.badge--ended {
    background: var(--color-error); /* 6.5:1 with white */
    color: var(--color-white);
}

/* =========================================================================
   5. Pages
   ========================================================================= */

/* ---------- Home ---------- */
.home-hero {
    --focus: var(--color-white);
    margin-top: calc(-1 * var(--main-pad));
    margin-bottom: var(--space-7);
    padding-top: calc(var(--main-pad) - var(--space-3));
    padding-bottom: calc(var(--wave-h) + var(--space-6));
    color: var(--color-on-dark);
}

/* Continues the header band (#7f85b9) and deepens into the brand navy */
.home-hero::before {
    background:
        radial-gradient(40rem 26rem at 78% 55%, rgb(171 182 220 / 0.45), transparent 70%),
        radial-gradient(30rem 20rem at 10% 100%, rgb(95 168 63 / 0.18), transparent 70%),
        linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 38%, var(--brand-900) 100%);
}

.home-hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.home-hero__title {
    margin-bottom: var(--space-3);
    font-size: var(--text-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-white);
    text-shadow: 0 2px 18px rgb(18 25 66 / 0.35);
}

.home-hero__slogan {
    margin-bottom: var(--space-5);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-style: italic;
    font-weight: 300;
    color: var(--color-white);
    text-shadow: 0 1px 12px rgb(18 25 66 / 0.35);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
}

.home-media {
    position: relative;
}

/* Soft glow behind the media */
.home-media::before {
    content: "";
    position: absolute;
    inset: 8% 6% -6%;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(171 182 220 / 0.55), transparent);
    filter: blur(24px);
}

.home-video,
.home-poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 580 / 355;
    object-fit: cover;
    border-radius: var(--radius-3);
    background: var(--brand-950);
    box-shadow: var(--shadow-hero);
    outline: 1px solid rgb(255 255 255 / 0.18);
    outline-offset: -1px;
}

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

.home-sections {
    margin-bottom: var(--space-8);
}

.home > :last-child {
    margin-bottom: calc(-1 * var(--space-6));
}

.home-news {
    padding-block: var(--space-7);
}

.home-news::before {
    background: linear-gradient(180deg, var(--brand-100), var(--brand-50) 70%, var(--color-white));
    border-top: 1px solid var(--color-border);
}

.home-news .news-list {
    margin-bottom: 0;
}

.home-news__more {
    margin: 0;
}

@media (min-width: 60em) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-7);
    }

    .home-hero {
        padding-top: calc(var(--main-pad) + var(--space-4));
    }
}

/* ---------- Static pages (Feature 02) ---------- */
.static-page__content {
    max-width: var(--measure);
}

/* In-page sub-nav: wrapping chip row on mobile, sticky card on desktop */
.page-subnav {
    margin: 0 0 var(--space-6);
    padding: 0;
}

.page-subnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-subnav a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    color: var(--brand-800);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
}

.page-subnav a:hover {
    color: var(--brand-900);
    border-color: var(--brand-300);
    background: var(--brand-50);
}

.static-page__content > section {
    scroll-margin-top: var(--space-5);
    padding-bottom: var(--space-7);
    margin-bottom: var(--space-7);
    border-bottom: 1px solid var(--color-border);
}

.static-page__content > section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.static-page__content > section > h2 {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.static-page__content > section > h2::before {
    content: "";
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.42em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--green-600));
    box-shadow: 0 0 0 4px var(--brand-100);
}

.static-page__content h3 {
    margin-top: var(--space-6);
}

.static-page__content ul,
.static-page__content ol {
    padding-left: var(--space-5);
}

.static-page__content li + li {
    margin-top: var(--space-1);
}

.static-page__content li::marker {
    color: var(--brand-600);
}

figure {
    margin: 0 0 var(--space-6);
}

figure img {
    display: block;
    border-radius: var(--radius-2);
}

.static-page figure:not(.product-bottle) img {
    box-shadow: var(--shadow-2);
}

figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.section-photo {
    margin: 0 0 var(--space-5);
}

.section-photo img {
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
    object-position: center bottom; /* legacy photos keep their subject low, haze on top */
    border-radius: var(--radius-3);
}

.lead {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-heading);
}

.media-row {
    display: grid;
    gap: var(--space-5);
}

.product-bottle {
    max-width: 8rem;
    margin-inline: auto;
    filter: drop-shadow(0 18px 22px rgb(27 37 96 / 0.22));
}

.credit {
    margin-top: calc(-1 * var(--space-3));
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.credit strong {
    display: block;
    color: var(--color-text);
}

.publication {
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
}

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

@media (min-width: 48em) {
    .media-row--aside {
        grid-template-columns: minmax(0, 1fr) 9rem;
        align-items: start;
    }

    .product-bottle {
        margin-inline: 0;
    }
}

@media (min-width: 60em) {
    .static-page:has(.page-subnav) {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        column-gap: var(--space-7);
        align-items: start;
    }

    .static-page:has(.page-subnav) .static-page__header {
        grid-column: 1 / -1;
    }

    .page-subnav {
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
        margin: 0;
        padding: var(--space-3);
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-2);
    }

    .page-subnav ul {
        flex-direction: column;
        gap: var(--space-1);
    }

    .page-subnav a {
        display: flex;
        min-height: 2.5rem;
        padding: var(--space-2) var(--space-3);
        line-height: 1.35;
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: var(--radius-2);
        box-shadow: none;
    }

    .page-subnav a:hover {
        background: var(--brand-100);
        box-shadow: inset 3px 0 0 var(--brand-600);
    }
}

/* ---------- Contacts ---------- */
.static-page--contacts .static-page__content {
    max-width: none;
}

.contact-blocks {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}

.contact-block {
    position: relative;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.contact-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-600), var(--green-600));
}

.contact-block h2 {
    font-size: var(--text-lg);
}

.contact-block address {
    font-style: normal;
    line-height: 1.8;
}

.feedback-intro {
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(180deg, var(--brand-50), var(--brand-100));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
}

.static-page__content > section.feedback-intro {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

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

@media (min-width: 48em) {
    .contact-blocks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .static-page__content > section.feedback-intro {
        padding: var(--space-7);
    }
}

/* ---------- Feedback form (Contacts) ---------- */
.feedback-form {
    display: grid;
    gap: var(--space-4);
    max-width: var(--measure);
    margin-top: var(--space-5);
}

.form-field label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 600;
    color: var(--color-heading);
}

.form-field input,
.form-field textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--brand-300);
    border-radius: var(--radius-1);
}

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

.form-field input:focus-visible,
.form-field textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

.form-field--error input,
.form-field--error textarea {
    border-color: var(--color-error);
}

.form-field__error {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-error);
}

.form-message {
    max-width: var(--measure);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    border-radius: var(--radius-1);
}

.form-message--success {
    color: var(--green-700);
    background: var(--green-100);
    border: 1px solid var(--green-700);
}

.form-message--error {
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
}

/* Honeypot: off-screen (and aria-hidden) but still in the DOM for bots. */
.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feedback-form .btn {
    justify-self: start;
}

/* ---------- Contests ---------- */
.contest-list {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contest {
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
}

.contest__title {
    margin-bottom: var(--space-2);
}

.contest__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.contest__poster {
    display: block;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
}

/* ---------- News post ---------- */
/* Centred reading column (also centres its full-bleed page-head band) */
.news-post {
    max-width: var(--measure);
    margin-inline: auto;
}

.news-post__header {
    max-width: none;
}

.news-post__back {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
}

.news-post__back a {
    text-decoration: none;
}

.news-post__back a:hover {
    text-decoration: underline;
}

.news-post__back--end {
    margin: var(--space-7) 0 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.news-post__header h1 {
    margin-bottom: var(--space-3);
}

.news-post__date {
    display: inline-block;
    padding: 0.125rem var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-800);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
}

.news-post__note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
}

.news-post__body {
    font-size: var(--text-lg);
    line-height: 1.7;
}

.news-post__body h3,
.news-post__body h4 {
    margin-top: var(--space-6);
}

.news-post__body ul,
.news-post__body ol {
    padding-left: var(--space-5);
}

/* Mobile only: smaller article type (>= 40em unchanged) */
@media (max-width: 39.99em) {
    .news-post__header h1 {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .news-post__body {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    .news-post__body h3 {
        font-size: 1.25rem;
    }

    .news-post__body h4 {
        font-size: 1.125rem;
    }

    .news-post__date,
    .news-post__back {
        font-size: var(--text-xs);
    }
}

/* =========================================================================
   6. Utilities, motion, print
   ========================================================================= */
.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;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .card:hover,
    .card:focus-within,
    .news-card:hover,
    .news-card:focus-within,
    .btn:hover,
    .gallery a:hover,
    .site-facebook:hover .icon,
    .lang-switch a:hover,
    .site-nav__link:hover .site-nav__text,
    .card:hover .card__more {
        transform: none;
    }

    .card:hover .card__media img,
    .news-card:hover .news-card__media img,
    .gallery a:hover img {
        transform: none;
    }
}

@media print {
    .skip-link,
    .site-menu,
    .site-tools,
    .page-subnav,
    .site-footer,
    .home-hero__actions,
    .news-post__back {
        display: none;
    }

    .site-header {
        position: static;
        background: none;
        box-shadow: none;
    }

    .page-head::before,
    .page-head::after,
    .home-hero::before,
    .home-hero::after,
    .home-news::before {
        display: none;
    }

    .home-hero,
    .home-hero__title,
    .home-hero__slogan {
        color: #000;
        text-shadow: none;
    }

    body {
        color: #000;
        font-size: 11pt;
    }

    .static-page:has(.page-subnav) {
        display: block;
    }

    .card,
    .news-card,
    .contact-block,
    .data-table-wrap,
    figure img {
        box-shadow: none;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }
}