/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.
   Proprietary and confidential. See LICENSE in the project root. */

/* ==========================================================================
   Chropyně — visual language of the public site.

   Everything here is derived from the building itself (see
   docs/product/discovery/09-hall-research.md §6):
     · RAL 7016 anthracite   — steel frame, cladding, window frames, doors
     · RAL 9002 grey white   — ancillary block, roof, sectional doors
     · RAL 9010 pure white   — the sportsman silhouettes on the façade
     · ThermoWood            — natural timber cladding at the entrance
     · six saturated fields  — the colour band above the main entrance

   Rule (decision K2): the six façade colours are NEVER chrome decoration.
   They are a functional code for sports / resource types / reservation
   states, and they only ever appear where that code carries meaning.
   The chrome is anthracite, grey white, timber and glass — nothing else.
   ========================================================================== */

:root {
    /* --- Surfaces: grey white → white, never pure #FFF (the building isn't) */
    --ch-bg: #F4F3EE;
    --ch-surface: #FAF9F6;
    --ch-surface-raised: #FFFFFF;
    --ch-surface-inverse: #2E3438;

    /* --- Anthracite RAL 7016 and its usable range ------------------------ */
    --ch-graphite-900: #23282B;
    --ch-graphite-800: #2E3438;
    --ch-graphite-700: #383E42; /* RAL 7016 reference */
    --ch-graphite-500: #5A6367;
    --ch-graphite-300: #8E979B;
    --ch-graphite-150: #C9CFD1;
    --ch-graphite-050: #E6E9EA;

    /* --- Text ----------------------------------------------------------- */
    --ch-text: var(--ch-graphite-900);
    --ch-text-muted: var(--ch-graphite-500);
    --ch-text-faint: var(--ch-graphite-300);
    --ch-text-inverse: #F4F3EE;

    /* --- ThermoWood: the single warm accent of the chrome ---------------- */
    --ch-wood-600: #9A6A35;
    --ch-wood-500: #B5834A;
    --ch-wood-400: #C79A62;
    --ch-wood-100: #EFE2D1;

    /* --- Lines ---------------------------------------------------------- */
    --ch-line: #DFE1DC;
    --ch-line-strong: var(--ch-graphite-150);

    /* --- The six façade colours: FUNCTIONAL CODE ONLY -------------------- */
    --ch-sport-1: #C0392B; /* red     */
    --ch-sport-2: #D2711F; /* orange  */
    --ch-sport-3: #C9A227; /* yellow  */
    --ch-sport-4: #4A7C42; /* green   */
    --ch-sport-5: #2E6C8E; /* blue    */
    --ch-sport-6: #6B4E8C; /* violet  */

    /* --- Semantic ------------------------------------------------------- */
    --ch-free: #4A7C42;
    --ch-taken: var(--ch-graphite-300);
    --ch-warn: #D2711F;
    --ch-bad: #C0392B;

    /* --- Rhythm --------------------------------------------------------- */
    --ch-s1: 4px;
    --ch-s2: 8px;
    --ch-s3: 12px;
    --ch-s4: 16px;
    --ch-s5: 24px;
    --ch-s6: 32px;
    --ch-s7: 48px;
    --ch-s8: 64px;
    --ch-s9: 96px;
    --ch-s10: 128px;

    --ch-radius: 4px;
    --ch-radius-lg: 8px;

    /* Depth is a hairline and a whisper of shadow, never a card stack. */
    --ch-shadow-1: 0 1px 2px rgba(35, 40, 43, .06);
    --ch-shadow-2: 0 4px 16px rgba(35, 40, 43, .08);

    --ch-measure: 68ch;
    --ch-page: 1180px;
    --ch-page-narrow: 820px;

    --ch-touch: 44px;

    --ch-ease: cubic-bezier(.2, 0, 0, 1);
    --ch-fast: 120ms;
    --ch-base: 200ms;
    --ch-slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ch-fast: 1ms;
        --ch-base: 1ms;
        --ch-slow: 1ms;
    }
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.ch-site {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ch-bg);
    color: var(--ch-text);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

.ch-main { flex: 1 0 auto; }

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

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

/* Typography: strong, quiet, tabular where numbers matter. */
.ch-site h1, .ch-site h2, .ch-site h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.ch-site h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
.ch-site h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.ch-site h3 { font-size: 1.15rem; font-weight: 600; }
.ch-site p { margin: 0; max-width: var(--ch-measure); }

