:root {
    --ink: #14213d;
    --muted: #5b677a;
    --line: #d9e2ec;
    --bg: #f7f9fc;
    --accent: #2b6cb0;
    --accent-strong: #1f5897;
}

/* ------------------------------------------------------------------------- *
 * "Regatta signal flags" redesign tokens.
 *
 * Screen-scoped ON PURPOSE: print (and only print) must keep resolving the
 * legacy values above, because the @media print block at the end of this file
 * does not override every property that reads these variables (e.g. the
 * .day__title border, .forecast__coords color). Printing from a browser in
 * dark mode also falls back to the legacy values, since the dark block below
 * matches "screen" only. Do not move these out of @media screen.
 * ------------------------------------------------------------------------- */
@media screen {
    :root {
        /* legacy names remapped so untouched base rules pick up the new palette */
        --ink: #0b1f3a;
        --muted: #47586f;
        --line: #d7deea;
        --bg: #fff;
        --accent: #1d4ed8;
        --accent-strong: #1e40af;

        /* regatta tokens */
        --paper: #f6f8fb;
        --surface: #fff;
        --primary: #1d4ed8;
        --hot: #ff6b35;
        --sun: #ffc53d;
        --stripe: repeating-linear-gradient(-45deg, var(--primary) 0 10px, var(--surface) 10px 14px, var(--hot) 14px 24px, var(--surface) 24px 28px);

        /* type & shape scale */
        --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
        --fs-hero: clamp(2.4rem, 6vw, 3.4rem);
        --radius-s: 0.375rem;
        --radius-m: 0.75rem;
        --radius-l: 1rem;
        --shadow-1: 0 1px 3px rgb(11 31 58 / 8%);
        --shadow-2: 0 12px 32px -12px rgb(11 31 58 / 22%);
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #081527;
        --paper: #0b1f3a;
        --surface: #0e2647;
        --ink: #e8eefa;
        --muted: #9fb0c8;
        --line: #22375a;
        --accent: #6d9bff;
        --accent-strong: #8fb3ff;
        --primary: #6d9bff;
        --shadow-1: 0 1px 3px rgb(0 0 0 / 35%);
        --shadow-2: 0 12px 32px -12px rgb(0 0 0 / 55%);
    }
}

/* SVG weather icons: the 1em box reproduces the emoji's line box everywhere print
   still renders them (rows are masked in print snapshots; geometry must not move).
   Deliberately unscoped — print keeps sizing icons off its own font-size overrides. */
.slot__icon .wi,
.hour__icon .wi {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* Duotone icon parts — colored on screen only; print keeps currentColor (black). */
@media screen {
    .wi-part--sun,
    .wi-part--moon {
        fill: var(--sun);
    }

    .wi-part--rain {
        stroke: var(--primary);
    }

    .wi-part--snow {
        fill: var(--primary);
    }

    .wi-part--bolt {
        fill: var(--hot);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.4;
}

.forecast {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.forecast__head {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.forecast__head h1 {
    margin: 0 0 0.25rem;
    font-size: 2.25rem;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    background-clip: text;
    color: transparent;
}

.forecast__coords {
    margin: 0;
    color: var(--muted);
}

.forecast__back {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--ink);
}

.forecast__directory {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--accent);
}

.forecast__view-switch {
    display: inline-block;
    margin-top: 0.5rem;
    margin-left: 1rem;
    color: var(--accent);
}

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

.day {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgb(20 33 61 / 8%);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.day:hover {
    box-shadow: 0 8px 24px -8px rgb(20 33 61 / 18%);
    transform: translateY(-2px);
}

.day__title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--line);
}

.day__date {
    color: var(--muted);
    font-weight: 400;
    font-size: 1rem;
}

.day__loading {
    color: var(--muted);
    font-style: italic;
}

.slots {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slot {
    display: grid;
    grid-template-columns: 5.5rem 7rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
    font-size: 1.1rem;
    min-height: 5.5rem;
    transition: background-color 0.15s ease;
}

.slot:first-child {
    border-top: 0;
}

.slot:hover {
    background: rgb(232 241 251 / 40%);
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
}

.slot__when {
    font-weight: 600;
}

.slot__weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.slot__icon {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgb(20 33 61 / 15%));
}

.slot__weather-label {
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--muted);
    text-wrap: balance;
}

