/* Brand tokens are provisional until the official logo and palette are approved. */
:root {
    --color-brand-primary: #102a43;
    --color-brand-accent: #1677c8;
    --color-brand-highlight: #fff000;
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-subtle: #eef3f7;
    --color-text: #15202b;
    --color-text-muted: #52606d;
    --color-text-inverse: #ffffff;
    --color-border: #cbd5e1;
    --color-focus: #1677c8;
    --color-success: #16794a;
    --color-warning: #9a6700;
    --color-error: #b42318;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --container-max: 72rem;
    --container-padding: var(--space-4);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --border-width: 1px;
    --focus-ring: 2px solid var(--color-focus);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: 1.6;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    min-width: 20rem;
    background: var(--color-background);
}

main {
    flex: 1 0 auto;
}

main:focus {
    outline: none;
}

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

button,
a {
    font: inherit;
}

a {
    color: var(--color-brand-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

button {
    cursor: pointer;
}

p,
ul,
ol {
    margin-top: 0;
}

p {
    max-width: 75ch;
}

h1,
h2,
h3 {
    margin-top: 0;
    color: var(--color-text);
}

h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

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

.container {
    width: min(100% - (var(--container-padding) * 2), var(--container-max));
    margin-inline: auto;
}

/* Text that assistive technology and search engines must read but that the design conveys
   some other way — an image, an icon. It stays in the document and in the accessibility
   tree; only its painted box is removed. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 10;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
}

.action--primary {
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
}

a.action--primary:hover,
a.action--primary:active {
    color: var(--color-text-inverse);
    background: var(--color-brand-accent);
}

.action--secondary {
    color: var(--color-brand-primary);
    background: var(--color-surface);
    border-color: var(--color-brand-primary);
}

a.action--secondary:hover,
a.action--secondary:active {
    color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
}

.action--contact {
    background: var(--color-surface-subtle);
}

a.action--contact:hover,
a.action--contact:active {
    background: var(--color-border);
}

.action--text {
    min-height: auto;
    padding: 0;
    color: var(--color-brand-primary);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    border: 0;
    border-radius: 0;
}

.site-header {
    position: relative;
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.site-header--scroll-enabled {
    position: sticky;
    top: 0;
    z-index: 8;
    transition: transform 200ms ease-out;
}

.site-header--hidden {
    transform: translateY(-100%);
}

.site-header--scroll-enabled:focus-within {
    transform: translateY(0);
    transition: none;
}

.back-to-top {
    position: fixed;
    z-index: 7;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom) + var(--back-to-top-footer-offset, 0px));
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
}

.back-to-top[hidden] {
    display: none;
}

.back-to-top:hover {
    background: var(--color-brand-accent);
}

.back-to-top svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 75rem) {
    .back-to-top {
        right: max(1.5rem, env(safe-area-inset-right));
        bottom: calc(1.5rem + env(safe-area-inset-bottom) + var(--back-to-top-footer-offset, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header--scroll-enabled {
        transition: none !important;
    }
}

.site-header__inner,
.site-header__actions,
.site-identity,
.language-switcher {
    display: flex;
    align-items: center;
}

.site-header__inner {
    min-height: 4.25rem;
    justify-content: space-between;
    gap: var(--space-3);
}

.site-identity {
    gap: var(--space-2);
    color: var(--color-brand-primary);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

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

.site-registration-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Only rendered on a page that already has an authenticated session. Deliberately quiet so
   it never competes with the primary "Inscripcions" action beside it. */
.site-logout {
    margin: 0;
}
.site-logout__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.site-logout__button:hover,
.site-logout__button:active {
    color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
}
.site-logout--mobile {
    width: 100%;
}
.site-logout--mobile .site-logout__button {
    width: 100%;
}

/* The way into the management panel, shown only to an administrator. It sits beside the
   logout and borrows its quiet treatment, so the pair reads as one set of session controls
   rather than competing with the primary action. */
.site-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}
.site-admin-link:hover,
.site-admin-link:active {
    color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
}
.site-admin-link--mobile {
    width: 100%;
}

.site-nav--desktop,
.language-switcher--desktop {
    display: none;
}

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

.site-nav__item {
    display: block;
    padding: var(--space-3) 0;
    color: var(--color-text-muted);
    font-weight: 600;
}

a.site-nav__item:hover,
a.site-nav__item:active,
.site-nav__item[aria-current="page"] {
    color: var(--color-brand-primary);
}

.site-nav__item[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 0.125em;
    text-underline-offset: 0.2em;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    color: var(--color-brand-primary);
    background: transparent;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.site-menu {
    background: var(--color-surface);
    border-top: var(--border-width) solid var(--color-border);
}

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

.page-content {
    padding-block: var(--space-12);
}

.page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-6);
    color: var(--color-brand-primary);
    background: linear-gradient(100deg, var(--color-surface), var(--color-surface-subtle) 65%, rgba(22, 119, 200, 0.14));
    border-bottom: 1px solid var(--color-border);
}

.page-header__inner {
    /* The logo is deliberately larger than the space it reserves: the slot fixes the layout
       and the negative margin on .page-header__media absorbs the overflow, so growing the
       shield changes how big it reads without moving anything around it. */
    --page-header-logo-slot: 4rem;
    --page-header-logo-size: clamp(4.75rem, calc(3.607143rem + 5.714286vw), 5rem);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--page-header-logo-slot);
    align-items: center;
    gap: var(--space-4);
}

.page-header__inner::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: calc(var(--container-padding) - 3rem);
    width: 10rem;
    height: 10rem;
    background: radial-gradient(ellipse closest-side at 55% 45%, rgba(22, 119, 200, 0.20), rgba(22, 119, 200, 0.06) 48%, transparent 100%);
    transform: translateY(-50%);
    pointer-events: none;
    content: "";
}

.page-header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse 133% 140% at 100% 180%,
        transparent 90%, rgba(22, 119, 200, 0.18) 90.15% 90.45%,
        transparent 90.6%),
        radial-gradient(ellipse 140% 140% at 100% 180%,
        transparent 100%, rgba(22, 119, 200, 0.22) 100.15% 100.45%,
        transparent 100.6%),
        radial-gradient(ellipse 147% 140% at 100% 180%,
        transparent 110%, rgba(22, 119, 200, 0.16) 110.15% 110.45%,
        transparent 110.6%);
    pointer-events: none;
    content: "";
}

.page-header__content {
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.page-header__content::before {
    position: absolute;
    z-index: -1;
    inset: -1.5rem;
    max-width: 68ch;
    background: radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95) 42%, transparent 74%);
    mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    pointer-events: none;
    content: "";
}

.page-header h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-primary);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.2;
}

.page-header h1::before {
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: var(--space-3);
    background: var(--color-brand-accent);
    content: "";
}

.page-header p {
    max-width: 62ch;
    margin: 0;
}

.page-header__media {
    width: var(--page-header-logo-size);
    max-width: none;
    height: var(--page-header-logo-size);
    margin: calc((var(--page-header-logo-slot) - var(--page-header-logo-size)) / 2);
    object-fit: contain;
}

@media (min-width: 48rem) {
    .page-header {
        padding-block: var(--space-8);
    }

    .page-header__inner {
        --page-header-logo-slot: 6rem;
        --page-header-logo-size: 7.5rem;
        gap: var(--space-8);
    }

    .page-header__inner::before {
        right: calc(var(--container-padding) - 5rem);
        width: 16rem;
        height: 16rem;
    }

    .page-header::before {
        background: radial-gradient(ellipse 133% 140% at 100% 180%,
            transparent 90%, rgba(22, 119, 200, 0.28) 90.15% 90.45%,
            transparent 90.6%),
            radial-gradient(ellipse 140% 140% at 100% 180%,
            transparent 95%, rgba(22, 119, 200, 0.17) 95.15% 95.45%,
            transparent 95.6% 100%, rgba(22, 119, 200, 0.30) 100.15% 100.45%,
            transparent 100.6% 105%, rgba(22, 119, 200, 0.17) 105.15% 105.45%,
            transparent 105.6%),
            radial-gradient(ellipse 147% 140% at 100% 180%,
            transparent 110%, rgba(22, 119, 200, 0.26) 110.15% 110.45%,
            transparent 110.6%);
    }
}

@media (min-width: 75rem) {
    .page-header__inner {
        --page-header-logo-slot: 7.5rem;
        --page-header-logo-size: 9.25rem;
        gap: var(--space-12);
    }

    .page-header__inner::before {
        right: calc(var(--container-padding) - 5.625rem);
        width: 18.75rem;
        height: 18.75rem;
    }
}

.club-story,
.club-purpose,
.club-values {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--color-surface);
}

.club-story h2,
.club-purpose h2,
.club-values h2 {
    margin-bottom: var(--space-6);
    color: var(--color-brand-primary);
}

.club-story__split {
    display: grid;
    gap: var(--space-6);
}

.club-story__split > h2,
.club-story p:last-child,
.club-purpose p:last-child {
    margin-bottom: 0;
}

.club-story__lead {
    max-width: 60ch;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.club-story--history,
.club-values {
    background: var(--color-surface-subtle);
}

.club-story__year {
    color: var(--color-brand-accent);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.club-story__copy {
    max-width: 70ch;
}

.club-purpose h2 {
    max-width: 30ch;
}

.club-purpose__ways {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.club-purpose__way {
    padding-left: var(--space-6);
    border-left: 2px solid var(--color-brand-accent);
}

.club-purpose__way h3 {
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: 1.25rem;
}

.club-values {
    padding-block: clamp(3rem, 5vw, 4rem);
}

.club-values h2 {
    text-align: center;
    margin-bottom: var(--space-8);
}

.club-values__grid {
    display: grid;
    gap: var(--space-8);
}

.club-values__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0 0 var(--space-6);
    list-style: none;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.club-values__list li {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 7.5rem;
    padding: var(--space-4);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-brand-primary);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    font-weight: 700;
}

.club-values__list li::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(22, 119, 200, 0.14);
    border-radius: 50%;
    right: -3rem;
    top: -4rem;
    pointer-events: none;
}

.club-values__list li:nth-child(2)::before {
    top: 2rem;
    right: -2rem;
}

.club-values__list li:nth-child(3)::before {
    top: -2rem;
    right: auto;
    left: -4rem;
}

.club-values__list li:nth-child(4)::before {
    top: 3rem;
    right: 2rem;
}

.club-values__copy {
    max-width: 70ch;
    margin-bottom: 0;
}

.club-values__nonprofit {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-8);
}

