/* =====================================================================
   South Point English School — design tokens, reset and primitives
   ---------------------------------------------------------------------
   Layer 1 of 3:
     base.css    tokens, reset, typography, layout primitives, buttons
     site.css    header, footer, sections, carousel, page components
     admin.css   content management system
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
    /* --- Colour -------------------------------------------------------
       A fresh, bright green family. The school's original #0a8262 is kept,
       but it now sits in the MIDDLE of the scale rather than at the light
       end: every shade above it is lighter and more saturated, and the
       deep surfaces (footer, page headers, call-to-action bands) are a
       friendly mid green instead of the near-black #033327 that made the
       site read as sombre.

       Contrast against white, so the scale stays legible:
         --brand-600 #0a8262  4.8:1  buttons and fills carrying white text
         --brand-700 #0a8262  4.8:1  links and small text
         --brand-800 #0a7a5c  5.3:1  headings and emphasis on light
         --brand-900 #0c6e55  6.1:1  deep surfaces; white body copy on them
       --brand-500 and lighter are decorative only: they are never asked to
       carry white text.
       ------------------------------------------------------------------ */
    --brand-900: #0c6e55;   /* deep surfaces — footer, heroes, CTA bands */
    --brand-800: #0a7a5c;
    --brand-700: #0a8262;   /* the school's green — links and small text */
    --brand-600: #0a8262;   /* primary brand — buttons with white labels */
    --brand-500: #14b083;   /* vivid, decorative */
    --brand-400: #35d1a0;
    --brand-300: #7ee7c2;
    --brand-200: #b9f2dd;
    --brand-100: #d9f9ed;
    --brand-050: #eefdf7;

    /* Sunshine: the old restrained gold, warmed up into a proper yellow.
       --gold-500 and lighter are fills and borders only. --gold-600 is the
       text-safe shade (5.9:1 on white) — the previous value was 3.6:1 and
       was being used on small labels, which was a genuine bug. */
    --gold-600: #8a5a06;
    --gold-500: #f5b526;
    --gold-400: #ffc94d;
    --gold-200: #ffe6a8;
    --gold-100: #fff6de;

    --ink-900: #16231f;     /* headings */
    --ink-800: #27332e;     /* body on light */
    --ink-700: #3d4a44;
    --ink-600: #556259;     /* secondary text */
    --ink-500: #69766d;     /* muted text — 4.6:1 on white */
    --ink-400: #9ea8a1;
    --ink-300: #c6d0c9;
    --ink-200: #dee8e2;     /* borders */
    --ink-100: #eaf3ee;     /* subtle fills */

    --paper: #ffffff;
    --paper-warm: #f4fbf7;  /* section alternation, faintly green */
    --paper-deep: #e8f7f0;
    --paper-sun: #fffaec;   /* warm alternation band */

    /* --- Maroon --------------------------------------------------------
       Used for the signatures on the Principal's and Secretary's letters,
       where a signed name in a second colour reads as a signature rather
       than as another heading. Deliberately the only place on the site
       that leaves the green family, which is what gives it its weight.

       --maroon-700 is the text-safe shade: 10.8:1 on white, so it carries a
       display-size name and small print equally well.
       ------------------------------------------------------------------ */
    --maroon-700: #7a1228;
    --maroon-500: #a51d3a;
    --maroon-100: #fbe9ed;

    /* Semantic */
    --brand: var(--brand-600);
    --brand-dark: var(--brand-800);
    --brand-deep: var(--brand-900);
    --accent: var(--gold-600);

    /* Success deliberately shifts to teal so it is distinguishable from
       the brand green when both appear on the same screen. */
    --success-bg: #e6f9f0;
    --success-border: #a9e6cd;
    --success-text: #12604a;
    --error-bg: #fdf2f2;
    --error-border: #edc9c9;
    --error-text: #8e1f27;
    --warning-bg: #fdf8ed;
    --warning-border: #eadfc0;
    --warning-text: #75581a;
    --info-bg: #f1f4f8;
    --info-border: #cfd8e4;
    --info-text: #2c4463;

    /* --- Typography ---------------------------------------------------
       A serif for headings and a humanist sans for interface text. The
       serif is what carries the sense of an established institution: it
       reads considered and high-class in a way no geometric sans does.
       Warmth comes from the colour and the spacing instead.

       Both are system-first stacks: zero network cost, no layout shift,
       and a consistent result on every device. ---------------------- */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                    "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale. Every step is clamped so text never becomes
       unreadably small at 320px nor absurdly large at 1920px+. */
    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
    --step-0:  clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem);
    --step-1:  clamp(1.08rem, 1.02rem + 0.30vw, 1.25rem);
    --step-2:  clamp(1.25rem, 1.14rem + 0.52vw, 1.55rem);
    --step-3:  clamp(1.45rem, 1.26rem + 0.90vw, 2.00rem);
    --step-4:  clamp(1.70rem, 1.38rem + 1.50vw, 2.60rem);
    --step-5:  clamp(1.95rem, 1.45rem + 2.35vw, 3.35rem);
    --step-6:  clamp(2.20rem, 1.45rem + 3.50vw, 4.25rem);

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.12em;
    --tracking-widest: 0.2em;

    /* --- Spacing: a fluid scale, so vertical rhythm compresses
           gracefully on small screens instead of leaving voids. ------- */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.30rem);
    --space-2xs: clamp(0.45rem, 0.43rem + 0.10vw, 0.55rem);
    --space-xs:  clamp(0.70rem, 0.66rem + 0.18vw, 0.85rem);
    --space-sm:  clamp(1.00rem, 0.94rem + 0.28vw, 1.25rem);
    --space-md:  clamp(1.40rem, 1.28rem + 0.55vw, 1.85rem);
    --space-lg:  clamp(2.00rem, 1.75rem + 1.10vw, 2.90rem);
    --space-xl:  clamp(2.80rem, 2.35rem + 2.00vw, 4.40rem);
    --space-2xl: clamp(3.75rem, 2.95rem + 3.50vw, 6.50rem);
    --space-3xl: clamp(5.00rem, 3.80rem + 5.00vw, 9.00rem);

    /* Section padding, used by every band on the page */
    --section-y: clamp(3.25rem, 2.4rem + 3.8vw, 6.5rem);
    --section-y-tight: clamp(2.25rem, 1.8rem + 2.2vw, 4rem);

    /* --- Layout ------------------------------------------------------- */
    --shell-max: 78rem;          /* 1248px main content ceiling */
    --shell-wide: 88rem;         /* 1408px for full-bleed sections */
    --measure: 68ch;             /* comfortable reading width */
    --measure-narrow: 52ch;
    --gutter: clamp(1.15rem, 0.85rem + 1.5vw, 3rem);

    /* --- Borders and radii ---------------------------------------------
       Softened, but tailored rather than bubbly: enough curve to feel
       considered and modern, not so much that the page reads as a toy. */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --border-hairline: 1px solid var(--ink-200);

    /* --- Glass surfaces ------------------------------------------------
       Translucent panels that pick up the colour behind them. Used with
       restraint: cards, the header, and overlays — never on long passages
       of body text, where a busy backdrop would hurt legibility.

       Each level pairs a background tint with a blur radius. The border
       and the inset highlight are what actually read as "glass"; the blur
       alone just looks faded.
       ------------------------------------------------------------------ */
    --glass-blur-sm: 8px;
    --glass-blur-md: 16px;
    --glass-blur-lg: 28px;

    /* On light backgrounds */
    --glass-light: rgba(255, 255, 255, 0.58);
    --glass-light-strong: rgba(255, 255, 255, 0.78);
    --glass-light-border: rgba(255, 255, 255, 0.85);
    --glass-light-edge: rgba(10, 130, 98, 0.10);

    /* On dark backgrounds and over photography */
    --glass-dark: rgba(12, 110, 85, 0.34);
    --glass-dark-strong: rgba(12, 110, 85, 0.58);
    --glass-dark-border: rgba(255, 255, 255, 0.22);

    /* The highlight along the top edge that suggests a lit surface */
    --glass-sheen: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.08) 38%,
        rgba(255, 255, 255, 0) 100%
    );

    --glass-shadow: 0 8px 32px rgba(12, 110, 85, 0.12), 0 2px 8px rgba(12, 110, 85, 0.07);
    --glass-shadow-lg: 0 20px 56px rgba(12, 110, 85, 0.18), 0 4px 12px rgba(12, 110, 85, 0.09);

    /* --- Scrolling notice band ------------------------------------------
           The school sets all three of these in Website Settings, and the
           values arrive as an inline style on .ticker. These are the
           defaults, used if the band is ever rendered without them, and
           they are also what the installer writes into the database.
           ------------------------------------------------------------------ */
    --ticker-bg: #0c6e55;       /* = --brand-900 */
    --ticker-fg: #ffffff;
    --ticker-duration: 26s;     /* one full pass */

    /* --- Shadows: soft, and tinted green rather than grey, so nothing
           on the page ever looks smudged with black ------------------- */
    --shadow-xs: 0 1px 2px rgba(12, 110, 85, 0.06);
    --shadow-sm: 0 2px 6px rgba(12, 110, 85, 0.08), 0 1px 2px rgba(12, 110, 85, 0.05);
    --shadow-md: 0 6px 16px rgba(12, 110, 85, 0.10), 0 2px 4px rgba(12, 110, 85, 0.05);
    --shadow-lg: 0 14px 34px rgba(12, 110, 85, 0.14), 0 3px 8px rgba(12, 110, 85, 0.06);
    --shadow-xl: 0 26px 60px rgba(12, 110, 85, 0.18);

    /* --- Motion --------------------------------------------------------
       --ease-bounce overshoots slightly before settling, which is what
       makes a card or button feel springy rather than mechanical. Used for
       hovers and entrances; never for anything a visitor has to read while
       it moves. Every use is switched off under prefers-reduced-motion. */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --ease-emphasis: cubic-bezier(0.16, 0.84, 0.44, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 420ms;
    --duration-slower: 700ms;

    /* --- Elevation order ---------------------------------------------- */
    --z-base: 1;
    --z-raised: 10;
    --z-header: 100;
    --z-dropdown: 200;
    --z-drawer: 300;
    --z-overlay: 400;
    --z-toast: 500;

    /* Header height, read by JS and by scroll-margin calculations.
       Tall enough for the enlarged logo plus its vertical padding. */
    --header-height: 5.5rem;
}