.slot__temp {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}

.slot__wind {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.slot__wind-speed {
    color: var(--muted);
    font-size: 0.95rem;
}

.slot__arrow {
    display: inline-block;
}

/* AMP wind-direction buckets: the canonical page rotates the arrow with an inline
   `style` (exact degrees, re-applied by live updates), but AMP forbids inline styles,
   so the AMP partial picks one of 16 classes (22.5° steps) instead. */
.slot__arrow--dir-0 { transform: rotate(0deg); }
.slot__arrow--dir-1 { transform: rotate(22.5deg); }
.slot__arrow--dir-2 { transform: rotate(45deg); }
.slot__arrow--dir-3 { transform: rotate(67.5deg); }
.slot__arrow--dir-4 { transform: rotate(90deg); }
.slot__arrow--dir-5 { transform: rotate(112.5deg); }
.slot__arrow--dir-6 { transform: rotate(135deg); }
.slot__arrow--dir-7 { transform: rotate(157.5deg); }
.slot__arrow--dir-8 { transform: rotate(180deg); }
.slot__arrow--dir-9 { transform: rotate(202.5deg); }
.slot__arrow--dir-10 { transform: rotate(225deg); }
.slot__arrow--dir-11 { transform: rotate(247.5deg); }
.slot__arrow--dir-12 { transform: rotate(270deg); }
.slot__arrow--dir-13 { transform: rotate(292.5deg); }
.slot__arrow--dir-14 { transform: rotate(315deg); }
.slot__arrow--dir-15 { transform: rotate(337.5deg); }

.home__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(120% 80% at 50% -10%, #e8f1fb 0%, rgb(232 241 251 / 0%) 60%),
        linear-gradient(180deg, var(--bg) 0%, #eef3fa 100%);
}

.home__intro {
    margin: 0;
    max-width: 34rem;
}

.home__title {
    margin: 0 0 0.5rem;
    font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    background-clip: text;
    color: transparent;
}

.home__subtitle {
    margin: 0 auto;
    max-width: 28rem;
    color: var(--muted);
    font-size: 1.1rem;
    text-wrap: balance;
}

.home__form {
    display: flex;
    gap: 0.6rem;
    align-items: start;
    width: 100%;
    max-width: 34rem;
    padding: 0.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -12px rgb(20 33 61 / 25%);
}

.home__field {
    flex: 1;
    text-align: left;
}

/* Hide the auto-generated form label; the hero copy is the context. */
.home__field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.home__field .ts-control,
.home__field input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    font-size: 1.15rem;
    color: var(--ink);
    background: var(--bg);
    box-shadow: none;
}

/* TomSelect renders the typed text and dropdown options in nested nodes — keep them
   at the same legible size as the control. */
.home__field .ts-control input,
.home__field .ts-dropdown,
.home__field .ts-dropdown .option {
    font-size: 1.15rem;
}

.home__field .ts-control:focus-within,
.home__field input:focus {
    border-color: var(--accent);
    outline: 2px solid rgb(43 108 176 / 25%);
    outline-offset: 1px;
}

.home__submit {
    flex: none;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.home__submit:hover {
    background: var(--accent-strong);
}

.home__submit:active {
    transform: translateY(1px);
}

.home__submit:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.home__content {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
}

.home__lead {
    margin: 0 0 2rem;
    font-size: 1.2rem;
    text-wrap: pretty;
}

.home__browse {
    margin: 0 0 2rem;
}

.home__browse a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.home__browse a:hover {
    text-decoration: underline;
}

.home__block {
    margin: 0 0 2rem;
}

.home__block h2 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}

.home__block p {
    margin: 0;
    color: var(--muted);
    text-wrap: pretty;
}

.home__steps {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
}

.home__faq dl {
    margin: 0;
}

.home__faq dt {
    margin-top: 1rem;
    font-weight: 600;
}

.home__faq dd {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.spot-departments {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.spot-departments__head {
    margin-bottom: 1.5rem;
}

.spot-departments__head h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

.spot-departments__head p {
    margin: 0;
    color: var(--muted);
}

.spot-departments__back {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--ink);
}

.spot-departments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.spot-departments__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.spot-departments__item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px -4px rgb(20 33 61 / 15%);
}

.spot-departments__link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.spot-departments__link:hover {
    color: var(--accent);
}

.spot-departments__count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.95rem;
}