.ch-eyebrow {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ch-wood-600);
}

.ch-lead { font-size: 1.15rem; color: var(--ch-text-muted); }

.ch-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Header — anthracite band, like the hall above the glazed ground floor
   ========================================================================== */

.ch-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ch-graphite-800);
    color: var(--ch-text-inverse);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ch-header__bar {
    display: flex;
    align-items: center;
    gap: var(--ch-s5);
    min-height: 68px;
}

.ch-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-s3);
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    padding-block: var(--ch-s2);
}

.ch-brand__mark {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 2px;
    background: var(--ch-wood-500);
    position: relative;
}

/* The mark echoes the façade: a timber panel with a white bar across it. */
.ch-brand__mark::after {
    content: "";
    position: absolute;
    inset: 44% 18% auto 18%;
    height: 3px;
    background: #F1ECE1;
}

.ch-brand__name { font-size: 1rem; }
.ch-brand__sub {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(244, 243, 238, .6);
}

.ch-nav {
    display: flex;
    align-items: center;
    gap: var(--ch-s5);
    margin-inline-start: auto;
    /* Positioning context for the travelling active-item indicator. */
    position: relative;
}

.ch-nav__link {
    color: rgba(244, 243, 238, .82);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    padding: var(--ch-s2) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--ch-fast) var(--ch-ease), border-color var(--ch-fast) var(--ch-ease);
}

.ch-nav__link:hover { color: #FFF; }
.ch-nav__link.active { color: #FFF; border-bottom-color: var(--ch-wood-400); }

.ch-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ch-s2);
    min-height: var(--ch-touch);
    padding-inline: var(--ch-s5);
    border: 1px solid transparent;
    border-radius: var(--ch-radius);
    background: var(--ch-wood-500);
    color: #1F1608;
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ch-fast) var(--ch-ease), transform var(--ch-fast) var(--ch-ease);
}

.ch-cta:hover { background: var(--ch-wood-400); }
.ch-cta:active { transform: translateY(1px); }

.ch-cta--ghost {
    background: transparent;
    color: var(--ch-text);
    border-color: var(--ch-line-strong);
}

.ch-cta--ghost:hover { background: var(--ch-graphite-050); }

.ch-cta--on-dark {
    background: transparent;
    color: var(--ch-text-inverse);
    border-color: rgba(244, 243, 238, .35);
}

.ch-cta--on-dark:hover { background: rgba(244, 243, 238, .1); }

.ch-lang {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
}

.ch-lang a {
    color: rgba(244, 243, 238, .55);
    text-decoration: none;
    padding: var(--ch-s1) var(--ch-s2);
    border-radius: 3px;
}

.ch-lang a:hover { color: #FFF; }
.ch-lang a.is-current { color: #FFF; background: rgba(244, 243, 238, .12); }

.ch-burger {
    display: none;
    width: var(--ch-touch);
    height: var(--ch-touch);
    margin-inline-start: auto;
    background: none;
    border: 1px solid rgba(244, 243, 238, .28);
    border-radius: var(--ch-radius);
    color: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.ch-burger span,
.ch-burger span::before,
.ch-burger span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
    position: relative;
}

.ch-burger span::before { position: absolute; top: -6px; }
.ch-burger span::after { position: absolute; top: 6px; }

/* ==========================================================================
   Hero — typography first; a photograph slots in behind it later (T15/T16)
   ========================================================================== */

.ch-hero {
    position: relative;
    background: var(--ch-graphite-800);
    color: var(--ch-text-inverse);
    overflow: hidden;
}

/* Placeholder until the operator supplies production photography.
   Research photos are reference only and must not ship (see 09 §3). */
.ch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 78% 8%, rgba(197, 154, 98, .20), transparent 55%),
        linear-gradient(175deg, #333A3E 0%, #262C30 60%, #22272A 100%);
}

/* The six façade fields, quoted once, at the very top edge. */
.ch-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--ch-sport-1) 0 16.66%,
        var(--ch-sport-2) 16.66% 33.33%,
        var(--ch-sport-3) 33.33% 50%,
        var(--ch-sport-4) 50% 66.66%,
        var(--ch-sport-5) 66.66% 83.33%,
        var(--ch-sport-6) 83.33% 100%);
}