/* ---------------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored headings clear the sticky header */
    scroll-padding-top: calc(var(--header-height) + var(--space-sm));
    /* Belt and braces against accidental sideways scroll */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    color: var(--ink-800);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
    min-height: 100vh;
    overflow-x: hidden;
    /* Never let a long word push the layout wider than the screen */
    overflow-wrap: break-word;
}

/* Media defaults: intrinsic sizing prevents both distortion and
   layout shift, since width/height attributes are always supplied. */
img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Images that fill a fixed frame must cover it, never stretch */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------------------
   Inline-icon safety net.

   The icon() helper emits an SVG with a viewBox but no width/height
   attributes, so its size comes entirely from CSS. Without a rule it
   expands to fill its container — which is how an icon can end up
   several hundred pixels tall.

   This gives every inline icon a sensible default tied to the current
   text size. It uses :where() so its specificity is zero, meaning any
   component rule (.feature__icon svg, .btn svg, and so on) overrides it
   without needing !important or a more specific selector.
   --------------------------------------------------------------------- */
:where(svg:not([width]):not([height])) {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

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

fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

/* Long strings in tables/pre must not create horizontal scroll */
td,
th {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-900);
    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); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }

p {
    text-wrap: pretty;
}

a {
    color: var(--brand-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--brand-500);
}