.spot-directory {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.spot-directory__head {
    margin-bottom: 1.5rem;
}

.spot-directory__head h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

.spot-directory__head p {
    margin: 0;
    color: var(--muted);
}

.spot-directory__back {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--ink);
}

.spot-directory__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.spot-directory__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.spot-directory__item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px -4px rgb(20 33 61 / 15%);
}

.spot-directory__link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.spot-directory__link:hover {
    color: var(--accent);
}

.spot-directory__postcode {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Legacy (non-range) notation on purpose: this stylesheet is inlined into AMP pages as
   \3c style amp-custom>, and AMP's CSS parser rejects the range syntax `(width <= 40rem)`. */
/* stylelint-disable-next-line media-feature-range-notation */
@media (max-width: 40rem) {
    .forecast {
        padding: 1.5rem 0.75rem 3rem;
    }

    .forecast__grid {
        grid-template-columns: 1fr;
    }

    .day {
        padding: 1.25rem 1rem;
    }

    /* The desktop 4-column slot (fixed 5.5rem + 7rem columns) overflows a phone. Reflow to
       two rows: time | temp on top, weather | wind below. */
    .slot {
        grid-template-columns: 1fr auto;
        gap: 0.3rem 0.75rem;
        min-height: 0;
    }

    .slot__when {
        grid-area: 1 / 1;
    }

    .slot__temp {
        grid-area: 1 / 2;
        justify-self: end;
    }

    .slot__weather {
        grid-area: 2 / 1;
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
        text-align: left;
    }

    .slot__wind {
        grid-area: 2 / 2;
    }

    .home__form {
        flex-direction: column;
    }

    .home__submit {
        width: 100%;
    }

    .spot-departments__item,
    .spot-directory__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.legal {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.legal__head {
    margin-bottom: 1.5rem;
}

.legal__head h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

.legal__back {
    color: var(--accent);
    text-decoration: none;
}

.legal__back:hover {
    text-decoration: underline;
}

.legal__block {
    margin: 0 0 1.75rem;
}

.legal__block h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.legal__block p,
.legal__block li {
    color: var(--muted);
    text-wrap: pretty;
}

.legal__block ul {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.3rem;
}

.site-footer {
    border-top: 1px solid var(--line);
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.site-footer p {
    margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.site-footer a {
    color: var(--accent);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

@page {
    size: a4 landscape;

    /* margin: 0 drops the browser-injected header/footer (url, date, page number). */
    margin: 0;
}

.forecast__source {
    margin: 1.25rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.forecast__print-footer {
    display: none;
}

@media print {
    html,
    body {
        height: 100%;
        margin: 0;
    }

    body {
        background: #fff;
        color: #000;
        font-family: "DejaVu Sans", Arial, sans-serif;
        font-size: 12pt;
    }

    /* Keep the place/spot name + coords on paper; drop the back link and live region. */
    .forecast__back,
    .forecast__directory,
    .forecast__view-switch,
    .site-footer,
    turbo-mercure-stream-source {
        display: none;
    }

    /* Cookie-consent web component injected by consent.giarel.li. !important defeats the
       component's own :host display/position rule (higher specificity than a bare tag). */
    uzu-consent {
        display: none !important;
    }

    .forecast__head {
        margin-bottom: 4mm;
        padding-bottom: 0;
        border-bottom: 1px solid #000;
    }

    .forecast__head h1 {
        font-size: 18pt;
        background: none;
        color: #000;
    }

    /* Fill exactly one page (height relative to the page box, not 100vh which overflows)
       and centre the day columns vertically. */
    .forecast {
        max-width: none;
        height: 100%;
        margin: 0;
        padding: 10mm;
        display: block;
        overflow: hidden;
    }

    .day {
        border-color: #000;
        break-inside: avoid;
        box-shadow: none;
    }

    .day:hover {
        transform: none;
    }

    .slot:hover {
        background: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .slot__icon {
        filter: none;
    }

    .forecast__source {
        position: absolute;
        bottom: 5mm;
        left: 5mm;
        margin: 0;
        font-size: 8pt;
        color: #000;
        opacity: 0.7;
    }

    .forecast__print-footer {
        position: absolute;
        bottom: 5mm;
        right: 5mm;
        display: flex;
        align-items: center;
        gap: 4pt;
        opacity: 0.7;
    }

    .forecast__print-footer-text {
        font-size: 8pt;
        color: #000;
    }

    .forecast__print-footer-logo {
        width: 16pt;
        height: 16pt;
    }
}

/* ========================================================================== *
 * "Regatta signal flags" theme — screen only.
 *
 * Everything below is deliberately wrapped in @media screen (or is a base
 * display:none for elements that must not exist on paper): the print output
 * above must remain byte-identical, and @media print never matches these.
 * ========================================================================== */

/* New chrome element: never on paper. */
.site-header {
    display: none;
}

@media screen {
    body {
        font-family: var(--font-display);
    }

    /* ------------------------------ site header --------------------------- */

    .site-header {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1.25rem;
        padding: 0.85rem 1.25rem;
        background: var(--surface);
    }

    .site-header::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 5px;
        background: var(--stripe);
    }

    .site-header__brand {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        color: var(--ink);
        font-weight: 800;
        font-size: 1.2rem;
        letter-spacing: -0.01em;
        text-decoration: none;
    }

    /* "Papa" signal flag: blue frame, white core. */
    .site-header__brand::before {
        content: "";
        width: 1em;
        height: 1em;
        background: var(--surface);
        box-shadow: inset 0 0 0 0.3em var(--primary);
    }

    .site-header__nav {
        display: flex;
        gap: 1.25rem;
    }

    .site-header__nav a {
        color: var(--muted);
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        transition: color 0.15s ease;

        /* ≥ 24px hit area (WCAG 2.5.8) without moving the visual layout. */
        padding: 0.5rem 0.25rem;
        margin: -0.5rem -0.25rem;
    }

    .site-header__nav a:hover {
        color: var(--primary);
    }

    /* ------------------------------- headings ----------------------------- */

    h1,
    h2,
    h3 {
        font-family: var(--font-display);
    }

    /* ------------------------------- homepage ----------------------------- */

    /* Flag triangle painted as a background layer (not an oversized pseudo-element):
       no overflow clipping needed, so the absolutely-positioned autocomplete dropdown
       can extend past the hero's bottom edge. */
    .home__hero {
        position: relative;
        background:
            linear-gradient(135deg, rgb(29 78 216 / 8%) 49.5%, transparent 50%) no-repeat 0 0 / 300px 300px,
            var(--paper);
    }

    .home__hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 5px;
        background: var(--stripe);
    }

    .home__title {
        background: none;
        color: var(--ink);
        font-weight: 800;
        font-size: var(--fs-hero);
    }

    .home__form {
        background: var(--surface);
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-2);
    }

    /* Selector depth on purpose: TomSelect's own sheet loads after app.css and
       carries rules up to (0,4,0) like `.ts-wrapper.single.input-active .ts-control
       { background: #fff }` — ours must reach (0,5,0) to win in dark mode. */
    .home__field input,
    .home__field .ts-control,
    .home__field .ts-control > input,
    .home__field .ts-wrapper .ts-control,
    .home__field .ts-wrapper.single .ts-control,
    .home__field .ts-wrapper.focus .ts-control,
    .home__field .ts-wrapper.input-active .ts-control,
    .home__field .ts-wrapper.single.input-active .ts-control,
    .home__field .ts-wrapper.single.focus .ts-control {
        background: var(--bg);
        color: var(--ink);
        caret-color: var(--ink);
    }

    .home__field .ts-control input::placeholder {
        color: var(--muted);
        opacity: 1;
    }

    .ts-dropdown,
    .home__field .ts-dropdown,
    .home__field .ts-wrapper .ts-dropdown {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--line);
    }

    .home__field .ts-dropdown .option,
    .home__field .ts-dropdown .no-results,
    .home__field .ts-dropdown .create {
        color: var(--ink);
    }

    .home__field .ts-dropdown .optgroup-header {
        background: var(--surface);
        color: var(--muted);
        font-weight: 600;
        border-bottom: 1px solid var(--line);
    }

    .home__field .ts-dropdown .active,
    .home__field .ts-dropdown .option.active,
    .home__field .ts-dropdown .option.selected {
        background: var(--paper);
        color: var(--ink);
    }

    .home__submit {
        background: var(--hot);

        /* Navy on orange ≈ 5.5:1 — white on this orange fails WCAG AA (2.84:1). */
        color: #0b1f3a;
        border-radius: var(--radius-m);
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .home__submit:hover {
        background: #e5551f;
    }

    .home__block h2::after {
        content: "";
        display: block;
        width: 3rem;
        height: 4px;
        margin-top: 0.4rem;
        background: var(--stripe);
    }

    .home__faq dt::before {
        content: "";
        display: inline-block;
        width: 0.6em;
        height: 0.6em;
        margin-right: 0.5em;
        background: linear-gradient(135deg, var(--primary) 50%, var(--hot) 50%);
    }

    /* --------------------------- forecast pages --------------------------- */

    .forecast__head {
        position: relative;
    }

    .forecast__head::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 50%;
        width: 9rem;
        height: 5px;
        background: var(--stripe);
        transform: translateX(-50%);
    }

    .forecast__head h1 {
        background: none;
        color: var(--ink);
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .forecast__title {
        color: var(--muted);
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .forecast__back,
    .forecast__directory,
    .forecast__view-switch,
    .spot-departments__back,
    .spot-directory__back,
    .spot-new__back,
    .legal__back {
        display: inline-block;
        margin: 0.75rem 0.2rem 0;
        padding: 0.35rem 0.95rem;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }

    .forecast__back:hover,
    .forecast__directory:hover,
    .forecast__view-switch:hover,
    .spot-departments__back:hover,
    .spot-directory__back:hover,
    .spot-new__back:hover,
    .legal__back:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--paper);
        text-decoration: none;
    }

    .day {
        background: var(--surface);
        border-color: var(--line);
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-1);
    }

    .day:hover {
        box-shadow: var(--shadow-2);
    }

    .day__title {
        font-weight: 700;
        padding-left: 0.75rem;
        border-left: 4px solid var(--primary);
    }

    .slot:hover {
        background: var(--paper);
    }

    .slot__when {
        font-family: var(--font-display);
        font-weight: 600;
    }

    .slot__temp {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.3rem;
    }

    .slot__icon .wi {
        width: 2rem;
        height: 2rem;
    }

    .slot__arrow {
        color: var(--primary);
    }

    /* ------------------------- directories & legal ------------------------ */

    .spot-departments__item,
    .spot-directory__item {
        position: relative;
        background: var(--surface);
        border-radius: var(--radius-m);
        padding-left: 2rem;
    }

    .spot-departments__item::before,
    .spot-directory__item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.85rem;
        width: 0.6rem;
        height: 0.6rem;
        background: linear-gradient(135deg, var(--primary) 50%, var(--hot) 50%);
        transform: translateY(-50%);
    }

    .legal__head h1::after {
        content: "";
        display: block;
        width: 3rem;
        height: 4px;
        margin-top: 0.5rem;
        background: var(--stripe);
    }

    /* -------------------------------- footer ------------------------------ */

    .site-footer {
        position: relative;
        background: var(--paper);
        border-top: 0;
        padding-top: 1.75rem;
    }

    .site-footer::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--stripe);
    }
}

