/* ==========================================================================
   Youth Suicide Prevention Ireland — yspi.ie

   Palette is taken from the charity's own youthcrisiscounselling.ie rather
   than invented: indigo #415ca3, yellow #f5d948, coral #eb6c44. It means
   yspi.ie finally looks related to the rest of the family.

   Red is reserved for genuine crisis information and nothing else. Coral is
   deliberately kept distinct from it so the two never read as the same signal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — self-hosted so visitor IPs are never sent to a third party.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/nunitosans-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;
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/nunitosans-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-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* No italic webfont: <em> appears once on the page, so a synthesised
   oblique is a better trade than a 20 KB download. */


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand indigo — #415ca3 is the charity's existing brand blue. */
    --indigo-900: #1e2a4d;
    --indigo-800: #2b3c6e;
    --indigo-700: #35487f;
    --indigo-600: #415ca3;
    --indigo-400: #7b90c9;
    --indigo-200: #b9c6e6;
    --indigo-100: #dde4f4;
    --indigo-50:  #eef2fb;

    --yellow:      #f5d948;
    --yellow-deep: #c9ac1c;
    --coral:       #eb6c44;
    --coral-deep:  #c1471f;

    /* Crisis only. Never reuse for anything else. */
    --crisis:      #c1121f;
    --crisis-dark: #8d0d17;

    /* The sticky bar alone. It is on screen the whole time a person is reading,
       so it is softened and desaturated relative to --crisis, which stays at
       full strength for the things that appear only when they mean something:
       the emergency panel, form errors, the crisis door.
       White text on this is 5.03:1, comfortably past the 4.5:1 AA threshold.
       Do not lighten it further without re-checking that. */
    --crisis-bar:  #c0444e;

    --ink:        #161c2e;
    --ink-soft:   #414a63;
    --ink-faint:  #5b6478;

    --paper:      #ffffff;
    --paper-warm: #fbfaf7;
    --paper-tint: #f4f6fc;

    --line:       rgba(30, 42, 77, 0.14);
    --shadow-sm:  0 1px 2px rgba(22, 28, 46, 0.06), 0 2px 8px rgba(22, 28, 46, 0.05);
    --shadow-md:  0 2px 6px rgba(22, 28, 46, 0.07), 0 14px 32px rgba(22, 28, 46, 0.12);
    --shadow-lg:  0 8px 20px rgba(22, 28, 46, 0.10), 0 28px 60px rgba(22, 28, 46, 0.16);

    --radius:     16px;
    --radius-sm:  10px;

    --measure:    66ch;
    --gutter:     clamp(1.15rem, 4vw, 2.5rem);
    --shell:      1200px;

    --step-0:  1.0625rem;
    --step-1:  clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem);
    --step-2:  clamp(1.35rem, 0.8vw + 1.15rem, 1.7rem);
    --step-3:  clamp(1.6rem,  1.4vw + 1.25rem, 2.2rem);
    --step-4:  clamp(2rem,    2.6vw + 1.35rem, 3rem);
    --step-5:  clamp(2.4rem,  4.2vw + 1.4rem,  4rem);

    --ease:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--step-0);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Lining tabular figures so statistics align in columns without
       resorting to a monospace font. */
    font-variant-numeric: lining-nums;
}

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

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo-600); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--indigo-900); }

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

ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 700; }

:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
    border-radius: 3px;
}

::selection { background: var(--indigo-400); color: var(--ink); }

.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;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.4rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--paper); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

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

.shell--narrow { max-width: 860px; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.section--sand  { background: var(--paper-warm); }
.section--tint  { background: var(--indigo-50); }
.section--deep  { background: var(--indigo-900); color: var(--paper); }
.section--deep h2, .section--deep h3 { color: var(--paper); }
.section--deep a:not(.btn) { color: var(--indigo-200); }
.section--deep a:not(.btn):hover { color: var(--paper); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { font-size: var(--step-1); color: var(--ink-soft); }
.section--deep .section-head p { color: rgba(255, 255, 255, 0.82); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--indigo-600);
    margin-bottom: 0.9rem;
}
.section--deep .eyebrow { color: var(--indigo-200); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--indigo-700); color: var(--paper); }
.btn--primary:hover { background: var(--indigo-900); color: var(--paper); }

