/* ============================================================
   LIMASSOL CHARITY RUN — styles
   Tokens → base → components → sections → responsive
   ============================================================ */

/* ---------- Fonts, self-hosted (assets/fonts, OFL) ----------
   The exact files Google Fonts serves, so the English pages look the same.
   Archivo and Figtree have no Cyrillic: Manrope covers only the Cyrillic
   ranges and sits second in the stacks, so Russian text gets a real web
   font instead of Arial. Variable files: one rule per file, weight ranges. */
/* Archivo, latin-ext */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600 700;
    font-stretch: 105%;
    font-display: swap;
    src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo, latin */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 600 700;
    font-stretch: 105%;
    font-display: swap;
    src: url('assets/fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figtree, latin-ext */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('assets/fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Figtree, latin */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('assets/fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono, cyrillic-ext */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/ibm-plex-mono-500-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* IBM Plex Mono, cyrillic */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono, latin-ext */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono, latin */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope, cyrillic-ext */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Manrope, cyrillic */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Tokens (light is the default) ---------- */
:root {
    --paper:  #FFFFFF;
    --band:   #F4F6F5;
    --ink:    #10181D;
    --muted:  #5B6B73;
    --rule:   #E0E5E4;
    --accent: #B45F10;
    --bright: #E89A3C;
    --sea:    #14525C;

    --on-bright: #10181D;   /* text on a --bright fill, both themes */
    --shadow: 0 1px 2px rgba(16, 24, 29, .05), 0 8px 24px rgba(16, 24, 29, .06);

    --font-head: "Archivo", "Manrope", "Archivo Fallback", Arial, "Helvetica Neue", sans-serif;
    --font-body: "Figtree", "Manrope", "Figtree Fallback", Arial, "Helvetica Neue", sans-serif;
    --font-mono: "IBM Plex Mono", Menlo, Consolas, "SFMono-Regular", monospace;

    --wrap: 1080px;
    --gutter: clamp(20px, 5vw, 48px);
    --section: clamp(56px, 8vw, 96px);
    --radius: 8px;
    --header-h: 64px;

    --ease: 150ms ease;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:  #0D1418;
        --band:   #131C21;
        --ink:    #E8EEEB;
        --muted:  #94A5AC;
        --rule:   #222E34;
        --accent: #F0A44F;
        --bright: #F0A44F;
        --sea:    #6FB3BB;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    --paper:  #0D1418;
    --band:   #131C21;
    --ink:    #E8EEEB;
    --muted:  #94A5AC;
    --rule:   #222E34;
    --accent: #F0A44F;
    --bright: #F0A44F;
    --sea:    #6FB3BB;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}

/* Local stand-in for Archivo while the web font loads, width-matched so the
   swap doesn't reflow (Archivo 700 @ wdth 105 measures ~3.4% wider than Arial Bold). */
@font-face {
    font-family: "Archivo Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
    font-weight: 600 700;
    size-adjust: 103.4%;
    line-gap-override: 0%;
}

/* Same idea for body text: Arial scaled to Figtree's width (100.6%, measured), so
   paragraphs wrap the same before and after the web font arrives. Latin only:
   Figtree has no Cyrillic, so Russian text renders in plain Arial either way. */
@font-face {
    font-family: "Figtree Fallback";
    src: local("Arial"), local("ArialMT");
    size-adjust: 100.6%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-head);
    font-stretch: 105%;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.2vw, 64px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 20px; font-weight: 600; }

p {
    margin: 0;
    max-width: 65ch;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: 1px;
    transition: color var(--ease);
}

a:hover {
    color: var(--ink);
}

strong {
    font-weight: 500;
    color: var(--ink);
}

svg {
    display: block;
}

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

::selection {
    background: var(--bright);
    color: var(--on-bright);
}

/* Small mono labels */
.mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 100;
    padding: 8px 12px;
    background: var(--ink);
    color: var(--paper);
}

.skip-link:focus {
    top: 8px;
}

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

/* ---------- Sections ---------- */
.section {
    padding-block: var(--section);
    scroll-margin-top: calc(var(--header-h) + 8px);
}

.band {
    background: var(--band);
}

/* Paper next to paper gets a hairline; band sections separate themselves. */
.section:not(.band) + .section:not(.band) {
    border-top: 1px solid var(--rule);
}

.section-title {
    margin-bottom: 12px;
}

.section-sub {
    color: var(--muted);
    font-size: 19px;
    margin-bottom: 40px;
}

.section-title:last-child,
.section-title + .faq {
    margin-top: 0;
}

.section-title + .known,
.section-title + .involve-grid,
.section-title + .faq {
    margin-top: 32px;
}

.note {
    color: var(--muted);
    font-size: 14px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

/* The one pill on the site */
.btn-primary {
    background: var(--bright);
    color: var(--on-bright);
    border-color: var(--bright);
    border-radius: 999px;
    padding-inline: 26px;
}

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

.btn-primary:disabled {
    opacity: .6;
    cursor: default;
}

.btn-quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule);
    border-radius: var(--radius);
}