strong, b {
    font-weight: 600;
    color: var(--ink-900);
}

small {
    font-size: var(--step--1);
}

blockquote {
    margin: var(--space-md) 0;
    padding-left: var(--space-sm);
    border-left: 4px solid var(--gold-500);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-style: italic;
    color: var(--ink-700);
}

hr {
    border: 0;
    border-top: var(--border-hairline);
    margin: var(--space-lg) 0;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ---------------------------------------------------------------------
   4. Accessibility
   --------------------------------------------------------------------- */

/* Visible, high-contrast focus for keyboard users only */
:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* On dark backgrounds the ring switches to gold for contrast */
.on-dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
    outline-color: var(--gold-200);
}

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

/* Skip link — hidden until focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -110%);
    z-index: var(--z-toast);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--brand-800);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
    transform: translate(-50%, 0);
    color: #fff;
}

/* Respect a reduced-motion preference throughout */
@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;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   5. Layout primitives
   --------------------------------------------------------------------- */

/* Horizontal shell: centres content and guarantees side gutters at
   every width, which is what keeps 320px screens from touching edges. */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell--wide {
    max-width: var(--shell-wide);
}

.shell--narrow {
    max-width: 58rem;
}

/* Vertical section rhythm */
.section {
    padding-block: var(--section-y);
}

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