.btn--donate { background: var(--coral); color: #2a1a05; }
.btn--donate:hover { background: var(--coral-deep); color: var(--paper); }

.btn--ghost { border-color: currentColor; color: var(--indigo-900); background: transparent; }
.btn--ghost:hover { background: var(--indigo-900); color: var(--paper); border-color: var(--indigo-900); }

/* On any dark ground the outline button has to invert, or it disappears. */
.section--deep .btn--ghost,
.hero .btn--ghost { color: var(--paper); }
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--paper); color: var(--indigo-900); border-color: var(--paper); }

.btn--crisis { background: var(--paper); color: var(--crisis-dark); }
.btn--crisis:hover { background: var(--crisis-dark); color: var(--paper); }

.btn--lg { min-height: 56px; padding: 0.95rem 1.9rem; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. Crisis bar — the most important element on the site.
      Sticky, present in the initial HTML, readable without JavaScript.
   -------------------------------------------------------------------------- */

.crisis-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--crisis-bar);
    color: var(--paper);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.crisis-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-block: 0.6rem;
}

.crisis-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.82rem;
    white-space: nowrap;
}

.crisis-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}
.crisis-bar__links li { margin: 0; }

.crisis-bar a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--paper);
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    padding-block: 2px;
}
.crisis-bar a:hover { color: var(--paper); border-bottom-color: var(--paper); }
.crisis-bar strong { font-weight: 800; letter-spacing: 0.02em; }

/* The SMS icon earns its place only on small screens, where it replaces the
   "Need help now?" label. On desktop the label already carries a life ring. */
.crisis-bar__icon { display: none; }

/* Small screens.
   -------------
   Three items flowing as a wrapped sentence produced a 117px sticky bar of
   ragged text with 20px tap targets — on the one element someone in crisis has
   to hit first time, on a phone, possibly with shaking hands.

   So on narrow screens it stops being a sentence and becomes three buttons:
   the text message across the top, gethelp.ie and 999/112 side by side beneath.
   Every one is a full tap target of at least 44px.

   "Need help now?" goes to screen readers only. It costs a whole row here, and
   a red bar reading "Text CRISIS" above "Emergency 999/112" is not ambiguous
   about what it is for. */
@media (max-width: 40rem) {
    .crisis-bar__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        padding-block: 0.5rem;
    }

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

    /* Let the list items become grid items in their own right, so the two
       short ones can share a row instead of wrapping unevenly. */
    .crisis-bar__links { display: contents; }
    .crisis-bar__primary { grid-column: 1 / -1; }

    .crisis-bar a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
        padding: 0.3rem 0.6rem;
        font-size: 0.9rem;
        text-align: center;
        /* Chips rather than underlines. An underline under wrapped text reads
           as a stray rule; a filled shape reads as something to press. */
        border-bottom: 0;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.16);
    }
    .crisis-bar__primary a {
        font-size: 0.95rem;
        background: rgba(255, 255, 255, 0.22);
    }
    .crisis-bar__icon { display: inline-block; }
}

/* Narrower still. At 320px "Text CRISIS to 086 180 2895 — 24/7" cannot hold
   one line, and the number matters more than the opening hours. */
