@charset "UTF-8";
/*
 *   Makueni Sports, Public Facing Design System
 *   Government Of Makueni County DevSecOps Band
 *
 *   Palette, nav treatment and radii follow ivas.makueni.go.ke so the two
 *   county platforms read as siblings. Fonts are the system stack rather
 *   than a downloaded webfont, to keep the public pages at zero external
 *   requests.
 *
 *   Layer order:
 *     1. Reset
 *     2. Design tokens
 *     3. Base elements
 *     4. Layout primitives
 *     5. Components
 *     6. Utilities
 *     7. Responsive
 *     8. Motion preferences
 */

/* ==========================================================================
   1. RESET
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Clears the sticky header, tricolour rule included, for in page anchors */
    scroll-padding-top: 5.5rem;
}

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

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

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

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

button {
    background: none;
    border: 0;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {

    /* --- Brand palette, lifted from ivas.makueni.go.ke ------------------- */
    --c-green: #1a7a4a;
    --c-green-dark: #14603a;
    --c-green-deep: #0b3d24;
    --c-green-soft: #e8f5ee;

    --c-gold: #fdd102;
    --c-amber: #d97706;
    --c-blue: #0d56a8;
    --c-red: #c0392b;

    /* --- Ink and surfaces ------------------------------------------------ */
    --c-ink: #1c2b23;
    --c-body: #33443a;
    --c-muted: #5c6d64;
    --c-line: #e3e9e6;
    --c-line-strong: #cfd9d4;

    --c-canvas: #f6f8f7;
    --c-surface: #ffffff;
    --c-surface-sunk: #eef2f0;
    --c-dark: #0b3d24;
    --c-darker: #082c1a;

    /* --- Broad category coding, drawn from the same four brand hues ------
       Lets the multidisciplinary spread read at a glance without
       introducing colours from outside the county palette.                 */
    --c-cat-outdoor: #1a7a4a;
    --c-cat-indoor: #0d56a8;
    --c-cat-pwd: #d97706;
    --c-cat-athletics: #c0392b;

    /* --- Fluid type scale ------------------------------------------------ */
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1rem);
    --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1.03rem + 0.47vw, 1.375rem);
    --fs-xl: clamp(1.375rem, 1.2rem + 0.87vw, 1.875rem);
    --fs-2xl: clamp(1.75rem, 1.42rem + 1.65vw, 2.75rem);
    --fs-3xl: clamp(2.125rem, 1.55rem + 2.87vw, 4rem);

    --lh-tight: 1.06;
    --lh-snug: 1.2;
    --lh-base: 1.65;

    --tr-tight: -0.03em;
    --tr-snug: -0.015em;
    --tr-wide: 0.06em;
    --tr-wider: 0.14em;

    /* --- Spacing scale --------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;

    --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

    /* --- Radii, matching the IVAS 14px family ----------------------------- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* --- Elevation --------------------------------------------------------- */
    --e-1: 0 1px 2px rgba(16, 45, 30, .05);
    --e-2: 0 1px 2px rgba(16, 45, 30, .05), 0 6px 24px rgba(16, 45, 30, .07);
    --e-3: 0 12px 40px rgba(16, 45, 30, .16);

    /* --- Focus ring --------------------------------------------------------- */
    --ring: 0 0 0 3px #fff, 0 0 0 6px var(--c-green);
    --ring-on-dark: 0 0 0 3px var(--c-green-deep), 0 0 0 6px var(--c-gold);

    /* --- Layout -------------------------------------------------------------- */
    --wrap: 1200px;
    --wrap-narrow: 760px;
    --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

    /* --- Fonts ----------------------------------------------------------------
       Outfit is self hosted as a single variable woff2 (latin subset, 31KB)
       and carries headings and interface furniture. Body copy stays on the
       system stack, which costs nothing and reads well at small sizes.
       The @font-face rules live in the inline critical CSS so their relative
       url() resolves against the document rather than this file.            */
    --ff: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ff-display: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ff-num: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

    /* --- Sports mosaic, drawn as a flat vector tile ------------------------
       Used at very low contrast behind page headers. No network request.   */
    --mosaic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' opacity='.13'%3E%3Ccircle cx='30' cy='28' r='10'/%3E%3Cpath d='M30 18l5 7-2 8h-6l-2-8z'/%3E%3Ccircle cx='96' cy='34' r='10'/%3E%3Cpath d='M96 24v20M87 29c5 4 5 6 0 10M105 29c-5 4-5 6 0 10'/%3E%3Ccircle cx='160' cy='26' r='10'/%3E%3Cpath d='M152 20c7 3 11 9 12 18M168 20c-7 3-11 9-12 18'/%3E%3Cpath d='M203 18h16v6a8 8 0 01-16 0zM207 30v6h8v-6M204 40h14'/%3E%3Cpath d='M22 78h18v10H22zM26 78v10M31 78v10M36 78v10M22 83h18'/%3E%3Ccircle cx='92' cy='86' r='9'/%3E%3Cpath d='M92 77v18M83 86h18'/%3E%3Cpath d='M150 76a8 8 0 100 16h14v-16zM164 80l8-3v10l-8-3'/%3E%3Cpath d='M204 74l6 12h-12zM210 86v8M204 98h12'/%3E%3Ccircle cx='34' cy='140' r='10'/%3E%3Cpath d='M24 140h20M34 130c5 5 5 15 0 20M34 130c-5 5-5 15 0 20'/%3E%3Cpath d='M88 132h14v8a7 7 0 01-14 0zM91 148h8M89 154h12'/%3E%3Ccircle cx='158' cy='140' r='10'/%3E%3Cpath d='M149 135c6 2 12 2 18 0M149 145c6-2 12-2 18 0'/%3E%3Cpath d='M200 130l10 6-10 6zM210 136h10'/%3E%3Ccircle cx='28' cy='196' r='9'/%3E%3Cpath d='M28 187v18M19 196h18M22 190l12 12M34 190l-12 12'/%3E%3Cpath d='M84 188h16l-3 14H87zM92 202v8M86 214h12'/%3E%3Ccircle cx='156' cy='194' r='10'/%3E%3Cpath d='M147 189c6 3 12 3 18 0M147 199c6-3 12-3 18 0M156 184v20'/%3E%3Cpath d='M198 186c8 0 12 5 12 10s-4 10-12 10M198 186v20M210 196h8'/%3E%3C/g%3E%3C/svg%3E");

    --dur: 200ms;
    --ease: cubic-bezier(.2, .6, .3, 1);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
    font-family: var(--ff);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-body);
    background: var(--c-canvas);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--ff-display);
    color: var(--c-ink);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-snug);
    text-wrap: balance;
}