.section--warm { background: var(--paper-warm); }
.section--deep { background: var(--paper-deep); }

/* A section carrying glass panels needs colour behind them to refract,
   otherwise the blur has nothing to pick up and reads as flat grey. */
.section--ambient {
    position: relative;
    isolation: isolate;
    background: var(--paper-warm);
}

.section--ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40rem 28rem at 8% 0%, rgba(20, 176, 131, 0.13) 0%, transparent 62%),
        radial-gradient(32rem 24rem at 92% 40%, rgba(245, 181, 38, 0.11) 0%, transparent 60%),
        radial-gradient(36rem 28rem at 60% 100%, rgba(12, 110, 85, 0.08) 0%, transparent 62%);
}

@media (prefers-reduced-transparency: reduce) {
    .section--ambient::before {
        display: none;
    }
}

.section--dark {
    background: var(--brand-900);
    color: rgba(255, 255, 255, 0.86);
}

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

/* Reading column */
.prose {
    max-width: var(--measure);
}

.prose > * + * {
    margin-top: var(--space-sm);
}

.prose p,
.prose li {
    line-height: var(--leading-relaxed);
    color: var(--ink-700);
}

.prose h2 {
    margin-top: var(--space-lg);
    font-size: var(--step-3);
}

.prose h3 {
    margin-top: var(--space-md);
    font-size: var(--step-1);
}

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

.prose li + li {
    margin-top: var(--space-2xs);
}

.prose a {
    text-decoration: underline;
}

.prose table {
    margin-block: var(--space-md);
    font-size: var(--step--1);
    /* Tables are the classic overflow culprit: allow them to scroll
       inside their own box instead of widening the page. */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose th,
.prose td {
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-hairline);
    text-align: left;
}

.prose th {
    background: var(--paper-warm);
    font-weight: 600;
}

/* Generic auto-fitting grid. `--col-min` is the smallest a column may
   get before the grid drops to fewer columns — this is what makes the
   layouts work at every width without a breakpoint for each one. */
.grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 17rem), 100%), 1fr));
}

.grid--tight { gap: var(--space-sm); }
.grid--loose { gap: var(--space-lg); }