@media (max-width: 22.5rem) {
    .crisis-bar__aside { display: none; }
    .crisis-bar a { font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   7. Masthead
   -------------------------------------------------------------------------- */

.masthead {
    background: var(--indigo-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.85rem;
}

/* The real 2018 lockup, white on indigo — not a redrawn approximation. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img {
    width: clamp(150px, 15vw, 190px);
    height: auto;
    transition: transform 0.4s var(--ease);
}
.brand:hover img { transform: scale(1.03); }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    background: rgba(255, 255, 255, 0.10);
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }

.nav {
    display: flex;
    align-items: center;
    /* nowrap on purpose. With wrap, the nav breaks its own row before the
       masthead runs out of width, which is what put the sixth menu item on a
       second line. Below 1100px the mobile menu takes over, so this only ever
       applies where there is room. */
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.75rem clamp(0.75rem, 1.4vw, 1.5rem);
}

.nav__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.8rem, 1.3vw, 1.35rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__list li { margin: 0; }

.nav__list a {
    display: inline-block;
    padding: 0.4rem 0;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__list a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
}
.nav__phone:hover { color: var(--yellow); }

@media (max-width: 1100px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 1rem;
    }
    .masthead__inner { flex-wrap: wrap; }
    .nav[data-open='true'] { display: flex; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__list a {
        /* Block, so the divider rule spans the column rather than just the
           width of the label, and the whole row is tappable. */
        display: block;
        padding: 0.85rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
    .nav__list a:hover { border-bottom-color: var(--yellow); }
    .nav__phone { padding: 0.95rem 0.25rem; }
    .nav .btn { margin-top: 0.85rem; }
}

/* --------------------------------------------------------------------------
   8. Hero — typographic, no photography, no image dependency.
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--indigo-900);
    color: var(--paper);
    padding-block: clamp(3.25rem, 8vw, 6rem);
}

.hero::after {
    /* Soft off-centre glow. Pure CSS, costs no request. */
    content: '';
    position: absolute;
    right: -12%;
    top: -35%;
    width: 60vw;
    max-width: 720px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(127, 188, 189, 0.30) 0%, rgba(127, 188, 189, 0) 68%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero h1 { color: var(--paper); margin-bottom: 0.45em; }

.hero__lead {
    font-size: var(--step-2);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    max-width: 34ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.hero__note {
    margin-top: 1.75rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 42ch;
}

/* The Let's Talk illustration is landscape where the mark it replaced was
   nearly square, so the art column is wider than it was. The PNG carries
   transparency, so the figures sit straight on the hero with no panel. */
.hero__art { justify-self: center; width: 100%; max-width: 520px; }
.hero__art img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__art { max-width: 420px; order: -1; }
}

/* --------------------------------------------------------------------------
   9. Doors — the three reasons anyone visits.
   -------------------------------------------------------------------------- */

.doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.door {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.door:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--indigo-400);
    color: inherit;
}

.door__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    font-size: 1.5rem;
}

.door h3 { margin: 0; }
.door p { color: var(--ink-soft); margin: 0; }

.door__go {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 700;
    color: var(--indigo-600);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.door:hover .door__go { color: var(--indigo-900); }
.door:hover .door__go i { transform: translateX(3px); }
.door__go i { transition: transform 0.18s ease; }

/* The crisis door carries the only red outside the crisis bar and the
   emergency panel — it is, literally, the crisis route. */
.door--crisis { border-color: rgba(193, 18, 31, 0.35); }
.door--crisis .door__icon { background: rgba(193, 18, 31, 0.09); color: var(--crisis); }
.door--crisis .door__go { color: var(--crisis); }
.door--crisis:hover { border-color: var(--crisis); }
.door--crisis:hover .door__go { color: var(--crisis-dark); }

/* --------------------------------------------------------------------------
   10. Impact figures — these stand in for the photography we don't have.
   -------------------------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.stat {
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.stat__figure {
    display: block;
    font-size: clamp(2.3rem, 4.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--indigo-900);
    font-variant-numeric: tabular-nums lining-nums;
}

.stat__label {
    display: block;
    margin-top: 0.6rem;
    font-weight: 700;
    color: var(--ink);
}

.stat__note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.92rem;
    color: var(--ink-faint);
}

.stat--feature {
    grid-column: 1 / -1;
    background: var(--indigo-900);
    border-color: var(--indigo-900);
    color: var(--paper);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
}
.stat--feature .stat__figure { color: var(--paper); }
.stat--feature .stat__label { color: var(--paper); font-size: var(--step-1); }
.stat--feature .stat__note { color: rgba(255, 255, 255, 0.75); }
.stat--feature > div { flex: 1 1 14rem; }

.source-note {
    margin-top: 1.75rem;
    font-size: 0.92rem;
    color: var(--ink-faint);
    max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   11. Programme cards
   -------------------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 100%;
}
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.card__icon { font-size: 1.7rem; color: var(--indigo-600); }
.card__link { margin-top: auto; padding-top: 0.6rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Transparency
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

/* Side-by-side panels that should share a baseline height. */
.split--stretch { align-items: stretch; }
.split--stretch > * { height: 100%; }

.ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ledger li {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.ledger li:last-child { border-bottom: 0; }
.ledger i { color: var(--indigo-600); margin-top: 0.28rem; flex-shrink: 0; }
.section--deep .ledger i { color: var(--indigo-200); }
.section--deep .ledger li { border-bottom-color: rgba(255, 255, 255, 0.18); }

.spend-meter {
    background: var(--paper);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ink);
}
.spend-meter h3 { color: var(--ink); }

.meter {
    display: flex;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    margin: 1.25rem 0 1rem;
    border: 1px solid var(--line);
}
.meter__part { height: 100%; }
.meter__part--programmes { background: var(--indigo-600); }
.meter__part--fundraising { background: var(--indigo-400); }
.meter__part--admin { background: var(--paper-tint); }

.meter-key {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}
.meter-key li { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.meter-key span:first-child {
    width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
}
.meter-key b { margin-left: auto; font-variant-numeric: tabular-nums lining-nums; }

/* --------------------------------------------------------------------------
   13. Emergency panel — full crisis detail, red is correct here.
   -------------------------------------------------------------------------- */

.emergency {
    border: 2px solid var(--crisis);
    border-radius: var(--radius);
    background: var(--paper);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.emergency h3 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--crisis-dark);
    margin-bottom: 0.6rem;
}
.emergency ul { margin: 0 0 1rem; }
.emergency__call {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--crisis);
    color: var(--paper);
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.emergency__call a { color: var(--paper); }

.freetext {
    background: var(--indigo-900);
    color: var(--paper);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.freetext h3 { color: var(--paper); }
.freetext__code {
    display: block;
    margin: 1rem 0;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.freetext__code em { font-style: normal; color: var(--indigo-200); }
.freetext p { color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   14. Contact form
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}
.field--full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
    /* One line always: a wrapped label makes its field taller than the others
       in the row and knocks the inputs out of alignment. */
    white-space: nowrap;
}

.field__optional {
    font-weight: 400;
    color: var(--ink-faint);
}

/* Every field in a row shares a baseline regardless of label length. */
.form-grid { align-items: end; }
.field { min-width: 0; }

.field input,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-sm);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--indigo-600); }
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--crisis); border-width: 2px; }