/* Entrance: one orchestrated moment on the homepage; nothing moves for
   reduced-motion readers, and print never matches. */
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
    }

    .home__title {
        animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .home__subtitle {
        animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
    }

    .home__form {
        animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.16s backwards;
    }
}

/* Wind bars — the redesign's signature. Base rule keeps them off paper entirely;
   widths come from 21 two-knot buckets (40 kn = full bar) because AMP forbids
   inline style attributes. */
.windbar {
    display: none;
}

@media screen {
    .windbar {
        position: relative;
        display: block;
        overflow: hidden;
        height: 4px;
        border-radius: 2px;
        background: var(--line);
    }

    .windbar__fill {
        position: absolute;
        inset: 0 auto 0 0;
        inline-size: var(--w, 0%);
        border-radius: 2px;
        background: linear-gradient(90deg, var(--primary), var(--hot));
        transform-origin: left;
    }

    .windbar__gust {
        position: absolute;
        inset: 0 auto 0 var(--w, 0%);
        width: 2px;
        background: var(--hot);
    }

    /* Daily slots: bar under the wind figures, right-aligned column. */
    .slot .windbar {
        width: 9rem;
        margin-top: 0.3rem;
    }

    /* Hourly rows: full-width bar as the row's second grid line. */
    .hour .windbar {
        grid-column: 1 / -1;
    }

    .windbar__fill--w0,
    .windbar__gust--w0 {
        --w: 0%;
    }

    .windbar__fill--w1,
    .windbar__gust--w1 {
        --w: 5%;
    }

    .windbar__fill--w2,
    .windbar__gust--w2 {
        --w: 10%;
    }

    .windbar__fill--w3,
    .windbar__gust--w3 {
        --w: 15%;
    }

    .windbar__fill--w4,
    .windbar__gust--w4 {
        --w: 20%;
    }

    .windbar__fill--w5,
    .windbar__gust--w5 {
        --w: 25%;
    }

    .windbar__fill--w6,
    .windbar__gust--w6 {
        --w: 30%;
    }

    .windbar__fill--w7,
    .windbar__gust--w7 {
        --w: 35%;
    }

    .windbar__fill--w8,
    .windbar__gust--w8 {
        --w: 40%;
    }

    .windbar__fill--w9,
    .windbar__gust--w9 {
        --w: 45%;
    }

    .windbar__fill--w10,
    .windbar__gust--w10 {
        --w: 50%;
    }

    .windbar__fill--w11,
    .windbar__gust--w11 {
        --w: 55%;
    }

    .windbar__fill--w12,
    .windbar__gust--w12 {
        --w: 60%;
    }

    .windbar__fill--w13,
    .windbar__gust--w13 {
        --w: 65%;
    }

    .windbar__fill--w14,
    .windbar__gust--w14 {
        --w: 70%;
    }

    .windbar__fill--w15,
    .windbar__gust--w15 {
        --w: 75%;
    }

    .windbar__fill--w16,
    .windbar__gust--w16 {
        --w: 80%;
    }

    .windbar__fill--w17,
    .windbar__gust--w17 {
        --w: 85%;
    }

    .windbar__fill--w18,
    .windbar__gust--w18 {
        --w: 90%;
    }

    .windbar__fill--w19,
    .windbar__gust--w19 {
        --w: 95%;
    }

    .windbar__fill--w20,
    .windbar__gust--w20 {
        --w: 100%;
    }
}

