/* =====================================================================
   South Point English School — refinement layer
   ---------------------------------------------------------------------
   Layer 3 of the public site:
     base.css    tokens, reset, typography, layout primitives, buttons
     site.css    header, footer, sections, carousel, page components
     refine.css  finish, restraint and the small screen  ← this file

   Two jobs:

   1. FINISH. The kind of detail that separates a site that works from one
      that feels expensive: hairline gold accents, a single soft light
      source, type that settles rather than bounces. Colour is held to the
      brand green plus gold — used deliberately, never decoratively.

   2. THE SMALL SCREEN. Most visitors to a school website arrive on a
      phone, so the phone is treated as the primary design, not as the
      desktop with things removed. Everything from §10 down exists to make
      the narrow view feel as considered as the wide one.

   Remove this one stylesheet and the site still works: everything here is
   presentation.
   ===================================================================== */

/* =====================================================================
   1. MOTION
   ---------------------------------------------------------------------
   Two keyframes, both slow and both in the background. Nothing springs,
   wobbles or spins.
   ===================================================================== */

/* A very slow breath on background washes, so large areas of colour are
   never completely static. 40s, and it moves a few percent. */
@keyframes settle-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); }
}

/* Entrance: rise and fade, no overshoot. */
@keyframes settle-in {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   2. DECORATION
   ---------------------------------------------------------------------
   One soft light source per band, rather than a scatter of shapes. It
   reads as depth and lighting, which is what makes a flat colour look
   like a surface.
   ===================================================================== */

.deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.deco__glow {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    will-change: transform;
    animation: settle-drift 42s var(--ease-in-out) infinite;
}

/* Warm highlight, top left — where the light comes from. */
.deco__glow--warm {
    top: -38%;
    left: -12%;
    width: 46rem;
    height: 46rem;
    background: radial-gradient(circle, rgba(245, 181, 38, 0.30) 0%, transparent 62%);
}

/* Cool counter-light, bottom right, so the band has two ends. */
.deco__glow--cool {
    right: -18%;
    bottom: -45%;
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle, rgba(53, 209, 160, 0.34) 0%, transparent 62%);
    animation-delay: -14s;
}

/* A hairline gold seam along the bottom of a dark band: the one piece of
   ornament on the page, borrowed from bookbinding. */
.deco__seam {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(245, 181, 38, 0.55) 22%,
        rgba(245, 181, 38, 0.85) 50%,
        rgba(245, 181, 38, 0.55) 78%,
        transparent 100%
    );
}

/* Over a photograph the glows would muddy the image. */
.page-hero:not(.page-hero--plain) .deco__glow {
    opacity: 0.18;
}

/* =====================================================================
   3. HEADER
   ===================================================================== */

/* A single hairline of gold above the contact strip. Replaces the rainbow
   band: same job — framing the page — a fraction of the noise. */
.topbar {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--brand-500) 0%,
        var(--gold-500) 50%,
        var(--brand-500) 100%
    );
}

.site-header {
    border-bottom-width: 1px;
}

/* The crest sits in a quiet ring rather than a coloured halo. */
.brand__crest::before {
    background: radial-gradient(circle at 32% 26%, var(--brand-050) 0%, transparent 70%);
    transition: opacity var(--duration-slow) var(--ease-out);
}

.brand:hover .brand__crest::before {
    transform: none;
    opacity: 0.8;
}

.brand:hover .brand__mark {
    transform: none;
}

.brand__name {
    letter-spacing: -0.005em;
}

/* Small caps and wide tracking on the tagline: the detail that makes a
   lockup look drawn rather than typed. */
.brand__tagline {
    color: var(--brand-700);
    opacity: 0.85;
}

@media (min-width: 85em) {
    .nav-panel__link:hover {
        background: var(--brand-050);
        color: var(--brand-800);
    }

    .nav-panel {
        border-width: 1px;
        border-radius: var(--radius-md);
    }
}

/* =====================================================================
   4. HEROES
   ===================================================================== */

.page-hero,
.hero {
    position: relative;
}

.page-hero__inner,
.hero__content {
    position: relative;
    z-index: 2;
}

/* The plain interior header: a deep green field with one slow wash across
   it, finished with the gold seam. */