/* Honeypot: hidden from people, filled in by naive bots. */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Anti-spam sum. Set apart from the fields that carry the enquiry, so it
   reads as a small step rather than another thing we are asking for. The
   answer is one or two characters, so the input stays short — a full-width
   box would imply we wanted more. */
.field--sum {
    grid-column: 1 / -1;
    padding: 0.9rem 1.1rem;
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    border-radius: var(--radius-sm);
}
.field--sum label { white-space: normal; }
.field--sum input {
    max-width: 7rem;
    font-variant-numeric: tabular-nums;
}

.field__hint {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.form-status {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.form-status[data-state='error']   { background: rgba(193, 18, 31, 0.09); color: var(--crisis-dark); }
.form-status[data-state='success'] { background: var(--indigo-50); color: var(--indigo-900); }
.form-status[hidden] { display: none; }

.contact-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-bottom: 1.75rem;
    font-size: var(--step-1);
    font-weight: 700;
}
.contact-lines a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. Donate
   -------------------------------------------------------------------------- */

.donate-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}

.donate-options {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.donate-options li { margin: 0; }

.donate-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.82);
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem;
    font-size: 0.97rem;
}
.site-footer h2 { color: var(--paper); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
}
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: 0.55rem; }
.footer-list i { width: 1.1rem; margin-right: 0.45rem; color: var(--indigo-200); }

.legal {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.62);
}
.legal p { max-width: none; }
/* Links inside a block of text need more than colour to be distinguishable. */
.legal a { text-decoration: underline; }