.ch-hero__inner {
    position: relative;
    padding-block: clamp(var(--ch-s8), 10vw, var(--ch-s10));
    display: grid;
    gap: var(--ch-s5);
}

.ch-hero h1 { color: #FFF; max-width: 16ch; }

.ch-hero__lead {
    font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
    color: rgba(244, 243, 238, .78);
    max-width: 52ch;
}

.ch-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-s3);
    margin-top: var(--ch-s3);
}

.ch-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-s6);
    margin-top: var(--ch-s6);
    padding-top: var(--ch-s5);
    border-top: 1px solid rgba(244, 243, 238, .14);
}

.ch-fact__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFF;
    font-variant-numeric: tabular-nums;
}

.ch-fact__label {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(244, 243, 238, .55);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.ch-section { padding-block: clamp(var(--ch-s7), 7vw, var(--ch-s9)); }
.ch-section--tight { padding-block: var(--ch-s7); }
.ch-section--surface { background: var(--ch-surface); border-block: 1px solid var(--ch-line); }
.ch-section--dark { background: var(--ch-graphite-800); color: var(--ch-text-inverse); }
.ch-section--dark h2 { color: #FFF; }
.ch-section--dark p { color: rgba(244, 243, 238, .72); }

.ch-section__head { display: grid; gap: var(--ch-s3); margin-bottom: var(--ch-s6); }

.ch-grid { display: grid; gap: var(--ch-s5); }
.ch-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ch-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ch-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Panels: a hairline and breathing room. Not a card with a drop shadow. */
.ch-panel {
    background: var(--ch-surface-raised);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius-lg);
    padding: var(--ch-s5);
    display: grid;
    gap: var(--ch-s3);
    align-content: start;
}

.ch-panel--link {
    text-decoration: none;
    color: inherit;
    transition: border-color var(--ch-base) var(--ch-ease), box-shadow var(--ch-base) var(--ch-ease);
}

.ch-panel--link:hover {
    border-color: var(--ch-line-strong);
    box-shadow: var(--ch-shadow-2);
}

/* The functional colour code — the only place the façade band reappears. */
.ch-panel__code {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--ch-graphite-300);
}

.ch-code-1 { background: var(--ch-sport-1); }
.ch-code-2 { background: var(--ch-sport-2); }
.ch-code-3 { background: var(--ch-sport-3); }
.ch-code-4 { background: var(--ch-sport-4); }
.ch-code-5 { background: var(--ch-sport-5); }
.ch-code-6 { background: var(--ch-sport-6); }

.ch-panel h3 { letter-spacing: -.01em; }
.ch-panel p { font-size: .95rem; color: var(--ch-text-muted); }

.ch-steps { counter-reset: step; }

.ch-step { display: grid; gap: var(--ch-s2); }

.ch-step::before {
    counter-increment: step;
    content: counter(step);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ch-line-strong);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ch-text-muted);
}

.ch-section--dark .ch-step::before {
    border-color: rgba(244, 243, 238, .3);
    color: rgba(244, 243, 238, .8);
}

/* Definition rows — used for opening hours, prices, practical facts. */
.ch-rows { display: grid; gap: 0; border-top: 1px solid var(--ch-line); }

.ch-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-s3);
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--ch-s4);
    border-bottom: 1px solid var(--ch-line);
}

.ch-row__key { font-weight: 500; }
.ch-row__value { color: var(--ch-text-muted); font-variant-numeric: tabular-nums; }

/* „Not filled in yet" — honest, quiet, never a broken-looking gap. */
.ch-tbd {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-s2);
    padding: var(--ch-s1) var(--ch-s3);
    border: 1px dashed var(--ch-line-strong);
    border-radius: var(--ch-radius);
    background: var(--ch-graphite-050);
    color: var(--ch-text-muted);
    font-size: .85rem;
}

.ch-note {
    border-inline-start: 3px solid var(--ch-wood-500);
    padding: var(--ch-s3) 0 var(--ch-s3) var(--ch-s4);
    background: transparent;
    color: var(--ch-text-muted);
    font-size: .95rem;
}

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

.ch-footer {
    background: var(--ch-graphite-900);
    color: rgba(244, 243, 238, .72);
    padding-block: var(--ch-s7) var(--ch-s5);
    font-size: .92rem;
}

.ch-footer h3 {
    color: #FFF;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: var(--ch-s3);
}