.club-values__nonprofit h3 {
    color: var(--color-brand-primary);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    margin-bottom: var(--space-4);
}

.club-values__nonprofit p {
    margin-bottom: 0;
}

@media (min-width: 64rem) {
    .club-values__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--space-12);
    }

    .club-values__nonprofit {
        border-top: 0;
        border-left: 1px solid var(--color-border);
        padding-top: var(--space-4);
        padding-left: var(--space-8);
    }

    .club-values__list li {
        padding: var(--space-6);
    }
}

@media (min-width: 48rem) {
    .club-story__split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-12);
    }

    .club-purpose__ways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.page-intro,
.page-section {
    padding-block: var(--space-12);
}

.page-intro {
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
}

.page-intro h1,
.page-intro p {
    color: var(--color-text-inverse);
}

.page-intro__content,
.page-section__content {
    max-width: 75ch;
}

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

.page-section--closing {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.page-section--closing .page-section__content {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.page-section--closing .page-section__content > p {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.page-section--closing .page-actions {
    justify-content: center;
}

.practical-data {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border);
}

.practical-data ul {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.practical-data li {
    display: grid;
    gap: var(--space-1);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.visual-page-intro {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.visual-page-intro__content {
    padding-block: var(--space-8);
}

.visual-page-intro__content::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-bottom: var(--space-4);
    background: var(--color-brand-accent);
}

.visual-page-intro__content h1 {
    margin-bottom: var(--space-4);
    color: var(--color-brand-primary);
}

.visual-page-intro__content p {
    margin-bottom: 0;
    max-width: 44ch;
}

/* Same intro language as the rest of the site — light ground, accent rule, navy H1 — for
   pages that carry no lead image, such as the legal documents. Only the rules that exist to
   make room for the media are neutralised; everything else is inherited, not duplicated. */
.visual-page-intro--plain .visual-page-intro__content {
    width: auto;
    max-width: 75ch;
    padding-right: 0;
}

.visual-page-intro--plain .visual-page-intro__content h1 {
    margin-bottom: 0;
}

.visual-page-intro__media {
    position: relative;
    aspect-ratio: 16 / 9;
}

.visual-page-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.visual-page-intro--contact .visual-page-intro__media img {
    object-position: 85% 50%;
}

/* News and Gallery both use a transparent illustration rather than a photograph, so it is
   contained instead of cropped and sits on the section background with no overlay
   softening it. Shared between the two modifiers instead of duplicated. */
.visual-page-intro--news .visual-page-intro__media img,
.visual-page-intro--gallery .visual-page-intro__media img {
    object-fit: contain;
    object-position: 50% 50%;
}

.visual-page-intro--news .visual-page-intro__media::after,
.visual-page-intro--gallery .visual-page-intro__media::after {
    content: none;
}

/* The editor's action is secondary to the page title, and keeps its own focus ring. */
.visual-page-intro__actions {
    margin: var(--space-4) 0 0;
}

.visual-page-intro__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--color-background), transparent 24%);
    pointer-events: none;
}

@media (min-width: 48rem) {
    .visual-page-intro__inner {
        display: flex;
        align-items: center;
        min-height: clamp(17.5rem, 25vw, 22.5rem);
    }

    .visual-page-intro__content {
        width: 50%;
        padding-right: var(--space-8);
    }

    .visual-page-intro__media {
        position: absolute;
        inset: 0 0 0 50%;
        aspect-ratio: auto;
    }

    .visual-page-intro__media::after {
        background: linear-gradient(to right, var(--color-background), transparent 28%);
    }

    /* No media to reserve height for, so the band hugs its own content. */
    .visual-page-intro--plain .visual-page-intro__inner {
        min-height: 0;
    }
}

@media (min-width: 64rem) {
    .visual-page-intro__inner {
        min-height: 16rem;
        height: 16rem;
    }

    .visual-page-intro--plain .visual-page-intro__inner {
        min-height: 0;
        height: auto;
    }

    .visual-page-intro__media {
        inset-inline-start: 55%;
        height: 100%;
        overflow: hidden;
        background: var(--color-background);
    }

    .visual-page-intro__media img,
    .visual-page-intro__media::after {
        width: min(100%, clamp(34rem, 39vw, 37rem));
    }

    .visual-page-intro__media img {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        object-fit: cover;
    }

    /* Restated inside this breakpoint so the shared cover rule above never crops the
       transparent illustrations. */
    .visual-page-intro--news .visual-page-intro__media img,
    .visual-page-intro--gallery .visual-page-intro__media img {
        object-fit: contain;
    }

    .visual-page-intro__media::after {
        left: auto;
    }
}

.school-intro {
    position: relative;
    padding-block: var(--space-6);
    background: linear-gradient(105deg, var(--color-surface), var(--color-surface-subtle) 75%, rgba(22, 119, 200, 0.08));
    border-bottom: 1px solid var(--color-border);
}

.school-intro__inner {
    display: grid;
    gap: var(--space-6);
}

.school-intro__heading h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-primary);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.15;
}

.school-intro__heading h1::before {
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: var(--space-3);
    background: var(--color-brand-accent);
    content: "";
}

.school-intro__heading p {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.school-intro__media {
    --school-photo-mask: url("/assets/images/school/school-intro-mask-mobile.svg");
    position: relative;
    isolation: isolate;
    width: 100%;
}

.school-intro__media::before {
    position: absolute;
    z-index: -1;
    inset: 12px 0 -14px -8px;
    background: rgba(96, 178, 255, 0.18);
    -webkit-mask: var(--school-photo-mask) center / 100% 100% no-repeat;
    mask: var(--school-photo-mask) center / 100% 100% no-repeat;
    content: "";
}

.school-intro__image-wrap {
    height: clamp(240px, calc((100vw - 32px) * 0.8), 480px);
    -webkit-mask: var(--school-photo-mask) center / 100% 100% no-repeat;
    mask: var(--school-photo-mask) center / 100% 100% no-repeat;
}

.school-intro__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 66%;
}