.page-hero--plain::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(28rem 20rem at 22% 28%, rgba(53, 209, 160, 0.30) 0%, transparent 64%);
    animation: settle-drift 46s var(--ease-in-out) infinite;
}

/* A short gold rule under the page title, rather than a highlight behind
   it. Sits below the descenders so nothing is obscured. */
.page-hero__title {
    padding-bottom: 0.4em;
    position: relative;
}

.page-hero__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 3.25rem;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--gold-500);
}

.page-hero__lede {
    color: rgba(255, 255, 255, 0.86);
}

.breadcrumb [aria-current="page"] {
    color: var(--gold-200);
}

/* =====================================================================
   5. SECTION BANDS
   ===================================================================== */

/* A warm off-white, for alternation that is felt rather than seen. */
.section--sun {
    background: var(--paper-sun);
}

/* The quiet counterpart to --ambient: one wash, no animation cost on a
   section the visitor scrolls straight past. */
.section--quiet {
    position: relative;
    isolation: isolate;
    background: var(--paper-warm);
}

.section--quiet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(34rem 24rem at 12% 8%, rgba(20, 176, 131, 0.10) 0%, transparent 62%),
        radial-gradient(28rem 20rem at 88% 92%, rgba(245, 181, 38, 0.09) 0%, transparent 60%);
}

/* A hairline rule between a band and the one above it, in place of the
   scalloped edge. */
.section--ruled {
    border-top: 1px solid var(--ink-200);
}

.section-title {
    letter-spacing: var(--tracking-tight);
}

/* =====================================================================
   6. CARDS
   ---------------------------------------------------------------------
   One treatment, applied consistently: a hairline border, a gold or green
   accent that appears on hover, and a two-pixel lift. No colour rotation —
   a page of cards that are all different colours reads as a toy, and the
   colour was never carrying information anyway.
   ===================================================================== */

.feature,
.quick-link,
.class-card,
.stage,
.post-card,
.faculty-card,
.result-card,
.form-panel,
.verse-panel {
    border-radius: var(--radius-md);
}

/* --- Feature cards -------------------------------------------------- */
.feature {
    border-color: var(--ink-200);
}

/* The accent bar stays hidden until hover, and is gold rather than a
   gradient of two greens. */
.feature::before {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-500), var(--brand-500));
}

.feature:hover {
    transform: translateY(-3px);
    border-color: var(--brand-200);
}

.feature__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-md);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}

.feature:hover .feature__icon {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.feature__index {
    color: var(--gold-600);
    font-variant-numeric: tabular-nums;
}

/* --- Quick links ---------------------------------------------------- */
.quick-link:hover {
    transform: translateY(-2px);
    border-color: var(--brand-200);
}

.quick-link__icon {
    border-radius: var(--radius-sm);
    background: var(--brand-050);
    color: var(--brand-700);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.quick-link:hover .quick-link__icon {
    background: var(--brand-600);
    color: #fff;
}

/* --- Faculty cards -------------------------------------------------- */
.faculty-card {
    overflow: hidden;
}

.faculty-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-200);
}

/* A gold hairline under the photograph, the width of the card. */
.faculty-card__photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), var(--brand-500));
}

.faculty-card__placeholder {
    background: linear-gradient(155deg, var(--brand-700), var(--brand-900));
}