.flow > * + * {
    margin-top: var(--space-sm);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.center-text {
    text-align: center;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------
   6. Section headings
   --------------------------------------------------------------------- */
/* A small letter-spaced label preceded by a short gold rule. Quiet,
   editorial, and it lets the heading below it do the talking. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-700);
}

.eyebrow::before {
    content: "";
    width: clamp(1.5rem, 3.5vw, 2.5rem);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--gold-500);
    flex: none;
}

.eyebrow--center {
    justify-content: center;
}

.eyebrow--center::after {
    content: "";
    width: clamp(1.5rem, 3.5vw, 2.5rem);
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--gold-500);
    flex: none;
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.section-head--center {
    align-items: center;
    text-align: center;
    max-width: 44rem;
    margin-inline: auto;
}

.section-title {
    font-size: var(--step-4);
}

.section-lede {
    font-size: var(--step-1);
    line-height: var(--leading-normal);
    color: var(--ink-600);
    max-width: var(--measure-narrow);
}

.section-head--center .section-lede {
    margin-inline: auto;
}

/* ---------------------------------------------------------------------
   7. Buttons
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--brand-600);
    --btn-fg: #fff;
    --btn-border: var(--brand-600);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    /* min() keeps a long label inside a 320px viewport */
    max-width: 100%;
    min-height: 2.875rem;             /* 46px touch target */
    padding: 0.8em 1.7em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition:
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

/* Hover darkens rather than lightens, so a white label never loses
   contrast, and the button lifts by a single pixel or two. */
.btn:hover {
    --btn-bg: var(--brand-800);
    --btn-border: var(--brand-800);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--brand-700);
    --btn-border: var(--brand-200);
}

.btn--outline:hover {
    --btn-bg: var(--brand-050);
    --btn-fg: var(--brand-800);
    --btn-border: var(--brand-600);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink-700);
    --btn-border: var(--ink-200);
}

.btn--ghost:hover {
    --btn-bg: var(--ink-100);
    --btn-fg: var(--ink-900);
    --btn-border: var(--ink-300);
}

/* For use over photography */
.btn--light {
    --btn-bg: #fff;
    --btn-fg: var(--brand-800);
    --btn-border: #fff;
}

.btn--light:hover {
    --btn-bg: var(--brand-050);
    --btn-fg: var(--brand-900);
    --btn-border: var(--brand-050);
}

/* Glass button for use over photography. The tint is what carries the
   contrast; the blur alone would leave white text on a busy image. */
.btn--on-photo {
    --btn-bg: rgba(255, 255, 255, 0.14);
    --btn-fg: #fff;
    --btn-border: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(1.4);
}

.btn--on-photo:hover {
    --btn-bg: rgba(255, 255, 255, 0.26);
    --btn-border: #fff;
    --btn-fg: #fff;
}

/* Frosted light button: reads as glass but stays solid enough for its
   label to hold contrast against any backdrop. */
.btn--glass {
    --btn-bg: rgba(255, 255, 255, 0.86);
    --btn-fg: var(--brand-800);
    --btn-border: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(1.6);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(1.6);
    box-shadow: var(--glass-shadow);
}

.btn--glass:hover {
    --btn-bg: #fff;
    --btn-fg: var(--brand-900);
    box-shadow: var(--glass-shadow-lg);
}

/* Icons inside a button must be constrained, or an inline SVG with no
   width/height attributes expands to fill its container. Sizing in `em`
   ties the icon to the button's own font size, so it scales with the
   --sm and --lg variants automatically. */
.btn svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.btn--sm {
    min-height: 2.375rem;
    padding: 0.55em 1.1em;
    font-size: var(--step--2);
}

.btn--lg {
    min-height: 3.25rem;
    padding: 0.9em 2em;
    font-size: var(--step-0);
}

.btn--block {
    width: 100%;
}

.btn--danger {
    --btn-bg: #8e1f27;
    --btn-border: #8e1f27;
}

.btn--danger:hover {
    --btn-bg: #72181f;
    --btn-border: #72181f;
}

/* Text link with an arrow that nudges on hover */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand-700);
}

.link-arrow::after {
    content: "";
    width: 1.1em;
    height: 1px;
    background: currentColor;
    transition: width var(--duration-base) var(--ease-out);
}

.link-arrow:hover::after {
    width: 1.8em;
}

/* ---------------------------------------------------------------------
   8. Tags and small meta
   --------------------------------------------------------------------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.75em;
    border-radius: var(--radius-pill);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.tag--neutral {
    background: var(--ink-100);
    border-color: var(--ink-200);
    color: var(--ink-600);
}

.tag--gold {
    background: var(--gold-100);
    border-color: var(--gold-200);
    color: #7a5c14;
}

.meta {
    font-size: var(--step--1);
    color: var(--ink-500);
}

/* ---------------------------------------------------------------------
   9. Utilities
   --------------------------------------------------------------------- */