.to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
    .crisis-bar { position: static; }
    .nav-toggle, .nav, .to-top, .hero__art { display: none !important; }
    body { color: #000; font-size: 11pt; }
    .hero, .section--deep, .site-footer { background: #fff !important; color: #000 !important; }
    .hero h1, .section--deep h2, .section--deep h3 { color: #000 !important; }
}

/* ==========================================================================
   18. Motion
   
   All of it is opt-in via data-reveal and driven by one IntersectionObserver
   in js/yspi.js. Two rules govern it:
     - Nothing on the crisis route ever animates. Someone in distress should
       never wait on choreography to find a phone number.
     - Everything collapses to a static page under prefers-reduced-motion,
       which is handled by the global block in section 3.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .js [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }
    .js [data-reveal].is-visible { opacity: 1; transform: none; }

    /* Children stagger in sequence rather than arriving as a slab. */
    .js [data-reveal-group] > * {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
    .js [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
    .js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.07s; }
    .js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
    .js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.21s; }
    .js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.28s; }
    .js [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.35s; }
    .js [data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.42s; }
    .js [data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.49s; }

    /* Hero assembles on load rather than appearing all at once. */
    .js .hero__inner > div > * { animation: rise 0.85s var(--ease) both; }
    .js .hero__inner > div > *:nth-child(1) { animation-delay: 0.05s; }
    .js .hero__inner > div > *:nth-child(2) { animation-delay: 0.15s; }
    .js .hero__inner > div > *:nth-child(3) { animation-delay: 0.25s; }
    .js .hero__inner > div > *:nth-child(4) { animation-delay: 0.35s; }
    .js .hero__inner > div > *:nth-child(5) { animation-delay: 0.45s; }
    .js .hero__art { animation: rise 1s var(--ease) 0.2s both; }

    @keyframes rise {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: none; }
    }

    /* Slow drift behind the hero. Very low amplitude — it should register as
       depth, not as something moving on the page. */
    .hero::after { animation: drift 22s ease-in-out infinite alternate; }
    @keyframes drift {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(-4%, 5%, 0) scale(1.12); }
    }

}

/* ==========================================================================
   19. Programme rows
   ========================================================================== */

.programme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.75rem, 4vw, 3.5rem);
    /* Top-aligned: with a long text column, centring leaves the image
       floating in the middle of the row looking unmoored. */
    align-items: start;
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--line);
}
.programme:first-of-type { border-top: 0; }

/* Alternate which side the image sits on so the page doesn't march. */
.programme--flip > figure { order: -1; }
@media (max-width: 800px) {
    .programme--flip > figure { order: 0; }
}

.programme figure { margin: 0; }
/* Keep the image in view while a long text column scrolls past it. */
@media (min-width: 900px) {
    .programme > figure { position: sticky; top: 7rem; }
}
.programme img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.programme figure:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.programme figcaption {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    color: var(--ink-faint);
}

.programme__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.programme__label--coral { background: rgba(235, 108, 68, 0.14); color: var(--coral-deep); }
.programme__label--yellow { background: rgba(245, 217, 72, 0.30); color: #7a6605; }

/* Inline supporting number — a fact inside a sentence, not a trophy. */
.figure-inline {
    font-weight: 800;
    color: var(--indigo-600);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Topic chips: the booklet titles, which are the actual substance of the
   Coping With and Understanding Addiction series. */
.topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}
.topics li {
    margin: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: 0.9rem;
    color: var(--ink-soft);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.topics li:hover {
    border-color: var(--indigo-400);
    color: var(--indigo-700);
    transform: translateY(-2px);
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.97rem;
}
.facts li { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--ink-soft); }
.facts i { color: var(--coral); }

/* ==========================================================================
   20. Accents
   ========================================================================== */

/* A yellow rule under section headings, so the palette lives outside buttons. */
.section-head h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 0.7rem;
    border-radius: 999px;
    background: var(--yellow);
}
.section--deep .section-head h2::after { background: var(--yellow); }