/* --- Class cards and curriculum stages ------------------------------ */
.class-card {
    border-top: 2px solid var(--brand-600);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.class-card:hover {
    transform: translateY(-2px);
}

.stage {
    border-left-width: 3px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --- Documents ------------------------------------------------------ */
.doc-row__icon {
    border-radius: var(--radius-sm);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
}

/* --- Numbered sequences --------------------------------------------- */
.step {
    border-top-width: 2px;
}

.step::before,
.mission-list__item::before {
    color: var(--gold-600);
}

.result-card {
    border-top: 2px solid var(--brand-600);
}

/* --- Blog ------------------------------------------------------------ */
.post-card:hover {
    transform: translateY(-3px);
}

.post-card__meta {
    color: var(--brand-700);
    letter-spacing: var(--tracking-wider);
}

/* =====================================================================
   7. STATS
   ===================================================================== */
.stats {
    border-radius: var(--radius-md);
}

.stat__value {
    color: var(--brand-800);
    font-variant-numeric: tabular-nums;
}

/* A gold hairline above each figure ties the strip together. */
.stat {
    position: relative;
}

.stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.75rem;
    height: 2px;
    background: var(--gold-500);
    opacity: 0.8;
}

/* =====================================================================
   8. GALLERY AND MEDIA
   ===================================================================== */
.gallery-item {
    border-radius: var(--radius-sm);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.gallery-item:hover,
.gallery-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.media-frame__image {
    border-radius: var(--radius-md);
}

/* A single gold offset frame, bottom right. */
.media-frame::before {
    inset: auto -0.7rem -0.7rem auto;
    border: 1px solid var(--gold-500);
    border-radius: var(--radius-md);
}

/* =====================================================================
   9. EDITORIAL DETAIL
   ===================================================================== */

.link-arrow {
    color: var(--brand-700);
}

.link-arrow::after {
    height: 1px;
    background: currentColor;
}

/* --- Verse panels: anthem and pledge --------------------------------
   Every line of the anthem stays identical — it is one continuous verse.
   The finish is around the panel, never on a line. */
.verse-panel {
    background:
        radial-gradient(26rem 18rem at 12% 0%, var(--brand-050) 0%, transparent 62%),
        #fff;
}

.verse-panel::before {
    color: var(--brand-100);
}

/* Gold seam across the top of the panel. */
.verse-panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500) 50%, transparent);
}

.verse__line {
    transition: none;
}