/* Bars draw themselves in, staggered top to bottom; gust ticks fade in after. */
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes windbar-draw {
        from {
            transform: scaleX(0);
        }
    }

    @keyframes windbar-tick {
        from {
            opacity: 0;
        }
    }

    .windbar__fill {
        animation: windbar-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .windbar__gust {
        animation: windbar-tick 0.3s ease 0.55s backwards;
    }

    .slot:nth-child(1) .windbar__fill,
    .hour:nth-child(1) .windbar__fill {
        animation-delay: 0.0s;
    }

    .slot:nth-child(2) .windbar__fill,
    .hour:nth-child(2) .windbar__fill {
        animation-delay: 0.04s;
    }

    .slot:nth-child(3) .windbar__fill,
    .hour:nth-child(3) .windbar__fill {
        animation-delay: 0.08s;
    }

    .slot:nth-child(4) .windbar__fill,
    .hour:nth-child(4) .windbar__fill {
        animation-delay: 0.12s;
    }

    .slot:nth-child(5) .windbar__fill,
    .hour:nth-child(5) .windbar__fill {
        animation-delay: 0.16s;
    }

    .hour:nth-child(6) .windbar__fill {
        animation-delay: 0.2s;
    }

    .hour:nth-child(7) .windbar__fill {
        animation-delay: 0.24s;
    }

    .hour:nth-child(8) .windbar__fill {
        animation-delay: 0.28s;
    }

    .hour:nth-child(9) .windbar__fill {
        animation-delay: 0.32s;
    }

    .hour:nth-child(10) .windbar__fill {
        animation-delay: 0.36s;
    }

    .hour:nth-child(11) .windbar__fill {
        animation-delay: 0.4s;
    }

    .hour:nth-child(12) .windbar__fill {
        animation-delay: 0.44s;
    }

    .hour:nth-child(13) .windbar__fill {
        animation-delay: 0.48s;
    }

    .hour:nth-child(14) .windbar__fill {
        animation-delay: 0.52s;
    }

    .hour:nth-child(15) .windbar__fill {
        animation-delay: 0.56s;
    }
}

