/* ============================================================
   CaseLeague — implements the CityReady design system.
   Order: tokens → base → components → pages.
   ============================================================ */

:root {
    /* Brand */
    --navy: #1B3A5C;
    --navy-deep: #0F2440;
    --navy-mid: #244B6E;
    --teal: #2A9D8F;
    --teal-bright: #34C4B3;
    --amber: #E9C46A;
    --amber-deep: #D4A843;
    --coral: #E76F51;

    /* Neutrals */
    --white: #FFFFFF;
    --cream: #FAF8F4;
    --cloud: #F4F6F9;
    --silver: #E2E6EE;
    --gray: #8892A4;
    --dim: #5F6B7A;
    --text: #1E2532;
    --text-light: #4A5568;

    /* Type */
    --display: 'DM Serif Display', Georgia, serif;
    --body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Space */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Shape */
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-sm: 0 1px 2px rgba(15, 36, 64, .06);
    --shadow-md: 0 8px 24px rgba(15, 36, 64, .10);

    --focus-ring: 0 0 0 3px rgba(42, 157, 143, .25);
}

/* ============================================================
   Base
   ============================================================ */

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--body);
    color: var(--text);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

::selection { background: var(--teal); color: #fff; }

h1, h2, h3 { font-family: var(--display); color: var(--navy); line-height: 1.2; }
h1 { font-size: 2.25rem; line-height: 1.15; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; color: var(--navy); }

p { color: var(--text-light); }
strong { color: var(--text); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    width: 100%;
}

.container--wide { max-width: 1120px; }

.section-label {
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal);
}

.small { font-size: .875rem; line-height: 1.5; }
.muted { color: var(--gray); }
.stack > * + * { margin-top: var(--space-md); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The skip link is the one .visually-hidden element that must reappear on
   keyboard focus — otherwise a sighted keyboard user tabs into a link they
   can never see land. Scoped to anchors so screen-reader-only text (not a
   link) stays hidden as normal. */
a.visually-hidden:focus,
a.visually-hidden:focus-visible {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    z-index: 1000;
    background: var(--navy);
    color: var(--white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    text-decoration: none;
}

/* ============================================================
   Header / footer
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--silver);
    padding: var(--space-sm) 0;
}

.site-header__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wordmark {
    font-family: var(--display);
    font-size: 1.35rem;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
}

.wordmark span { color: var(--teal); }
.wordmark:hover { color: var(--navy); }

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-nav a, .site-nav button.linklike {
    font-size: .875rem;
    font-weight: 500;
    color: var(--dim);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
    text-decoration: none;
    background: none;
    border: 0;
    font-family: var(--body);
    cursor: pointer;
}

.site-nav a:hover, .site-nav button.linklike:hover {
    color: var(--navy);
    background: var(--cloud);
}

/* ------------------------------------------------------------
   Footer — the navy anchor.
   Reuses the hero's exact material: the same gradient, the same
   radial glow, the same masked grid. The page opens and closes on
   one surface rather than merely sharing a colour.
   ------------------------------------------------------------ */

.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-3xl);
    padding: var(--space-2xl) 0 var(--space-lg);
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: rgba(255, 255, 255, .72);
    font-size: .85rem;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(42, 157, 143, .14) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(233, 196, 106, .07) 0%, transparent 55%);
    pointer-events: none;
}

.site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black, transparent);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black, transparent);
    pointer-events: none;
}

.site-footer > * { position: relative; z-index: 1; }

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

/* Larger than the header mark: a sign-off, not a repeated logo. */
.site-footer__wordmark {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: var(--space-sm);
}

.site-footer__wordmark span { color: var(--teal-bright); }

.site-footer__blurb {
    color: rgba(255, 255, 255, .82);
    max-width: 42ch;
    margin-bottom: var(--space-sm);
}

.site-footer__note {
    color: rgba(255, 255, 255, .62);
    max-width: 46ch;
    font-size: .8rem;
    line-height: 1.6;
}

.site-footer__label {
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-sm);
}

.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-xs); }

.site-footer a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.site-footer a:hover {
    color: var(--teal-bright);
    border-bottom-color: var(--teal-bright);
}

.site-footer a:focus-visible {
    outline: 2px solid var(--teal-bright);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-footer__legal {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, .14);
    /* .55 computes to 4.70:1 on the light end of the gradient — inside AA but
       with no headroom for the amber glow behind it. .64 gives ~5.6:1. */
    color: rgba(255, 255, 255, .64);
    font-size: .8rem;
}