.letter__quote {
    border-left: 2px solid var(--gold-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.letter__identity {
    border-top: 2px solid var(--gold-500);
}

.letter__portrait {
    border-radius: var(--radius-md);
}

.group-heading__count {
    padding: 0.25em 0.75em;
    border-radius: var(--radius-pill);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
}

.data-table thead th {
    background: var(--brand-050);
    color: var(--brand-800);
}

.pass-bar__fill {
    background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
}

.empty-state {
    border-radius: var(--radius-md);
}

.empty-state__icon {
    border: 1px solid var(--brand-100);
    color: var(--brand-600);
}

/* --- Footer ---------------------------------------------------------- */
.site-footer {
    position: relative;
}

/* Gold hairline at the top of the footer, mirroring the one at the top of
   the page, so the document is bracketed. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-500) 30%,
        var(--gold-500) 70%,
        transparent 100%
    );
}

.footer__mark {
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: none;
}

.footer__lockup:hover .footer__mark {
    transform: none;
}

.footer__social a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-800);
    transform: none;
}

/* --- Entrances ------------------------------------------------------- */
.reveal.is-visible {
    animation: settle-in var(--duration-slow) var(--ease-out) both;
}

.reveal-group.is-visible > * {
    animation: settle-in var(--duration-slow) var(--ease-out) both;
}

.reveal-group.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { animation-delay: 70ms; }
.reveal-group.is-visible > *:nth-child(3) { animation-delay: 140ms; }
.reveal-group.is-visible > *:nth-child(4) { animation-delay: 210ms; }
.reveal-group.is-visible > *:nth-child(5) { animation-delay: 280ms; }
.reveal-group.is-visible > *:nth-child(6) { animation-delay: 350ms; }
.reveal-group.is-visible > *:nth-child(7) { animation-delay: 420ms; }
.reveal-group.is-visible > *:nth-child(8) { animation-delay: 490ms; }

.to-top {
    background: var(--brand-800);
    border-color: rgba(255, 255, 255, 0.4);
}

.to-top:hover {
    background: var(--brand-900);
    transform: translateY(-2px);
}

/* =====================================================================
   ██  THE SMALL SCREEN  ██
   ---------------------------------------------------------------------
   Everything below is the phone. Most visitors to a school website arrive
   on one, and a first impression is formed in the first screenful — which
   on a phone is the header and the top of the hero, and nothing else.
   ===================================================================== */

/* =====================================================================
   10. MOBILE HEADER
   ---------------------------------------------------------------------
   Three changes, in order of how much they matter:
     1. The contact strip stays. It was hidden below 30em, which is exactly
        where a phone number matters most. It is reduced to the school's
        telephone numbers alone, each one tappable.
     2. A compact "Enquire" button appears beside the menu. Below 85em there
        was no call to action anywhere above the fold.
     3. The lockup is scaled so the crest reads as a crest.
   ===================================================================== */

@media (max-width: 84.9375em) {
    /* --- 1. The contact strip, reduced to one fact ------------------- */
    /*
     * On a phone this strip carries the CBSE affiliation and nothing else.
     *
     * It used to carry the telephone numbers, which sounds more useful than it
     * is: three numbers is a lot of small type to fit above a logo, and every
     * one of them is already a single tap away in the menu drawer and again in
     * the footer. The affiliation number is the one detail a parent looks for
     * and cannot find anywhere else above the fold, and it is the thing that
     * makes the strip worth its height.
     *
     * The numbers are not lost: see .mobile-nav__foot in the drawer, and the
     * footer contact list.
     */
    @media (max-width: 47.9375em) {
        /* site.css hides the whole strip below 30em; it is wanted here. */
        .topbar {
            display: block;
        }

        .topbar__inner {
            justify-content: center;
            gap: var(--space-xs);
            min-height: 2rem;
        }

        /* The affiliation group, centred and given the full width. */
        .topbar__group:not(.topbar__group--secondary) {
            display: flex;
            justify-content: center;
            flex: 1 1 auto;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: #fff;
        }

        .topbar__group:not(.topbar__group--secondary) svg {
            opacity: 1;
            color: var(--gold-200);
        }

        /* Everything else in the strip: the address, the numbers, the email.
           All of them appear elsewhere on the page. */
        .topbar__group--secondary {
            display: none;
        }
    }

    /* Between phone and desktop the numbers are back, but the postal address
       is not: it is repeated in the footer and behind the map link, and it is
       the first thing to drop once three numbers and an email address are
       competing for one line. It is named rather than matched by position, so
       nothing else disappears if the school empties a field. */
    @media (min-width: 48em) and (max-width: 63.9375em) {
        .topbar__address,
        .topbar__address + .topbar__divider {
            display: none;
        }
    }

    /* --- 2. A call to action above the fold -------------------------- */
    .header__cta {
        display: inline-flex;
        margin-left: 0;
    }

    /* On a phone the label is shortened to a single word, and the button is
       sized to sit level with the menu control. */
    @media (max-width: 47.9375em) {
        .header__cta {
            /* The full label is replaced rather than truncated, so the
               button never wraps or clips. */
            font-size: 0;
            min-height: 2.875rem;
            width: auto;
            padding-inline: 1.1em;
            gap: 0;
        }

        .header__cta::after {
            content: "Enquire";
            font-size: var(--step--2);
            font-weight: 600;
            letter-spacing: var(--tracking-wide);
        }
    }

    /* --- 3. The lockup ---------------------------------------------- */
    .header__inner {
        gap: var(--space-2xs);
        min-height: 4.75rem;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand__mark {
        width: clamp(2.85rem, 11vw, 3.6rem);
        height: clamp(2.85rem, 11vw, 3.6rem);
    }

    .brand__name {
        font-size: clamp(0.88rem, 0.7rem + 1.15vw, 1.15rem);
        max-width: 13em;
    }

    /*
     * The tagline says what the school is about, and it is worth keeping on a
     * tablet — but not at any size. This clamp bottomed out at 8px, which under
     * the school name on a 375px or 390px phone is a grey smudge rather than a
     * line anyone reads. It now takes the smallest step in the type scale, and
     * stands down altogether on a phone (below) where the name and the enquiry
     * button already compete for the width.
     */
    .brand__tagline {
        display: block;
        font-size: var(--step--2);
    }

    .nav-toggle {
        width: 2.875rem;
        height: 2.875rem;
        border-color: var(--ink-200);
        background: #fff;
    }
}

/* On a phone the crest, the school name and the enquiry button take the whole
   width between them, so the tagline stands down rather than being set small
   enough to fit. It is in the footer and on the About page either way. */
@media (max-width: 47.9375em) {
    .brand__tagline {
        display: none;
    }
}

/* Below 22.5em (a 320px phone) even the enquiry button has to go. */
@media (max-width: 22.5em) {
    .header__cta {
        display: none;
    }
}

/* =====================================================================
   10b. MOBILE NOTICE TICKER
   ---------------------------------------------------------------------
   The band is at its most useful on a phone, where a visitor sees little
   else above the fold, so it stays at every width. Only the label gives
   ground: the word "Notices" goes and the megaphone stands for it, which
   buys most of the width back for the notice itself.
   ===================================================================== */

@media (max-width: 29.9375em) {
    .ticker__label span {
        /* The icon carries the meaning; the band is plainly a notice band. */
        display: none;
    }

    .ticker__label {
        padding-inline: 0.7em;
    }

    .ticker__label svg {
        width: 1.1em;
        height: 1.1em;
    }

    .ticker__item {
        padding-inline: 1.1em;
    }

    .ticker__item::after {
        margin-left: 1.1em;
        margin-right: -1.1em;
    }

    /* A narrower fade, so less of a short notice is dimmed at the edges. */
    .ticker__viewport {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
        mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }
}

/* =====================================================================
   11. MOBILE HERO
   ---------------------------------------------------------------------
   The single most important screenful on the site, and the one place where
   the phone layout is not a narrower version of the desktop one.

   A wide screen has a letterbox hero: the photograph is cropped to fill it
   and the copy is set over the picture. A phone is close to square, so
   cropping a 4:3 school photograph into a tall box threw most of the
   picture away — the building would be pushed out of frame and only a strip
   of grass left. Writing over it made that worse, because the copy needed a
   clear area and so pushed the crop further still.

   So on a phone the carousel is shown at the photograph's own shape, whole
   and uncropped, with nothing written over it at all. The page's words begin
   with the welcome section below. The photographs are supplied at 4:3, which
   is what --hero-ratio is.
   ===================================================================== */

@media (max-width: 47.9375em) {
    /* Scoped to the carousel. The no-slides fallback, .hero--empty, has no
       photograph to take its height from and keeps its own panel layout. */
    .hero[data-carousel] {
        --hero-ratio: 4 / 3;

        /* The height now comes from the photograph. The old viewport-height
           floor would have stretched the frame again. */
        display: block;
        min-height: 0;

        /*
         * Seen only behind a slide that is not exactly 4:3 — two of the
         * school's photographs are 3:2. The page colour rather than the brand
         * green, so those thin bars read as ordinary page whitespace instead
         * of a coloured slab that looks like a mistake.
         */
        background: var(--paper);
    }

    /*
     * In flow rather than absolute, so the photograph is what gives the hero
     * its height. This box is also what confines the arrows, the dots and the
     * progress bar, since they are inside it.
     */
    .hero__viewport {
        position: relative;
        aspect-ratio: var(--hero-ratio);
    }

    /* The whole frame, never a crop. A photograph that is not 4:3 is letter-
       boxed against the page colour rather than being trimmed to fit. */
    .hero__image {
        object-fit: contain;
        object-position: center;
        /* The slow "Ken Burns" zoom scales the picture past its box, which
           would crop it again by the back door. */
        transform: none;
    }

    .hero__slide.is-active .hero__image {
        transform: none;
    }

    /*
     * Nothing is written over the photograph: no eyebrow, no caption, no
     * buttons. The carousel on a phone is the pictures and the controls, and
     * the page's words begin with the welcome section below it.
     *
     * Scoped to the carousel so the no-slides fallback keeps the only copy
     * it has.
     */
    .hero[data-carousel] .hero__content {
        display: none;
    }

    .hero__heading {
        font-size: clamp(1.85rem, 1.1rem + 6.2vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.015em;
    }

    .hero__text {
        font-size: var(--step-0);
    }

    /*
     * The heading, text and action rules here now apply only to .hero--empty,
     * the panel shown when no slides exist — the carousel itself has no copy
     * on a phone. They are kept because that fallback still needs them.
     *
     * Stacked, full-width actions: a phone-sized target, and the primary
     * action is unmistakably primary.
     */
    .hero__actions {
        display: grid;
        gap: var(--space-2xs);
        width: 100%;
        margin-top: var(--space-xs);
    }

    .hero__actions .btn {
        width: 100%;
        min-height: 3.125rem;
    }

    /* --- Controls, over the photograph ------------------------------- */
    /*
     * The controls are inside the viewport, so `top: 0` simply makes this
     * layer fill the picture; there is no shape to recompute. The arrows are
     * then centred in it, which is where a thumb expects them.
     */
    .hero__controls {
        top: 0;
        padding-bottom: 0;
        display: grid;
        align-content: center;
        /* Only the buttons themselves take taps. This layer covers the whole
           picture, so making it tappable would swallow every swipe. */
        pointer-events: none;
    }

    .hero__controls-inner {
        display: block;
    }

    /*
     * Arrows at the left and right edges, level with the middle of the picture
     * — the shape the school's previous site had, and the easiest target to
     * reach with a thumb. They were hidden below 30em.
     *
     * Note what does NOT take pointer events: this row spans the full width of
     * the photograph, so making the row itself tappable would put an invisible
     * band across the middle of the picture that quietly ate taps and swipes.
     * Only the buttons are live.
     */
    .hero__arrows {
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    .hero__arrow {
        pointer-events: auto;
    }

    /* Indicators along the foot of the photograph. Same reasoning: the strip
       is not tappable, the dots are. */
    .hero__dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(0.4rem, 2vw, 0.8rem);
        justify-content: center;
        gap: 0;
        pointer-events: none;
    }

    .hero__dot {
        pointer-events: auto;
    }

    /* Ten slides have to fit across a 360px screen, and the dots sit next to
       each other with no dead space between them, so the row as a whole stays
       an easy target even though each dot is under 44px wide. */
    .hero__dot {
        width: 1.9rem;
        height: 2.5rem;
    }

    /* The progress bar needs no override at all now: it is inside the
       viewport, so `bottom: 0` already means the foot of the photograph. */
}

/* The scrim is switched off at every width, so the phone no longer needs its
   own deeper gradient. The declaration is kept, with the gradient intact, so
   the wash can be brought back here alone if it is ever wanted. */
@media (max-width: 47.9375em) {
    .hero__scrim {
        opacity: 0;
        background:
            linear-gradient(
                to top,
                rgba(7, 62, 47, 0.95) 0%,
                rgba(7, 62, 47, 0.86) 24%,
                rgba(7, 62, 47, 0.55) 52%,
                rgba(7, 62, 47, 0.30) 78%,
                rgba(7, 62, 47, 0.38) 100%
            );
    }
}

/* --- Interior page headers on a phone ------------------------------- */
@media (max-width: 47.9375em) {
    .page-hero {
        min-height: clamp(12rem, 34svh, 17rem);
        padding-block: var(--space-lg);
    }

    .page-hero__title {
        font-size: clamp(1.6rem, 1.05rem + 4.6vw, 2.4rem);
    }

    .page-hero__lede {
        font-size: var(--step-0);
    }

    .breadcrumb {
        font-size: 0.66rem;
    }

    /* The deepest crops need the most help, since the title sits over the
       busiest part of a photograph. */
    .page-hero::after {
        background:
            linear-gradient(to top, rgba(7, 62, 47, 0.94) 0%, rgba(7, 62, 47, 0.74) 55%, rgba(7, 62, 47, 0.58) 100%);
    }
}

/* =====================================================================
   12. MOBILE DRAWER
   ---------------------------------------------------------------------
   The drawer is the whole navigation on a phone, so it is given the same
   care as the desktop bar: the crest at the top, a clear hierarchy, and
   the contact details finished properly rather than listed.
   ===================================================================== */

@media (max-width: 84.9375em) {
    .mobile-nav {
        width: min(23rem, 92vw);
    }

    /* The head becomes a green plate carrying the crest and the school
       name — the drawer opens onto the brand, not onto a list. */
    .mobile-nav__head {
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-md);
        background: var(--brand-900);
        border-bottom: 0;
        position: relative;
    }

    .mobile-nav__head::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-500), transparent);
    }

    .mobile-nav__crest {
        width: 2.75rem;
        height: 2.75rem;
        flex: none;
        object-fit: contain;
        background: #fff;
        border-radius: var(--radius-sm);
        padding: 0.2rem;
    }

    .mobile-nav__identity {
        min-width: 0;
        flex: 1 1 auto;
    }

    .mobile-nav__title {
        display: block;
        color: #fff;
        font-size: var(--step-0);
        line-height: 1.2;
    }

    .mobile-nav__affiliation {
        display: block;
        margin-top: 0.15rem;
        font-family: var(--font-body);
        /* Was 0.6rem — 9.6px, uppercase and letter-spaced, which is below the
           point where tracking helps rather than hurts. On the scale instead. */
        font-size: var(--step--2);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--gold-200);
    }

    /*
     * Only the colours change here. The width and height used to be overridden
     * to 2.5rem, which took the one control in the drawer header down to 40px —
     * under the 44px minimum, in the top corner where a thumb reaches worst.
     */
    .mobile-nav__close {
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.25);
        margin-right: 0;
    }

    .mobile-nav__close:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    /* Rows: a hairline between them, and the active row marked with gold
       rather than a wash of green. */
    .mobile-nav__item {
        border-bottom: 1px solid var(--ink-100);
    }

    .mobile-nav__link,
    .mobile-nav__trigger {
        border-radius: 0;
        font-family: var(--font-display);
        font-size: var(--step-0);
        font-weight: 600;
        letter-spacing: 0;
        color: var(--ink-900);
        padding-inline: var(--space-md);
    }

    .mobile-nav__link[aria-current="page"] {
        background: var(--brand-050);
        box-shadow: inset 3px 0 0 var(--gold-500);
        color: var(--brand-800);
    }

    .mobile-nav__trigger[aria-expanded="true"] {
        background: transparent;
        color: var(--brand-800);
    }

    .mobile-nav__submenu {
        background: var(--paper-warm);
        box-shadow: inset 0 1px 0 var(--ink-100);
    }

    .mobile-nav__sublink {
        font-family: var(--font-body);
        color: var(--ink-600);
    }

    .mobile-nav__sublink::before {
        background: var(--gold-500);
    }

    /* The foot: one primary action, then the contact details set as a
       small block of information rather than two stray links. */
    .mobile-nav__foot {
        background: var(--paper-warm);
        border-top: 1px solid var(--ink-200);
        /*
         * The school publishes three telephone numbers and an email address, so
         * this is four tappable rows under the button, not one or two. At a
         * --space-2xs gap they sat about 7px apart and read as a block of text
         * you had to aim into. Separated by a hairline each instead, which is
         * what makes them read as a list of separate things to tap.
         */
        gap: 0;
    }

    .mobile-nav__foot .btn {
        min-height: 3.125rem;
        margin-bottom: var(--space-2xs);
    }

    .mobile-nav__contact {
        /* 44px, the minimum target. Was 2.5rem. */
        min-height: 2.75rem;
        align-items: center;
        padding-block: 0.2rem;
        font-weight: 600;
        color: var(--ink-700);
    }

    .mobile-nav__contact + .mobile-nav__contact {
        border-top: 1px solid var(--ink-200);
    }
}