/* Interface furniture rides the display face too, for a single voice */
.btn,
.nav__link,
.nav-panel__link,
.brand__name,
.eyebrow,
.stat__n,
.stat__label,
.field__label,
.segmented__item,
.tbl thead th,
.site-footer h2 {
    font-family: var(--ff-display);
}

p {
    text-wrap: pretty;
}

a {
    color: var(--c-green);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-green-dark);
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-sm);
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.masthead :focus-visible {
    box-shadow: var(--ring-on-dark);
}

::selection {
    background: var(--c-green-soft);
    color: var(--c-green-deep);
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100%;
    z-index: 200;
    background: var(--c-green);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

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

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow {
    max-width: var(--wrap-narrow);
}

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

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

.section--soft {
    background: var(--c-green-soft);
}

.section--dark {
    background: var(--c-dark);
    color: #cbdcd2;
}

.section--dark h2,
.section--dark h3 {
    color: #fff;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
}

.sec-head__text {
    max-width: 62ch;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: var(--sp-3);
}

.section--dark .eyebrow,
.hero .eyebrow,
.masthead .eyebrow {
    color: var(--c-gold);
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    flex: none;
    opacity: .9;
}

.sec-title {
    font-size: var(--fs-2xl);
    letter-spacing: var(--tr-tight);
}

.sec-sub {
    margin-top: var(--sp-3);
    font-size: var(--fs-md);
    color: var(--c-muted);
}

.section--dark .sec-sub {
    color: #a4bcaf;
}

/* --- The county tricolour rule --------------------------------------------
   The same green / gold / blue proportions used on ivas.makueni.go.ke.     */
.tricolour {
    height: 4px;
    background: linear-gradient(90deg,
            var(--c-green) 0%, var(--c-green) 40%,
            var(--c-gold) 40%, var(--c-gold) 70%,
            var(--c-blue) 70%, var(--c-blue) 100%);
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 46px;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--primary {
    background: var(--c-green);
    color: #fff;
}

.btn--primary:hover {
    background: var(--c-green-dark);
    color: #fff;
}

.btn--gold {
    background: var(--c-gold);
    color: var(--c-ink);
}

.btn--gold:hover {
    background: #ffe14a;
    color: var(--c-ink);
}

.btn--outline {
    border-color: var(--c-line-strong);
    color: var(--c-ink);
    background: var(--c-surface);
}

.btn--outline:hover {
    border-color: var(--c-green);
    color: var(--c-green-dark);
}

.btn--ghost {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.btn--sm {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
}

.btn__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: none;
}

/* --- Chips ---------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 38px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.chip:hover {
    border-color: var(--c-green);
    color: var(--c-green-dark);
}

.chip__n {
    font-family: var(--ff-num);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
}

.chip--ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #eef5f1;
}

.chip--ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.chip--ghost .chip__n {
    color: #b8cdc1;
}

/* Discipline tag, colour coded by broad category */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: #fff;
    background: var(--c-green);
}

.tag[data-cat="1"] {
    background: var(--c-cat-outdoor);
}

.tag[data-cat="2"] {
    background: var(--c-cat-indoor);
}

.tag[data-cat="3"] {
    background: var(--c-cat-pwd);
}

.tag[data-cat="4"] {
    background: var(--c-cat-athletics);
}

/* --- Site header, following the IVAS nav treatment ------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--c-line);
}

/* County tricolour rule. It is a normal flow child of the sticky header, so
   it always occupies its own 4px band and is included in the sticky offset.
   position/z-index keep it painted above the header's own translucent
   background and backdrop filter layer rather than behind them. */
.site-header::before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    height: 4px;
    flex: none;
    background: linear-gradient(90deg,
            var(--c-green) 0%, var(--c-green) 40%,
            var(--c-gold) 40%, var(--c-gold) 70%,
            var(--c-blue) 70%, var(--c-blue) 100%);
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding-block: var(--sp-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--c-ink);
    flex: none;
}

.brand__mark {
    height: 46px;
    width: auto;
}

.brand__text {
    display: none;
    flex-direction: column;
    line-height: 1.2;
}

.brand__name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-ink);
}

.brand__sub {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
}

.nav {
    display: none;
    margin-left: auto;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--c-green);
}

.nav__link[aria-current="page"] {
    font-weight: 600;
}

.nav-cta {
    display: none;
    align-items: center;
    gap: var(--sp-2);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: var(--r-sm);
    color: var(--c-ink);
    border: 1px solid var(--c-line-strong);
}

.nav-toggle svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

.nav-panel {
    display: none;
    padding-bottom: var(--sp-5);
}

.nav-panel.is-open {
    display: block;
}

.nav-panel__list>li+li {
    border-top: 1px solid var(--c-line);
}

.nav-panel__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
}

.nav-panel__link[aria-current="page"] {
    color: var(--c-green);
    font-weight: 600;
}

.nav-panel .btn {
    width: 100%;
    margin-top: var(--sp-4);
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
    position: relative;
    background: var(--c-darker);
    color: #fff;
    isolation: isolate;
    /* Contains the slides. Without this a slide that is taller than the hero
       box spills below the ::before gradient, which is inset 0 on this element
       and therefore only ever covers the hero itself. Also stops a neighbour
       showing during a transition. */
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 900ms var(--ease);
}

.hero__slide.is-active {
    opacity: 1;
}

/* public_picture() wraps the image in <picture>, which the reset sets to
   display block but leaves at height auto. A percentage height on the image
   cannot resolve against that, so it fell back to the intrinsic aspect ratio
   and overflowed the hero. Positioning the wrapper against the slide gives the
   image a definite box to fill. */
.hero__slide picture {
    position: absolute;
    inset: 0;
    display: block;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* --- The hero scrim -------------------------------------------------------
   Two jobs pulling against each other: hold white text at an accessible
   contrast, and let the photograph actually be seen.

   The old wash sat at .84 across the middle of the frame and .42 at the far
   edge, which held the text easily but left the picture behind it in the dark.
   It now falls away far sooner, so the right two thirds of the photograph read
   at close to full strength, and the weight that is left is concentrated in the
   left column where the words actually sit. .hero__content carries its own
   backing besides, so contrast does not depend on this gradient alone.       */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(8, 44, 26, .90) 0%, rgba(8, 44, 26, .66) 30%, rgba(8, 44, 26, .22) 58%, rgba(8, 44, 26, .10) 100%),
        linear-gradient(to top, rgba(8, 44, 26, .78) 0%, rgba(8, 44, 26, 0) 55%);
}