.btn-quiet:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.text-link {
    font-weight: 500;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ease);
}

.site-header.is-scrolled {
    border-bottom-color: var(--rule);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
}

.brand-mark {
    width: 28px;
    height: 28px;
    flex: none;
}

.brand-mark .mark {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.brand-name {
    font-family: var(--font-head);
    font-stretch: 105%;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin: 0;
}

.nav-list {
    display: flex;
    gap: 4px;
}

.nav-list a {
    display: inline-block;
    padding: 8px 10px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color var(--ease);
}

.nav-list a:hover {
    color: var(--ink);
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--rule);
}

.lang-btn {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    padding: 0 10px;
    min-height: 34px;
    background: transparent;
    color: var(--muted);
    border: 0;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}

.lang-btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.lang-btn:not([aria-pressed="true"]):hover {
    color: var(--ink);
}

.menu-btn {
    display: none;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
    padding-top: calc(var(--section) + 8px);
}

.hero .eyebrow {
    margin-bottom: 20px;
}

.hero h1 {
    max-width: 18ch;
}

.lede {
    font-size: 19px;
    color: var(--muted);
    margin-top: 22px;
    max-width: 58ch;
}

.hero-note {
    font-size: 15px;
    color: var(--muted);
    margin-top: 12px;
    max-width: 74ch; /* the lede's 58ch at 19px */
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* ---------- Community cards: week · month · what for ---------- */
.section-cards {
    padding-top: 0;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    border-top: 3px solid var(--bright);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.event-label {
    color: var(--muted);
}

.event-title {
    font-size: clamp(24px, 2.4vw, 28px);
}

.event-text {
    color: var(--muted);
}

/* ---------- Course ---------- */
.course-scroll {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--band);
}

.course-svg {
    min-width: 560px;
    width: 100%;
    height: auto;
    display: block;
}

.course-svg .ticks line {
    stroke: var(--muted);
    stroke-width: 1.5;
}

.course-svg text {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    fill: var(--muted);
}

.course-svg .out {
    stroke: var(--bright);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
}

.course-svg .turn {
    stroke: var(--bright);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
}

.course-svg .back {
    stroke: var(--muted);
    stroke-width: 3;
    stroke-dasharray: 6 8;
    fill: none;
    stroke-linecap: round;
}

.course-svg .marker-start {
    fill: var(--bright);
}

.course-svg .marker-finish {
    fill: var(--paper);
    stroke: var(--muted);
    stroke-width: 2.5;
}

.course-svg .marker-turn {
    fill: var(--sea);
}

.course-svg .course-labels text {
    fill: var(--ink);
}

.notes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 24px;
    margin-top: 24px;
    font-size: 15px;
    color: var(--muted);
}

/* ---------- Rules, getting there ---------- */
.rules-list {
    display: grid;
    gap: 2px;
    max-width: 760px;
    border-top: 1px solid var(--rule);
}

.rules-list li {
    position: relative;
    padding: 14px 0 14px 26px;
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
}

.rules-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 25px;
    width: 6px;
    height: 6px;
    background: var(--bright);
}

/* ---------- What we know ---------- */
.schedule {
    width: 100%;
    max-width: 620px;
    border-collapse: collapse;
    text-align: left;
}

.schedule th,
.schedule td {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: baseline;
    font-weight: 400;
}

.schedule tr:first-child th,
.schedule tr:first-child td {
    border-top: 1px solid var(--rule);
}

.schedule th {
    width: 110px;
    padding-right: 16px;
    color: var(--ink);
    white-space: nowrap;
}

.schedule td {
    color: var(--muted);
}

.known th {
    width: 170px;
    white-space: normal;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
}

.known td {
    color: var(--ink);
}

.known td a {
    display: block;
    width: fit-content;
    margin-top: 4px;
}

/* The one thing not settled yet. Sits on paper: --accent on --band is below 4.5:1. */
.known .is-pending th,
.known .is-pending td {
    color: var(--accent);
}

.known .is-pending td {
    font-weight: 500;
}

.known-notes {
    display: grid;
    gap: 10px;
    max-width: 620px;
    margin-top: 24px;
    font-size: 15px;
    color: var(--muted);
}

/* ---------- Prose (the cause) ---------- */
.prose > p + p {
    margin-top: 16px;
}

.prose .section-title {
    margin-bottom: 24px;
}

.prose .note {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}

/* ---------- Get involved ---------- */
.involve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.involve-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--muted);
}

.involve-card strong {
    display: block;
    margin-bottom: 4px;
}

.involve-card .text-link {
    margin-top: auto;
}

/* ---------- FAQ ---------- */
.faq {
    border-top: 1px solid var(--rule);
    max-width: 760px;
}

.faq details {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--muted);
}

.faq details[open] summary::after {
    content: "−";
}

.faq details p {
    padding-bottom: 18px;
    color: var(--muted);
}