.btn--yellow { background: var(--yellow); color: #3a2f00; }
.btn--yellow:hover { background: var(--yellow-deep); color: #241d00; }

/* Quiet tertiary action — used for Donate in the hero, where it should be
   available but must not compete with the primary route into the work. */
.link-quiet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    transition: color 0.2s var(--ease);
}
.link-quiet:hover { color: var(--yellow); }

/* Small outline button — used for Donate in the masthead, where it should be
   findable but must not out-shout the route into the work. */
.btn--sm { min-height: 40px; padding: 0.45rem 1.1rem; font-size: 0.95rem; }
.masthead .btn--ghost { color: var(--paper); border-color: rgba(255, 255, 255, 0.45); }
.masthead .btn--ghost:hover { background: var(--paper); color: var(--indigo-900); border-color: var(--paper); }

/* Stacked figures in a programme row. */
.stack { display: block; }

/* Quiet supporting panel beside a programme block. */
.panel-quiet {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 5px solid var(--coral);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem);
}
.panel-quiet h4 { margin-bottom: 0.7rem; }

/* ==========================================================================
   21. Programme cards

   These are the charity's most important content and were reading as the
   faintest thing on the page: white cards on a white ground, separated by a
   hairline, with 16px icons. Three things fix that — put them on a tinted
   ground so white lifts off it, give each one a colour and a large icon, and
   make the whole card the link rather than a small text link at the bottom.
   ========================================================================== */

.progs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: clamp(1.1rem, 2vw, 1.75rem);
}

.prog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: clamp(1.6rem, 2.6vw, 2.25rem);
    padding-top: clamp(1.9rem, 3vw, 2.5rem);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Colour bar across the top, keyed per programme. Grows on hover so the
   card responds as a single object rather than just the link responding. */
.prog::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--prog-accent);
    transition: height 0.25s var(--ease);
}

.prog:hover,
.prog:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}
.prog:hover::before,
.prog:focus-visible::before { height: 12px; }

.prog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 0.35rem;
    border-radius: 18px;
    background: var(--prog-wash);
    color: var(--prog-accent-ink);
    font-size: 1.7rem;
    transition: transform 0.25s var(--ease);
}
.prog:hover .prog__icon { transform: scale(1.06) rotate(-3deg); }

.prog h3 {
    margin: 0;
    font-size: var(--step-2);
    color: var(--ink);
}

.prog p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
}

/* A concrete number per card. "753 secondary schools" says more about the
   programme than another sentence of description would. */
.prog__stat {
    margin-top: auto;
    padding-top: 1.1rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}
.prog__stat strong {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--prog-accent-ink);
    font-variant-numeric: tabular-nums lining-nums;
}

.prog__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-weight: 700;
    color: var(--prog-accent-ink);
}
.prog__go i { transition: transform 0.25s var(--ease); }
.prog:hover .prog__go i { transform: translateX(4px); }

/* Per-programme colour. accent paints the bar and the icon wash; accent-ink
   is the darkened version used for text, so every one clears 4.5:1. */