@media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .site-footer__col li { margin-bottom: var(--space-sm); }
    .site-footer__col a { display: inline-block; min-height: 32px; }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: .6rem 1.4rem;
    font-family: var(--body);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    min-height: 44px;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary   { background: var(--teal);  color: #fff; }
.btn--primary:hover { color: #fff; }
.btn--secondary { background: var(--navy);  color: #fff; }
.btn--secondary:hover { color: #fff; }
.btn--amber     { background: var(--amber); color: var(--text); }
.btn--amber:hover { color: var(--text); }
.btn--coral     { background: var(--coral); color: #fff; }
.btn--coral:hover { color: #fff; }
.btn--outline   { background: transparent; color: var(--navy); border-color: var(--silver); }
.btn--outline:hover { border-color: var(--teal); color: var(--teal); }
.btn--ghost     { background: transparent; color: var(--teal); border-color: var(--teal); }

.btn--sm { padding: .35rem .9rem; font-size: .8rem; min-height: 36px; }
.btn--lg { padding: .75rem 1.75rem; font-size: 1rem; min-height: 52px; }
.btn--block { width: 100%; }

/* ============================================================
   Hero — the CityReady .cover treatment, scaled to a band
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 50%, #2A4F7A 100%);
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(42, 157, 143, .12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(233, 196, 106, .08) 0%, transparent 50%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}

.hero__inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }

.hero__label {
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-md);
}

.hero__title {
    font-family: var(--display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: var(--space-md);
}

.hero__title em { font-style: italic; color: var(--amber); }

.hero__subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.65;
    margin-bottom: var(--space-xl);
}

/* ============================================================
   Cards and grid
   ============================================================ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--silver);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(42, 157, 143, .4);
}

.card:focus-within { box-shadow: var(--focus-ring); }

.card__media { position: relative; aspect-ratio: 3 / 2; background: var(--cloud); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Generated panel for listings with no uploaded photo. Same material as the
   hero and the footer, so an image-less card still looks like this site rather
   than like a missing asset. */
.card__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
    overflow: hidden;
}

.card__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 15%, black, transparent);
    mask-image: radial-gradient(ellipse 80% 70% at 70% 15%, black, transparent);
    pointer-events: none;
}

.card__panel-date,
.card__panel-name { position: relative; z-index: 1; }

.card__panel-date {
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

.card__panel-name {
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1.15;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .card__panel-name { font-size: 1.2rem; }
}

/* Hides the heading on panel cards, where the panel already shows the name.
   Deliberately NOT .visually-hidden: that uses position:absolute, which makes
   this element the containing block for .card__link::after and collapses the
   whole-card click target to a 1px box. clip-path and transform would do the
   same, so this uses height:0 + overflow:hidden and stays position:static. */
.card__title--quiet {
    position: static;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.card__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); }

.card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }

.card__title { font-family: var(--display); font-size: 1.15rem; color: var(--navy); }

/* The whole card is clickable, but exactly one real anchor carries the
   accessible name — never a div with an onclick. */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ''; position: absolute; inset: 0; }

.card__meta {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray);
}

/* ============================================================
   Badges and pills
   ============================================================ */

.badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--teal  { background: var(--teal);  color: #fff; }
/* Amber requires dark text to meet contrast. Do not change to white. */
.badge--amber { background: var(--amber); color: #1E2532; }
.badge--coral { background: var(--coral); color: #fff; }
.badge--muted { background: var(--silver); color: var(--dim); }

.pill {
    display: inline-block;
    background: var(--cloud);
    border: 1px solid var(--silver);
    border-radius: var(--radius);
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--navy);
}

.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ============================================================
   Callouts — used for the freshness line
   ============================================================ */

.callout {
    border-left: 3px solid var(--teal);
    background: rgba(42, 157, 143, .04);
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.callout--amber { border-left-color: var(--amber); background: rgba(233, 196, 106, .08); }
.callout--coral { border-left-color: var(--coral); background: rgba(231, 111, 81, .05); }

.callout__label {
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    display: block;
    margin-bottom: var(--space-xs);
}

.callout--amber .callout__label { color: var(--amber-deep); }
.callout--coral .callout__label { color: var(--coral); }

/* ============================================================
   Forms
   ============================================================ */

.form { max-width: 720px; }

.field { margin-bottom: var(--space-lg); }

.field label, .field legend {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--space-xs);
}

.field__hint { font-size: .8rem; color: var(--gray); margin-bottom: var(--space-xs); }

.input, .textarea, .select {
    width: 100%;
    padding: .65rem 1rem;
    border: 1.5px solid var(--silver);
    border-radius: var(--radius);
    font-family: var(--body);
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    min-height: 44px;
}

.textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.select[multiple] { min-height: 11rem; }

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, .1);
}

.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--coral); }

.field__error { color: var(--coral); font-size: .8rem; margin-top: var(--space-xs); }

fieldset { border: 0; }

.radio-group { display: flex; flex-direction: column; gap: var(--space-sm); }