/* ---------- Sign-up form ---------- */
.signup {
    max-width: 640px;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.field-wide {
    grid-column: 1 / -1;
}

.field label,
.field legend {
    font-weight: 500;
    font-size: 15px;
    padding: 0;
}

.field legend {
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: border-color var(--ease);
}

.field input::placeholder {
    color: var(--muted);
    opacity: .7;
}

.field input:hover,
.field select:hover {
    border-color: var(--muted);
}

.field input:focus-visible,
.field select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}

.field.is-invalid input {
    border-color: var(--accent);
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.radio-row .radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--ease);
}

.radio:hover {
    border-color: var(--muted);
}

.radio input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.radio:has(input:checked) {
    border-color: var(--ink);
}

.radio:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.field-error {
    font-size: 14px;
    color: var(--accent);
}

.field-error[hidden] {
    display: none;
}

.field-hint {
    font-size: 14px;
    color: var(--muted);
}

/* Emergency contact: two inputs inside one fieldset */
.subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

/* Consent checkboxes */
.consents {
    gap: 14px;
}

.check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    cursor: pointer;
    font-size: 15px;
    color: var(--muted);
}

.check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.check a {
    font-weight: 500;
}

.field.is-invalid .check {
    color: var(--ink);
}

.field.is-invalid .check input {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-privacy {
    margin-top: 20px;
    max-width: 640px;
    font-size: 14px;
    color: var(--muted);
}

/* Honeypot: off-screen, not display:none, so bots still see it */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    margin-top: 28px;
}

.form-status {
    margin-top: 16px;
    font-size: 15px;
    color: var(--accent);
}

.form-status:empty {
    display: none;
}

.confirm {
    max-width: 640px;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
}

.confirm[hidden] {
    display: none;
}

.confirm h3 {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

.confirm p {
    color: var(--muted);
}

.confirm .btn {
    margin-top: 20px;
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--rule);
    padding-block: 40px;
    font-size: 14px;
    color: var(--muted);
}

.site-footer .brand-name {
    color: var(--ink);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

.footer-desc {
    margin-top: 8px;
    max-width: 52ch;
}

.footer-org {
    margin-top: 10px;
    max-width: 52ch;
    overflow-wrap: anywhere;
}

.footer-org a {
    color: var(--muted);
}

.footer-org a:hover {
    color: var(--ink);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.footer-links a {
    color: var(--muted);
}

.footer-links a:hover {
    color: var(--ink);
}

/* ---------- Legal pages ---------- */
.back-link {
    margin-bottom: 24px;
    font-size: 14px;
}

.legal-title {
    font-size: clamp(30px, 4vw, 44px);
    margin-bottom: 32px;
}

.legal .prose > p {
    margin-bottom: 18px;
    color: var(--muted);
}

.legal .prose strong {
    color: var(--ink);
}

.legal-list {
    display: grid;
    gap: 14px;
    max-width: 65ch;
    margin-bottom: 18px;
    padding-left: 26px;
}

.legal-list li {
    position: relative;
    color: var(--muted);
}

.legal-list li::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 11px;
    width: 6px;
    height: 6px;
    background: var(--bright);
}

.legal-updated {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .notes {
        grid-template-columns: 1fr 1fr;
    }

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

@media (max-width: 700px) {
    .site-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        padding: 8px var(--gutter) 16px;
    }

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

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-list a {
        display: block;
        padding: 12px 0;
        font-size: 17px;
        color: var(--ink);
        border-bottom: 1px solid var(--rule);
    }

    .nav-list li:last-child a {
        border-bottom: 0;
    }

    .menu-btn {
        display: inline-flex;
        align-items: center;
    }

    .involve-grid,
    .field-grid,
    .subgrid {
        grid-template-columns: 1fr;
    }

    .schedule th {
        width: 90px;
    }

    .known th {
        width: 116px;
    }

    .notes {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .footer-inner {
        flex-direction: column;
    }

    .actions .btn,
    .form-actions .btn {
        width: 100%;
    }
}

/* The Russian nav labels are longer: inline they need about 900px, so between
   the phone breakpoint and that, Russian gets the menu button too. */
@media (min-width: 701px) and (max-width: 900px) {
    html[lang="ru"] .site-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        padding: 8px var(--gutter) 16px;
    }

    html[lang="ru"] .site-nav.is-open {
        display: block;
    }

    html[lang="ru"] .nav-list {
        flex-direction: column;
        gap: 0;
    }

    html[lang="ru"] .nav-list a {
        display: block;
        padding: 12px 0;
        font-size: 17px;
        color: var(--ink);
        border-bottom: 1px solid var(--rule);
    }

    html[lang="ru"] .nav-list li:last-child a {
        border-bottom: 0;
    }

    html[lang="ru"] .menu-btn {
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 420px) {
    .header-inner {
        gap: 12px;
    }

    .brand {
        gap: 8px;
    }

    .brand-name {
        font-size: 15px;
    }

    .lang-btn {
        padding-inline: 8px;
    }

    .menu-btn {
        padding-inline: 10px;
    }

    .radio-row {
        flex-direction: column;
    }

    .radio {
        width: 100%;
    }
}