@charset "UTF-8";
/* ============================================================================
   OXFORD MASTER ACADEMY — Design System
   "Oxford Editorial": engraved plate, ruled column, heraldic field.

   OLD-DEVICE CONTRACT — this file must render on iOS 10+ and Android 5+:
     · every critical colour has a literal fallback BEFORE the var()
     · no `gap` inside flexbox   (Safari < 14.1 ignores it) — grid or margins
     · no `aspect-ratio`         (Safari < 15)  — padding-top ratio boxes
     · no `inset` shorthand      (Safari < 14.5) — top/right/bottom/left
     · no `:is()` / `:where()`   (Safari < 14)
     · no `min()` / `max()` / `clamp()` without a static fallback above it
     · no `color-mix`, no nesting, no container queries, no `:has()`
     · every transform/sticky/backdrop-filter carries its -webkit- prefix
   ========================================================================= */

/* ============================================================================
   1. TOKENS
   ========================================================================= */
:root {
    /* ══ THE WORKSHOP PALETTE ══════════════════════════════════════════════
       Painted fields, not pastel accents. Each of these owns whole regions:
       a band, a card face, a tile. They are mixed like poster paint, so they
       stay saturated at page scale instead of washing out into a tint. */
    /* Tangerine is a MARK: rules, borders, underlines, large display accents.
       It measures 3.1:1 as text on paper and 3.2:1 under white, so it must
       never carry a label at reading size. --action is the one that can. */
    --tangerine:      #E2701F;
    --tangerine-deep: #BC560F;
    --action:         #BC560F;   /* GROUND: 4.7:1 under a white label        */
    --action-deep:    #9C4409;   /* the pressed edge under it                */
    /* TEXT is a different job. The ground colour reads 4.25:1 at 12px on
       paper and 3.4:1 on a dark page, so orange text gets its own value —
       and unlike the ground, it has to flip with the theme. */
    --action-text:    #AE4E0C;
    --amber:          #EFA22B;   /* highlight, streaks, marks                */
    --meadow:         #2F8F55;   /* progress, success, "done"                */
    --meadow-deep:    #22703F;
    --ocean:          #2377AE;   /* information, links, calm data            */
    --ocean-deep:     #185A86;
    --berry:          #C93A58;   /* the one alarm colour                     */
    --berry-deep:     #A32844;

    /* The academy anchor. Oxford blue is a brand commitment, so it stays and
       becomes the deep field — it is what keeps this warm world recognisably
       Oxford Master and not a generic learning app. */
    --navy:           #123A63;
    --navy-deep:      #002147;
    --navy-ink:       #00152E;

    /* ══ GROUND ════════════════════════════════════════════════════════════
       Warm worktable, never sterile white and never cold grey. */
    --paper-warm:     #FAF3E7;
    --paper-sunk:     #F3E9D6;
    --paper-deep:     #EADEC6;
    --surface-card:   #FFFCF6;   /* a card face, not a sheet of printer paper */

    /* ══ INK ═══════════════════════════════════════════════════════════════ */
    --ink-core:       #2D3748;
    --ink-mid:        #4A5568;
    --ink-low:        #6B7A90;
    --on-field:       #FFF8EC;
    --on-field-soft:  #CFE0F0;
    --on-field-low:   #C3D4E4;   /* 4.6:1 on the deep-ocean band      */

    /* ══ SHAPE ═════════════════════════════════════════════════════════════
       Chunky and tactile. Nothing in this world is a hairline rectangle. */
    --r-xs:   8px;
    --r-sm:   12px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-xl:   28px;
    --r-pill: 999px;

    /* ══ DEPTH ═════════════════════════════════════════════════════════════
       A solid offset says "this is a physical thing sitting on the table" in
       a way a blur never does. The blur is only ambient contact shadow under
       the offset, never a coloured halo. */
    --drop-1: 0 2px 0 rgba(45,55,72,.10);
    --drop-2: 0 3px 0 rgba(45,55,72,.13), 0 8px 18px rgba(45,55,72,.07);
    --drop-3: 0 5px 0 rgba(45,55,72,.15), 0 16px 32px rgba(45,55,72,.10);
    --drop-ink: 0 4px 0 var(--ink-core);

    /* ══ MOTION ════════════════════════════════════════════════════════════
       One spring for anything that should feel picked up; one calm ease for
       anything that should simply arrive. */
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease:   cubic-bezier(.22, 1, .36, 1);

    /* ══ TYPE ══════════════════════════════════════════════════════════════
       Baloo 2 is already the preschool display face, so using it here binds
       the children's world to the main site instead of leaving two academies.
       Nunito is the workhorse: genuinely rounded, and it carries the full
       Latin Extended set Turkish needs (ı İ ğ ş ç ö ü). */
    --display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --sans:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ══ RHYTHM ════════════════════════════════════════════════════════════ */
    --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
    --s9: 96px;  --s10: 128px;
    --measure: 66ch;
    --shell:   1180px;

    /* ══════════════════════════════════════════════════════════════════════
       COMPATIBILITY ALIASES

       The previous world (Oxford Editorial) named its colours --oxford,
       --gilt, --scarlet, --ivory. Roughly 1,600 lines of this stylesheet and
       twelve pages of markup already reference those names.

       Rather than rewrite every rule and risk the layouts, the old names are
       re-pointed at the new palette. One token block repaints the whole site,
       markup untouched. New work should use the canonical names above; these
       exist so the migration costs nothing.
       ══════════════════════════════════════════════════════════════════════ */
    --oxford:        var(--navy);
    --oxford-mid:    var(--ocean-deep);
    --oxford-deep:   var(--navy-deep);
    --oxford-ink:    var(--navy-ink);

    --ivory:         var(--paper-warm);
    --ivory-sunk:    var(--paper-sunk);
    --paper:         var(--surface-card);

    --gilt:          var(--amber);
    --gilt-bright:   #FACF8C;   /* 4.8:1 on the deep-ocean band */
    --scarlet:       var(--berry);
    --scarlet-deep:  var(--berry-deep);
    --scarlet-solid: var(--tangerine);   /* the primary button ground */
    --bottle:        var(--meadow-deep);

    --ink:           var(--ink-core);
    --ink-soft:      var(--ink-mid);
    --ink-faint:     var(--ink-low);
    --on-dark:       var(--on-field);
    --on-dark-soft:  var(--on-field-soft);
    --on-dark-faint: var(--on-field-low);

    /* Rules become soft warm separations rather than engraved hairlines. */
    --rule:          rgba(45, 55, 72, .13);
    --rule-strong:   rgba(45, 55, 72, .26);
    --rule-dark:     rgba(255, 248, 236, .20);
    --rule-dark-str: rgba(255, 248, 236, .38);

    --surface:       var(--surface-card);
    --surface-sunk:  var(--paper-sunk);
    --page:          var(--paper-warm);
    --field:         var(--navy);
    --field-deep:    var(--navy-deep);
    --field-ink:     var(--navy-ink);

    /* Depth aliases now carry the offset language. */
    --lift-1: var(--drop-1);
    --lift-2: var(--drop-2);
    --lift-3: var(--drop-3);

    --serif: var(--display);
}


/* --- DARK: the plate seen by lamplight rather than daylight --------------- */
[data-theme="dark"] {
    --ivory:         #0d1b2c;
    --ivory-sunk:    #0a1522;
    --paper:         #12233a;

    --ink:           #eef2f7;
    --ink-soft:      #b6c4d4;
    --ink-faint:     #8496a9;

    --gilt:          #d8b571;
    --gilt-bright:   #ecd29a;
    --scarlet:       #f08ea0;   /* accent TEXT on a dark ground */
    --scarlet-deep:  #b23a51;
    --scarlet-solid: #a82a44;   /* button ground: 6.8:1 with white */

    --rule:          rgba(216, 181, 113, .20);
    --rule-strong:   rgba(216, 181, 113, .42);

    --surface:       #12233a;
    --surface-sunk:  #0a1522;
    --page:          #071322;
    /* Lighter than the page, not darker: in lamplight the plate is the
       lit thing. Keeps every band boundary visible. */
    --field:         #122c4d;
    --field-deep:    #0d2340;
    --field-ink:     #091a30;

    /* Same orange ground in lamplight: it is chosen for its contrast with the
       white label on top of it, which does not change with the page behind. */
    --action:        #BC560F;
    --action-deep:   #8E3D08;
    --action-text:   #F0863A;   /* 6.2:1 on the lamplit card */

    /* A shadow tinted with daylight ink is invisible on a dark page. */
    --drop-1: 0 2px 0 rgba(0, 0, 0, .45);
    --drop-2: 0 3px 0 rgba(0, 0, 0, .50), 0 8px 18px rgba(0, 0, 0, .40);
    --drop-3: 0 5px 0 rgba(0, 0, 0, .55), 0 16px 32px rgba(0, 0, 0, .45);

    --lift-1: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .46), 0 10px 26px rgba(0, 0, 0, .38);
    --lift-3: 0 4px 8px rgba(0, 0, 0, .50), 0 22px 54px rgba(0, 0, 0, .46);
}

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

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    color: #2D3748;
    color: var(--ink);
    background: #FAF3E7;
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; }
img, video { height: auto; border: 0; }
svg { display: inline-block; vertical-align: middle; }