.hero__inner {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
    min-height: clamp(540px, 76vh, 740px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__content {
    position: relative;
    max-width: 42ch;
}

/* A soft pool of shade behind the words alone. It lets the scrim above stay
   light across the rest of the frame without the title ever landing on a pale
   patch of photograph. Blurred and inset, so it reads as depth rather than a
   panel with edges. */
.hero__content::before {
    content: "";
    position: absolute;
    inset: -8% -14% -10% -18%;
    z-index: -1;
    background: radial-gradient(120% 100% at 22% 50%, rgba(5, 32, 19, .70) 0%, rgba(5, 32, 19, .42) 55%, rgba(5, 32, 19, 0) 100%);
    filter: blur(6px);
    pointer-events: none;
}

.hero__title {
    color: #fff;
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    margin-bottom: var(--sp-4);
}

.hero__title em {
    font-style: normal;
    color: var(--c-gold);
}

.hero__lede {
    font-size: var(--fs-md);
    color: #cfded5;
    max-width: 48ch;
    margin-bottom: var(--sp-4);
}

/*
 * The department's hashtag, which is a rallying cry rather than a sentence, so it is set apart from
 * the lede rather than tacked onto the end of it. Uppercase and letter-spaced because it is read as
 * a mark; the gold rule under it ties it to the primary call to action directly below.
 */
.hero__tag {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gold);
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    margin-bottom: var(--sp-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.hero__rail {
    margin-top: var(--sp-8);
}

.hero__rail-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: #9fb6a8;
    margin-bottom: var(--sp-3);
}

.hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hero__controls {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-7);
}

.hero__dot {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero__dot::after {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .35);
    transition: background var(--dur) var(--ease);
}

.hero__dot[aria-selected="true"]::after {
    background: var(--c-gold);
}

.hero__dot:hover::after {
    background: rgba(255, 255, 255, .75);
}

/* --- Fixture card ----------------------------------------------------------
   320px  single column, teams stacked, meta wraps beneath
   768px  two up
   1200px three up in the match centre, four across the landing rail        */
.fixture {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--e-1);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.fixture:hover {
    box-shadow: var(--e-2);
    border-color: var(--c-line-strong);
}

.fixture__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}

.fixture__comp {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixture__body {
    padding: var(--sp-4);
    flex: 1;
}

.fixture__side {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
}

.fixture__side+.fixture__side {
    border-top: 1px solid var(--c-line);
}

.fixture__team {
    font-weight: 600;
    color: var(--c-ink);
    font-size: var(--fs-base);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fixture__score {
    font-family: var(--ff-num);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-ink);
    flex: none;
    min-width: 2ch;
    text-align: right;
}

.fixture__verdict {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-green-dark);
}

.fixture__vs {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    color: var(--c-muted);
    text-align: center;
    padding-block: var(--sp-1);
}

.fixture__meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-line);
    background: #fafbfa;
}

.fixture__meta-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    min-width: 0;
}

.fixture__meta-row svg {
    width: 14px;
    height: 14px;
    fill: var(--c-green);
    opacity: .75;
    flex: none;
}

.fixture__meta-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixture__when {
    font-family: var(--ff-num);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
}

.fixture--cancelled {
    opacity: .72;
}

.fixture--cancelled .fixture__team {
    text-decoration: line-through;
    text-decoration-color: var(--c-red);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    flex: none;
}

.status--upcoming {
    background: var(--c-green-soft);
    color: var(--c-green-dark);
}

.status--result {
    background: #fdf3d6;
    color: #7a5900;
}

.status--final {
    background: var(--c-ink);
    color: #fff;
}

.status--cancelled {
    background: #fbe7e4;
    color: #96271b;
}

.status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Landing rail: scroll snap on small screens, grid from 768px */
.fixture-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 82%);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
}

.fixture-rail>* {
    scroll-snap-align: start;
}

/* --- Grids ------------------------------------------------------------------ */
.grid {
    display: grid;
    gap: var(--sp-4);
}

.grid--fixtures,
.grid--cards {
    grid-template-columns: 1fr;
}

/* --- Stat band --------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.stat {
    background: var(--c-dark);
    padding: var(--sp-5) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.stat__n {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--c-gold);
}

.stat__note {
    font-size: var(--fs-xs);
    color: #93aa9c;
}

/* --- Discipline blocks --------------------------------------------------------- */
.disc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

/* --- Programmes -------------------------------------------------------------
   The interventions page. A card per programme rather than a bullet, because
   most of them carry a line of explanation and a bulleted list of nineteen with
   sub-clauses is unreadable. The gold rule down the left is what makes a run of
   them scan as a set at a glance. */
.prog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.prog {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-gold);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}

.prog__name {
    font-size: var(--fs-md);
    letter-spacing: var(--tr-snug);
    margin: 0;
}

.prog__note {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin: var(--sp-2) 0 0;
}

/* --- Published documents ----------------------------------------------------
   A row per document, and the whole row is the link. A download is one action,
   so splitting it into a title that does nothing and a small "download" link
   beside it just makes a smaller target for the same job. */
.doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.doc__link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
}

.doc__link {
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.doc__link:hover {
    border-color: var(--c-green);
    box-shadow: var(--e-2);
}

/* The extension as a plate rather than an icon font, so a docx and an xlsx are
   told apart without shipping a sprite for every office format. */
.doc__type {
    flex: 0 0 auto;
    min-width: 3.25rem;
    text-align: center;
    font-family: var(--ff-num);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-green-deep);
    background: var(--c-surface-sunk);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-2);
}

.doc__body {
    flex: 1 1 auto;
    display: block;
}

.doc__title {
    display: block;
    font-weight: 600;
    letter-spacing: var(--tr-snug);
}

.doc__note {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin-top: 2px;
}

.doc__meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: var(--sp-2);
}

.doc__arrow {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
    opacity: .5;
}