.prog--indigo { --prog-accent: #415ca3; --prog-wash: #e4eaf7; --prog-accent-ink: #35487f; }
.prog--coral  { --prog-accent: #eb6c44; --prog-wash: #fdeae3; --prog-accent-ink: #b8441c; }
.prog--yellow { --prog-accent: #f5d948; --prog-wash: #fdf6da; --prog-accent-ink: #7a6605; }
.prog--crisis { --prog-accent: #c1121f; --prog-wash: #fbe6e8; --prog-accent-ink: #a30f1a; }

/* ==========================================================================
   22. Information directory

   The old site's "Search for Information" accordion, rebuilt as <details>.
   The original needed Bootstrap, jQuery and Popper to open a panel; this
   needs no JavaScript at all, which matters because the section is a
   signpost — if it will not open, the links inside it may as well not exist.
   ========================================================================== */

.infocats {
    display: grid;
    gap: 0.6rem;
    max-width: 52rem;
}

.infocat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.infocat[open] { border-color: var(--indigo-200); }

.infocat__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 56px;
    padding: 0.85rem 1.15rem;
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    /* The default disclosure triangle is replaced by the chevron below. */
    list-style: none;
}
.infocat__head::-webkit-details-marker { display: none; }
/* Not --indigo-50 for these: the section sits on that colour, so an open head
   tinted the same would read as a hole in the card rather than a header. */
.infocat__head:hover { background: var(--paper-tint); }
.infocat[open] .infocat__head {
    background: var(--paper-tint);
    border-bottom: 1px solid var(--line);
}

.infocat__icon {
    color: var(--indigo-600);
    font-size: 1.15em;
    width: 1.4em;
    text-align: center;
    flex-shrink: 0;
}

/* Pushed right, and rotated to point up once the panel is open. */
.infocat__chevron {
    margin-left: auto;
    color: var(--ink-faint);
    font-size: 0.85em;
    transition: transform 0.25s var(--ease);
}
.infocat[open] .infocat__chevron { transform: rotate(180deg); }

.infocat__list {
    margin: 0;
    padding: 0.4rem 0.6rem 0.7rem;
    list-style: none;
}

.infocat__item { margin: 0; }

.infocat__item a {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
}
.infocat__item a:hover { background: var(--indigo-50); }
.infocat__item a:hover .infocat__label { text-decoration: underline; }

.infocat__label {
    display: block;
    font-weight: 700;
    color: var(--indigo-600);
}
.infocat__label i { width: 1.2em; text-align: center; }

.infocat__desc {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* "Immediate Assistance" carried a red row style in the original. Kept, and
   it is the one place in this section where the crisis red is warranted. */
.infocat__item--crisis a {
    border-left: 3px solid var(--crisis);
    background: rgba(193, 18, 31, 0.05);
}
.infocat__item--crisis .infocat__label { color: var(--crisis-dark); }
.infocat__item--crisis a:hover { background: rgba(193, 18, 31, 0.10); }

/* The social row is a label plus three icon links, not one link. */
.infocat__item--social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.85rem;
}
.infocat__social { display: flex; gap: 0.35rem; }
.infocat__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--indigo-50);
    color: var(--indigo-600);
    text-decoration: none;
}
.infocat__social a:hover { background: var(--indigo-600); color: var(--paper); }

/* --------------------------------------------------------------------------
   23. Charity and legal particulars, under the contact form
   -------------------------------------------------------------------------- */

/* Full column width, not the 66ch measure. That measure exists to keep running
   prose readable; this is a reference block that is scanned rather than read,
   and holding it to 66ch inside an 860px column just left a ragged gap. */
.legal-note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-faint);
}
.legal-note p { margin: 0 0 0.7rem; max-width: none; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-note strong { color: var(--ink-soft); font-weight: 700; }

/* Phone and email side by side, stacking on their own when there is no room
   rather than breaking mid-detail. */
.legal-note__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.75rem;
}
.legal-note__contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.legal-note__contact i { color: var(--indigo-600); }
.legal-note__contact a { font-weight: 700; }

/* --------------------------------------------------------------------------
   24. Cookie notice

   A bar, not a modal, and never over the crisis bar. Someone arriving in
   distress must not have to dismiss a legal notice to reach a phone number,
   so this sits at the bottom, above the fold of nothing, and the page is
   fully usable with it on screen.
   -------------------------------------------------------------------------- */

.cookie-note {
    position: fixed;
    inset: auto 0 0 0;
    /* Under the crisis bar's 100 on purpose: if the two ever met, the crisis
       information wins. */
    z-index: 90;
    background: var(--indigo-900);
    color: rgba(255, 255, 255, 0.92);
    border-top: 3px solid var(--yellow);
    box-shadow: 0 -8px 28px rgba(22, 28, 46, 0.28);
}
.cookie-note[hidden] { display: none; }

.cookie-note__inner {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.9rem var(--gutter);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.cookie-note__text {
    flex: 1 1 24rem;
    margin: 0;
    max-width: none;
    font-size: 0.92rem;
    line-height: 1.55;
}
.cookie-note__text i { color: var(--yellow); margin-right: 0.35rem; }
.cookie-note a { color: var(--indigo-200); font-weight: 700; }
.cookie-note a:hover { color: var(--paper); }

.cookie-note__ok {
    flex: none;
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--yellow);
    font-weight: 700;
}
.cookie-note__ok:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Slides up once, and not at all for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    .cookie-note { animation: cookie-rise 0.35s var(--ease) both; }
    @keyframes cookie-rise {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }
}