a {
    color: #123A63;
    color: var(--oxford);
    text-decoration: none;
}
[data-theme="dark"] a { color: #F7BE5C; color: var(--gilt); }

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

hr {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
}

::-moz-selection { background: #EFA22B; background: var(--gilt); color: #fff; }
::selection      { background: #EFA22B; background: var(--gilt); color: #fff; }

:focus-visible {
    outline: 2px solid #C93A58;
    outline: 2px solid var(--scarlet);
    outline-offset: 3px;
}
/* Safari < 15.4 has no :focus-visible — keep a visible ring there too. */
.no-focusvisible :focus { outline: 2px solid #C93A58; outline-offset: 3px; }

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 200;
    padding: 10px 18px;
    background: #123A63;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   3. TYPE
   ========================================================================= */
.display {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.04;
    font-size: 44px;
    font-size: clamp(38px, 6.4vw, 76px);
}
.display-2 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.014em;
    line-height: 1.1;
    font-size: 32px;
    font-size: clamp(29px, 4.2vw, 46px);
}
.display-3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    font-size: 23px;
    font-size: clamp(21px, 2.4vw, 29px);
}
.display em, .display-2 em, .display-3 em {
    font-style: italic;
    color: #EFA22B;
    color: var(--gilt);
}

/* Engraved label — the small tracked caps of a printed plate.
   Used for column heads and metadata, never stacked above a heading. */
.engraved {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #6b7683;
    color: var(--ink-faint);
}
.on-field .engraved { color: #9FB6CD; color: var(--on-dark-faint); }

.lede {
    font-size: 18px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.62;
    color: #4A5568;
    color: var(--ink-soft);
    max-width: 46ch;
}
.prose {
    max-width: var(--measure);
    color: #4A5568;
    color: var(--ink-soft);
}
.prose p + p { margin-top: var(--s4); }

.on-field            { color: #FFF8EC; color: var(--on-dark); }
.on-field .lede,
.on-field .prose     { color: #CFE0F0; color: var(--on-dark-soft); }
.on-field a          { color: #F7BE5C; color: var(--gilt-bright); }

/* ============================================================================
   4. LAYOUT
   ========================================================================= */
.shell {
    width: 100%;
    max-width: 1200px;
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}
.shell-narrow { max-width: 860px; }

.band { padding-top: 64px; padding-bottom: 64px; }
.band-tall { padding-top: 80px; padding-bottom: 80px; }
.band-tight { padding-top: 44px; padding-bottom: 44px; }
.band-airy  { padding-top: 84px; padding-bottom: 96px; }

.field {
    background: #123A63;
    background: var(--field);
    color: #FFF8EC;
    color: var(--on-dark);
}
.field-deep { background: #002147; background: var(--field-deep); }
.sunk       { background: #F3E9D6; background: var(--surface-sunk); }

/* Heraldic quartering: a hairline gilt band that tops a dark field. */
.field::before,
.field-deep::before {
    content: "";
    display: block;
    height: 3px;
    margin-top: -64px;
    margin-bottom: 61px;
    background: #EFA22B;
    background: linear-gradient(90deg, var(--gilt) 0 22%, rgba(176,139,72,.22) 22% 100%);
}
.band-tall.field::before,
.band-tall.field-deep::before { margin-top: -80px; margin-bottom: 77px; }
.band-airy.field::before,
.band-airy.field-deep::before { margin-top: -84px; margin-bottom: 81px; }

/* Grid — `gap` is safe on grid down to iOS 10.3 */
.grid { display: -ms-grid; display: grid; }
.g-2 { grid-template-columns: 1fr; gap: var(--s6); }
.g-3 { grid-template-columns: 1fr; gap: var(--s5); }
.g-4 { grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* Flex rows never use `gap` — children carry their own margin. */
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.row > * { margin-right: var(--s3); }
.row > *:last-child { margin-right: 0; }
.row-tight > * { margin-right: var(--s2); }
.row-loose > * { margin-right: var(--s5); }
.push { margin-left: auto; }

/* ============================================================================
   5. RULES & PLATES — the print devices this world is built from
   ========================================================================= */

/* Section head: a heading sitting on a hairline, gilt tick at the left.
   Replaces the eyebrow-above-heading pattern entirely. */
.head {
    position: relative;
    padding-top: var(--s5);
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
    margin-bottom: var(--s6);
}
.head::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 64px;
    height: 3px;
    background: #EFA22B;
    background: var(--gilt);
}
.on-field .head { border-top-color: rgba(255, 248, 236, .26); }
.head .display-2 { max-width: 20ch; }
.head p { margin-top: var(--s3); }

/* Plate: a photograph mounted the way a figure is mounted in a prospectus —
   ruled mount, engraved caption beneath, never a full-bleed overlay hero. */
.plate { margin: 0; }
.plate-frame {
    position: relative;
    overflow: hidden;
    background: #002147;
    border: 1px solid rgba(45, 55, 72, .16);
    border-color: var(--rule);
    padding: 0;
}
.plate-ratio { position: relative; width: 100%; padding-top: 68%; }
.plate-ratio > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
}
.plate figcaption {
    margin-top: var(--s3);
    padding-top: var(--s2);
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
}

/* Index list: the prospectus table of contents, with leader dots.
   Real information — the programme list — carried by a real print device. */
.index-list { list-style: none; }
.index-list li { border-bottom: 1px solid rgba(45, 55, 72, .16); border-bottom-color: var(--rule); }
.on-field .index-list li { border-bottom-color: rgba(255, 248, 236, .26); }
.index-list a,
.index-list .index-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 15px 0;
    color: inherit;
    /* The nudge is a transform, not padding: padding would relayout the row —
       and the dotted leader inside it — on every frame of every hover. */
    -webkit-transition: color .18s var(--ease), -webkit-transform .22s var(--ease);
    transition: color .18s var(--ease), transform .22s var(--ease);
}
.index-list a:hover {
    color: #C93A58;
    color: var(--scarlet);
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
}
.on-field .index-list a:hover { color: #ecd29a; color: var(--gilt-bright); }
/* Phone numbers and handles: Bodoni hairline digits at 21px are the least
   legible setting for the most action-critical data on the page. */
.index-name.index-name-data {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.index-name {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.index-leader {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 0 10px;
    height: 1em;
    border-bottom: 1px dotted rgba(45, 55, 72, .34);
    border-bottom-color: var(--rule-strong);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}
.on-field .index-leader { border-bottom-color: rgba(255, 248, 236, .48); }
.index-note {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 13px;
    color: #6b7683;
    color: var(--ink-faint);
    text-align: right;
}
.on-field .index-note { color: #9FB6CD; color: var(--on-dark-faint); }

/* Ruled entry: a catalogue row. Used where the category would use a card. */
.entry {
    padding: var(--s5) 0;
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
}
.entry:last-child { border-bottom: 1px solid rgba(45, 55, 72, .16); border-bottom-color: var(--rule); }
/* In a grid the columns sit side by side, so :last-child would close a
   rule under one column only. Entries stacked in a list still close. */
.grid > .entry:last-child { border-bottom: 0; }
.on-field .entry { border-top-color: rgba(255, 248, 236, .26); }
.on-field .entry:last-child { border-bottom-color: rgba(255, 248, 236, .26); }
.entry h3 { margin-bottom: var(--s2); }
.entry-mark {
    display: block;
    width: 34px; height: 34px;
    margin-bottom: var(--s4);
    color: #EFA22B;
    color: var(--gilt);
}
.entry-mark svg { width: 100%; height: 100%; display: block; }
.entry .entry-mark + .display-3 { margin-top: 0; }

/* Panel: the one boxed container in the system. Square, ruled, never nested. */
.panel {
    background: #ffffff;
    background: var(--surface);
    border: 1px solid rgba(45, 55, 72, .16);
    border-color: var(--rule);
    padding: var(--s6);
    -webkit-box-shadow: var(--lift-1);
    box-shadow: var(--lift-1);
}
.panel-field {
    background: #002147;
    background: var(--oxford-deep);
    border-color: rgba(255, 248, 236, .26);
    color: #FFF8EC;
    color: var(--on-dark);
}

/* ============================================================================
   6. CONTROLS
   ========================================================================= */
.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    -webkit-transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), -webkit-transform .18s var(--ease), -webkit-box-shadow .18s var(--ease);
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.btn:active { -webkit-transform: translateY(1px); transform: translateY(1px); }

.btn.btn-primary {
    background: #C93A58;
    background: var(--scarlet-solid);
    color: #fff;
    -webkit-box-shadow: 0 2px 4px rgba(45,55,72,.20), 0 8px 20px rgba(45,55,72,.16);
    box-shadow: 0 2px 4px rgba(45,55,72,.20), 0 8px 20px rgba(45,55,72,.16);
}
.btn.btn-primary:hover { background: #A32844; background: var(--scarlet-deep); color: #fff; }

.btn.btn-field {
    background: transparent;
    color: #FFF8EC;
    border-color: rgba(255, 248, 236, .55);
}
.btn.btn-field:hover { background: #EFA22B; background: var(--gilt); color: #002147; border-color: transparent; }

.btn.btn-quiet {
    background: transparent;
    color: #123A63;
    color: var(--oxford);
    border-color: rgba(45, 55, 72, .34);
    border-color: var(--rule-strong);
}
.btn.btn-quiet:hover { background: #123A63; background: var(--oxford); color: #fff; border-color: transparent; }
[data-theme="dark"] .btn.btn-quiet { color: #F7BE5C; color: var(--gilt); }
[data-theme="dark"] .btn.btn-quiet:hover { background: #F7BE5C; background: var(--gilt); color: #002147; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    -webkit-transform: none;
    transform: none;
}
.btn .ico { width: 18px; height: 18px; margin-right: 9px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }

/* Text link that reads as a printed cross-reference */
.xref {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(45, 55, 72, .34);
    border-bottom-color: var(--rule-strong);
    padding-bottom: 2px;
    -webkit-transition: border-color .18s var(--ease), color .18s var(--ease);
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.xref:hover { color: #C93A58; color: var(--scarlet); border-bottom-color: #C93A58; border-bottom-color: var(--scarlet); }
.xref .ico { width: 15px; height: 15px; margin-left: 7px; }
.on-field .xref { border-bottom-color: rgba(255, 248, 236, .48); }
.on-field .xref:hover { color: #ecd29a; color: var(--gilt-bright); border-bottom-color: #ecd29a; }

/* Forms */
.field-label {
    display: block;
    margin-bottom: var(--s2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4A5568;
    color: var(--ink-soft);
}
.input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    background: #ffffff;
    background: var(--paper);
    color: #2D3748;
    color: var(--ink);
    border: 1px solid rgba(45, 55, 72, .34);
    border-color: var(--rule-strong);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    -webkit-transition: border-color .16s var(--ease), -webkit-box-shadow .16s var(--ease);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::-webkit-input-placeholder { color: #6B7A90; color: var(--ink-faint); }
.input::-moz-placeholder { color: #6B7A90; color: var(--ink-faint); opacity: 1; }
.input:-ms-input-placeholder { color: #6B7A90; }
.input::placeholder { color: #6B7A90; color: var(--ink-faint); }
.input:focus {
    outline: none;
    border-color: #123A63;
    border-color: var(--oxford);
    -webkit-box-shadow: 0 0 0 3px rgba(45, 55, 72, .14);
    box-shadow: 0 0 0 3px rgba(45, 55, 72, .14);
}
[data-theme="dark"] .input:focus {
    border-color: #F7BE5C;
    -webkit-box-shadow: 0 0 0 3px rgba(255, 248, 236, .20);
    box-shadow: 0 0 0 3px rgba(255, 248, 236, .20);
}
textarea.input { min-height: 130px; resize: vertical; line-height: 1.6; }

.form-note {
    margin-top: var(--s3);
    padding: 12px 14px;
    border-left: 1px solid #C93A58;
    font-size: 14px;
}
.form-note-error { border-left-color: #C93A58; color: #C93A58; background: rgba(158,27,50,.07); }
.form-note-ok    { border-left-color: #22703F; color: #22703F; background: rgba(20,69,47,.07); }
[data-theme="dark"] .form-note-error { color: #ff9aab; background: rgba(216,85,108,.12); }
[data-theme="dark"] .form-note-ok    { color: #7fd0a8; background: rgba(20,69,47,.28); border-left-color: #7fd0a8; }

/* ============================================================================
   7. MASTHEAD
   ========================================================================= */
.masthead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 90;
    background: #123A63;
    background: var(--oxford);
    color: #FFF8EC;
    border-bottom: 1px solid rgba(255, 248, 236, .30);
}
.masthead-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 68px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.wordmark {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #FFF8EC;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.wordmark img { width: 36px; height: 36px; margin-right: 12px; -o-object-fit: contain; object-fit: contain; }
.wordmark-text { line-height: 1.05; }
.wordmark-name {
    display: block;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .01em;
}
.wordmark-sub {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #EFA22B;
    color: var(--gilt);
}

.mast-nav {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
}
.mast-nav > * { margin-left: 4px; }

/* Fallback nav shown before oxf.js runs, and permanently without it.
   It must wrap: forcing the desktop row here overflowed a 320px screen. */
.mast-fallback {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
}
.mast-fallback .mast-link { padding: 8px 10px; font-size: 13.5px; }

.mast-link {
    display: block;
    padding: 10px 13px;
    color: #dfe7f0;
    font-size: 14.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    -webkit-transition: color .16s var(--ease), border-color .16s var(--ease);
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.mast-link:hover { color: #fff; border-bottom-color: rgba(255, 248, 236, .6); }
.mast-link[aria-current="page"] { color: #fff; border-bottom-color: #EFA22B; border-bottom-color: var(--gilt); }


/* Icon buttons (theme, burger) */
.icon-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 248, 236, .30);
    border-radius: 2px;
    color: #FFF8EC;
    -webkit-transition: background-color .16s var(--ease), border-color .16s var(--ease);
    transition: background-color .16s var(--ease), border-color .16s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.icon-btn:hover { background: rgba(255, 248, 236, .16); border-color: rgba(255, 248, 236, .6); }
.icon-btn svg { width: 19px; height: 19px; display: block; }

/* Sign out / Çıkış yap: an icon AND a word, so nobody has to guess */
.mast-signout {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-left: 8px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(255, 248, 236, .45);
    border-radius: 2px;
    color: #FFF8EC;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: background-color .16s var(--ease), border-color .16s var(--ease);
    transition: background-color .16s var(--ease), border-color .16s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mast-signout:hover, .mast-signout:focus-visible { background: rgba(255, 248, 236, .16); border-color: rgba(255, 248, 236, .8); }
.mast-signout svg { width: 18px; height: 18px; display: block; -ms-flex-negative: 0; flex-shrink: 0; }
.mast-mobile .mast-signout { margin-left: 0; padding: 0 12px; font-size: 14px; }
.drawer-signout { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; }
.drawer-signout svg { width: 18px; height: 18px; }
.drawer-theme { display: none; }
@media (max-width: 479px) {
    .mast-mobile.has-signout [data-theme-toggle] { display: none; }
    .drawer-actions .drawer-theme { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; }
    .drawer-actions .drawer-theme + .btn { margin-top: 10px; }
}

.mast-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
}
.mast-mobile > * { margin-left: 8px; }

/* Mobile drawer */
.drawer {
    display: none;
    border-top: 1px solid rgba(255, 248, 236, .26);
    background: #002147;
    background: var(--oxford-deep);
    padding-bottom: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.drawer.open { display: block; }
.drawer-link {
    display: block;
    padding: 15px 22px;
    color: #dfe7f0;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 248, 236, .13);
}
.drawer-link:hover, .drawer-link:active { background: rgba(255, 248, 236, .12); color: #fff; }
.drawer-group-label {
    padding: 18px 22px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #EFA22B;
}
.drawer-actions { padding: 18px 22px 4px; }
.drawer-actions .btn { width: 100%; }
.drawer-actions .btn + .btn { margin-top: 10px; }

/* ============================================================================
   8. COLOPHON (footer)
   ========================================================================= */
.colophon {
    background: #002147;
    background: var(--field-deep);
    color: #CFE0F0;
    color: var(--on-dark-soft);
    border-top: 3px solid #EFA22B;
    border-top-color: var(--gilt);
    padding-top: 56px;
    padding-bottom: 28px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.colophon h2, .colophon h3 { color: #FFF8EC; }
.colophon a { color: #CFE0F0; -webkit-transition: color .16s var(--ease); transition: color .16s var(--ease); }
.colophon a:hover { color: #ecd29a; }
.colophon-grid { grid-template-columns: 1fr; gap: var(--s6); }
.colophon-title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    color: #FFF8EC;
}
.colophon-heading {
    margin-bottom: var(--s4);
    padding-bottom: var(--s2);
    border-bottom: 1px solid rgba(255, 248, 236, .26);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #EFA22B;
}
.colophon ul { list-style: none; }
.colophon li + li { margin-top: 10px; }
.colophon-contact a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.colophon-contact .ico { width: 16px; height: 16px; margin-right: 10px; color: #EFA22B; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.colophon-base {
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid rgba(255, 248, 236, .20);
    font-size: 13px;
    color: #9FB6CD;
}
.colophon-base .row { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

/* ============================================================================
   9. PAGE-SPECIFIC COMPOSITIONS
   ========================================================================= */

/* --- The plate: opening spread ------------------------------------------- */
.opening {
    position: relative;
    background: #123A63;
    background: var(--field);
    color: #FFF8EC;
    overflow: hidden;
    padding-top: 52px;
    padding-bottom: 52px;
}
/* Ruled engraving field, drawn in CSS — no image request. */
.opening::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        -webkit-repeating-linear-gradient(left, rgba(255,248,236,.055) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, rgba(255,248,236,.055) 0 1px, transparent 1px 46px);
    pointer-events: none;
}
.opening > * { position: relative; z-index: 1; }
.opening-grid { grid-template-columns: 1fr; gap: var(--s7); -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.opening .display { max-width: 13ch; }
.opening .display em { display: block; }
.opening-rule {
    width: 84px; height: 3px;
    margin: var(--s5) 0;
    background: #EFA22B;
    background: var(--gilt);
}
.opening-actions { margin-top: var(--s6); }
.opening-actions .btn { margin-right: 12px; margin-bottom: 12px; }

.opening .plate-frame { border-color: rgba(255, 248, 236, .38); }
.opening .plate figcaption { border-top-color: rgba(255, 248, 236, .26); }

/* The opening is a dark field: its text takes the on-field ramp, or the
   lede and the plate caption fall to near-invisible grey on navy. */
.opening .lede,
.opening .prose    { color: #CFE0F0; color: var(--on-dark-soft); }
.opening .engraved { color: #93a6ba; }

/* --- Standing (the credentials strip) ------------------------------------ */
.standing {
    background: #002147;
    background: var(--field-ink);
    color: #CFE0F0;
    padding-top: 22px;
    padding-bottom: 22px;
    border-top: 1px solid rgba(255, 248, 236, .20);
}
.standing-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.standing-list li {
    font-size: 13px;
    letter-spacing: .06em;
    margin-right: 26px;
    padding: 3px 0;
}
.standing-list li:last-child { margin-right: 0; }
/* Drawn gilt mark, not a glyph standing in for one. */
.standing-list li::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-right: 11px;
    -webkit-transform: translateY(-2px) rotate(45deg);
    transform: translateY(-2px) rotate(45deg);
    background: #EFA22B;
    background: var(--gilt);
}

/* --- Catalogue (the software library) ------------------------------------ */
.catalogue { list-style: none; }
.catalogue li {
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
}
.catalogue li:last-child { border-bottom: 1px solid rgba(45,55,72,.16); border-bottom-color: var(--rule); }
.on-field .catalogue li { border-top-color: rgba(255, 248, 236, .26); }
.on-field .catalogue li:last-child { border-bottom-color: rgba(255, 248, 236, .26); }
.catalogue a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 17px 0;
    color: inherit;
    -webkit-transition: color .16s var(--ease);
    transition: color .16s var(--ease);
}
.catalogue .ico {
    width: 21px; height: 21px;
    margin-right: 16px;
    color: #EFA22B;
    color: var(--gilt);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.catalogue-name { font-weight: 600; font-size: 16px; }
.catalogue-desc {
    display: block;
    margin-top: 1px;
    font-size: 13.5px;
    font-weight: 400;
    color: #6b7683;
    color: var(--ink-faint);
}
.on-field .catalogue-desc { color: #9FB6CD; color: var(--on-dark-faint); }
.catalogue-go { margin-left: auto; width: 17px; height: 17px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; opacity: .45; -webkit-transition: opacity .16s var(--ease), -webkit-transform .16s var(--ease); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.catalogue a:hover .catalogue-go { opacity: 1; -webkit-transform: translateX(4px); transform: translateX(4px); }
.catalogue a:hover .catalogue-name { color: #C93A58; color: var(--scarlet); }
.on-field .catalogue a:hover .catalogue-name { color: #ecd29a; color: var(--gilt-bright); }

/* --- Two doors (parents / students) -------------------------------------- */
.doors { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,248,236,.26); }
.door {
    padding: var(--s7) 0;
    border-bottom: 1px solid rgba(255, 248, 236, .26);
}
.door h3 { margin-bottom: var(--s3); }
.door p { margin-bottom: var(--s5); }

/* --- Level table (age groups) -------------------------------------------- */
.levels { list-style: none; }
.levels > li {
    padding: var(--s5) 0;
    border-top: 1px solid rgba(45, 55, 72, .16);
    border-top-color: var(--rule);
}
.levels > li:last-child { border-bottom: 1px solid rgba(45,55,72,.16); border-bottom-color: var(--rule); }
/* Sits UNDER its heading. Stacked above it would be the eyebrow, which the
   system bans outright. */
.level-age {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C93A58;
    color: var(--scarlet);
    margin-top: var(--s2);
}
.level-points { list-style: none; margin-top: var(--s3); }
.level-points li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    color: #4A5568;
    color: var(--ink-soft);
}
.level-points li + li { margin-top: 6px; }
.level-points li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 9px; height: 1px;
    background: #EFA22B;
    background: var(--gilt);
}
.on-field .level-points li { color: #CFE0F0; }

/* --- Login plate ---------------------------------------------------------- */
.auth-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 70vh;
    padding: var(--s7) 0;
}
.auth-plate { width: 100%; max-width: 440px; }
.auth-plate .field-label { margin-top: var(--s5); }
.auth-plate .field-label:first-of-type { margin-top: 0; }
.auth-plate .btn { width: 100%; margin-top: var(--s6); }

/* ============================================================================
   10. MOTION — one authored moment, from an already-visible default
   ========================================================================= */
.rise {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.js .rise {
    opacity: 0;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
    -webkit-transition: opacity .7s var(--ease), -webkit-transform .7s var(--ease);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .rise.seen { opacity: 1; -webkit-transform: none; transform: none; }
.js .rise-1 { -webkit-transition-delay: .06s; transition-delay: .06s; }
.js .rise-2 { -webkit-transition-delay: .12s; transition-delay: .12s; }
.js .rise-3 { -webkit-transition-delay: .18s; transition-delay: .18s; }

/* The signature moment: the opening rule draws itself once, like a plate
   being ruled. Everything else is content that is simply already there. */
/* The rule draws itself by scaling from its left edge, so the whole gesture
   runs on the compositor. Animating width would relayout on every frame. */
.js .opening-rule {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: rule-draw .9s var(--ease) .25s forwards;
    animation: rule-draw .9s var(--ease) .25s forwards;
}
@-webkit-keyframes rule-draw { to { -webkit-transform: scaleX(1); } }
@keyframes rule-draw { to { -webkit-transform: scaleX(1); transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .rise { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important; }
    .js .opening-rule { -webkit-transform: none; transform: none; -webkit-animation: none; animation: none; }
    *, *::before, *::after {
        -webkit-animation-duration: .01ms !important; animation-duration: .01ms !important;
        -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
        -webkit-transition-duration: .01ms !important; transition-duration: .01ms !important;
    }
}

/* ============================================================================
   11. BREAKPOINTS
   ========================================================================= */
@media (min-width: 600px) {
    .g-3 { grid-template-columns: 1fr 1fr; }
    .standing-list li { font-size: 13.5px; }
}

@media (min-width: 860px) {
    body { font-size: 17.5px; }
    .shell { padding-left: 32px; padding-right: 32px; }
    .band { padding-top: 88px; padding-bottom: 88px; }
    .band-tall { padding-top: 120px; padding-bottom: 120px; }
    .band-tight { padding-top: 56px; padding-bottom: 56px; }
    .band-airy  { padding-top: 132px; padding-bottom: 148px; }
    .field::before, .field-deep::before { margin-top: -88px; margin-bottom: 85px; }
    .band-tall.field::before, .band-tall.field-deep::before { margin-top: -120px; margin-bottom: 117px; }
    .band-airy.field::before, .band-airy.field-deep::before { margin-top: -132px; margin-bottom: 129px; }

    .g-2 { grid-template-columns: 1fr 1fr; gap: var(--s8); }
    .g-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
    .g-4 { grid-template-columns: repeat(4, 1fr); }

    .opening { padding-top: 84px; padding-bottom: 84px; }
    .opening-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }

    .doors { grid-template-columns: 1fr 1fr; }
    .door { padding-right: var(--s8); }
    .door + .door { padding-left: var(--s8); border-left: 1px solid rgba(255,248,236,.26); }

    .colophon-grid { grid-template-columns: 1.5fr 1fr 1.2fr; }

    .mast-nav { display: -webkit-box; display: -ms-flexbox; display: flex; }
    .mast-mobile { display: none; }
    .drawer { display: none !important; }
}

@media (min-width: 1080px) {
    .index-name { font-size: 21px; }
}

/* --- Phones: the real device --------------------------------------------- */
@media (max-width: 599px) {
    /* Fallback chrome stacks under the wordmark rather than overflowing. */
    .masthead-inner { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .mast-fallback { width: 100%; margin-left: 0; padding-bottom: 6px; }
    .mast-fallback .mast-link { padding: 6px 9px 6px 0; margin-right: 10px; font-size: 13px; }

    body { font-size: 16.5px; }
    .shell { padding-left: 18px; padding-right: 18px; }
    .band, .band-tall, .band-airy { padding-top: 52px; padding-bottom: 52px; }
    .field::before, .field-deep::before,
    .band-airy.field::before, .band-airy.field-deep::before { margin-top: -52px; margin-bottom: 49px; }
    .band-tall.field::before, .band-tall.field-deep::before { margin-top: -52px; margin-bottom: 49px; }

    .opening { padding-top: 40px; padding-bottom: 44px; }
    .opening-grid { gap: var(--s6); }
    .opening .display { max-width: none; }
    .opening-actions .btn { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-right: 0; }

    .panel { padding: var(--s5); }

    /* The leader-dot index collapses to a stacked entry — dots need width
       to read as dots, and at 360px they do not have it. */
    .index-list a, .index-list .index-row {
        display: block;
        padding: 14px 0;
    }
    .index-leader { display: none; }
    .index-note { display: block; text-align: left; margin-top: 3px; }
    /* No hover on touch — and no room to slide into. */
    .index-list a:hover { -webkit-transform: none; transform: none; }

    .catalogue a { padding: 15px 0; }
    .catalogue .ico { margin-right: 13px; }

    .standing-list li {
        -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%;
        margin-right: 0; padding: 4px 0; padding-right: 8px; font-size: 12.5px;
    }

    /* The children are spans: without display:block they reflow into one
       run and the copyright line runs straight into the domain. */
    .colophon-base .row { display: block; }
    .colophon-base .row > * { display: block; margin-right: 0; }
    .colophon-base .row > * + * { margin-top: 10px; }
}

/* --- Very small / very old (320px, iPhone SE 1, budget Android) ----------- */
@media (max-width: 360px) {
    .shell { padding-left: 15px; padding-right: 15px; }
    .wordmark img { width: 30px; height: 30px; margin-right: 9px; }
    .wordmark-name { font-size: 16px; }
    .wordmark-sub { letter-spacing: .18em; }
}

/* --- Landscape phone ------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
    .auth-wrap { min-height: 0; padding-top: var(--s6); padding-bottom: var(--s6); }
    .opening { padding-top: 36px; padding-bottom: 36px; }
}

/* ============================================================================
   12. BOOT SCREEN
   The plate being ruled. Navy field, wordmark, a gilt rule that draws, then
   the whole thing lifts away. Kept cheap: opacity + transform only.
   The markup and a copy of the essential rules are inlined in each page's
   <head>, so it paints before this stylesheet has even arrived.
   ========================================================================= */
#oxf-boot {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 300;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    background: #123A63;
    -webkit-transition: opacity .5s var(--ease), visibility .5s var(--ease);
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
/* The same 46px ruling as the opening field, so the boot screen is already
   the page rather than a splash bolted in front of it. */
#oxf-boot::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        -webkit-repeating-linear-gradient(left, rgba(255,248,236,.06) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, rgba(255,248,236,.06) 0 1px, transparent 1px 46px);
}
#oxf-boot.gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 24px;
}
.boot-mark {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 30px;
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.05;
    color: #FFF8EC;
    opacity: 0;
    -webkit-animation: boot-in .7s var(--ease) .05s forwards;
    animation: boot-in .7s var(--ease) .05s forwards;
}
.boot-sub {
    display: block;
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #EFA22B;
    opacity: 0;
    -webkit-animation: boot-in .7s var(--ease) .18s forwards;
    animation: boot-in .7s var(--ease) .18s forwards;
}
/* Track + fill. The fill scales, never animates width. */
.boot-rule {
    display: block;
    width: 148px;
    height: 2px;
    margin: 26px auto 0;
    overflow: hidden;
    background: rgba(255, 248, 236, .22);
}
.boot-rule i {
    display: block;
    width: 100%;
    height: 100%;
    background: #EFA22B;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: boot-rule 1.5s cubic-bezier(.4, 0, .2, 1) .3s infinite;
    animation: boot-rule 1.5s cubic-bezier(.4, 0, .2, 1) .3s infinite;
}
@-webkit-keyframes boot-in { to { opacity: 1; } }
@keyframes boot-in { to { opacity: 1; } }
@-webkit-keyframes boot-rule {
    0%   { -webkit-transform: scaleX(0);   transform-origin: left center; }
    50%  { -webkit-transform: scaleX(1);   transform-origin: left center; }
    51%  { -webkit-transform: scaleX(1);   transform-origin: right center; }
    100% { -webkit-transform: scaleX(0);   transform-origin: right center; }
}
@keyframes boot-rule {
    0%   { transform: scaleX(0); transform-origin: left center; }
    50%  { transform: scaleX(1); transform-origin: left center; }
    51%  { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* ============================================================================
   13. PLATE PORTFOLIO (slider)
   A turning portfolio of mounted plates: the print equivalent of a carousel.
   Navigation is roman-numeral plate numbers, not dots.
   ========================================================================= */
.portfolio { position: relative; }

.portfolio-viewport {
    position: relative;
    overflow: hidden;
    /* Vertical scrolling stays native; only horizontal drag is intercepted. */
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    cursor: -webkit-grab;
    cursor: grab;
}
.portfolio-viewport.dragging { cursor: -webkit-grabbing; cursor: grabbing; }

.portfolio-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    list-style: none;
    margin: 0; padding: 0;
    -webkit-transition: -webkit-transform .62s cubic-bezier(.22, 1, .36, 1);
    transition: transform .62s cubic-bezier(.22, 1, .36, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.portfolio-track.noanim {
    -webkit-transition: none !important;
    transition: none !important;
}

.portfolio-slide {
    -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
}
.portfolio-slide .plate-frame { border-color: rgba(255, 248, 236, .30); }
.portfolio-slide img {
    /* Slides that are not current sit slightly back, so the turn reads as
       depth rather than a filmstrip sliding past. */
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-transition: -webkit-transform .8s var(--ease), opacity .5s var(--ease);
    transition: transform .8s var(--ease), opacity .5s var(--ease);
    opacity: .55;
}
.portfolio-slide.is-current img {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.portfolio-cap {
    display: block;
    min-height: 62px;
    margin-top: var(--s3);
    padding-top: var(--s2);
    border-top: 1px solid rgba(255, 248, 236, .26);
    opacity: 0;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    -webkit-transition: opacity .45s var(--ease) .12s, -webkit-transform .45s var(--ease) .12s;
    transition: opacity .45s var(--ease) .12s, transform .45s var(--ease) .12s;
}
.portfolio-slide.is-current .portfolio-cap {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.portfolio-num {
    display: block;
    color: #EFA22B;
    margin-bottom: 3px;
}
.portfolio-text {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: #CFE0F0;
}

/* Progress rule — one gilt line that advances a step at a time. */
.portfolio-bar {
    position: relative;
    height: 2px;
    margin-top: var(--s5);
    background: rgba(255, 248, 236, .20);
    overflow: hidden;
}
.portfolio-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: #EFA22B;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .62s cubic-bezier(.22, 1, .36, 1);
    transition: transform .62s cubic-bezier(.22, 1, .36, 1);
}

.portfolio-controls {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-top: var(--s4);
}
.portfolio-nums {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    list-style: none;
    margin: 0 auto 0 0;
    padding: 0;
}
.portfolio-nums li { margin-right: 2px; }
.portfolio-num-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #9FB6CD;
    -webkit-transition: color .2s var(--ease), border-color .2s var(--ease);
    transition: color .2s var(--ease), border-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.portfolio-num-btn:hover { color: #FFF8EC; border-bottom-color: rgba(255, 248, 236, .55); }
.portfolio-num-btn[aria-current="true"] {
    color: #ecd29a;
    border-bottom-color: #EFA22B;
}

.portfolio-arrows { display: -webkit-box; display: -ms-flexbox; display: flex; }
.portfolio-arrows .icon-btn + .icon-btn { margin-left: 8px; }
.portfolio-arrows .icon-btn svg {
    -webkit-transition: -webkit-transform .2s var(--ease);
    transition: transform .2s var(--ease);
}
.portfolio-arrows [data-prev] svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.portfolio-arrows [data-prev]:hover svg { -webkit-transform: rotate(180deg) translateX(2px); transform: rotate(180deg) translateX(2px); }
.portfolio-arrows [data-next]:hover svg { -webkit-transform: translateX(2px); transform: translateX(2px); }
.portfolio-arrows .icon-btn[disabled] { opacity: .35; cursor: default; }

@media (max-width: 599px) {
    .portfolio-cap { min-height: 74px; }
    .portfolio-controls { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .portfolio-nums { margin-bottom: 6px; }
    .portfolio-num-btn { min-width: 36px; padding: 6px; }
    /* On touch the swipe is the control; the arrows are a fallback. */
    .portfolio-arrows { margin-left: auto; }
}

/* ============================================================================
   14. EXTENDED MOTION
   ========================================================================= */

/* More stagger steps, so a long band can cascade instead of arriving at once. */
.js .rise-4 { -webkit-transition-delay: .24s; transition-delay: .24s; }
.js .rise-5 { -webkit-transition-delay: .30s; transition-delay: .30s; }
.js .rise-6 { -webkit-transition-delay: .36s; transition-delay: .36s; }

/* Directional variants. Used sparingly — a spread reads better when its two
   halves arrive from their own sides. */
.js .rise-left  { -webkit-transform: translate3d(-26px, 0, 0); transform: translate3d(-26px, 0, 0); }
.js .rise-right { -webkit-transform: translate3d(26px, 0, 0);  transform: translate3d(26px, 0, 0); }
.js .rise-left.seen, .js .rise-right.seen { -webkit-transform: none; transform: none; }

/* The section rule draws itself as its head comes into view — the same
   gesture as the opening rule, so the page has one motion idea, repeated. */
.js .head::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .7s var(--ease) .1s;
    transition: transform .7s var(--ease) .1s;
}
.js .head.seen::before { -webkit-transform: scaleX(1); transform: scaleX(1); }

/* Ruled rows arrive in sequence. Index is set inline as --i by the runtime. */
.js .stagger > * {
    opacity: 0;
    -webkit-transform: translate3d(0, 14px, 0);
    transform: translate3d(0, 14px, 0);
    -webkit-transition: opacity .55s var(--ease), -webkit-transform .55s var(--ease);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .stagger.seen > * { opacity: 1; -webkit-transform: none; transform: none; }

/* Plates lift very slightly under the pointer. Composited, and only where a
   pointer actually exists. */
@media (hover: hover) and (min-width: 860px) {
    .plate-frame {
        -webkit-transition: -webkit-transform .5s var(--ease), -webkit-box-shadow .5s var(--ease);
        transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    }
    .plate:hover .plate-frame {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
        -webkit-box-shadow: var(--lift-2);
        box-shadow: var(--lift-2);
    }
    .catalogue a .ico,
    .catalogue a:hover .ico { -webkit-transform: translateX(3px); transform: translateX(3px); }
    .btn { -webkit-transition-duration: .22s; transition-duration: .22s; }
    .btn-primary:hover {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        -webkit-box-shadow: 0 4px 8px rgba(45,55,72,.22), 0 14px 30px rgba(45,55,72,.20);
        box-shadow: 0 4px 8px rgba(45,55,72,.22), 0 14px 30px rgba(45,55,72,.20);
    }
    .btn-field:hover, .btn-quiet:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
}

/* Masthead: slides out of the way going down, returns the moment you go up. */
.masthead {
    -webkit-transition: -webkit-transform .38s var(--ease), -webkit-box-shadow .3s var(--ease);
    transition: transform .38s var(--ease), box-shadow .3s var(--ease);
}
.masthead.lifted { -webkit-box-shadow: 0 2px 6px rgba(45,55,72,.28), 0 12px 30px rgba(45,55,72,.22); box-shadow: 0 2px 6px rgba(45,55,72,.28), 0 12px 30px rgba(45,55,72,.22); }
.masthead.tucked { -webkit-transform: translateY(-100%); transform: translateY(-100%); }

/* Drawer opens as a movement, not a jump. */
.drawer {
    -webkit-transform-origin: top center;
    transform-origin: top center;
}
.drawer.open {
    -webkit-animation: drawer-in .34s var(--ease) both;
    animation: drawer-in .34s var(--ease) both;
}
@-webkit-keyframes drawer-in { from { opacity: 0; -webkit-transform: translateY(-10px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* The whole document settles in once, on first paint. */
.js main { -webkit-animation: doc-in .6s var(--ease) both; animation: doc-in .6s var(--ease) both; }
@-webkit-keyframes doc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes doc-in { from { opacity: 0; } to { opacity: 1; } }

/* Focus ring animates in so keyboard users get feedback, not a hard snap. */
.btn:focus-visible, .mast-link:focus-visible, .portfolio-num-btn:focus-visible {
    -webkit-transition: outline-offset .15s var(--ease);
    transition: outline-offset .15s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    #oxf-boot { display: none !important; }
    .boot-mark, .boot-sub, .boot-rule i { -webkit-animation: none !important; animation: none !important; opacity: 1 !important; }
    .js main { -webkit-animation: none !important; animation: none !important; }
    .portfolio-track { -webkit-transition: none !important; transition: none !important; }
    .portfolio-slide img { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; }
    .portfolio-cap { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; }
    .portfolio-bar i { -webkit-transition: none !important; transition: none !important; }
    .js .stagger > * { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; }
    .js .head::before { -webkit-transform: scaleX(1) !important; transform: scaleX(1) !important; }
    .masthead.tucked { -webkit-transform: none !important; transform: none !important; }
    .drawer.open { -webkit-animation: none !important; animation: none !important; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .masthead, .drawer, .icon-btn, .opening::after { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .field, .field-deep, .opening, .colophon { background: #fff !important; color: #000 !important; }
    a { text-decoration: underline; }
}

/* ============================================================================
   15. THE WORKSHOP — shape, weight and motion

   The token block above repaints this stylesheet; this section changes its
   SHAPE. The previous world was built from hairlines and 2px corners because
   it was imitating print. This one is built from things that sit on a table:
   generous radii, a solid offset under every pressable surface, and a spring
   that makes a card feel picked up rather than faded in.

   Ordered last so it wins on the cascade at equal specificity — no
   !important in the visual rules, so any page can still override a single
   component.
   ========================================================================= */

/* ── Display type, retuned for Baloo 2 ────────────────────────────────────
   Bodoni was a didone: hairline strokes, so it was set at weight 600 with
   tight negative tracking to hold the line together. Baloo 2 is the opposite
   — already round and heavy — so it wants more weight, almost no tracking
   correction, and slightly tighter leading. */
.display   { font-weight: 700; letter-spacing: -.005em; line-height: 1.06; }
.display-2 { font-weight: 700; letter-spacing: -.004em; line-height: 1.12; }
.display-3 { font-weight: 600; letter-spacing: 0;       line-height: 1.22; }

/* Baloo 2 ships no italic, so the old gilt-italic emphasis would silently
   render as an upright slab — the emphasis would simply vanish. The
   replacement is a device from this world instead: a marker stroke laid
   behind the word, the way a teacher highlights the thing that matters on a
   worksheet. */
.display em, .display-2 em, .display-3 em {
    font-style: normal;
    font-weight: 800;
    color: #2D3748;
    color: var(--ink);
    background-image: -webkit-linear-gradient(rgba(239,162,43,.55), rgba(239,162,43,.55));
    background-image: linear-gradient(rgba(239,162,43,.55), rgba(239,162,43,.55));
    background-repeat: no-repeat;
    background-size: 100% .34em;
    background-position: 0 82%;
    padding: 0 .06em;
}
.on-field .display em,
.on-field .display-2 em,
.on-field .display-3 em {
    color: #FFF8EC;
    color: var(--on-field);
    background-image: -webkit-linear-gradient(rgba(226,112,31,.85), rgba(226,112,31,.85));
    background-image: linear-gradient(rgba(226,112,31,.85), rgba(226,112,31,.85));
}

/* The tracked-caps label loses the engraved register: less extreme tracking,
   more weight, and it carries colour so it reads as a friendly section marker
   rather than a plate caption. */
.engraved {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #AE4E0C;
    color: var(--action-text);
}
.on-field .engraved { color: #EFA22B; color: var(--amber); }

/* ── Pressables ───────────────────────────────────────────────────────────
   The solid offset is the whole idea: a button reads as a slab with a shadow
   under its front edge, so pressing it should visibly close that gap. Hover
   lifts 2px and the gap grows; :active drops and it nearly shuts. */
.btn {
    border-width: 2px;
    border-radius: 16px;
    border-radius: var(--r-md);
    font-weight: 800;
    letter-spacing: .005em;
    -webkit-transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), -webkit-transform .22s var(--spring), -webkit-box-shadow .22s var(--spring);
    transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .22s var(--spring), box-shadow .22s var(--spring);
}
.btn.btn-primary {
    background: #BC560F;
    background: var(--action);
    border-color: transparent;
    color: #fff;
    -webkit-box-shadow: 0 4px 0 #9C4409, 0 6px 16px rgba(156,68,9,.30);
    box-shadow: 0 4px 0 #9C4409, 0 6px 16px rgba(156,68,9,.30);
}
.btn.btn-primary:hover {
    background: #BC560F;
    background: var(--action);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 6px 0 #9C4409, 0 12px 24px rgba(156,68,9,.32);
    box-shadow: 0 6px 0 #9C4409, 0 12px 24px rgba(156,68,9,.32);
}
.btn.btn-primary:active {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-box-shadow: 0 1px 0 #9C4409;
    box-shadow: 0 1px 0 #9C4409;
}

.btn.btn-quiet {
    background: #FFFCF6;
    background: var(--surface);
    border-color: rgba(45,55,72,.20);
    color: #123A63;
    color: var(--ink);
    -webkit-box-shadow: 0 3px 0 rgba(45,55,72,.14);
    box-shadow: 0 3px 0 rgba(45,55,72,.14);
}
.btn.btn-quiet:hover {
    background: #FFFCF6;
    background: var(--surface);
    color: #123A63;
    color: var(--ink);
    border-color: rgba(226,112,31,.55);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 5px 0 rgba(226,112,31,.26);
    box-shadow: 0 5px 0 rgba(226,112,31,.26);
}
.btn.btn-quiet:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-box-shadow: 0 1px 0 rgba(45,55,72,.18);
    box-shadow: 0 1px 0 rgba(45,55,72,.18);
}

.btn.btn-field {
    border-color: rgba(255,248,236,.42);
    -webkit-box-shadow: 0 3px 0 rgba(0,21,46,.55);
    box-shadow: 0 3px 0 rgba(0,21,46,.55);
}
.btn.btn-field:hover {
    background: #EFA22B;
    background: var(--amber);
    color: #002147;
    color: var(--navy-deep);
    border-color: transparent;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 5px 0 rgba(0,21,46,.55);
    box-shadow: 0 5px 0 rgba(0,21,46,.55);
}
.btn.btn-field:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-box-shadow: 0 1px 0 rgba(0,21,46,.55);
    box-shadow: 0 1px 0 rgba(0,21,46,.55);
}
.btn[disabled], .btn[aria-disabled="true"] {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ── Containers ───────────────────────────────────────────────────────────
   `.entry` is what this system uses instead of a card, so it is the surface
   that most needs to stop being a ruled row and start being an object. */
.panel {
    border-width: 2px;
    border-radius: 22px;
    border-radius: var(--r-lg);
    border-color: rgba(45,55,72,.14);
    -webkit-box-shadow: 0 3px 0 rgba(45,55,72,.10), 0 10px 24px rgba(45,55,72,.07);
    box-shadow: 0 3px 0 rgba(45,55,72,.10), 0 10px 24px rgba(45,55,72,.07);
}
.entry {
    border-radius: 18px;
    padding: 20px 22px;
    background: #FFFCF6;
    background: var(--surface);
    border: 2px solid rgba(45,55,72,.12);
    -webkit-box-shadow: 0 3px 0 rgba(45,55,72,.10);
    box-shadow: 0 3px 0 rgba(45,55,72,.10);
    -webkit-transition: -webkit-transform .22s var(--spring), -webkit-box-shadow .22s var(--spring), border-color .16s var(--ease);
    transition: transform .22s var(--spring), box-shadow .22s var(--spring), border-color .16s var(--ease);
}
.entry:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    border-color: rgba(226,112,31,.42);
    -webkit-box-shadow: 0 6px 0 rgba(226,112,31,.22), 0 14px 28px rgba(45,55,72,.10);
    box-shadow: 0 6px 0 rgba(226,112,31,.22), 0 14px 28px rgba(45,55,72,.10);
}
.on-field .entry {
    background: rgba(255,248,236,.06);
    border-color: rgba(255,248,236,.18);
    -webkit-box-shadow: 0 3px 0 rgba(0,21,46,.45);
    box-shadow: 0 3px 0 rgba(0,21,46,.45);
}
.on-field .entry:hover {
    border-color: rgba(239,162,43,.55);
    -webkit-box-shadow: 0 6px 0 rgba(239,162,43,.30);
    box-shadow: 0 6px 0 rgba(239,162,43,.30);
}

/* A photograph now sits in a rounded mount with a warm edge, not a ruled
   engraving frame. */
.plate-frame {
    border-radius: 22px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 3px solid #ffffff;
    -webkit-box-shadow: 0 5px 0 rgba(45,55,72,.13), 0 18px 36px rgba(45,55,72,.14);
    box-shadow: 0 5px 0 rgba(45,55,72,.13), 0 18px 36px rgba(45,55,72,.14);
}
.on-field .plate-frame {
    border-color: rgba(255,248,236,.90);
    -webkit-box-shadow: 0 5px 0 rgba(0,21,46,.55), 0 18px 36px rgba(0,13,31,.45);
    box-shadow: 0 5px 0 rgba(0,21,46,.55), 0 18px 36px rgba(0,13,31,.45);
}

.input {
    border-width: 2px;
    border-radius: 12px;
    border-radius: var(--r-sm);
    font-family: var(--sans);
    -webkit-transition: border-color .16s var(--ease), -webkit-box-shadow .16s var(--ease);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus {
    outline: none;
    border-color: #2377AE;
    border-color: var(--ocean);
    -webkit-box-shadow: 0 0 0 4px rgba(35,119,174,.18);
    box-shadow: 0 0 0 4px rgba(35,119,174,.18);
}

/* ── Navigation and small controls ───────────────────────────────────────── */
.icon-btn, .mast-link, .drawer-link {
    border-radius: 12px;
    border-radius: var(--r-sm);
}
.mast-link {
    -webkit-transition: background-color .16s var(--ease), color .16s var(--ease);
    transition: background-color .16s var(--ease), color .16s var(--ease);
}

/* The two-door chooser is the clearest "pick your side" moment on the site,
   so it gets the full slab treatment. */
.door {
    border-radius: 22px;
    border-radius: var(--r-lg);
    border-width: 2px;
    -webkit-transition: -webkit-transform .22s var(--spring), -webkit-box-shadow .22s var(--spring), border-color .16s var(--ease);
    transition: transform .22s var(--spring), box-shadow .22s var(--spring), border-color .16s var(--ease);
}
.door:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 6px 0 rgba(239,162,43,.32), 0 16px 32px rgba(0,13,31,.30);
    box-shadow: 0 6px 0 rgba(239,162,43,.32), 0 16px 32px rgba(0,13,31,.30);
}

/* ── Motion honours the OS setting, as the rest of the system does ───────── */
@media (prefers-reduced-motion: reduce) {
    .btn, .entry, .door, .plate-frame {
        -webkit-transition: none !important;
        transition: none !important;
    }
    .btn:hover, .entry:hover, .door:hover {
        -webkit-transform: none;
        transform: none;
    }
}

/* ── Bands: the page's colour rhythm ──────────────────────────────────────
   The old world alternated exactly two grounds, ivory and Oxford navy, and
   that alternation WAS the design. Repainting the navy warmer kept the
   rhythm but not the energy: the page still read as two-tone.

   So the fields split by job. `.field` is the mid-page assertion and becomes
   painted ocean — friendly, saturated, unmistakably not a prospectus.
   `.field-deep` stays Oxford navy because that is a brand commitment and it
   is what closes the page and holds the footer. One warm sunk paper sits
   between them so three grounds alternate instead of two. */
.field {
    background: #1F6E9E;
    /* Deep ocean, not mid. The lighter ramp this replaced left the soft ink
       at 3.6:1 and the faint ink at 2.3:1 — present but not readable. */
    background: -webkit-linear-gradient(top, #1B5E8C 0%, #144E75 100%);
    background: linear-gradient(180deg, #1B5E8C 0%, #144E75 100%);
}
.field-deep { background: #002147; background: var(--field-deep); }

/* The sunk band warms up rather than greying down — it is the same paper
   left a little longer in the sun, not a different material. */
.sunk { background: #F3E9D6; background: var(--surface-sunk); }

/* A band can opt into a painted accent ground. Used sparingly: one per page
   at most, for the moment that should feel like a poster rather than a page. */
.band-paint   { background: #E2701F; background: var(--tangerine); }
.band-meadow  { background: #2F8F55; background: var(--meadow); }

/* ── The opening ──────────────────────────────────────────────────────────
   The hero keeps the Oxford field, because the first thing a parent should
   feel is that this is a real academy. The warmth arrives underneath it as a
   painted rule rather than by diluting the field itself. */
.opening { background: #123A63; background: var(--field); }
.opening-rule {
    background: #E2701F;
    background: var(--tangerine);
    height: 5px;
    border-radius: 999px;
}

/* The standing strip under the hero carried the old ink-black. It becomes
   the tangerine ribbon: the one full-width painted element on the page, and
   the join between the navy hero and the paper below. */
.standing {
    background: #BC560F;
    background: var(--action);
    color: #FFFFFF;
}
.standing a, .standing-list, .standing-list li { color: #FFFFFF; }

/* ── Ruled devices become tactile ones ───────────────────────────────────
   The prospectus contents list (name · dotted leader · note) is the most
   editorial device in the system. It keeps its structure — it is genuinely
   the clearest way to show a programme list — but the leader becomes a soft
   warm dash and the row gains a hover the old ruled version could not have. */
.index-list li {
    border-radius: 14px;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-transition: background-color .16s var(--ease);
    transition: background-color .16s var(--ease);
}
.index-list li:hover { background: rgba(226,112,31,.07); }
.index-leader {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    border-bottom-color: rgba(45,55,72,.22);
    opacity: .75;
}
.index-name { font-weight: 700; }

/* Catalogue rows gain the same object treatment as `.entry`. */
.catalogue li {
    border-radius: 14px;
    -webkit-transition: background-color .16s var(--ease), -webkit-transform .22s var(--spring);
    transition: background-color .16s var(--ease), transform .22s var(--spring);
}
.catalogue li:hover { -webkit-transform: translateX(3px); transform: translateX(3px); }
.entry-mark, .catalogue li .ico {
    color: #E2701F;
    color: var(--tangerine);
}
.on-field .entry-mark, .on-field .catalogue li .ico {
    color: #EFA22B;
    color: var(--amber);
}

/* The heading tick was a 64x3 gilt hairline. It becomes a short painted bar
   with a round cap — the same signal, made of the new material. */
.head::before {
    height: 5px !important;
    width: 48px !important;
    border-radius: 999px;
    background: #E2701F !important;
    background: var(--tangerine) !important;
}
.on-field .head::before { background: #EFA22B !important; background: var(--amber) !important; }

/* Level cards in the "seviye basamakları" list read as painted steps. */
.levels .level-points li { border-radius: 10px; }
.level-age { color: #AE4E0C; color: var(--action-text); font-weight: 800; }
.on-field .level-age { color: #EFA22B; color: var(--amber); }

/* ── Corrections from the first legible-crop review ───────────────────────
   Judged on full-resolution crops, not page thumbnails: a 6,000px page
   scaled to fit hides exactly these. */

/* The marker sat at 82% of the em box at .34em tall, which on Baloo 2's
   large x-height landed across the middle of the word and read as a
   redaction bar rather than a highlight. Dropped to the baseline and
   thinned, it becomes what it was meant to be: a line drawn under the word
   with a marker. */
.display em, .display-2 em, .display-3 em {
    background-size: 100% .17em;
    background-position: 0 96%;
    padding: 0;
}
.display em, .display-2 em {
    background-image: -webkit-linear-gradient(#E2701F, #E2701F);
    background-image: linear-gradient(#E2701F, #E2701F);
}
.on-field .display em,
.on-field .display-2 em,
.on-field .display-3 em {
    background-image: -webkit-linear-gradient(#EFA22B, #EFA22B);
    background-image: linear-gradient(#EFA22B, #EFA22B);
}

/* The ruled-column grid belonged to the prospectus. In a workshop the paper
   is plain; the texture comes from what is on it. */
.opening::after { display: none; }

/* Both hero buttons must sit on one baseline. The primary carries a 4px
   offset shadow, so without an equal min-height it reads shorter than the
   button beside it. */
.opening-actions .btn {
    min-height: 56px;
    font-size: 16px;
}

/* The plate caption was a numbered engraving label ("Levha I"). The words
   stay — they are content — but the register softens so it reads as a photo
   caption rather than a catalogue entry. */
.plate figcaption {
    border-top: none;
    padding-top: 10px;
    margin-top: 12px;
}
.plate figcaption .engraved { letter-spacing: .06em; font-size: 11.5px; }

/* ── Touch-target floor ───────────────────────────────────────────────────
   Measured across four viewports: the class buttons, the outline buttons and
   the wordmark all sat between 36 and 38px. A teacher taps the class list
   dozens of times a lesson, often one-handed, and 38px is below the floor
   everything else in this system already clears.

   Inline links inside a sentence are deliberately NOT raised — WCAG 2.5.8
   exempts them, and forcing 44px there would wreck the line rhythm of the
   prose they sit in. */
.class-btn,
.filter-pill,
.console-btn-outline,
.console-btn,
button.badge {
    min-height: 44px;
}
.class-btn, .console-btn-outline, .console-btn {
    padding-top: 10px;
    padding-bottom: 10px;
}
.wordmark {
    min-height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* A 3px horizontal overflow appeared on courses.html at 320px: the shell's
   fixed side padding plus a grid gap exceeded the viewport on the narrowest
   phone still in the support window. */
@media (max-width: 360px) {
    .shell, .shell-narrow { padding-left: 14px; padding-right: 14px; }
    .grid { margin-left: 0; margin-right: 0; }
}

/* ============================================================================
   16. THE REEL — the opening's mini slider
   The opening used to mount a single still plate, and a full-width carousel
   sat two screens further down carrying the proof. Both are gone. One compact
   reel in the first viewport does the work of both, and the page is a screen
   shorter for it. The engine underneath is the same data-portfolio code that
   drove the old carousel — drag, arrows, numerals, auto-advance that yields
   to the reader — so only the dress here is new.
   ========================================================================= */
/* The track is a flex row of four slides each at min-width:100%, so its
   max-content width is four viewports wide. A grid item defaults to
   min-width:auto, which would hand the column that whole measurement and
   push the reel straight out of the shell. */
.reel { position: relative; min-width: 0; }

.reel-frame {
    position: relative;
    background: #002147;
    background: var(--field-ink);
    border: 1px solid rgba(255, 248, 236, .22);
    border-radius: 22px;
    border-radius: var(--r-lg);
    overflow: hidden;
    -webkit-box-shadow: 0 10px 0 rgba(0, 17, 38, .34), 0 20px 38px rgba(0, 17, 38, .34);
    box-shadow: 0 10px 0 rgba(0, 17, 38, .34), 0 20px 38px rgba(0, 17, 38, .34);
}

/* The viewport is what actually clips the sliding track, so the top corners
   are rounded here too — and masked, because old WebKit will not clip a
   translated child to a rounded corner on the strength of overflow alone.
   The mask is safe on this element: it carries no shadow to clip away. */
.reel .portfolio-viewport {
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.reel-shot {
    position: relative;
    width: 100%;
    padding-top: 64%;
    background: #123A63;
    background: var(--field);
}
.reel-shot > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
}

/* A solid strip under the photograph rather than a scrim laid over it: the
   caption has to hold its contrast whatever frame happens to be showing. */
.reel-cap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 60px;
    margin: 0;
    padding: 11px 15px;
    border-top: 1px solid rgba(255, 248, 236, .16);
    opacity: 0;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: opacity .45s var(--ease) .12s, -webkit-transform .45s var(--ease) .12s;
    transition: opacity .45s var(--ease) .12s, transform .45s var(--ease) .12s;
}
.portfolio-slide.is-current .reel-cap {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.reel-tag {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 11px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #BC560F;
    background: var(--action);
    color: #FFFFFF;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.reel-text {
    font-size: 14px;
    line-height: 1.4;
    color: #CFE0F0;
    color: var(--on-dark-soft);
}

/* The progress rule rides the bottom edge of the frame itself. */
.reel .portfolio-bar {
    margin-top: 0;
    height: 3px;
    background: rgba(255, 248, 236, .16);
}
.reel .portfolio-bar i {
    background: #E2701F;
    background: var(--tangerine);
}

.reel .portfolio-controls { margin-top: var(--s4); }
.reel .portfolio-num-btn { min-width: 44px; min-height: 44px; }

@media (max-width: 599px) {
    .reel-shot { padding-top: 62%; }
    .reel-cap { min-height: 56px; padding: 10px 13px; }
    .reel-text { font-size: 13.5px; }
}

/* ============================================================================
   17. PROGRAMME CARDS
   The programme list was six leader-dot rows — accurate, compact, and
   completely dry. These are the same six links with a photograph each, so a
   parent scanning the page sees what the subject actually looks like before
   reading a word of it. The photographs are stock (Pexels licence), which is
   why they illustrate the subject rather than claiming to be our rooms; the
   reel in the opening is where the real classroom photographs live.
   ========================================================================= */
.courses {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s5);
    list-style: none;
}
.courses > li { margin: 0; }

.courses a {
    display: block;
    height: 100%;
    background: #FFFCF6;
    background: var(--surface);
    border: 1px solid rgba(45, 55, 72, .14);
    border-color: var(--rule);
    border-radius: 16px;
    border-radius: var(--r-md);
    overflow: hidden;
    color: inherit;
    -webkit-box-shadow: var(--drop-1);
    box-shadow: var(--drop-1);
    -webkit-transition: -webkit-transform .2s var(--spring), -webkit-box-shadow .2s var(--ease), border-color .2s var(--ease);
    transition: transform .2s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.courses a:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    border-color: rgba(226, 112, 31, .45);
    -webkit-box-shadow: var(--drop-2);
    box-shadow: var(--drop-2);
}
.courses a:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.course-shot {
    position: relative;
    width: 100%;
    padding-top: 62.5%;
    background: #123A63;
    background: var(--field);
}
.course-shot > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
}

.course-body {
    padding: 15px 17px 17px;
}
.course-name {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    color: #123A63;
    color: var(--ink);
}
.course-note {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6B7A90;
    color: var(--ink-soft);
}
.course-go {
    display: inline-block;
    margin-top: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #AE4E0C;
    color: var(--action-text);
}
.courses a:hover .course-go { text-decoration: underline; }

/* On a phone, six image-on-top cards added 1.6k pixels of scroll to a page
   that had just been cut in half on purpose. The photograph earns its place
   at thumbnail size too, so below 620px the card turns on its side. */
@media (max-width: 619px) {
    .courses { gap: var(--s4); }
    .courses a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .course-shot {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 112px;
        flex: 0 0 112px;
        width: 112px;
        padding-top: 0;
        min-height: 106px;
    }
    .course-body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 12px 14px;
    }
    .course-name { font-size: 16.5px; }
    .course-note { font-size: 12.5px; margin-top: 3px; }
    .course-go   { font-size: 12.5px; margin-top: 8px; }
    /* No hover to lift into on touch. */
    .courses a:hover { -webkit-transform: none; transform: none; }
}

@media (min-width: 620px) {
    .courses { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
    .courses { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .courses a, .courses a:hover {
        -webkit-transition: none; transition: none;
        -webkit-transform: none; transform: none;
    }
}