.disc-block {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.disc-block__head {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    border-top: 3px solid var(--c-green);
}

.disc-block[data-cat="1"] .disc-block__head {
    border-top-color: var(--c-cat-outdoor);
}

.disc-block[data-cat="2"] .disc-block__head {
    border-top-color: var(--c-cat-indoor);
}

.disc-block[data-cat="3"] .disc-block__head {
    border-top-color: var(--c-cat-pwd);
}

.disc-block[data-cat="4"] .disc-block__head {
    border-top-color: var(--c-cat-athletics);
}

.disc-block__name {
    font-size: var(--fs-lg);
    letter-spacing: var(--tr-snug);
}

.disc-block__count {
    font-family: var(--ff-num);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}

.disc-block__body {
    padding: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    flex: 1;
    align-content: flex-start;
}

/* --- Coverage bars ------------------------------------------------------------- */
.coverage {
    display: grid;
    gap: var(--sp-5);
}

.cov {
    display: grid;
    gap: var(--sp-2);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}

.cov__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.cov__name {
    font-weight: 700;
    color: var(--c-ink);
    font-size: var(--fs-md);
}

.cov__nums {
    font-family: var(--ff-num);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    white-space: nowrap;
}

.cov__bar {
    height: 6px;
    background: var(--c-surface-sunk);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.cov__fill {
    height: 100%;
    background: var(--c-green);
    border-radius: var(--r-pill);
}

/* --- Media cards / gallery ------------------------------------------------------ */
.media-card {
    position: relative;
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-dark);
}

/* Same wrapper issue as the hero. These boxes carry a definite height via
   aspect-ratio, so the <picture> has to pass it down or object-fit never gets
   a box to cover and the crop is wrong. Clipped by overflow hidden either way,
   so this shows as a bad crop rather than a bleed. */
.media-card picture {
    display: block;
    height: 100%;
}

.media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}

.media-card:hover img {
    transform: scale(1.04);
}

.media-card__cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
    background: linear-gradient(to top, rgba(8, 44, 26, .9), rgba(8, 44, 26, 0));
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}

.gallery .media-card {
    aspect-ratio: 4 / 3;
}

.gallery .media-card--tall {
    aspect-ratio: 3 / 4;
}

/* --- Feature split ---------------------------------------------------------------- */
.split {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}

.split__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--e-2);
}

.split__media img {
    width: 100%;
    height: auto;
}

/* --- Panels and empty states ---------------------------------------------------------- */
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-9) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}

.empty__icon {
    width: 40px;
    height: 40px;
    fill: var(--c-green);
    opacity: .45;
}

.empty__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-ink);
}

.empty__text {
    color: var(--c-muted);
    max-width: 48ch;
}

.section--dark .empty {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .14);
}

.section--dark .empty__title {
    color: #fff;
}

.section--dark .empty__text {
    color: #a4bcaf;
}

.section--dark .empty__icon {
    fill: var(--c-gold);
    opacity: .6;
}

/* --- Filters -------------------------------------------------------------------------- */
.filters {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.filters__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}

.field__label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--c-muted);
}

.field select,
.field input {
    width: 100%;
    min-height: 46px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-sm);
}

.field select:focus-visible,
.field input:focus-visible {
    border-color: var(--c-green);
}

.filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
}

.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    gap: 2px;
    flex-wrap: wrap;
}

.segmented__item {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    text-decoration: none;
}

.segmented__item:hover {
    color: var(--c-ink);
}

.segmented__item[aria-current="true"] {
    background: var(--c-green);
    color: #fff;
}

.result-count {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin-bottom: var(--sp-4);
}

.result-count b {
    color: var(--c-ink);
}

/* --- Page masthead ---------------------------------------------------------------------- */
.masthead {
    position: relative;
    background: var(--c-dark);
    color: #fff;
    padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem);
    isolation: isolate;
    overflow: hidden;
}

/* Mosaic of sport motifs, tiled densely at very low contrast, with the
   brand wash laid over it so heading text keeps a wide contrast margin. */
.masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--mosaic);
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: .5;
}

.masthead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 140% at 10% 0%, rgba(26, 122, 74, .55) 0%, rgba(11, 61, 36, .1) 60%),
        radial-gradient(70% 120% at 92% 100%, rgba(13, 86, 168, .35) 0%, rgba(11, 61, 36, .1) 58%);
}

.masthead__title {
    color: #fff;
    font-size: var(--fs-2xl);
    letter-spacing: var(--tr-tight);
}

.masthead__lede {
    margin-top: var(--sp-3);
    color: #b3c8bc;
    max-width: 62ch;
    font-size: var(--fs-md);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: #8ba699;
    margin-bottom: var(--sp-3);
}

.crumbs a {
    color: #b3c8bc;
    text-decoration: none;
}

.crumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Data tables and standings ------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.tbl {
    min-width: 640px;
    font-size: var(--fs-sm);
}

.tbl th,
.tbl td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--c-line);
}

.tbl thead th {
    background: var(--c-surface-sunk);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--c-muted);
    white-space: nowrap;
}

.tbl tbody tr:last-child td {
    border-bottom: 0;
}

.tbl tbody tr:hover {
    background: #fafbfa;
}

.tbl__num {
    font-family: var(--ff-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Standings specifics */
.tbl--standings th:not(:nth-child(2)),
.tbl--standings td:not(:nth-child(2)) {
    text-align: center;
}

.tbl--standings .stand__pos {
    font-family: var(--ff-num);
    font-weight: 700;
    color: var(--c-muted);
}

.tbl--standings tbody tr:nth-child(-n+3) .stand__pos {
    color: var(--c-green);
}

.tbl--standings .stand__team {
    font-weight: 600;
    color: var(--c-ink);
}

.tbl--standings .stand__pts {
    font-weight: 700;
    color: var(--c-ink);
}

/* Stacked table blocks, one per discipline.
   The column is pinned to minmax(0, 1fr) on purpose. An implicit auto track
   grows to its content's max-content width, and a standings table's
   max-content runs to well over 1800px. overflow-x auto on .table-wrap zeroes
   the minimum contribution but not the max-content one, so without this the
   track blows the whole page out horizontally on narrow screens. */
.stack-lg {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
}

.table-block {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.table-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.table-block__title {
    font-size: var(--fs-lg);
}

.table-block__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.table-block__link:hover {
    text-decoration: underline;
}

.table-block .table-wrap {
    border-radius: var(--r-md);
}

.cov__link {
    margin: 0;
    font-size: var(--fs-xs);
}

.table-note {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.section--dark .table-note {
    color: #a4bcaf;
}

.form-run {
    display: inline-flex;
    gap: 3px;
}

.form-run i {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--c-muted);
}

.form-run i[data-r="W"] {
    background: var(--c-green);
}

.form-run i[data-r="D"] {
    background: var(--c-amber);
}

.form-run i[data-r="L"] {
    background: var(--c-red);
}

/* --- Pagination -------------------------------------------------------------------------- */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-7);
}

.pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.pager__link:hover {
    border-color: var(--c-green);
    color: var(--c-green-dark);
}

.pager__link[aria-current="page"] {
    background: var(--c-green);
    border-color: var(--c-green);
    color: #fff;
}

/* --- Prose --------------------------------------------------------------------------------- */
.prose {
    max-width: 68ch;
    font-size: var(--fs-md);
    color: var(--c-body);
}

.prose p+p {
    margin-top: var(--sp-4);
}

.prose h2 {
    font-size: var(--fs-xl);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.prose h3 {
    font-size: var(--fs-lg);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
}

.prose ul {
    list-style: none;
    padding: 0;
    margin-top: var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}

.prose ul li {
    position: relative;
    padding-left: var(--sp-6);
}

.prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 10px;
    height: 2px;
    background: var(--c-green);
}

/* --- Footer ---------------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    background: var(--c-dark);
    color: #9db3a6;
    padding-block: var(--sp-8) var(--sp-6);
    isolation: isolate;
    overflow: hidden;
}

/*
 * The Same Mosaic The Breadcrumb Band Carries
 *
 * The masthead and the footer are the two dark bands that top and tail a page, so they are given the
 * same treatment and the page reads as bookended rather than as two unrelated dark strips.
 *
 * Held back from the masthead's .5 though. The masthead carries a large white heading over it and
 * can afford the texture; the footer carries small muted link text at #9db3a6, and at the same
 * opacity the motifs start competing with the words. The wash over the top is the masthead's, at
 * roughly half strength, for the same reason.
 */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--mosaic);
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: .28;
}