/* The whole row is the tap target, not just the circle. 48px minimum. */
.radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    min-height: 48px;
    padding: var(--space-sm) var(--space-md);
    border: 1.5px solid var(--silver);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .9rem;
    color: var(--text-light);
}

.radio-option:hover { border-color: var(--teal); }
.radio-option input { width: 18px; height: 18px; accent-color: var(--teal); margin-top: .3rem; flex-shrink: 0; }
.radio-option:has(input:checked) { border-color: var(--teal); background: rgba(42, 157, 143, .04); }

.form-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }

/* ============================================================
   Tables
   ============================================================ */

/* position: relative makes this the containing block for any absolutely
   positioned descendant (e.g. a .visually-hidden screen-reader-only table
   header). Without it, such a descendant's containing block is the
   viewport, not this scroll container, so its geometry escapes the
   overflow-x clip here and inflates the whole document's scrollWidth even
   though it is visually invisible. */
.table-wrap { overflow-x: auto; position: relative; }

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }

.table thead th {
    text-align: left;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray);
    padding: .75rem 1rem;
    border-bottom: 2px solid var(--silver);
    background: var(--cloud);
    white-space: nowrap;
}

.table tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--silver);
    color: var(--text-light);
    vertical-align: top;
}

.table tbody tr:hover { background: rgba(42, 157, 143, .02); }
.table tbody tr.is-stale { background: rgba(233, 196, 106, .07); }

/* ============================================================
   Flashes, pagination, empty state
   ============================================================ */

.flashes { max-width: 1120px; margin: var(--space-md) auto 0; padding: 0 var(--space-lg); }

.flash {
    border-left: 3px solid var(--teal);
    background: rgba(42, 157, 143, .06);
    padding: var(--space-sm) var(--space-md);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .9rem;
    margin-bottom: var(--space-sm);
    color: var(--text);
}

.flash--warning { border-left-color: var(--amber); background: rgba(233, 196, 106, .1); }
.flash--error   { border-left-color: var(--coral); background: rgba(231, 111, 81, .07); }
.flash--info    { border-left-color: var(--navy);  background: var(--cloud); }

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-2xl) 0;
    font-size: .85rem;
}

.pagination a, .pagination span {
    padding: .4rem .8rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--dim);
    border: 1px solid var(--silver);
}

.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination .is-current { background: var(--navy); color: #fff; border-color: var(--navy); }

.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: var(--cloud);
    border: 1px dashed var(--silver);
    border-radius: var(--radius-lg);
    margin: var(--space-xl) 0;
}

.empty-state h2 { margin-bottom: var(--space-sm); }
.empty-state p { max-width: 44ch; margin: 0 auto var(--space-lg); }

/* ============================================================
   Pages
   ============================================================ */

/* Longhand, deliberately: .page is always applied alongside .container,
   and a `padding` shorthand here would win the whole property on equal
   specificity and wipe .container's horizontal gutter. */
.page { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.page__header { margin-bottom: var(--space-xl); }

.detail-hero {
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: #fff;
    padding: var(--space-2xl) 0;
}

.detail-hero h1 { color: #fff; margin: var(--space-sm) 0; }
.detail-hero__org { color: rgba(255, 255, 255, .6); font-size: 1rem; }
.detail-hero__image { border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-lg); }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-2xl); align-items: start; }

.detail-section { margin-bottom: var(--space-2xl); }
.detail-section > .section-label { margin-bottom: var(--space-sm); display: block; }
.detail-section p { white-space: pre-line; }

.sidebar-card {
    border: 1px solid var(--silver);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: #fff;
    position: sticky;
    top: 84px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1023px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-grid { grid-template-columns: 1fr; }
    .sidebar-card { position: static; }
}

@media (max-width: 767px) {
    .card-grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.45rem; }
    .page { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .form-actions .btn { width: 100%; }

    /* The header row (wordmark + nav) is wider than 375px once a user is
       logged in: wordmark, "Dashboard", "List a competition", and the
       logout form together exceed the available width, and flex items
       don't shrink below their content's min-width by default, so the
       row pushed nav's right edge past the viewport instead of wrapping.
       Letting the header wrap moves nav to its own line, and letting nav
       itself wrap covers the case where nav's own items alone are still
       too wide (e.g. a longer display context). */
    .site-header__inner { flex-wrap: wrap; row-gap: var(--space-xs); }
    .site-nav { flex-wrap: wrap; justify-content: flex-end; gap: 0; width: 100%; }

    /* 48px minimum tap targets on mobile. Desktop sizes above are untouched. */
    .btn, .btn--sm, .btn--lg { min-height: 48px; }

    .site-nav a, .site-nav button.linklike {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: var(--space-sm) var(--space-md);
    }
}

/* ============================================================
   Motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card:hover { transform: none; }
}