.ch-footer a { color: rgba(244, 243, 238, .72); text-decoration: none; }
.ch-footer a:hover { color: #FFF; text-decoration: underline; }
.ch-footer address { font-style: normal; line-height: 1.8; }

.ch-footer__cols {
    display: grid;
    gap: var(--ch-s6);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ch-footer__bottom {
    margin-top: var(--ch-s6);
    padding-top: var(--ch-s4);
    border-top: 1px solid rgba(244, 243, 238, .12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-s3) var(--ch-s5);
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(244, 243, 238, .5);
}

.ch-stack { display: grid; gap: var(--ch-s2); }

/* --------------------------------------------------------------------------
   The town's coat of arms
   --------------------------------------------------------------------------
   A municipal symbol, so it is shown as the town publishes it: full colour,
   uncropped, never tinted to match this site. It is the one piece of the page
   that is not ours to restyle. */

.ch-crest {
    display: block;
    flex: none;
}

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

/* The crest paired with the town's name, as one link back to muchropyne.cz.
   The whole block is the target so it is comfortably tappable, and the crest
   itself is marked decorative because the name beside it already says it. */
.ch-townmark {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-s3);
    margin-bottom: var(--ch-s4);
    min-height: var(--ch-touch);
}

.ch-townmark__text {
    display: grid;
    gap: 2px;
    line-height: 1.3;
}

.ch-townmark strong { color: #FFF; font-weight: 600; }

.ch-townmark__url {
    font-size: .8rem;
    letter-spacing: .04em;
    color: rgba(244, 243, 238, .5);
}

.ch-townmark:hover { text-decoration: none; }
.ch-townmark:hover .ch-townmark__url { color: rgba(244, 243, 238, .75); }

.ch-footer .ch-note { color: rgba(244, 243, 238, .5); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

.ch-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ch-wood-500);
    color: #1F1608;
    padding: var(--ch-s3) var(--ch-s4);
    font-weight: 600;
}

.ch-skip:focus { left: var(--ch-s4); top: var(--ch-s2); }

.ch-site :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--ch-wood-400);
    outline-offset: 3px;
    border-radius: 2px;
}

.ch-header :is(a, button):focus-visible { outline-color: #FFF; }

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

/* ==========================================================================
   Narrow viewports — the site is designed for a thumb first
   ==========================================================================
   The menu folds into the burger below 1080 px, not 860. Six items, the
   booking button and the language switch need about 1040 px on one line; in
   between, the hall's name broke onto three lines and "Pro návštěvníky" onto
   two, which on a tablet was the first thing anybody saw. */

@media (max-width: 1080px) {
    .ch-burger { display: inline-flex; }

    .ch-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--ch-s3) var(--ch-s5) var(--ch-s5);
        background: var(--ch-graphite-800);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .ch-nav.is-open { display: flex; }

    .ch-nav__link {
        min-height: var(--ch-touch);
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(244, 243, 238, .08);
    }

    .ch-nav__link.active { border-bottom-color: var(--ch-wood-400); }

    .ch-nav .ch-cta { margin-top: var(--ch-s3); }
    .ch-nav .ch-lang { margin-top: var(--ch-s3); justify-content: center; }

    .ch-header { position: relative; }
    .ch-header__bar { position: relative; }
}

@media (max-width: 560px) {
    .ch-site { font-size: 16px; }
    .ch-wrap { padding-inline: var(--ch-s4); }
    .ch-hero__facts { gap: var(--ch-s5); }
}

/* Touch targets in the footer. On a phone every link a thumb has to hit is at
   least 44 px tall (WCAG 2.2 AA, 2.5.8 comfortably exceeded); on a mouse-driven
   desktop the list stays compact so the footer doesn't turn into a wall. */
@media (max-width: 860px) {
    .ch-footer .ch-stack a,
    .ch-footer address a {
        min-height: var(--ch-touch);
        display: flex;
        align-items: center;
    }

    .ch-footer .ch-stack { gap: 0; }
}

/* ==========================================================================
   Photographs
   ========================================================================== */

.ch-photo { display: block; }

.ch-photo img {
    display: block;
    width: 100%;
    height: auto;
    /* The intrinsic width/height attributes already reserve the box; this keeps
       the reservation correct when CSS resizes the photo. */
    background: var(--ch-graphite-050);
}