.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 140% at 10% 0%, rgba(26, 122, 74, .3) 0%, rgba(11, 61, 36, .1) 60%),
        radial-gradient(70% 120% at 92% 100%, rgba(13, 86, 168, .2) 0%, rgba(11, 61, 36, .1) 58%);
}

.site-footer h2 {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: var(--sp-4);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
}

.footer__intro {
    margin-top: var(--sp-4);
    max-width: 40ch;
    font-size: var(--fs-sm);
}

.footer__list {
    display: grid;
    gap: var(--sp-1);
}

.footer__list a {
    color: #cbdcd2;
    text-decoration: none;
    font-size: var(--fs-sm);
    display: inline-flex;
    min-height: 34px;
    align-items: center;
}

.footer__list a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer__bottom {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: space-between;
    font-size: var(--fs-xs);
}

.footer__mark {
    width: 168px;
    height: auto;
    /* The official mark is printed for a light ground, so it is lifted
       onto a white plate rather than recoloured. */
    background: #fff;
    padding: var(--sp-3);
    border-radius: var(--r-md);
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

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

.mt-4 {
    margin-top: var(--sp-4);
}

.mt-6 {
    margin-top: var(--sp-6);
}

.mt-7 {
    margin-top: var(--sp-7);
}

.mt-8 {
    margin-top: var(--sp-8);
}

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

.sprite {
    display: none;
}

/* ==========================================================================
   7. RESPONSIVE, deliberate breakpoints rather than accidental reflow
   ========================================================================== */

/* 560px : two up cards, gallery gains a column, stats become a four across band */
@media (min-width: 35em) {

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

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

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

    .stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .brand__text {
        display: flex;
    }
}

/* 768px : the fixture rail stops being a carousel and becomes a grid */
@media (min-width: 48em) {
    .fixture-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        scroll-snap-type: none;
    }

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

    .coverage {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--sp-7);
    }

    .split {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-8);
    }

    .split--reverse .split__media {
        order: 2;
    }

    .footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

/* 992px : full desktop nav, three up match centre */
@media (min-width: 62em) {

    .nav,
    .nav-cta {
        display: flex;
    }

    .nav-toggle,
    .nav-panel {
        display: none !important;
    }

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

    .fixture-rail {
        grid-template-columns: repeat(4, 1fr);
    }

    /* auto-fit, so an empty broad category never leaves a hole */
    .disc-grid,
    .prog-grid {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .filters__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }

    .masthead__title {
        font-size: var(--fs-3xl);
    }
}

/* 1200px+ : the hero copy can breathe wider */
@media (min-width: 75em) {
    .hero__content {
        max-width: 46ch;
    }
}

/* ==========================================================================
   8. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .hero__slide {
        transition: none;
    }

    .media-card:hover img {
        transform: none;
    }
}

/* ==========================================================================
   9. PRINT
   ========================================================================== */

@media print {

    .site-header,
    .site-footer,
    .filters,
    .hero__controls,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* --- Photography mosaic ---------------------------------------------------
   The county's own photography, shown dense rather than as a tidy row of
   thumbnails: this is a sports register and the pictures are the evidence
   that the register describes real fixtures.

   grid-auto-flow: dense lets the wide frames claim two columns without
   leaving holes behind them. Every tile crops to a common ratio so the rows
   stay level whatever the source aspect was.                              */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    grid-auto-flow: dense;
}

@media (min-width: 40em) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 64em) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-4);
    }
}

.gallery__item {
    position: relative;
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-surface-sunk);
}

.gallery__item picture,
.gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery__item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}

/* Every fifth frame runs wide, so the grid reads as a mosaic rather than a
   contact sheet. :nth-child is enough here - the order is fixed by the set. */
.gallery__item--wide {
    grid-column: span 2;
}

.gallery__item--wide img {
    aspect-ratio: 16 / 9;
}

@media (min-width: 64em) {
    .gallery__item--tall {
        grid-row: span 2;
    }

    .gallery__item--tall img {
        aspect-ratio: 3 / 4;
        height: 100%;
    }
}

@media (hover: hover) {
    .gallery__item:hover img {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {

    .gallery__item img {
        transition: none;
    }

    .gallery__item:hover img {
        transform: none;
    }
}

/* --- Searchable select ----------------------------------------------------
   Applied by sports.js to any filter select long enough to be worth typing
   into. Without JavaScript none of this exists and the native select shows,
   so nothing here is load bearing.                                        */
.combo {
    position: relative;
}

/* The native control still carries the value and submits with the form, so it
   is taken out of view rather than out of the document. */
.combo__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.combo__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23577' stroke-width='1.6'%3E%3Cpath d='M6.6 11.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2ZM10 10l4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 16px 16px;
    padding-right: calc(var(--sp-3) * 2 + 16px);
}

.combo__list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--sp-1);
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 28px rgba(6, 24, 15, .16);
    overscroll-behavior: contain;
}

.combo__opt {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    cursor: pointer;
}

.combo__opt.is-active {
    background: var(--c-green-soft);
}