/* =====================================================================
   13. MOBILE LAYOUT AND RHYTHM
   ===================================================================== */

@media (max-width: 47.9375em) {
    /* Section padding is generous but not cavernous: a phone screen shows
       so little at once that too much air reads as an empty page. */
    .section {
        padding-block: clamp(2.5rem, 9vw, 3.5rem);
    }

    .section--tight {
        padding-block: clamp(1.85rem, 7vw, 2.5rem);
    }

    /*
     * Two untinted sections in a row: the second drops its top padding.
     *
     * Nothing marks the join between two sections that share a background, so
     * their padding simply adds up — on the careers page that stacked roughly
     * 4.5rem of blank white between two white blocks, which on a phone is most
     * of a screen showing nothing. The first section's bottom padding is the
     * gap; the second does not need to contribute a second one.
     *
     * Every class that changes the background is excluded on both sides, so a
     * tinted band still gets its full padding and still reads as a band. A new
     * section that paints its own background must be added to these lists.
     */
    .section:not(
        .section--warm, .section--deep, .section--dark, .section--sun,
        .section--ambient, .section--rainbow, .cta-band, .careers-band, .alerts-band
    ) + .section:not(
        .section--warm, .section--deep, .section--dark, .section--sun,
        .section--ambient, .section--rainbow, .cta-band, .careers-band, .alerts-band
    ) {
        padding-top: 0;
    }

    /* Headings step down one level, so a long section title does not take
       four lines. */
    .section-title {
        font-size: clamp(1.45rem, 1.05rem + 3.2vw, 2rem);
    }

    .section-head {
        margin-bottom: var(--space-md);
    }

    .section-lede {
        font-size: var(--step-0);
    }

    /* Body copy: slightly larger and more generously led than the desktop
       default. This is the single biggest readability win on a phone. */
    .prose p,
    .prose li,
    .split__body p {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    /* --- Cards get real internal space ------------------------------ */
    .feature {
        padding: var(--space-md);
    }

    .feature__icon {
        width: 2.85rem;
        height: 2.85rem;
    }

    .quick-link {
        padding: var(--space-sm);
    }

    .class-card,
    .stage,
    .form-panel {
        padding: var(--space-md);
    }

    /* --- Stats: two columns, larger figures -------------------------- */
    .stat {
        padding: var(--space-md) var(--space-xs);
    }

    .stat__value {
        font-size: clamp(1.5rem, 1.1rem + 3.4vw, 2rem);
    }

    /* --- Two-column gallery from the narrowest phone ---------------- */
    @media (min-width: 26em) {
        .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* --- Faculty: two per row, so the page is browsable ------------- */
    @media (min-width: 26em) {
        .faculty-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-sm);
        }

        .faculty-card__body {
            padding: var(--space-xs) var(--space-sm) var(--space-sm);
        }

        .faculty-card__name {
            font-size: var(--step-0);
        }

        /* The biography is the first thing to go: on a 2-up grid at this
           width it becomes a column of single words. */
        .faculty-card__bio {
            display: none;
        }
    }

    /* --- Letter pages ----------------------------------------------- */
    .letter__portrait {
        max-width: 15rem;
        margin-inline: auto;
    }

    .letter__identity {
        text-align: center;
    }

    /* A drop cap on a narrow measure leaves an awkward hole. */
    .letter__text > p:first-of-type::first-letter {
        float: none;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        color: inherit;
        padding: 0;
    }

    /* --- Verse panels ----------------------------------------------- */
    .verse-panel {
        padding: var(--space-lg) var(--space-md);
    }

    .verse__line {
        font-size: clamp(1rem, 0.9rem + 1.2vw, 1.25rem);
    }

    /* --- Tables and documents --------------------------------------- */
    .doc-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon body"
            ".    action";
        gap: var(--space-xs) var(--space-sm);
        align-items: start;
    }

    .doc-row__icon   { grid-area: icon; }
    .doc-row__body   { grid-area: body; }
    .doc-row__action { grid-area: action; }

    /* --- Forms: full-width controls and buttons --------------------- */
    .form-actions .btn {
        width: 100%;
    }

    /* --- The call to action band ------------------------------------ */
    .cta-band__title {
        font-size: clamp(1.4rem, 1rem + 3.2vw, 1.9rem);
    }

    .cta-band__actions {
        display: grid;
        width: 100%;
        gap: var(--space-2xs);
    }

    .cta-band__actions .btn {
        width: 100%;
        min-height: 3.125rem;
    }

    /* --- Footer: a tidier stack ------------------------------------- */
    .footer__main {
        padding-block: var(--space-lg);
        gap: var(--space-md);
    }

    .footer__lockup {
        align-items: center;
    }

    .footer__heading {
        padding-bottom: var(--space-2xs);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer__base-inner {
        justify-content: center;
        text-align: center;
    }

    .footer__legal {
        justify-content: center;
    }

    /* Back-to-top clears a thumb resting at the bottom right. */
    .to-top {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* =====================================================================
   14. PREFERENCES
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .deco__glow,
    .page-hero--plain::before,
    .reveal.is-visible,
    .reveal-group.is-visible > * {
        animation: none !important;
    }

    .feature:hover,
    .feature:hover .feature__icon,
    .quick-link:hover,
    .faculty-card:hover,
    .class-card:hover,
    .post-card:hover,
    .gallery-item:hover,
    .gallery-item:focus-visible,
    .to-top:hover {
        transform: none;
    }

    .reveal.is-visible,
    .reveal-group.is-visible > * {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .deco,
    .section--quiet::before,
    .page-hero--plain::before {
        display: none;
    }

    .verse-panel {
        background: #fff;
    }
}