/* Hero: the photograph IS the section. The anthracite wash over it is not
   decoration — white display type on a bright sky fails contrast, and the hall
   is photographed in the evening sun. */
.ch-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.ch-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(23, 27, 29, .82) 0%, rgba(23, 27, 29, .58) 45%, rgba(23, 27, 29, .86) 100%),
        linear-gradient(90deg, rgba(23, 27, 29, .55) 0%, rgba(23, 27, 29, 0) 70%);
}

.ch-hero--photo .ch-hero__inner { z-index: 2; }

/* A photograph that opens a section: full width, fixed ratio, no crop games. */
.ch-figure { margin: 0; display: grid; gap: var(--ch-s3); }

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

.ch-figure figcaption {
    font-size: .9rem;
    color: var(--ch-text-muted);
    max-width: var(--ch-measure);
}

.ch-section--dark .ch-figure figcaption { color: rgba(244, 243, 238, .65); }

/* Gallery: a plain masonry-free grid. Every tile keeps the photo's own ratio,
   so nothing is cropped to a square and no face or goal gets cut in half. */
.ch-gallery {
    display: grid;
    gap: var(--ch-s4);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ch-gallery__item {
    display: grid;
    gap: var(--ch-s2);
    margin: 0;
}

.ch-gallery__item img {
    border-radius: var(--ch-radius);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--ch-slow) var(--ch-ease);
}

/* The hover zoom lives in chropyne-motion.css, behind (hover: hover). A copy
   here without that guard stuck on after a tap on Android, where :hover stays
   on whatever was last touched, and left the photograph slightly enlarged. */

.ch-gallery__caption { font-size: .85rem; color: var(--ch-text-muted); }

/* Two photographs side by side inside a text column. */
.ch-photo-pair {
    display: grid;
    gap: var(--ch-s4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ch-photo-pair img { border-radius: var(--ch-radius); aspect-ratio: 3 / 2; object-fit: cover; }

/* A band of photographs that runs wider than the text it illustrates. */
.ch-wide { max-width: var(--ch-page); margin-inline: auto; }

.ch-credit {
    font-size: .8rem;
    color: var(--ch-text-faint);
}

.ch-footer .ch-credit { color: rgba(244, 243, 238, .4); }

/* ==========================================================================
   Programmatic focus
   ========================================================================== */

/* Blazor's <FocusOnNavigate Selector="h1"> moves focus to the heading after
   every navigation so a screen reader announces the new page. To do that it
   makes the heading temporarily focusable, and Chrome then treats that focus as
   :focus-visible and paints a ring — on a plain page refresh, which is exactly
   what a sighted visitor should never see.

   Suppressing the ring on tabindex="-1" targets is safe: nothing here is
   reachable by Tab, so no keyboard user loses an indicator. Real interactive
   elements keep theirs, defined above. */
.ch-site [tabindex="-1"]:focus,
.ch-site [tabindex="-1"]:focus-visible,
.ch-site h1[tabindex]:focus,
.ch-site h1[tabindex]:focus-visible {
    outline: none;
}

/* Long-form text stays readable regardless of the page frame: the frame is the
   same everywhere, the measure is a property of the paragraph. */
.ch-prose { max-width: var(--ch-measure); }
.ch-rows--narrow { max-width: var(--ch-page-narrow); }

/* ==========================================================================
   The opening
   ==========================================================================
   A single warm band directly under the hero, in the ThermoWood accent that
   runs through the building. It is the only element on the site allowed to
   interrupt the reading order like this, and it earns that by being both
   time-limited and the one thing a visitor this week actually came for. It
   removes itself in markup once the day has passed, so the exception is
   temporary by construction rather than by anyone remembering to delete it. */

.ch-opening {
    background: var(--ch-wood-100);
    border-block: 1px solid rgba(154, 106, 53, .22);
    padding-block: var(--ch-s7);
    color: #2A1E0E;
}

.ch-opening__inner {
    display: grid;
    gap: var(--ch-s6);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
}

.ch-opening__lead h2 {
    margin: var(--ch-s3) 0 var(--ch-s4);
    color: #2A1E0E;
}

.ch-opening__lead p { max-width: 46ch; }

.ch-opening__badge {
    display: inline-block;
    background: var(--ch-wood-600);
    color: #FFF;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: var(--ch-s1) var(--ch-s3);
    border-radius: var(--ch-radius);
}

.ch-opening__source {
    margin-top: var(--ch-s4);
    font-size: .85rem;
    color: #7A5A2E;
}

.ch-opening__facts {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-s6);
}

.ch-opening__facts .ch-fact__value { color: #2A1E0E; }
.ch-opening__facts .ch-fact__label { color: #7A5A2E; }

/* The two times are numbers and carry the display size; the place is a name
   and would read as a second heading at that size, especially once it wraps on
   a phone. It keeps the same weight and drops the scale. */
.ch-opening__facts .ch-fact--place .ch-fact__value {
    font-size: 1.15rem;
    line-height: 1.35;
}
.ch-opening__facts time { font: inherit; color: inherit; }

/* The programme sits in its own column on wide screens and simply follows on
   narrow ones: a list of four short lines needs no cleverness. */
.ch-opening__programme {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(154, 106, 53, .22);
    border-radius: var(--ch-radius-lg);
    padding: var(--ch-s5);
}

.ch-opening__programme h3 {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7A5A2E;
    margin-bottom: var(--ch-s3);
}

.ch-opening__programme ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--ch-s3);
}

.ch-opening__programme li {
    position: relative;
    padding-left: var(--ch-s5);
    line-height: 1.5;
}

/* A short rule rather than a bullet: the same hairline language as the rest
   of the page, at the scale of a single line of text. */
.ch-opening__programme li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 12px;
    height: 1px;
    background: var(--ch-wood-600);
}