.combo__opt[aria-selected="true"] {
    font-weight: 700;
    color: var(--c-green);
}

.combo__empty {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* A phone has the least room to spare, so the list gets more of the viewport
   and the rows grow to a comfortable tap target. */
@media (max-width: 40em) {
    .combo__list {
        max-height: 50vh;
    }

    .combo__opt {
        padding: var(--sp-3);
    }
}

/* --- Blue, and where it belongs -------------------------------------------
   The county tricolour is green, gold and blue, but blue only ever appeared in
   the 4px rule itself, so the palette read as two colours and a stripe.

   It is given one meaning rather than sprinkled: place. The coverage section is
   the only part of the site about geography rather than sport, so its bars, its
   eyebrow and its links carry the blue, and nothing else does. Green stays the
   colour of play, gold the colour of winning.                               */
#h-coverage,
.section--coverage .eyebrow {
    color: var(--c-blue);
}

.section--coverage .cov__fill {
    background: var(--c-blue);
}

.section--coverage .cov__link a {
    color: var(--c-blue);
}

/* The count beside each sub county name, so the figure reads as place too */
.section--coverage .cov__nums {
    color: var(--c-blue);
}

/* The band keeps a blue edge rather than the default sunk grey, which is what
   ties the section to the third colour of the tricolour above it. */
.section--coverage {
    border-top: 3px solid var(--c-blue);
}

/* --- Gallery lightbox -----------------------------------------------------
   The dialog is injected by sports.js on first open, so none of this applies
   until a visitor asks for it.                                             */
.gallery__zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.gallery__zoom:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

/* The page behind must not scroll while the dialog is up */
.has-lightbox,
.has-lightbox body {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: rgba(4, 20, 12, .94);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    color: #fff;
}

.lightbox__count {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: #cbdcd2;
}

.lightbox__stage {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-sm);
}

.lightbox__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--r-pill);
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.lightbox__btn svg {
    width: 24px;
    height: 24px;
}

.lightbox__btn:hover {
    background: rgba(255, 255, 255, .22);
}

.lightbox__btn:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

.lightbox__prev {
    grid-column: 1;
    grid-row: 2;
}

.lightbox__next {
    grid-column: 3;
    grid-row: 2;
}

/* On a phone the arrows sit under the picture rather than pinching its width,
   and a swipe does the moving anyway. */
@media (max-width: 40em) {
    .lightbox {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .lightbox__stage {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .lightbox__prev {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }

    .lightbox__next {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
}

/* On a phone the words fill the frame edge to edge, so there is no uncovered
   right hand side to protect and the local pool behind the text has to do more
   of the work. Measured off the rendered pixels: the lightened scrim alone left
   the worst patch under the lede at 3.67:1, which carries the large title but
   not body sized copy. This lifts the whole content box clear of 4.5:1 while
   leaving the desktop treatment, which already passes, untouched. */
@media (max-width: 40em) {
    .hero__content::before {
        inset: -6% -20% -8% -24%;
        background: radial-gradient(140% 120% at 40% 50%, rgba(5, 32, 19, .86) 0%, rgba(5, 32, 19, .72) 60%, rgba(5, 32, 19, .30) 100%);
    }
}


/* ==========================================================================
   Leadership

   A directory of offices, not a photo wall. The portrait is a supporting detail
   and the name and title are the content, so the card leads with text weight and
   the picture is a fixed square that crops to fill rather than dictating the
   card's height.

   An office can be filled before anybody has taken a photograph, so the empty
   state is the holder's initials on the brand green. A grey silhouette reads as
   a fault in the page; initials read as a person whose picture is still to come.
   ========================================================================== */
.leaders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.leader {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.leader__portrait {
    aspect-ratio: 1 / 1;
    background: var(--c-surface-sunk);
    overflow: hidden;
}

.leader__portrait picture,
.leader__portrait img {
    display: block;
    width: 100%;
    height: 100%;
}

.leader__portrait img {
    object-fit: cover;
    /* Faces sit in the upper half of a portrait far more often than the middle */
    object-position: center 30%;
}

.leader__portrait--none {
    display: grid;
    place-items: center;
    background: var(--c-green-soft);
}

.leader__initials {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--c-green-dark);
}

.leader__text {
    padding: 1rem 1.15rem 1.25rem;
}

.leader__name {
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0 0 .2rem;
}

.leader__title {
    font-size: .9375rem;
    color: var(--c-muted);
    margin: 0;
}

.leader__message {
    font-size: .9375rem;
    line-height: 1.6;
    margin: .75rem 0 0;
}

/* ==========================================================================
   Contact directory and enquiry form
   ========================================================================== */
.contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: .75rem;
    padding: 1.25rem;
}

.contact-card__dept {
    font-size: 1.0625rem;
    margin: 0 0 .15rem;
}

.contact-card__role {
    font-size: .9375rem;
    color: var(--c-muted);
    margin: 0 0 .75rem;
}

.contact-card__lines {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .75rem;
    margin: 0;
    font-size: .9375rem;
}

.contact-card__lines dt {
    color: var(--c-muted);
    font-weight: 500;
}

.contact-card__lines dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.enquiry {
    max-width: 46rem;
}

.enquiry__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 1.25rem;
}

.enquiry .field {
    margin-bottom: 1.1rem;
}

.enquiry .field--narrow {
    max-width: 18rem;
}

.enquiry label {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    margin-bottom: .35rem;
}

.enquiry input,
.enquiry textarea {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: .45rem;
}

.enquiry input:focus-visible,
.enquiry textarea:focus-visible {
    outline: 2px solid var(--c-green);
    outline-offset: 1px;
}

.enquiry textarea {
    resize: vertical;
}

.enquiry .req {
    color: var(--c-red);
}

.enquiry .field__hint {
    font-size: .875rem;
    color: var(--c-muted);
    margin: .35rem 0 0;
}

.enquiry__actions {
    margin: .5rem 0 1rem;
}

.enquiry__note {
    font-size: .875rem;
    color: var(--c-muted);
    margin: 0;
}

/*
   The honeypot.

   Moved off screen rather than display:none or hidden, because the better bots
   skip anything they can tell is not rendered. This is painted, just nowhere a
   person will ever look, and aria-hidden with tabindex="-1" on the input keeps
   it away from screen readers and the keyboard both.
*/
.enquiry__trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    padding: .9rem 1.1rem;
    border-radius: .5rem;
    margin: 0 0 1.25rem;
    border: 1px solid transparent;
}