.school-intro__copy p {
    max-width: 72ch;
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.school-intro__copy .school-intro__training {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

@media (min-width: 48rem) {
    .school-intro {
        padding-block: var(--space-8);
    }

    .school-intro__heading p {
        font-size: 1.125rem;
    }

    .school-intro__image-wrap {
        height: 510px;
    }
}

@media (min-width: 64rem) {
    .school-intro__inner {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "heading media" "copy media";
        align-content: center;
        min-height: 380px;
        gap: var(--space-4) var(--space-12);
    }

    .school-intro__heading {
        grid-area: heading;
        align-self: end;
    }

    .school-intro__copy {
        grid-area: copy;
    }

    .school-intro__media {
        --school-photo-mask: url("/assets/images/school/school-intro-mask.svg");
        position: absolute;
        left: calc(50% + 12px);
        bottom: calc(-1 * var(--space-8) - 20px);
        width: min(38vw, 500px);
    }

    .school-intro__media::before {
        inset: 18px 0 -22px -28px;
        background: rgba(96, 178, 255, 0.14);
    }

    .school-intro__image-wrap {
        height: clamp(420px, calc(100vw / 12 + 360px), 480px);
    }

    .school-intro__image {
        object-position: 50% 50%;
    }
}

@media (min-width: 75rem) {
    .school-intro {
        padding-block: calc(var(--space-8) + var(--space-2));
    }

    .school-intro__heading h1 {
        font-size: 2.25rem;
    }

    .school-intro__heading p {
        font-size: 1.25rem;
    }

    .school-intro__inner {
        min-height: 384px;
    }

    .school-intro__media {
        left: calc(50% + 36px);
        bottom: calc(-1 * (var(--space-8) + var(--space-2)) - 20px);
    }

    .school-intro__media::before {
        inset: 50px 0 -22px -62px;
    }
}

.school-season__section {
    margin-top: var(--space-8);
}

.school-season__section > h3 {
    margin-bottom: var(--space-4);
    color: var(--color-brand-primary);
}

.school-season__categories,
.school-season__schedules {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.school-season__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.school-season__categories > li,
.school-season__schedules > li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.school-season__categories strong,
.school-season__schedules strong {
    color: var(--color-brand-primary);
    font-size: 1.125rem;
}

.school-season__categories span {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    text-wrap: balance;
}

.school-season__shared {
    max-width: none;
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--color-border);
    color: var(--color-brand-primary);
}

.school-season__schedules > li {
    gap: var(--space-4);
    padding: var(--space-6);
}

.school-season__label {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.school-season__hours {
    color: var(--color-brand-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.school-season__practical {
    display: grid;
    gap: var(--space-6) var(--space-12);
    padding-block: var(--space-6);
    border-block: var(--border-width) solid var(--color-border);
}

.school-season__practical h4 {
    margin: 0 0 var(--space-4);
    color: var(--color-brand-primary);
    font-size: 1.125rem;
    line-height: 1.4;
}

.school-season__practical ul {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-inline-start: var(--space-4);
}

.school-season__practical li::marker {
    color: var(--color-text-muted);
}

@media (min-width: 48rem) {
    .school-season__categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .school-season__schedules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-season__practical {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .school-season__schedules {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.training-intro {
    padding-block: var(--space-8);
    background: linear-gradient(110deg, var(--color-surface), var(--color-background));
}

.training-intro__inner {
    display: grid;
    gap: var(--space-6);
}

.training-intro__heading h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-primary);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
}

.training-intro__heading p {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: 1.125rem;
    line-height: 1.5;
}

.training-intro__media {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 40rem;
    justify-self: center;
}

.training-intro__media::before,
.training-intro__media::after {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    content: "";
}

.training-intro__media::before {
    inset: 8px -8px -8px 8px;
    background: rgba(96, 178, 255, 0.16);
}

.training-intro__media::after {
    inset: auto 20px -14px 0;
    height: 1px;
    background: rgba(0, 111, 201, 0.25);
}

.training-intro__image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 100%;
    border-radius: var(--radius-sm);
}

.training-intro__copy p {
    margin: 0;
    line-height: 1.5;
}

.training-intro__school {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.training-intro__school-link {
    color: #006fc9;
    font-weight: 700;
    text-decoration: none;
}

.training-intro__school-link:hover,
.training-intro__school-link:focus-visible {
    color: var(--color-brand-primary);
}

@media (min-width: 64rem) {
    .training-intro__inner {
        grid-template-columns: minmax(0, 1fr) clamp(400px, calc(25vw + 170px), 530px);
        grid-template-areas: "heading media" "copy media" "related media";
        grid-template-rows: auto 1fr auto;
        gap: var(--space-4) var(--space-12);
    }

    .training-intro__heading {
        grid-area: heading;
    }

    .training-intro__heading h1 {
        font-size: clamp(2.25rem, 3vw, 2.5rem);
    }

    .training-intro__copy {
        grid-area: copy;
    }

    .training-intro__related {
        grid-area: related;
        align-self: end;
    }

    .training-intro__media {
        grid-area: media;
        align-self: start;
        margin-top: var(--space-3);
        margin-bottom: 22px;
    }

    .training-intro__media::before {
        inset: 10px -10px -12px 10px;
    }

    .training-intro__media::after {
        inset: -10px 0 -22px -40px;
        height: auto;
        background:
            linear-gradient(rgba(96, 178, 255, 0.22), rgba(96, 178, 255, 0.22)) right top / calc(100% - 52px) 1px no-repeat,
            linear-gradient(rgba(0, 111, 201, 0.3), rgba(0, 111, 201, 0.3)) left bottom / calc(100% - 20px) 2px no-repeat;
    }

    .training-intro__image {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 75rem) {
    .training-intro {
        padding-block: calc(var(--space-8) + var(--space-2));
        padding-bottom: var(--space-8);
    }
}

.training-season__main {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 3px solid var(--color-brand-primary);
}

.training-season__main > h3,
.training-season__other > h3 {
    color: var(--color-brand-primary);
    margin-bottom: var(--space-4);
}

.training-season h4 {
    margin: 0 0 var(--space-4);
    color: var(--color-brand-primary);
    font-size: 1.125rem;
    line-height: 1.4;
}

.training-season__categories,
.training-season__modalities {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.training-season__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.training-season__categories > li,
.training-season__modalities > li,
.training-season__schedule {
    min-width: 0;
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.training-season__categories > li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.training-season__categories strong {
    color: var(--color-brand-primary);
    font-size: 1.125rem;
}

.training-season__categories span,
.training-season__scope {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    text-wrap: balance;
}

.training-season__details {
    display: grid;
    align-items: start;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.training-season__label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.training-season__hours {
    display: block;
    color: var(--color-brand-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.training-season__conditions,
.training-season__frequencies {
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-4);
    margin-bottom: 0;
}

.training-season__frequencies {
    gap: var(--space-1);
}

.training-season__conditions li::marker,
.training-season__frequencies li::marker {
    color: var(--color-text-muted);
}

.training-season__other {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: var(--border-width) solid var(--color-border);
}

.training-season__modalities > li > .training-season__conditions {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
}

.training-season__modalities > li > p:last-child {
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .training-season__categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .training-season__modalities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .training-season__modalities > li,
    .training-season__schedule {
        padding: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .training-season__categories {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .training-season__details {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: var(--space-12);
    }
}

.contact-office {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-surface-subtle);
    border-left: 3px solid var(--color-brand-accent);
    border-radius: var(--radius-lg);
}

.contact-office h2,
.contact-panel h2 {
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
}

.contact-office p {
    margin-bottom: 0;
}

.contact-office__scope,
.contact-role__channels dt {
    color: var(--color-text-muted);
}

.contact-office__days {
    font-weight: 600;
}

.contact-office__time {
    color: var(--color-brand-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.contact-layout {
    display: grid;
    align-items: start;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.contact-panel {
    min-width: 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.contact-panel h2 {
    font-size: 1.5rem;
}

.contact-role {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.contact-role h3 {
    margin-bottom: var(--space-2);
    font-size: 1.0625rem;
}

.contact-role__name {
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.contact-role__channels {
    margin: 0;
}

.contact-role__channels > div + div {
    margin-top: var(--space-2);
}

.contact-role__channels dt {
    font-size: 0.875rem;
}

.contact-role__channels dd {
    margin: 0;
}

.contact-role__channels a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.contact-scope {
    margin-top: var(--space-4);
}

.contact-scope__label {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
}

.contact-form__notice {
    margin-block: var(--space-4) var(--space-6);
    padding: var(--space-4);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}

.contact-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-form__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.contact-form__required {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.contact-form__success {
    margin-block: var(--space-4) var(--space-6);
    padding: var(--space-4);
    color: var(--color-success);
    font-weight: 600;
    background: var(--color-surface);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-sm);
}

.contact-form__error-summary {
    margin-block: 0 var(--space-4);
    padding: var(--space-3);
    color: var(--color-error);
    font-weight: 600;
    background: var(--color-surface);
    border-left: 3px solid var(--color-error);
    border-radius: var(--radius-sm);
}

.contact-form__field-error {
    margin: var(--space-2) 0 0;
    color: var(--color-error);
    font-size: 0.875rem;
}

.contact-form__captcha-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
}

.contact-form__privacy {
    margin-block: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Off-screen rather than display:none, and pulled out of tab order and screen-reader
   reading order: a scripted bot that fills every visible-in-DOM field still trips it, while
   a real keyboard or screen-reader user never encounters it. */
.contact-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-login__content {
    max-width: 30rem;
    margin-inline: auto;
}

.news-create__content {
    max-width: 44rem;
    margin-inline: auto;
}

.news-drafts__list,
.news-managed__list {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    list-style: none;
}

.news-drafts__list li,
.news-managed__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.news-drafts__list li > div,
.news-managed__list li > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-form {
    margin-top: var(--space-6);
}

.contact-form__field,
.auth-form__field {
    margin-bottom: var(--space-4);
}

.contact-form label,
.auth-form label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.auth-form input:not([type="hidden"]),
.auth-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
}

.contact-form textarea,
.auth-form textarea {
    resize: vertical;
}

.contact-form :is(input, select, textarea):focus-visible,
.auth-form :is(input, textarea):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.contact-form :is(input, select, textarea):disabled {
    color: var(--color-text-muted);
    background: var(--color-background);
    opacity: 1;
    cursor: not-allowed;
}

.contact-form button:disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: 1;
}

@media (min-width: 48rem) {
    .contact-office {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-office,
    .contact-panel {
        padding: var(--space-8);
    }
}

@media (min-width: 64rem) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.registration-guide > .container > section {
    margin-top: var(--space-8);
}

.registration-steps {
    display: grid;
    gap: var(--space-6);
    padding: 0;
    margin: 0;
    list-style: none;
}

.registration-steps > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-brand-primary);
    font-weight: 600;
}

.registration-steps__number {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.registration-areas__grid {
    display: grid;
    gap: var(--space-6);
}

.registration-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.registration-area > h3 {
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
}

.registration-area__summary {
    color: var(--color-text-muted);
    font-weight: 600;
}

.registration-area__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
}

.registration-area__actions > .action {
    max-width: 100%;
    text-align: center;
}

@media (min-width: 48rem) {
    .registration-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .registration-areas__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-hero {
    --home-accent: #006fc9;
    position: relative;
    overflow: hidden;
    padding-block: 0;
    color: var(--color-text-inverse);
    background: linear-gradient(115deg, var(--color-brand-primary) 0%, var(--color-brand-primary) 42%, #123b5a 100%);
}

.home-hero__inner {
    display: grid;
    width: 100%;
    max-width: none;
}

.home-hero__content {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding-inline: var(--container-padding);
}

.home-hero__content > h1,
.home-hero__content > p,
.home-hero__content > .home-hero__actions {
    position: relative;
    z-index: 3;
}

.home-carousel {
    position: relative;
    min-width: 0;
    background: var(--color-brand-primary);
}

.home-carousel__viewport {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.home-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
}

.home-carousel__slide.is-active {
    opacity: 1;
}

.home-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

.home-carousel__slide[data-home-slide="1"] img {
    object-position: 50% 15%;
}

.home-carousel__slide[data-home-slide="2"] img {
    object-position: 50% 40%;
}

.home-carousel__slide[data-home-slide="3"] img {
    object-position: 50% 20%;
}

.home-carousel__controls {
    position: absolute;
    z-index: 2;
    bottom: 0.75rem;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
}

.home-carousel__controls[hidden] {
    display: none;
}

.home-carousel__dots {
    display: flex;
}

.home-carousel__controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: white;
}

.home-carousel__controls button:focus-visible {
    outline: 2px solid white;
    outline-offset: -3px;
}

.home-carousel__dot::before {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.home-carousel__dot[aria-current="true"]::before {
    background: #60b2ff;
}

.home-carousel__dot::before,
.home-carousel__rotation-icon {
    filter: drop-shadow(0 1px 1px rgba(16, 42, 67, 0.8));
}

.home-carousel__rotation-icon {
    width: 0.625rem;
    height: 0.875rem;
    border-inline: 3px solid currentColor;
}

.home-carousel__rotation.is-paused .home-carousel__rotation-icon {
    width: 0;
    height: 0;
    border: 0.4375rem solid transparent;
    border-right: 0;
    border-left: 0.625rem solid currentColor;
}

.home-carousel__rotation[aria-disabled="true"] {
    opacity: 0.65;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .home-carousel__slide {
        transition: none;
    }
}

.home-hero h1,
.home-hero p {
    color: var(--color-text-inverse);
}

/* The heading is drawn by the logo, so the box only has to hold the image: the old
   nowrap guarded a line of type that no longer exists. */
.home-hero__title {
    margin-block: 0 var(--space-4);
}

/* Deliberately larger than the old header icon so the name carries the hero, but capped
   well short of the column so the intro and the actions keep their weight. */
.home-hero__brand {
    display: block;
    width: min(100%, 20rem);
    height: auto;
}

.home-hero .action--primary {
    color: var(--color-text-inverse);
    background: #006fc9;
}

.home-hero .action--primary:hover,
.home-hero .action--primary:active {
    color: var(--color-text-inverse);
    background: #005a9f;
}

.home-hero .action--secondary {
    background: var(--color-surface);
}

.home-hero__content,
.home-section__heading {
    max-width: 65ch;
}

.home-hero__intro {
    font-size: 1.125rem;
    line-height: 1.55;
}

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

.home-access {
    --home-access-accent: #006fc9;
    padding-block: var(--space-6);
    background: var(--color-background);
}

.home-access__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.home-access__item {
    display: flex;
    min-width: 0;
}

.home-access__link {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-width) solid rgba(16, 42, 67, 0.14);
    border-radius: var(--radius-lg);
    box-shadow: 0 0.25rem 0.75rem rgba(16, 42, 67, 0.06);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.home-access__link:focus-visible {
    outline: 2px solid var(--home-access-accent);
    outline-offset: 2px;
}

.home-access__link:active {
    transform: translateY(0);
    background: var(--color-surface-subtle);
}

.home-access__visuals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.home-access__icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: var(--space-2);
    color: var(--home-access-accent);
    background: rgba(0, 111, 201, 0.08);
    border-radius: var(--radius-md);
}

.home-access__mark {
    color: var(--home-access-accent);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
}

.home-access__body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.home-access__item h2 {
    margin-block: 0 var(--space-2);
    color: var(--color-brand-primary);
    font-size: 1.375rem;
}

.home-access__item p {
    margin-block: 0 var(--space-4);
    line-height: 1.5;
}

.home-access__cta {
    margin-top: auto;
    color: var(--color-brand-primary);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.home-access__arrow {
    display: inline-block;
    color: var(--home-access-accent);
    text-decoration: none;
    transition: transform 150ms ease;
}

.home-access__link:hover .home-access__arrow,
.home-access__link:focus-visible .home-access__arrow {
    transform: translateX(2px);
}

@media (min-width: 48rem) {
    .home-access__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .home-access__link {
        padding: var(--space-6);
    }
}

@media (min-width: 75rem) {
    .home-access {
        padding-block: var(--space-8);
    }
}

@media (hover: hover) and (pointer: fine) {
    .home-access__link:hover {
        transform: translateY(-2px);
        border-color: rgba(0, 111, 201, 0.38);
        box-shadow: 0 0.4rem 1rem rgba(16, 42, 67, 0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-access__link,
    .home-access__arrow {
        transition: none;
    }

    .home-access__link:hover,
    .home-access__link:active {
        transform: none;
    }

    .home-access__link:hover .home-access__arrow,
    .home-access__link:focus-visible .home-access__arrow {
        transform: none;
    }
}

.home-section {
    padding-block: var(--space-12);
}

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

.home-section__heading {
    margin-bottom: var(--space-6);
}

.home-paths {
    display: grid;
    gap: var(--space-8);
}

.home-path {
    display: grid;
    background: var(--color-surface-subtle);
}

.home-path__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8);
}

.home-path__content p {
    margin-bottom: var(--space-6);
}

.home-path__media {
    order: 2;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.home-path__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.path-choices__registration {
    margin: var(--space-6) 0 0;
}

.utility-info {
    max-width: 75ch;
}

.utility-info__links {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.utility-info__links a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-brand-primary);
    font-weight: 600;
}

.editorial-items {
    display: grid;
    gap: var(--space-4);
}

.editorial-item {
    max-width: 75ch;
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border);
}

.editorial-item__metadata {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.home-staff {
    background: var(--color-surface-subtle);
    padding-block: 2rem;
}
.home-staff__header {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.home-staff__intro {
    max-width: 36rem;
}
.home-staff__intro::before {
    display: block;
    width: 3rem;
    height: 0.25rem;
    margin-bottom: 1rem;
    background: #006fc9;
    content: "";
}
.home-staff__intro h2 {
    margin-bottom: 0.75rem;
}
.home-staff__intro p {
    margin: 0;
}
.home-staff__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}
.home-staff__actions .action {
    min-height: 44px;
}
.home-staff__controls {
    display: flex;
    gap: 0.5rem;
}
.home-staff__controls[hidden] {
    display: none;
}
.home-staff__controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-brand-primary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
}
.home-staff__controls button:hover:not(:disabled) {
    border-color: #006fc9;
    color: #006fc9;
}
.home-staff__controls button:disabled {
    opacity: 0.35;
    cursor: default;
}
.home-staff__controls button:focus-visible,
.home-staff__track:focus-visible {
    outline: 2px solid #006fc9;
    outline-offset: 3px;
}
.home-staff__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    scrollbar-width: none;
}
.home-staff__track::-webkit-scrollbar {
    display: none;
}
.home-staff__card {
    flex: 0 0 min(72vw, 290px);
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-brand-primary);
    text-decoration: none;
    position: relative;
}
.home-staff__card:hover {
    text-decoration: none;
    background: #173b58;
}
.home-staff__card:focus-visible {
    outline: none;
}
.home-staff__card:focus-visible::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px #006fc9, inset 0 0 0 5px #fff;
    pointer-events: none;
    content: "";
}
.home-staff__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}
/* The portraits are 3:2 and this card is 4:5, so cover crops them heavily. Most were shot
   at the same distance and centre well; a photo taken from further back declares a focal
   variant so its crop favours the upper part of the frame, where the face sits. */
.home-staff__photo--focal-top {
    object-position: center 32%;
}
.home-staff__caption {
    padding: 0.875rem;
}
.home-staff__card h3 {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #fff;
}
.home-staff__card p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.home-staff__card .home-staff__assignments {
    color: #a5d5ff;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.home-staff__label {
    color: rgba(255, 255, 255, 0.78);
}
@media (min-width: 48rem) {
    .home-staff__card { flex-basis: 37%; }
    .home-staff__track { gap: 1.5rem; }
}
@media (min-width: 64rem) {
    .home-staff__header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    .home-staff__actions {
        flex-direction: column;
        align-items: flex-end;
    }
    .home-staff__card { flex-basis: 30%; }
}
@media (min-width: 75rem) {
    .home-staff__card { flex-basis: 24.5%; }
}
@media (min-width: 90rem) {
    .home-staff__card { flex-basis: 22%; }
}
@media (prefers-reduced-motion: reduce) {
    .home-staff__track { scroll-behavior: auto; }
}

.home-closing {
    --home-closing-accent: #006fc9;

    background: var(--color-surface);
}

.home-closing__inner {
    display: grid;
    gap: var(--space-6);
}

.home-closing__content {
    max-width: 65ch;
}

.home-closing__content::before {
    display: block;
    width: 3rem;
    height: 0.25rem;
    margin-bottom: var(--space-4);
    background: var(--home-closing-accent);
    content: "";
}

.home-closing__heading {
    margin-bottom: var(--space-3);
}

.home-closing__copy {
    margin-bottom: 0;
}

.home-closing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

@media (min-width: 64rem) {
    .home-closing__inner {
        grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
        align-items: center;
    }

    .home-closing__actions {
        align-self: center;
    }
}

.site-footer {
    color: var(--color-brand-primary);
    background: var(--color-surface-subtle);
}

.footer-values {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    color: var(--color-text-inverse);
    background: linear-gradient(115deg, #006fc9, #0863ab 70%, #0a548e);
}

.footer-values::before,
.footer-values::after {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -16rem;
    width: 46rem;
    height: 26rem;
    border: 1px solid rgba(96, 178, 255, 0.16);
    border-radius: 50%;
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: -1;
}

.footer-values::after {
    right: -11.25rem;
    bottom: -17.25rem;
    width: 48.5rem;
    height: 28.5rem;
    border-color: rgba(96, 178, 255, 0.1);
}

.footer-values h2 {
    margin-bottom: var(--space-6);
    color: var(--color-text-inverse);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
}

.footer-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
}

.footer-values__item svg {
    display: block;
    margin-bottom: var(--space-2);
}

.footer-values__item h3 {
    margin-bottom: var(--space-2);
    color: inherit;
    font-size: 1.125rem;
}

.footer-values__item p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer-main {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-8);
}

.footer-main h2 {
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: 1.125rem;
}

.footer-brand {
    text-align: center;
}

.footer-brand__shield {
    width: 4.5rem;
    height: auto;
    margin: 0 auto var(--space-3);
}

.footer-brand__name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.3;
}

.footer-brand__slogan {
    margin: var(--space-2) 0 0;
    color: #006fc9;
    font-size: 2rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.footer-brand__slogan::after {
    content: "";
    display: block;
    width: min(10rem, 70%);
    height: 0.5rem;
    margin: var(--space-1) auto 0;
    border-top: 2px solid rgba(0, 111, 201, 0.3);
    border-radius: 50%;
    transform: rotate(-2deg);
    pointer-events: none;
}

.footer-contact > p {
    max-width: 30ch;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.footer-contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Compact editorial actions rather than plain underlined links: the underline is dropped and
   the affordance comes from the frame, which also gives a clear hover and focus target. */
.footer-contact__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.footer-contact__links a:hover,
.footer-contact__links a:active {
    color: #006fc9;
    border-color: currentColor;
    background: var(--color-surface-subtle);
}

.footer-contact__links a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .footer-contact__links a {
        transition: none;
    }
}

.footer-social__links {
    display: flex;
    gap: var(--space-3);
}

.footer-social__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.footer-social__links a:hover {
    color: #006fc9;
    border-color: currentColor;
    background: var(--color-surface-subtle);
}

.site-footer__partners {
    text-align: center;
}

.site-footer__partners h2 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.partner-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.5rem;
    height: 3.75rem;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.partner-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 2.5rem;
    object-fit: contain;
}

.footer-legal {
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
}

.footer-legal__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-4);
    font-size: 0.875rem;
}

.footer-legal a {
    color: inherit;
}

.footer-legal a:focus-visible {
    outline-color: white;
    outline-offset: 2px;
}

/* Scoped to the legal nav so .footer-management-access keeps its own underline behaviour.
   On the navy band the interaction reads through opacity and the brand highlight rather
   than an underline, which here looked like an untreated default link. */
.site-footer__links a {
    text-decoration: none;
    opacity: 0.85;
    transition: color 120ms ease, opacity 120ms ease;
}

.site-footer__links a:hover,
.site-footer__links a:active {
    color: var(--color-brand-highlight);
    opacity: 1;
}

.site-footer__links a[aria-current="page"] {
    opacity: 1;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__links a {
        transition: none;
    }
}

.footer-legal__copyright {
    margin: 0;
}

.footer-management-access {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    text-decoration: none;
}

.footer-management-access:hover {
    text-decoration: underline;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .footer-values__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }
    .footer-values__item + .footer-values__item {
        padding-inline-start: var(--space-6);
        border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-8);
    }
    .footer-brand,
    .site-footer__partners {
        grid-column: 1 / -1;
    }
    .footer-social {
        justify-self: end;
    }
}

@media (min-width: 64rem) {
    .footer-values {
        padding-block: var(--space-2);
    }
    .footer-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
        padding-block: var(--space-3);
        row-gap: var(--space-2);
    }
    .footer-brand__shield {
        margin-bottom: var(--space-2);
    }
    .footer-brand__slogan {
        margin-top: var(--space-1);
        padding-bottom: var(--space-2);
    }
    .site-footer__partners h2 {
        margin-bottom: var(--space-1);
    }
    .footer-brand {
        grid-column: 2;
        grid-row: 1;
    }
    .footer-contact {
        grid-column: 1;
        grid-row: 1;
    }
    .footer-social {
        grid-column: 3;
        grid-row: 1;
    }
    .site-footer__partners {
        grid-column: 2;
    }
}

@media (min-width: 48rem) {
    :root {
        --container-padding: var(--space-6);
    }

    .utility-info__links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media (48rem <= width < 75rem) {
    .home-carousel__viewport {
        height: clamp(22.5rem, 42vw, 30rem);
        aspect-ratio: auto;
    }
}

@media (min-width: 75rem) {
    :root {
        --container-padding: var(--space-8);
    }

    .site-header__inner {
        min-height: 5rem;
    }

    .site-nav--desktop,
    .language-switcher--desktop {
        display: block;
    }

    .site-nav--desktop {
        margin-inline: auto;
    }

    .site-nav--desktop > ul {
        display: flex;
        gap: var(--space-3);
    }

    .site-nav--desktop .site-nav__item {
        padding: var(--space-2) 0;
        white-space: nowrap;
    }

    .site-header__actions {
        gap: var(--space-3);
    }

    .home-hero {
        background:
            radial-gradient(ellipse 62% 78% at 24% 44%, rgba(0, 111, 201, 0.18) 0%, rgba(0, 111, 201, 0.09) 26%, rgba(0, 111, 201, 0.035) 45%, transparent 66%),
            radial-gradient(ellipse 48% 60% at 3% 96%, rgba(0, 111, 201, 0.1) 0%, rgba(0, 111, 201, 0.035) 36%, transparent 63%),
            linear-gradient(125deg, rgba(0, 111, 201, 0.05) 0%, rgba(0, 111, 201, 0.015) 35%, transparent 56%),
            linear-gradient(115deg, var(--color-brand-primary) 0%, var(--color-brand-primary) 42%, #123b5a 100%);
    }

    .home-hero__inner {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        align-items: stretch;
        min-height: clamp(26.25rem, 34vw, 30rem);
    }

    .home-hero__content {
        position: relative;
        z-index: 1;
        isolation: isolate;
        display: flex;
        width: auto;
        max-width: none;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        min-height: clamp(26.25rem, 34vw, 30rem);
        padding-block: var(--space-8);
        padding-inline-start: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
        padding-inline-end: var(--space-6);
        background: transparent;
    }

    .home-hero__content::after {
        position: absolute;
        z-index: 2;
        left: -12rem;
        bottom: -11rem;
        width: 58rem;
        height: 44rem;
        background-image: repeating-radial-gradient(
            ellipse 42rem 34rem at -2% 100%,
            transparent 0,
            transparent 15.6rem,
            rgba(0, 111, 201, 0.16) 15.6rem,
            rgba(0, 111, 201, 0.16) 15.78rem,
            transparent 15.78rem,
            transparent 18.5rem,
            rgba(0, 111, 201, 0.13) 18.5rem,
            rgba(0, 111, 201, 0.13) 18.66rem,
            transparent 18.66rem,
            transparent 21.6rem,
            rgba(0, 111, 201, 0.105) 21.6rem,
            rgba(0, 111, 201, 0.105) 21.74rem,
            transparent 21.74rem,
            transparent 24.5rem,
            rgba(0, 111, 201, 0.08) 24.5rem,
            rgba(0, 111, 201, 0.08) 24.62rem,
            transparent 24.62rem,
            transparent 27.6rem,
            rgba(0, 111, 201, 0.055) 27.6rem,
            rgba(0, 111, 201, 0.055) 27.71rem,
            transparent 27.71rem
        );
        -webkit-mask-image: radial-gradient(ellipse 125% 115% at 0% 100%, #000 0%, #000 58%, rgba(0, 0, 0, 0.78) 72%, rgba(0, 0, 0, 0.35) 86%, transparent 100%);
        mask-image: radial-gradient(ellipse 125% 115% at 0% 100%, #000 0%, #000 58%, rgba(0, 0, 0, 0.78) 72%, rgba(0, 0, 0, 0.35) 86%, transparent 100%);
        content: "";
        pointer-events: none;
    }

    .home-hero h1 {
        max-width: none;
    }

    /* Wider from here on, where the hero splits into two columns and the logo has to hold
       its own beside the photograph. The drop shadow replaces the text-shadow the typeset
       heading used to carry against the image. */
    .home-hero__brand {
        width: min(100%, 24rem);
        filter: drop-shadow(0 1px 1rem rgba(0, 0, 0, 0.4));
    }

    .home-hero__intro {
        max-width: 28rem;
        text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.35);
    }

    .home-hero__actions .action {
        white-space: nowrap;
    }

    .home-hero__actions {
        flex-wrap: nowrap;
    }

    .home-hero .action--secondary {
        color: var(--color-text-inverse);
        background: rgba(16, 42, 67, 0.48);
        border-color: rgba(255, 255, 255, 0.8);
    }

    .home-hero .action--secondary:hover,
    .home-hero .action--secondary:active {
        color: var(--color-brand-primary);
        background: var(--color-surface);
    }

    .home-path {
        grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    }

    .home-path--reverse .home-path__media {
        order: -1;
    }

    .home-carousel__viewport {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .home-carousel__viewport::after {
        position: absolute;
        z-index: 1;
        inset: 0 auto 0 0;
        width: 2rem;
        background: linear-gradient(90deg, var(--color-brand-primary), transparent);
        content: "";
        pointer-events: none;
    }

    .home-carousel__slide[data-home-slide="0"] img {
        object-position: 50% 38%;
    }

    .home-carousel__slide[data-home-slide="2"] img {
        object-position: 50% 42%;
    }

    .menu-toggle,
    .site-menu {
        display: none;
    }
}

@media (width < 75rem) {
    .home-hero {
        padding-block: 0;
        background:
            radial-gradient(ellipse 88% 42% at 26% 22%, rgba(0, 111, 201, 0.16) 0%, rgba(0, 111, 201, 0.07) 34%, transparent 66%),
            radial-gradient(ellipse 70% 34% at 2% 62%, rgba(0, 111, 201, 0.09) 0%, rgba(0, 111, 201, 0.03) 40%, transparent 68%),
            linear-gradient(160deg, rgba(0, 111, 201, 0.05) 0%, rgba(0, 111, 201, 0.015) 32%, transparent 54%),
            linear-gradient(115deg, var(--color-brand-primary) 0%, var(--color-brand-primary) 42%, #123b5a 100%);
    }

    .home-hero__inner {
        position: relative;
        isolation: isolate;
    }

    .home-hero__content {
        position: relative;
        z-index: 2;
        text-align: left;
        padding-block: var(--space-8);
        padding-inline-start: clamp(3.25rem, 12vw, 6.5rem);
    }

    .home-hero__content::after {
        position: absolute;
        z-index: 1;
        left: -16rem;
        top: 1.5rem;
        width: 32rem;
        height: 34rem;
        background-image: repeating-radial-gradient(
            ellipse 44rem 42rem at 44% 64%,
            transparent 0,
            transparent 18.2rem,
            rgba(96, 178, 255, 0.17) 18.2rem,
            rgba(96, 178, 255, 0.17) 18.43rem,
            transparent 18.43rem,
            transparent 19.5rem,
            rgba(96, 178, 255, 0.13) 19.5rem,
            rgba(96, 178, 255, 0.13) 19.71rem,
            transparent 19.71rem,
            transparent 20.8rem,
            rgba(96, 178, 255, 0.105) 20.8rem,
            rgba(96, 178, 255, 0.105) 20.99rem,
            transparent 20.99rem,
            transparent 22.1rem,
            rgba(96, 178, 255, 0.08) 22.1rem,
            rgba(96, 178, 255, 0.08) 22.28rem,
            transparent 22.28rem,
            transparent 23.4rem,
            rgba(96, 178, 255, 0.055) 23.4rem,
            rgba(96, 178, 255, 0.055) 23.56rem,
            transparent 23.56rem
        );
        -webkit-mask-image: radial-gradient(ellipse 122% 96% at 0% 30%, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.2) 88%, transparent 100%);
        mask-image: radial-gradient(ellipse 122% 96% at 0% 30%, #000 0%, #000 58%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.2) 88%, transparent 100%);
        content: "";
        pointer-events: none;
    }
}

.site-header {
    --header-accent: #006fc9;
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.site-header__inner {
    min-height: 4.5rem;
    gap: var(--space-2);
}

.site-identity {
    color: var(--color-text-inverse);
    gap: 0.625rem;
}

.site-identity > span {
    font-size: 0.9375rem;
}

.site-nav__item {
    color: rgba(255, 255, 255, 0.86);
}

a.site-nav__item:hover,
a.site-nav__item:active,
.site-nav__item[aria-current="page"] {
    color: var(--color-text-inverse);
}

.site-header .action--primary {
    padding: 0.6rem 1rem;
    color: var(--color-text-inverse);
    background: var(--header-accent);
    border-color: var(--header-accent);
    border-radius: 0.5rem;
}

.site-header .action--primary:hover,
.site-header .action--primary:active {
    color: var(--color-text-inverse);
    background: #005a9f;
    border-color: #005a9f;
}

.site-header .site-registration-label {
    color: rgba(255, 255, 255, 0.72);
}

/* On the navy header, the muted/border tokens (tuned for light backgrounds) read as
   disabled. Match .menu-toggle's treatment instead: inverse text, translucent white border. */
.site-header .site-logout__button {
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.55);
}

.site-header .site-logout__button:hover,
.site-header .site-logout__button:active {
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Same correction for the panel link sharing that navy header. */
.site-header .site-admin-link {
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.55);
}

.site-header .site-admin-link:hover,
.site-header .site-admin-link:active {
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

.menu-toggle {
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.site-menu {
    background: #0d2338;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.site-menu .site-nav li + li {
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 75rem) {
    .site-header__inner {
        min-height: 4.75rem;
    }

    .site-nav--desktop .site-nav__item {
        position: relative;
        padding-block: var(--space-2);
        font-size: 0.9375rem;
        text-decoration: none;
    }

    .site-nav--desktop a.site-nav__item:hover,
    .site-nav--desktop a.site-nav__item:focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 0.125em;
        text-underline-offset: 0.25em;
    }

    .site-nav--desktop .site-nav__item[aria-current="page"] {
        text-decoration: none;
    }

    .site-nav--desktop .site-nav__item[aria-current="page"]::after {
        position: absolute;
        inset: auto 0 -0.35rem 0;
        height: 2px;
        margin-inline: auto;
        width: 1.25rem;
        background: var(--header-accent);
        border-radius: 1px;
        content: "";
    }
}

@media (max-width: 30rem) {
    .site-header__inner {
        gap: var(--space-2);
        padding-inline: var(--space-4);
    }

}

@media (max-width: 23.75rem) {
    .site-header__inner {
        gap: var(--space-1);
        padding-inline: var(--space-3);
    }

    .site-identity > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-header .action--primary {
        padding-inline: 0.7rem;
        font-size: 0.875rem;
    }
}

.menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
}

.menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.menu-toggle__icon {
    position: relative;
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

.menu-toggle__icon span {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}

.menu-toggle__icon span:first-child { transform: translateY(-7px); }
.menu-toggle__icon span:last-child { transform: translateY(7px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { transform: rotate(-45deg); }

.header-disclosure {
    position: relative;
}

.header-disclosure__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    gap: var(--space-2);
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.header-disclosure__chevron {
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.header-disclosure__toggle[aria-expanded="true"] .header-disclosure__chevron {
    transform: rotate(180deg);
}

.is-section-active > .header-disclosure__toggle {
    color: var(--color-text-inverse);
    text-decoration: underline;
    text-decoration-color: var(--header-accent);
    text-underline-offset: 0.3em;
}

.site-header .header-disclosure__panel {
    display: grid;
    gap: 0;
    padding: var(--space-1) var(--space-3);
    margin: 0;
    list-style: none;
}

.site-header .header-disclosure__panel[hidden] {
    display: none;
}

.site-header .header-disclosure__panel a,
.site-header .header-disclosure__panel span[lang] {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.site-header .header-disclosure__panel a:hover,
.site-header .header-disclosure__panel a:focus-visible {
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.08);
}

.site-header .header-disclosure__panel [aria-current] {
    color: #7cc4ff;
    background: rgba(0, 111, 201, 0.12);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-header .header-disclosure__panel [aria-current]::after {
    content: none;
}

.site-menu .header-disclosure__toggle {
    width: 100%;
}

.site-menu .header-disclosure__panel li + li {
    border-top: 0;
}

.site-menu .site-nav a.site-nav__item {
    text-decoration: none;
}

.site-menu .site-nav__item[aria-current="page"] {
    color: #7cc4ff;
    background: rgba(0, 111, 201, 0.12);
}

.site-menu .language-switcher {
    display: block;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.language-switcher__label {
    display: block;
    margin-bottom: var(--space-1);
}

.language-switcher__segments {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    width: 5.75rem;
    height: 2.75rem;
}

.language-switcher__segments::before {
    position: absolute;
    inset-block: 3px;
    inset-inline: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.language-switcher__segments::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.22);
    content: "";
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(18deg);
}

.language-switcher__segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.language-switcher__segment[href]:hover {
    color: var(--color-text-inverse);
}

.language-switcher__segment[href]:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--color-text-inverse);
    outline-offset: -3px;
}

.language-switcher__segment--current {
    color: #60b2ff;
    font-weight: 700;
}

.site-header__fallback {
    padding-block: var(--space-4);
}

@media (min-width: 75rem) {
    .site-nav--desktop .header-disclosure__panel {
        position: absolute;
        z-index: 20;
        top: 100%;
        left: 0;
        width: max-content;
        max-width: min(20rem, calc(100vw - 2rem));
        /* The extra top padding bridges the gap to the trigger, so moving the pointer down
           into the panel never crosses dead space that would close it. */
        margin-top: 0;
        padding: calc(var(--space-1) + 0.5rem) var(--space-1) var(--space-1);
        background: #0d2338;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radius-sm);
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.18);
    }

    /* Pointer devices open the panel on hover, and keyboards through focus-within, without
       requiring a click. The JS disclosure keeps working: it toggles [hidden], so these
       selectors are written to outrank the [hidden] rule while the group is hovered or
       focused, and to yield again the moment it is not. */
    @media (hover: hover) and (pointer: fine) {
        .site-header .site-nav--desktop .header-disclosure:hover > .header-disclosure__panel[hidden] {
            display: grid;
        }
    }

    .site-header .site-nav--desktop .header-disclosure:focus-within > .header-disclosure__panel[hidden] {
        display: grid;
    }

    .language-switcher--desktop {
        display: inline-block;
    }

    .site-nav--desktop .is-section-active > .header-disclosure__toggle {
        text-decoration: underline;
        text-decoration-color: var(--header-accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle__icon span,
    .header-disclosure__chevron {
        transition: none;
    }
}

/* Staff introduction and directory. */
.staff-intro {
    padding-block: var(--space-6);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}
.staff-intro__inner {
    display: grid;
    gap: var(--space-6);
}
.staff-intro__copy::before {
    display: block;
    width: 2rem;
    height: 3px;
    margin-bottom: var(--space-3);
    background: #006fc9;
    content: "";
}
.staff-intro h1 {
    margin: 0 0 0.75rem;
    color: var(--color-brand-primary);
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.staff-intro p {
    max-width: 38rem;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
}
.staff-intro__summary {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    line-height: 1.5;
}
.staff-intro__summary > div + div {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.staff-intro__summary dt {
    font-weight: 700;
    color: var(--color-brand-primary);
}
.staff-intro__summary dd {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
}
@media (min-width: 64rem) {
    .staff-intro {
        padding-block: var(--space-8);
    }
    .staff-intro__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: start;
        gap: var(--space-12);
    }
    .staff-intro h1 {
        font-size: clamp(2.25rem, 3vw, 2.5rem);
    }
}
.staff-directory {
    padding-block: 2.5rem 4rem;
    background: var(--color-surface);
}
.staff-directory h2 {
    margin: 0 0 1.5rem;
    color: var(--color-brand-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.025em;
}
.staff-directory__list {
    display: grid;
    gap: 1rem;
}
.staff-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.staff-card--text {
    grid-template-columns: minmax(0, 1fr);
}
.staff-card__heading,
.staff-card__body {
    min-width: 0;
    overflow-wrap: anywhere;
}
.staff-card h3 {
    margin: 0 0 0.75rem;
    color: var(--color-brand-primary);
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.staff-card__assignments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.staff-card__assignments li {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
    color: var(--color-brand-primary);
    font-size: 0.875rem;
    font-weight: 600;
}
.staff-card__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
}
.staff-card__body {
    grid-column: 1 / -1;
}
.staff-card__body p {
    margin: 0 0 0.75rem;
}
.staff-card__body > :last-child {
    margin-bottom: 0;
}
.staff-card h4 {
    margin: 1rem 0 0.375rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
/* The body now opens with the "Introduction" heading instead of a paragraph, so the first
   one sits flush with the top of the card as the paragraph used to. */
.staff-card__body > h4:first-child {
    margin-top: 0;
}
.staff-card__qualifications {
    margin: 0;
    padding-left: 1.15rem;
}
.staff-card__specialties {
    color: var(--color-text-muted);
}
@media (min-width: 48rem) {
    .staff-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 9rem;
        gap: 2rem;
        padding: 1.75rem;
        align-items: start;
    }
    .staff-card--text {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    }
    .staff-card__body {
        grid-column: 2;
        grid-row: 1;
    }
    .staff-card__image {
        grid-column: 3;
        grid-row: 1;
    }
}

main:has(> .competition-calendar) {
    display: flex;
    flex-direction: column;
}
/* The news page now uses the shared .visual-page-intro header; only the success notice
   keeps its own styling here. */
.news-intro__notice {
    margin: var(--space-4) 0 0;
    padding: var(--space-2) var(--space-3);
    color: var(--color-success);
    font-weight: 600;
    background: var(--color-surface);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-sm);
}
/* Auto-dismiss fade-out, applied by notice-autodismiss.js. Purely visual: [hidden] is what
   actually removes the notice from layout once the transition ends. */
.news-intro__notice--success.is-dismissing {
    opacity: 0;
    transition: opacity 350ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .news-intro__notice--success.is-dismissing {
        transition: none;
    }
}
/* Editorial administration: compact rows on a subtle ground, clearly separated from the
   public "Publicacions" block below without turning the page into a dashboard. */
.news-admin {
    padding-block: var(--space-4);
    background: var(--color-background);
}
.news-admin + .news-admin {
    padding-top: 0;
}
.news-admin__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.news-admin__title {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.news-admin__count {
    min-width: 1.5rem;
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
    background: var(--color-surface-subtle);
    border-radius: var(--radius-sm);
}
.news-admin__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}
.news-admin__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.news-admin__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.news-admin__summary {
    min-width: 0;
}
.news-admin__row-title {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.news-admin__date {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.news-admin__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.news-admin__form {
    margin: 0;
}
/* Text labels only, each its own 44px target. */
.news-admin__action {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}
.news-admin__action--edit {
    color: var(--color-text-inverse);
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
}
a.news-admin__action--edit:hover,
a.news-admin__action--edit:active {
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}
.news-admin__action--state {
    color: var(--color-brand-primary);
    background: var(--color-surface);
    border-color: var(--color-border);
}
.news-admin__action--state:hover,
.news-admin__action--state:active {
    background: var(--color-surface-subtle);
}
/* Destructive, but sober: outlined rather than a solid red block. */
.news-admin__action--delete {
    color: var(--color-error);
    background: transparent;
    border-color: var(--color-border);
}
a.news-admin__action--delete:hover,
a.news-admin__action--delete:active {
    color: var(--color-text-inverse);
    background: var(--color-error);
    border-color: var(--color-error);
}
@media (min-width: 40rem) {
    /* Desktop: the actions sit to the right of the title and date. */
    .news-admin__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4);
    }
    .news-admin__actions {
        flex-shrink: 0;
    }
}

.news-publications,
.news-gallery-access {
    padding-block: var(--space-8);
    background: var(--color-surface);
}
.news-publications h2,
.news-gallery-access h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-primary);
}
.news-empty {
    margin: 0;
    color: var(--color-text-muted);
}
.news-gallery-access {
    padding-top: 0;
}
/* A hairline marks the shift from the publications run to the gallery invitation. */
.news-gallery-access > .container {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}
.news-gallery-access p {
    margin: 0 0 var(--space-3);
}
/* Editorial list: a vertical run of publications, each one date + headline + summary as a
   single informative unit. Separation comes from space and a hairline rule, never shadows. */
.news-list {
    display: grid;
    gap: 0;
    max-width: 60rem;
}
/* Compact editorial row: thumbnail beside the text, sized like the staff directory cards.
   Narrow screens stack the thumbnail above the text instead. */
.news-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding-block: var(--space-6);
    overflow-wrap: anywhere;
    border-top: 1px solid var(--color-border);
}
.news-item:first-child {
    border-top: 0;
    padding-top: var(--space-2);
}
.news-item__media {
    display: block;
    border-radius: var(--radius-md);
}
.news-item__thumb {
    justify-self: start;
    display: block;
    width: 100%;
    max-width: 10rem;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
}
.news-item__body {
    min-width: 0;
}
@media (min-width: 30rem) {
    .news-item {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: 1.25rem;
    }
    .news-item--text {
        grid-template-columns: minmax(0, 1fr);
    }
    .news-item__thumb {
        max-width: none;
    }
}
@media (min-width: 48rem) {
    .news-item {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 2rem;
    }
    .news-item--text {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Date: small and secondary, above the headline it belongs to. */
.news-item__date {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
/* Headline: the dominant element of the row. */
.news-item__title {
    margin: var(--space-1) 0 var(--space-2);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.news-item__title a {
    color: var(--color-brand-primary);
    text-decoration: none;
}
.news-item__title a:hover,
.news-item__title a:active {
    color: var(--color-brand-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.news-item__excerpt {
    max-width: 44rem;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}
/* Compact editing action bar: save, back and publish sit together and may wrap. */
.news-form__actions {
    align-items: center;
    margin-top: var(--space-4);
}

.news-form__publish {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Differentiated from save/back, but clearly active. */
.action--publish {
    color: #006fc9;
    background: transparent;
    border-color: #006fc9;
}

.action--publish:hover,
.action--publish:active {
    background: #005a9f;
    border-color: #005a9f;
    color: var(--color-text-inverse);
}

.news-form__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.news-form__tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A 44px target around the small glyph, without inflating the bar. */
    width: 2.75rem;
    height: 2.75rem;
    margin: calc(var(--space-2) * -1);
    color: var(--color-text-muted);
    cursor: help;
}

.news-form__tip-text {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: min(18rem, 70vw);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-inverse);
    font-weight: 400;
    background: var(--color-brand-primary);
    border-radius: var(--radius-sm);
    transform: translateX(-50%);
    /* Hidden from sight but kept in the accessibility tree for aria-describedby. */
    opacity: 0;
    visibility: hidden;
}

.news-form__tip-icon:hover + .news-form__tip-text,
.news-form__tip-icon:focus + .news-form__tip-text,
.news-form__tip-icon:focus-visible + .news-form__tip-text,
.news-form__tip:hover .news-form__tip-text {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 30rem) {
    .news-form__tip-text {
        left: auto;
        right: 0;
        transform: none;
    }
}

.news-detail__intro {
    padding-block: var(--space-6) var(--space-8);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}
/* Discreet way back: present, but never competing with the headline. */
.news-detail__back {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
}
.news-detail__intro h1 {
    max-width: 46rem;
    margin: 0 0 var(--space-3);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
}
.news-detail__date {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
/* The standfirst reads as an introduction, not a second headline: larger and calmer than
   the body, but without the weight or the brand colour of a title. */
.news-detail__excerpt {
    max-width: 44rem;
    margin: var(--space-4) 0 0;
    padding-left: var(--space-4);
    color: var(--color-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    border-left: 3px solid var(--color-brand-accent);
}
/* Posters must be readable whole, so the image is contained rather than cropped, and kept
   narrower than the headline so it never dominates the article. */
.news-detail__media {
    padding-block: var(--space-6);
    background: var(--color-surface);
}
.news-detail__media img {
    display: block;
    width: 100%;
    max-width: 40rem;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-md);
}
.news-detail__body {
    padding-block: var(--space-8);
    background: var(--color-surface);
}
/* Comfortable measure for sustained reading, slightly more relaxed than the listing. */
.news-detail__body p {
    max-width: 46rem;
    margin: 0 0 var(--space-4);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.news-detail__body p:last-child {
    margin-bottom: 0;
}
/* Preview banner: unmistakably marks an unpublished draft without competing with the
   article it introduces. The article itself is the shared detail markup, untouched. */
.news-preview {
    padding-block: var(--space-3);
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
}
/* Amber carries the "not published yet" signal as a rule; the text itself stays in the
   brand colour so it clears AA against the subtle ground. */
.news-preview__notice {
    margin: 0;
    padding-left: var(--space-3);
    color: var(--color-brand-primary);
    font-size: 0.875rem;
    font-weight: 600;
    border-left: 3px solid var(--color-warning);
}

/* Related action closing the article: clearly separated from the last paragraph by a rule,
   and sized as a normal action rather than a banner. */
.news-detail__cta {
    max-width: 46rem;
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.news-detail__body .news-detail__cta:last-child {
    margin-bottom: 0;
}
.news-cta {
    font-size: 0.9375rem;
}

.competition-calendar-intro {
    padding-block: var(--space-6);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}
.competition-calendar-intro h1::before {
    display: block;
    width: 2rem;
    height: 3px;
    margin-bottom: var(--space-3);
    background: #006fc9;
    content: "";
}
.competition-calendar-intro h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-brand-primary);
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.competition-calendar-intro p {
    max-width: 48rem;
    margin: 0;
}
.competition-calendar {
    flex: 1;
    padding-block: var(--space-8);
    background: var(--color-surface);
}
.competition-calendar h2 {
    margin: 0 0 var(--space-4);
    color: var(--color-brand-primary);
}
.competition-calendar-empty {
    max-width: 48rem;
    margin: 0;
    color: var(--color-text-muted);
}
.competition-calendar-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.competition-calendar-event {
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}
.competition-calendar-event h3,
.competition-calendar-event p {
    max-width: 48rem;
    margin: 0 0 var(--space-2);
}
.competition-calendar-event > :last-child {
    margin-bottom: 0;
}
.competition-calendar-date {
    color: var(--color-brand-primary);
    font-weight: 700;
}
.competition-calendar-modality {
    color: var(--color-text-muted);
}
@media (min-width: 64rem) {
    .competition-calendar-intro {
        padding-block: var(--space-8);
    }
    .competition-calendar-intro h1 {
        font-size: clamp(2.25rem, 3vw, 2.5rem);
    }
}

.tariffs-page {
    color: var(--color-brand-primary);
    background: var(--color-surface);
}
.tariffs-intro {
    padding-block: var(--space-6) var(--space-4);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}
.tariffs-intro h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-primary);
    font-size: 1.875rem;
    line-height: 1.15;
}
.tariffs-intro > .container > p:not(.tariffs-eyebrow) {
    max-width: 48rem;
    margin: 0;
}
.tariffs-intro .tariffs-eyebrow {
    margin: 0 0 var(--space-2);
    color: #006fc9;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.tariffs-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-4);
}
.tariffs-index a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: var(--space-2);
    color: #006fc9;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.tariffs-index a:hover,
.tariffs-index a:focus-visible {
    color: var(--color-brand-primary);
}
@media (min-width: 48rem) {
    .tariffs-index {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-6);
    }
}
@media (min-width: 64rem) {
    .tariffs-intro h1 {
        font-size: clamp(2.25rem, 3vw, 2.5rem);
    }
}
.tariffs-section {
    padding-block: var(--space-8);
    scroll-margin-top: var(--space-4);
}
.tariffs-section h2 {
    margin-bottom: var(--space-2);
}
.tariffs-section__intro {
    margin: 0 0 var(--space-6);
    color: var(--color-text-muted);
    max-width: 72ch;
}
.tariffs-section--subtle {
    background: var(--color-surface-subtle);
}
.tariffs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
.tariffs-card {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-brand-accent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.tariffs-card h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.25rem;
    line-height: 1.3;
}
.tariffs-criterion,
.tariffs-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
.tariffs-schedule {
    margin-block: var(--space-3);
    font-size: 0.9375rem;
}
.tariffs-schedule p {
    margin: 0;
}
.tariffs-schedule__hours {
    font-weight: 700;
}
.tariffs-prices {
    margin: var(--space-3) 0 0;
    font-size: 0.9375rem;
}
.tariffs-prices > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.tariffs-prices dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tariffs-finance {
    margin-top: var(--space-2);
    font-size: 0.875rem;
}
.tariffs-finance summary {
    min-height: 2.75rem;
    padding-block: var(--space-3);
    color: var(--color-brand-primary);
    font-weight: 650;
    cursor: pointer;
}
.tariffs-finance summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.tariffs-finance dl {
    margin: 0;
}
.tariffs-finance dl > div {
    padding-block: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.tariffs-finance dd {
    margin: 0;
}
.tariffs-finance dd span {
    display: block;
    color: var(--color-text-muted);
}
.tariffs-context {
    margin: var(--space-4) 0 0;
    padding-inline-start: var(--space-3);
    border-inline-start: 3px solid var(--color-brand-accent);
    font-size: 0.9375rem;
}
.tariffs-team {
    display: grid;
    gap: var(--space-6);
}
.tariffs-categories {
    margin: 0;
}
.tariffs-categories > div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.tariffs-categories dt {
    font-weight: 700;
}
.tariffs-categories dd {
    margin: 0;
    font-size: 0.9375rem;
}
.tariffs-conditions {
    margin-top: var(--space-6);
    gap: var(--space-8);
}
.tariffs-conditions h3 {
    font-size: 1.25rem;
}
.tariffs-conditions ul {
    padding-inline-start: 1.25rem;
    margin: 0;
}
.tariffs-conditions li + li {
    margin-top: var(--space-4);
}
.tariffs-conditions small {
    display: block;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.tariffs-contact p {
    margin: 0;
}
.tariffs-contact .page-actions {
    margin-top: var(--space-6);
}
@media (min-width: 48rem) {
    .tariffs-grid,
    .tariffs-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tariffs-grid--modalities {
        align-items: start;
    }
    .tariffs-section {
        padding-block: var(--space-12);
    }
}
@media (min-width: 64rem) {
    .tariffs-grid--school,
    .tariffs-grid--modalities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tariffs-contact > .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }
    .tariffs-contact .page-actions {
        margin-top: 0;
    }
}

/* Gallery: natural image proportions, with reading order preserved. The header now uses
   the shared .visual-page-intro; only the grid styling stays here. */
/* Full-width surface, distinct from the header's --color-background, so the two areas
   read as separate blocks instead of merging into one continuous light-grey field. */
.gallery-photos {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.gallery-content {
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.gallery-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
}

.gallery-item {
    min-width: 0;
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

@media (min-width: 48rem) {
    .gallery-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .gallery-item:nth-child(odd) {
        grid-column: span 8;
    }

    .gallery-item:nth-child(even) {
        grid-column: span 4;
    }

    .gallery-item:nth-child(6n + 1):not(:first-child),
    .gallery-item:nth-child(6n + 3):not(:nth-child(3)) {
        grid-column: span 7;
    }

    .gallery-item:nth-child(6n + 2):not(:nth-child(2)),
    .gallery-item:nth-child(6n + 4):not(:nth-child(4)) {
        grid-column: span 5;
    }

    .gallery-item:nth-child(odd):has(+ .gallery-item--featured) {
        grid-column: span 5;
    }

    .gallery-item--featured:nth-child(even) {
        grid-column: span 7;
    }
}
/* Maintenance landing. A standalone page: navy ground, the official shield and the brand
   yellow as a single accent, using the same tokens and type scale as the rest of the site. */
.maintenance {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: var(--space-8) var(--container-padding);
    color: var(--color-text-inverse);
    background: var(--color-brand-primary);
    text-align: center;
}
.maintenance__panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    max-width: 38rem;
    margin-inline: auto;
}
.maintenance__logo {
    width: 5.25rem;
    height: auto;
    border-radius: var(--radius-sm);
}
.maintenance__identity {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-highlight);
}
.maintenance__heading {
    margin: 0;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    line-height: 1.15;
    /* The global h1 rule sets a dark, low-contrast color; overridden here, scoped to this
       page only, since it would otherwise win over the inherited navy-context color. */
    color: var(--color-text-inverse);
}
.maintenance__copy {
    margin: 0;
    max-width: 34rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #d6e2ee;
}
.maintenance__footer {
    padding-top: var(--space-8);
}
.maintenance__admin-link {
    color: #d6e2ee;
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.maintenance__admin-link:hover,
.maintenance__admin-link:active {
    color: var(--color-brand-highlight);
}
.maintenance__admin-link:focus-visible {
    outline: 2px solid var(--color-brand-highlight);
    outline-offset: 3px;
}
/* Staff entrance: the maintenance surface with a compact sign-in form on top. */
.admin-access {
    width: 100%;
    max-width: 24rem;
}
.admin-access__heading {
    font-size: clamp(1.5rem, 4vw, 2rem);
}
.admin-access__form {
    width: 100%;
    margin-top: var(--space-2);
    text-align: left;
}
.admin-access__field {
    margin-bottom: var(--space-4);
}
.admin-access__field label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
}
.admin-access__field input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
}
.admin-access__field input:focus-visible {
    outline: 2px solid var(--color-brand-highlight);
    outline-offset: 2px;
}
.admin-access__form button {
    width: 100%;
}
.admin-access__error {
    width: 100%;
    margin: 0;
    padding: var(--space-3);
    color: var(--color-text-inverse);
    background: var(--color-error);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
}
/* Legal documents: a single comfortable reading column with generous vertical rhythm, so a
   long policy stays scannable without turning into a wall of text. */
.legal-page {
    padding-block: var(--space-12);
}

.legal-page__document {
    max-width: 68ch;
    margin-inline: auto;
}

.legal-page__title {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-brand-primary);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.legal-page__section + .legal-page__section {
    margin-top: var(--space-12);
}

.legal-page__section > h2 {
    margin-bottom: var(--space-4);
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    line-height: 1.3;
}

.legal-page p {
    margin-bottom: var(--space-4);
    line-height: 1.7;
}

.legal-page p:last-child {
    margin-bottom: 0;
}

.legal-page__subsection {
    margin-top: var(--space-8);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-border);
}

.legal-page__subsection h3 {
    margin-bottom: var(--space-3);
    font-size: 1.0625rem;
    line-height: 1.4;
}

.legal-page__list {
    margin-bottom: var(--space-4);
    padding-inline-start: var(--space-6);
}

.legal-page__list li {
    margin-bottom: var(--space-2);
    line-height: 1.7;
}

.legal-page__list li:last-child {
    margin-bottom: 0;
}

/* Identification data reads as label/value pairs rather than a table. */
.legal-page__definitions {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
}

.legal-page__definitions > div + div {
    margin-top: var(--space-3);
}

.legal-page__definitions dt {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-page__definitions dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.legal-page__related {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.legal-page__related h2 {
    margin-bottom: var(--space-4);
    font-size: 1rem;
}

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

.legal-page__related a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.legal-page__related a:hover,
.legal-page__related a:active {
    color: #006fc9;
    border-color: currentColor;
    background: var(--color-surface-subtle);
}

.legal-page__related a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

@media (min-width: 48rem) {
    .legal-page__definitions > div {
        display: grid;
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        gap: var(--space-4);
        align-items: baseline;
    }
}