@media (max-width: 860px) {
    .ch-opening {
        padding-block: var(--ch-s6);
    }

    .ch-opening__inner {
        grid-template-columns: 1fr;
        gap: var(--ch-s5);
    }

    .ch-opening__facts,
    .ch-opening__programme {
        grid-column: 1;
        grid-row: auto;
    }

    .ch-opening__facts { gap: var(--ch-s5); }
}

/* ==========================================================================
   Sports
   ==========================================================================
   The list of disciplines, using the façade's six colours as what decision K2
   says they are: a functional code. Here the code identifies the sport, which
   is the same identity the booking grid will use later, so a visitor learns it
   once on this page and recognises it when they come to reserve. It is never
   the only signal — the name is always right there — because a colour alone
   fails for a colour-blind reader and in print. */

.ch-sports {
    display: grid;
    gap: var(--ch-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-sport {
    display: flex;
    align-items: baseline;
    gap: var(--ch-s3);
    padding-block: var(--ch-s2);
    border-bottom: 1px solid var(--ch-line);
    font-size: 1.05rem;
}

.ch-sports li:last-child .ch-sport,
.ch-sport:last-child { border-bottom: none; }

.ch-sport__code {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* Baseline-aligned flex items put a 10px square too high; nudging it down
       sits it on the text's own optical line. */
    transform: translateY(1px);
}

.ch-sport__name { font-weight: 500; }

/* --------------------------------------------------------------------------
   Footer, continued
   --------------------------------------------------------------------------
   Four columns of links and one line of small print. The registration numbers
   live in that last line rather than in the middle of the town's address: they
   are a legal requirement read once by an accountant, and putting them where
   somebody is scanning for a telephone number costs the telephone number its
   place. */

.ch-footer__col { min-width: 0; }

.ch-footer h3.ch-footer__h3--spaced { margin-top: var(--ch-s6); }

/* A stack rather than lines separated by breaks, so the rhythm is set once and
   the phone number and e-mail have room to be tapped. */
.ch-footer__addr {
    display: grid;
    gap: var(--ch-s1);
    font-style: normal;
    line-height: 1.55;
}

.ch-footer__addr a {
    justify-self: start;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.ch-footer__more { margin-top: var(--ch-s4); }

/* A note, not a callout. The body of the site marks an aside with a timber rule
   down its left; against the dark footer that rule reads as damage. */
.ch-footer__aside {
    margin-top: var(--ch-s3);
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(244, 243, 238, .5);
    max-width: 30ch;
}

.ch-footer__ids {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

@media (max-width: 860px) {
    .ch-footer h3.ch-footer__h3--spaced { margin-top: var(--ch-s5); }
}

/* The address is a grid, so a placeholder chip inside it stretches to the full
   column and stops looking like a chip. It is a label, not a field. */
.ch-footer__addr > * { justify-self: start; }