/* Skip link: visually hidden (everywhere, including print) until keyboard-focused. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media screen {
    .skip-link:focus {
        top: 0.5rem;
        left: 0.5rem;
        z-index: 100;
        width: auto;
        height: auto;
        padding: 0.6rem 1rem;
        margin: 0;
        clip-path: none;
        background: var(--surface);
        color: var(--primary);
        font-family: var(--font-display);
        font-weight: 700;
        border: 2px solid var(--primary);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-2);
    }

    /* One visible, branded focus indicator everywhere (keyboard users only). */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    .home__field .ts-control:focus-within {
        outline: 3px solid var(--primary);
        outline-offset: 2px;
    }

    /* ≥ 24px hit areas (WCAG 2.5.8) without moving the visual layout. */
    .spot-departments__link,
    .spot-directory__link {
        display: inline-block;
        padding: 0.5rem 0;
        margin: -0.5rem 0;
    }
}

/* Department directory: clubs and cities live in separate sections. Screen-scoped
   like every other regatta-theme rule; print output stays untouched. */
@media screen {
    .spot-directory__section + .spot-directory__section {
        margin-top: 2rem;
    }

    .spot-directory__section-title {
        margin: 0 0 0.75rem;
        font-size: 1.2rem;
        font-weight: 700;
        padding-left: 0.6rem;
        border-left: 4px solid var(--primary);
    }
}