.notice--ok {
    background: var(--c-green-soft);
    border-color: var(--c-green);
    color: var(--c-green-deep);
}

.notice--bad {
    background: #fdecea;
    border-color: var(--c-red);
    color: #7f1d1d;
}

/* ==========================================================================
   Contact: details beside the form

   Half and half on a wide screen so the whole page is one view and nobody
   scrolls to find either. They stack on a phone, details first, because
   somebody reaching for a telephone number should not scroll past a form to
   get it.
   ========================================================================== */
.contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 56em) {
    .contact-split {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

.contact-lines {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1rem;
    margin: 1.25rem 0 0;
    font-size: 1rem;
}

.contact-lines dt {
    color: var(--c-muted);
    font-weight: 600;
}

.contact-lines dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The form fills its own column rather than the old fixed measure */
.contact-split .enquiry {
    max-width: none;
}

/* ==========================================================================
   Gallery pagination

   Real links with real hrefs, so a crawler follows them and a keyboard reaches
   them. The current page is marked with aria-current and is not a link, which
   is the difference between a control that says where you are and one that
   pretends you can go there.
   ========================================================================== */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.pager li {
    margin: 0;
}

.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 .7rem;
    border: 1px solid var(--c-line-strong);
    border-radius: .4rem;
    text-decoration: none;
    font-size: .9375rem;
    line-height: 1;
}

.pager a:hover,
.pager a:focus-visible {
    border-color: var(--c-green);
    color: var(--c-green-dark);
}

.pager [aria-current="page"] {
    background: var(--c-green-dark);
    border-color: var(--c-green-dark);
    color: #fff;
    font-weight: 600;
}

.pager .pager__gap {
    border: 0;
    min-width: 1.5rem;
    color: var(--c-muted);
}

.pager__count {
    text-align: center;
    color: var(--c-muted);
    font-size: .9375rem;
    margin: 1rem 0 0;
}

/* ==========================================================================
   Album index

   The gallery landing is a set of albums rather than every photograph the
   county owns. One screen, one decision, and each album is its own URL for a
   crawler to index and a visitor to share.
   ========================================================================== */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.album-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: .75rem;
    overflow: hidden;
}

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

.album-card__media {
    aspect-ratio: 4 / 3;
    background: var(--c-surface-sunk);
    overflow: hidden;
}

.album-card__media picture,
.album-card__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.album-card__media img {
    object-fit: cover;
    transition: transform .3s ease;
}

.album-card a:hover .album-card__media img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .album-card__media img {
        transition: none;
    }
    .album-card a:hover .album-card__media img {
        transform: none;
    }
}

.album-card__text {
    padding: .9rem 1.1rem 1.1rem;
}

.album-card__name {
    font-size: 1.0625rem;
    margin: 0 0 .2rem;
}

.album-card__count {
    font-size: .875rem;
    color: var(--c-muted);
    margin: 0;
}

/* ==========================================================================
   Editable page body

   Prose written by an officer in the editor, so the styling has to come from
   here rather than from classes they would have to remember to apply.
   ========================================================================== */
.prose {
    max-width: 46rem;
}

.prose h2 {
    font-size: 1.25rem;
    margin: 2rem 0 .6rem;
}

.prose h3 {
    font-size: 1.0625rem;
    margin: 1.5rem 0 .5rem;
}

.prose p,
.prose li {
    line-height: 1.7;
}

.prose ul,
.prose ol {
    padding-left: 1.35rem;
}

.prose li {
    margin: .3rem 0;
}

/*
 * A Link In Running Text, But Not A Button Sitting In It
 *
 * `.prose a` is one class and one type, which out-specifies `.btn--primary` at one class flat. So a
 * button placed inside a prose block lost its own colour to this rule and took dark green instead -
 * on the green primary that is green text on a green pill, which is unreadable, and on the gold one
 * it is close to it. On hover it got worse: `.prose a:hover` beat `.btn--primary:hover` too, so the
 * white the button asked for never applied at any point.
 *
 * Excluding buttons here rather than raising every button's specificity, because this is the rule
 * that is overreaching: it means "a link in the running text", and a call to action is not that.
 */
.prose a:not(.btn) {
    color: var(--c-green-dark);
}

/* ==========================================================================
   Navigation dropdown

   One group in the bar: About, holding Leadership and About us. A button
   rather than a link, because it opens a menu instead of going anywhere, and
   a link that does not navigate misleads anybody on a keyboard.

   Opened on click, not hover. Hover menus are unreachable by touch and open by
   accident when the pointer crosses them, and the whole menu is two items.
   ========================================================================== */
.nav__item--sub {
    position: relative;
}

.nav__subtoggle {
    gap: .3rem;
    background: none;
    border: 0;
    cursor: pointer;

    /*
     * font-family Only, Never The font Shorthand
     *
     * A button does not inherit the page's typeface, so one property has to be set. `font: inherit`
     * looks like the tidy way to do it and is not: it is a shorthand that also resets size, weight
     * and line-height, so it wiped the font-size and font-weight .nav__link had already set. Sitting
     * later in the stylesheet, it won - and About rendered a size larger and a weight lighter than
     * every other item in the bar.
     *
     * Size, weight and colour come from .nav__link, which this button also carries.
     */
    font-family: inherit;
}

.nav__chevron {
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: transform .15s ease;
}

.nav__subtoggle[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
}

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

/* The parent stays marked while one of its children is the page being read */
.nav__subtoggle[data-current="true"] {
    color: var(--c-green-dark);
    font-weight: 600;
}

.nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 12rem;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm, .5rem);
    box-shadow: 0 10px 28px rgba(11, 61, 36, .12);
}

.nav__item--sub.is-open .nav__sub {
    display: block;
}

.nav__sub a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .35rem;
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--c-body);
    white-space: nowrap;
}

.nav__sub a:hover,
.nav__sub a:focus-visible {
    background: var(--c-green-soft);
    color: var(--c-green-dark);
}

.nav__sub a[aria-current="page"] {
    color: var(--c-green-dark);
    font-weight: 600;
}

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

   The details were a definition list, which is the right markup and the wrong
   presentation: four rows of small grey text beside a form is not what a
   visitor scanning for a telephone number wants to land on.

   One card per way of reaching the department, each with its own icon, so the
   thing being looked for is found by shape before it is read.
   ========================================================================== */