.text-muted { color: var(--ink-500); }
.text-brand { color: var(--brand-700); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.full-bleed {
    width: 100%;
}

.no-scroll {
    overflow: hidden;
}

/* Fixes iOS rubber-banding while the mobile drawer is open */
.no-scroll body {
    position: relative;
}

/* Decorative rule used between editorial blocks: a short gold bar that
   fades into the brand green. Two colours, not six. */
.rule {
    width: clamp(3rem, 8vw, 4.5rem);
    height: 3px;
    border: 0;
    margin: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--gold-500), var(--brand-500));
}

/* Print: drop chrome, keep content legible */
@media print {
    .site-header,
    .site-footer,
    .hero,
    .nav-toggle,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .section {
        padding-block: 1rem;
    }
}

/* =====================================================================
   10. GLASS SURFACES
   ---------------------------------------------------------------------
   A reusable translucent panel. `backdrop-filter` is progressively
   enhanced: without support the panel falls back to a solid surface, so
   nothing becomes unreadable.

   Legibility rules applied throughout:
     - Glass is never placed behind long-form body copy.
     - Text on glass always sits on a tint opaque enough to hold contrast.
     - The blur is paired with a visible border; blur alone reads as blur,
       not as glass.
   ===================================================================== */

.glass {
    position: relative;
    isolation: isolate;
    /* Fallback for browsers without backdrop-filter */
    background: var(--glass-light-strong);
    border: 1px solid var(--glass-light-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .glass {
        background: var(--glass-light);
        -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(1.6);
        backdrop-filter: blur(var(--glass-blur-md)) saturate(1.6);
    }
}

/* The lit top edge. A pseudo-element rather than a gradient background so
   the blur underneath is not disturbed. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-sheen);
    opacity: 0.7;
    pointer-events: none;
}

/* A hairline of brand colour along the very top, which is what makes the
   surface read as a physical edge catching light. */
.glass::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9) 50%,
        transparent
    );
    pointer-events: none;
}

/* --- Variants ------------------------------------------------------- */

/* For use over photographs and on dark bands */
.glass--dark {
    background: var(--glass-dark-strong);
    border-color: var(--glass-dark-border);
    color: rgba(255, 255, 255, 0.92);
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .glass--dark {
        background: var(--glass-dark);
        -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
        backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4);
    }
}

.glass--dark::before {
    opacity: 0.25;
}

/* A quieter panel for dense areas, where a strong blur would be noisy */
.glass--subtle {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .glass--subtle {
        background: var(--glass-light-strong);
        -webkit-backdrop-filter: blur(var(--glass-blur-sm));
        backdrop-filter: blur(var(--glass-blur-sm));
    }
}

.glass--subtle::after {
    display: none;
}

/* Lifts on hover, as though the panel floats slightly above the page */
.glass--interactive {
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}

.glass--interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-lg);
    border-color: rgba(255, 255, 255, 0.95);
}

/* ---------------------------------------------------------------------
   Ambient background wash
   Soft brand-tinted orbs that give the blur something to pick up. Without
   colour behind them, glass panels have nothing to refract and simply
   look grey.
   --------------------------------------------------------------------- */
.has-ambient {
    position: relative;
    isolation: isolate;
}

.has-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42rem 30rem at 12% 8%, rgba(20, 176, 131, 0.12) 0%, transparent 62%),
        radial-gradient(34rem 26rem at 88% 28%, rgba(245, 181, 38, 0.10) 0%, transparent 60%),
        radial-gradient(38rem 30rem at 68% 92%, rgba(12, 110, 85, 0.08) 0%, transparent 62%);
}

/* Motion and transparency preferences ---------------------------------
   Some people find translucency uncomfortable, and it costs battery on
   low-powered devices. Both cases fall back to solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
    .glass,
    .glass--subtle {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .glass--dark {
        background: var(--brand-900);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .glass::before,
    .glass::after {
        display: none;
    }

    .has-ambient::before {
        display: none;
    }
}