/* Favorites: star pill + homepage list + custom-spot form. Base display:none keeps
   the new elements off paper without touching the frozen print block. */
.forecast__favorite,
.home__favorites {
    display: none;
}

@media screen {
    /* Baseline-aligned like the sibling anchor pills (vertical-align: middle sat the
       button ~7px lower); buttons don't inherit the body font either. */
    .forecast__favorite {
        display: inline-block;
        margin: 0.75rem 0.2rem 0;
        padding: 0.35rem 0.95rem;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.85rem;
        background: none;
        cursor: pointer;
        line-height: 1.4;
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }

    .forecast__favorite:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: var(--paper);
    }

    .forecast__favorite-icon {
        width: 1.1em;
        height: 1.1em;
        vertical-align: -0.18em;
        fill: none;
        stroke: currentcolor;
        stroke-width: 1.8;
        stroke-linejoin: round;
    }

    .forecast__favorite[aria-pressed="true"] .forecast__favorite-icon {
        fill: var(--sun);
        stroke: var(--sun);
    }

    .home__favorites {
        display: block;
        margin: 0 0 2rem;
        padding: 1rem 1.25rem;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
    }

    .home__favorites h2 {
        margin: 0 0 0.5rem;
        font-size: 1.2rem;
    }

    .home__favorites-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .home__favorites-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0.9rem;
        padding: 0.45rem 0;
        border-top: 1px solid var(--line);
    }

    .home__favorites-item:first-child {
        border-top: 0;
    }

    .home__favorites-link {
        color: var(--ink);
        font-weight: 600;
        text-decoration: none;
    }

    .home__favorites-link:hover {
        color: var(--primary);
    }

    .home__favorites-hours {
        color: var(--primary);
        font-size: 0.85rem;
    }

    .home__favorites-delete {
        margin-left: auto;
        padding: 0.15rem 0.6rem;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        background: none;
        color: var(--muted);
        font-size: 0.8rem;
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

    .home__favorites-delete:hover {
        color: var(--hot);
        border-color: var(--hot);
    }

    .home__favorites-empty {
        margin: 0;
        color: var(--muted);
    }

    .home__favorites-add {
        margin: 0.75rem 0 0;
    }

    .home__favorites-add a {
        color: var(--primary);
        font-weight: 600;
    }

    .spot-new {
        max-width: 34rem;
        margin: 0 auto;
        padding: 2rem 1rem 4rem;
    }

    .spot-new__head {
        margin-bottom: 1.5rem;
    }

    .spot-new__head h1 {
        margin: 0 0 0.5rem;
        font-size: 2rem;
    }

    .spot-new__head p {
        margin: 0;
        color: var(--muted);
    }

    .spot-new__form {
        display: grid;
        gap: 1rem;
        padding: 1.25rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-1);
    }

    /* The reused .home__field wrapper hides labels (sr-only for the hero search);
       here the labels must be visible — undo every sr-only property. */
    .spot-new__field label {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 0.3rem;
        padding: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .spot-new__submit {
        justify-self: start;
    }
}