.contact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 30em) {
    .contact-cards {
        grid-template-columns: 1fr 1fr;
    }

    /*
     * The Email And The Address Take The Full Row
     *
     * Both hold something long that should not be broken across two lines to fit half a row: an
     * address is four lines of one thought, and an email address wrapped mid-domain is harder to
     * read and harder to copy. The two telephone numbers are short and alike, so they sit side by
     * side where they can be compared at a glance.
     */
    .contact-cards__wide {
        grid-column: 1 / -1;
    }
}

.contact-card-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: .7rem;
}

.contact-card-item__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .55rem;
    background: var(--c-green-soft);
    color: var(--c-green-dark);
}

.contact-card-item__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.contact-card-item__label {
    display: block;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-muted);
    margin-bottom: .15rem;
}

.contact-card-item__value {
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.contact-card-item__value a {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 600;
}

.contact-card-item__value a:hover,
.contact-card-item__value a:focus-visible {
    color: var(--c-green-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Season windows in the hero

   While registration or transfers are running, or about to, the hero rail
   carries that instead of the discipline chips. It sits over a photograph, so
   the panel brings its own ground rather than trusting the image behind it to
   be dark in the right places at that second of the slideshow.
   ========================================================================== */
.hero__rail--windows {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-window {
    flex: 1 1 16rem;
    max-width: 22rem;
    padding: .9rem 1.05rem 1rem;
    border-radius: .7rem;
    background: rgba(8, 44, 26, .62);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.hero-window__label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .6rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .8);
}

/*
   A steady dot, not a blinking one.

   It marks which window is live. It did pulse, and a thing that moves forever in
   the corner of a page pulls the eye off the words beside it every two seconds
   for no information gained - the label already says which state this is.
*/
.hero-window__dates {
    margin: .65rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   Flip clock

   Each unit is a card split across the middle. Between flips the two still
   halves carry the number. During one, a leaf folds down from the top showing
   the old number while the new one waits behind it - the movement a desk
   calendar makes when the day is torn over.

   Sizes are held in custom properties so the whole clock scales from one place
   and the halves can never drift out of alignment with the card.
   ========================================================================== */
.flip {
    --flip-h: 2.9rem;
    --flip-w: 2.6rem;
    --flip-font: 1.45rem;
    --flip-face: rgba(255, 255, 255, .14);
    --flip-face-lo: rgba(255, 255, 255, .1);

    display: flex;
    gap: .4rem;
}

.flip__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.flip__card {
    position: relative;
    /* Width comes from .flip__sizer below, not from here, so a three digit day
       count fits the same card a two digit hour does */
    min-width: var(--flip-w);
    height: var(--flip-h);
    /* The fold has to read as depth rather than as a squash */
    perspective: 12rem;
    border-radius: .35rem;
}

.flip__sizer {
    display: block;
    visibility: hidden;
    padding: 0 .55rem;
    height: var(--flip-h);
    font-size: var(--flip-font);
    font-weight: 700;
    line-height: var(--flip-h);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
   Every face carries the same full-height number and is then clipped to the
   half it represents. That is what keeps the two halves in register: they are
   the same glyph in the same box, shown through different windows.
*/
.flip__half,
.flip__leaf {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: var(--flip-face);
}

.flip__half span,
.flip__leaf span {
    display: block;
    width: 100%;
    height: var(--flip-h);
    font-size: var(--flip-font);
    font-weight: 700;
    line-height: var(--flip-h);
    text-align: center;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.flip__half--top,
.flip__leaf--front {
    top: 0;
    border-radius: .35rem .35rem 0 0;
    /* A hairline where the two halves meet, which is what makes it read as a
       card that opens rather than a single painted block */
    border-bottom: 1px solid rgba(0, 0, 0, .28);
}

.flip__half--bottom,
.flip__leaf--back {
    bottom: 0;
    border-radius: 0 0 .35rem .35rem;
    background: var(--flip-face-lo);
}

/* The bottom half shows the lower portion of the same glyph */
.flip__half--bottom span,
.flip__leaf--back span {
    margin-top: calc(var(--flip-h) / -2);
}

/*
   The leaves sit still and invisible until a flip runs. Parked at the angle
   they start from, so the first frame of the animation is not a jump.
*/
.flip__leaf {
    z-index: 2;
    backface-visibility: hidden;
}

.flip__leaf--front {
    transform-origin: bottom center;
    transform: rotateX(0deg);
    opacity: 0;
}

.flip__leaf--back {
    transform-origin: top center;
    transform: rotateX(90deg);
    opacity: 0;
}

.is-flipping .flip__leaf--front {
    opacity: 1;
    animation: flip-fall .3s ease-in forwards;
}

.is-flipping .flip__leaf--back {
    opacity: 1;
    animation: flip-rise .3s .3s ease-out forwards;
}

@keyframes flip-fall {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(-90deg); }
}

@keyframes flip-rise {
    from { transform: rotateX(90deg); }
    to   { transform: rotateX(0deg); }
}

/*
   Reduced motion gets the numbers and none of the folding. The script also
   swaps the values outright in that case, so these rules only make sure the
   leaves never appear.
*/
@media (prefers-reduced-motion: reduce) {
    .is-flipping .flip__leaf--front,
    .is-flipping .flip__leaf--back {
        animation: none;
        opacity: 0;
    }
}

.flip__label {
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .7);
}

.flip__now {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}

/* --- Resources repository -----------------------------------------------------
   The search bar and category tabs on the publications page. A list is fine at a
   dozen documents and useless at two hundred, and a repository only grows. */
.repo-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.repo-search__field {
    flex: 1 1 16rem;
    min-width: 0;
}

.repo-search__field--sort {
    flex: 0 1 11rem;
}

.repo-search__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: 4px;
}

.repo-search__input {
    width: 100%;
    min-height: 46px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--c-surface);
    font: inherit;
    color: var(--c-ink);
}

.repo-search__input:focus {
    outline: none;
    border-color: var(--c-green);
}

/* Tabs rather than another select, because the counts are the point: a reader can
   see how much sits behind each heading before choosing one. */
.repo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.repo-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.repo-tab:hover {
    border-color: var(--c-green);
    color: var(--c-green-dark);
}

.repo-tab.is-active {
    background: var(--c-green);
    border-color: var(--c-green);
    color: #fff;
}

.repo-tab__n {
    font-family: var(--ff-num);
    font-size: var(--fs-xs);
    opacity: .75;
}

.repo-blurb {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin: 0 0 var(--sp-4);
}

/* The category, printed on the row itself, so a document found by search still
   says which shelf it came off. */
.doc__cat {
    display: inline-block;
    font-weight: 600;
    color: var(--c-green-dark);
    margin-right: var(--sp-2);
}