/* =========================================================
   Albalagh International Premium College — London Campus
   THE HOMEPAGE
   ---------------------------------------------------------
   Loaded only on / and /ar/ (via the `extraCss` key on those
   two manifest entries — see scripts/build.js). Everything
   reusable lives in css/brand.css; this file is composition
   only, so the other 86 pages never download it.

   The page is built as eight chapters, each with its own
   ground colour, rather than as alternating light and dark
   bands. A reader should be able to say which chapter they
   are in from the colour alone, the way they could from the
   paper stock of a printed prospectus.
   ========================================================= */

/* ---------------------------------------------------------
   RHYTHM
   Chapters are spaced on one scale, not per-section values,
   so the vertical rhythm of the page holds together at every
   width. --chapter-pad is the only spacing number this file
   invents; everything else is a multiple of it.
   --------------------------------------------------------- */
:root {
  --chapter-pad: clamp(72px, 4.5vw + 44px, 128px);
  --gutter: clamp(32px, 4vw, 72px);
}

.chapter { padding: var(--chapter-pad) 0; position: relative; }
.chapter__head { max-width: 660px; margin-bottom: clamp(40px, 4vw, 64px); }
.chapter__head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* The lede closes the head, so it drops its trailing space — UNLESS
   something follows it, which it now can. Written as :last-child rather
   than as a modifier class because the condition is structural: the
   rule should hold for any head anyone writes later, without their
   having to know it exists. */
.chapter__head .lede:last-child { margin-bottom: 0; }

/* The chapter number: a roman numeral against a hairline, in
   small caps. It is set in the display face because it is
   numbering, not labelling — the one place on the page a
   figure is allowed to be decorative. */
.chapter__num {
  display: flex; align-items: center; gap: .9em;
  margin: 0 0 1.4em; color: var(--gold-royal);
  font-family: var(--font-body); font-weight: 700;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
}
.chapter__num::after {
  content: ''; flex: 1; max-width: 90px; height: 1px;
  background: currentColor; opacity: .45;
}
.chapter__head--center .chapter__num { justify-content: center; }
.chapter__head--center .chapter__num::after { display: none; }
/* The numeral is the one place on the page the ceremonial face is
   allowed at chapter scale. Roman numerals ARE inscriptional capitals —
   setting them in anything else is setting them in a translation. */
.chapter__num .roman {
  font-family: var(--font-ceremonial); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .1em; color: var(--gold-rich);
}
/* Gold at this size on paper is under AA — bronze on the light
   chapters, matching the rule brand.css already applies to
   .card__num and .ledger th for the same reason. */
.section--light .chapter__num, .section--paper .chapter__num,
.section--warm .chapter__num, .section--cream .chapter__num, .section--pearl .chapter__num {
  color: var(--bronze);
}
.section--warm .chapter__num .roman { color: var(--burgundy); }
.section--pearl .chapter__num .roman { color: var(--teal); }
.section--cream .chapter__num .roman { color: var(--emerald); }

/* =========================================================
   THE HERO
   ========================================================= */
.hero--flagship {
  background:
    radial-gradient(ellipse 70% 60% at 78% 8%, rgba(199,162,74,.20), transparent 62%),
    radial-gradient(ellipse 90% 70% at 12% 96%, rgba(31,61,122,.45), transparent 60%),
    linear-gradient(172deg, var(--midnight) 0%, var(--oxford) 100%);
  color: #fff;
  padding: clamp(84px, 8vw, 152px) 0 clamp(64px, 6vw, 108px);
  overflow: hidden; position: relative;
  border-bottom: 1px solid rgba(199,162,74,.28);
}
.hero--flagship .container { position: relative; z-index: 2; }

/* The crest, set large and low-contrast behind the type. Sits
   to the trailing edge so it never falls behind the headline
   at any width — a watermark that collides with the words it
   sits behind is a watermark that has to be turned down until
   it is pointless. */
.hero__crest {
  position: absolute; z-index: 1; pointer-events: none;
  right: -6%; top: 50%; transform: translateY(-50%);
  width: clamp(340px, 42vw, 620px); opacity: .17;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%);
  animation: crest-breathe 38s var(--ease-premium) infinite alternate;
}
[dir="rtl"] .hero__crest { right: auto; left: -6%; }
@keyframes crest-breathe {
  from { transform: translateY(-50%) scale(1); }
  to   { transform: translateY(-50%) scale(1.045); }
}
@media (max-width: 820px) { .hero__crest { opacity: .1; right: -22%; } }

.hero__inner { max-width: 780px; }
/* The first object on the page, so it is the one that establishes the
   material everything below is made of: a struck capsule with a lit top
   rim, a shaded floor, and a point of light that travels its perimeter
   once every nine seconds. Everything else on the homepage is a
   variation on this. */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  color: var(--gold-soft); margin-bottom: 1.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid rgba(199,162,74,.4); border-radius: var(--r-pill);
  padding: .68em 1.4em;
  background:
    linear-gradient(180deg, rgba(242,227,192,.13), rgba(199,162,74,.04) 60%),
    rgba(10,20,40,.35);
  box-shadow: var(--relief-raised), 0 8px 22px -14px rgba(3,8,20,.9);
  --aurum-dur: 11s;
}
/* Sized in rem rather than em: the eyebrow's own font-size is .7rem,
   so an em-sized icon came out at 12px, and a drawn clock tower at
   12px is a smudge. The icon is a sibling of the text, not a
   character in it, and should be sized like one. */
.hero__eyebrow .icon { width: 1.05rem; height: 1.05rem; color: var(--gold-rich); }

.hero__title { margin: 0 0 .42em; color: #fff; }
.hero__title .split-word { padding-right: .01em; }

/* The typed line. Set in the display face at reading size, in
   champagne, so it reads as a continuation of the headline
   rather than as a caption. */
.hero__typed {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, .9rem + 1.1vw, 1.7rem);
  color: var(--gold-champagne); margin: 0 0 1.1em;
  min-height: 1.6em;
}
.hero__typed .typeline__caret { height: .95em; }

.hero--flagship .lede {
  font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem);
  color: rgba(247,244,236,.82); max-width: 60ch; margin-bottom: 2em;
}
.hero--flagship .lede strong { color: var(--gold-champagne); font-weight: 600; }

/* The founding-cohort line. A quoted callout rather than another
   paragraph, so the one honest exclusivity claim on the page — real
   urgency, not a fabricated one — reads as set apart and deliberate. */
.hero__founding {
  display: flex; align-items: flex-start; gap: .8em;
  max-width: 54ch; margin: 0 0 2em;
  padding: .85em 1.2em; border-inline-start: 2px solid var(--gold-royal);
  background: rgba(199,162,74,.07);
  font-size: .92rem; line-height: 1.55; color: rgba(247,244,236,.86);
}
.hero__founding .icon {
  width: 1.2em; height: 1.2em; color: var(--gold-rich);
  flex-shrink: 0; margin-top: .2em;
}

/* HERO STATISTICS — THE PLINTH.
   ---------------------------------------------------------
   Four figures ruled off between two hairlines, previously. It was
   correct and it was flat: the numbers sat ON the hero rather than IN
   anything, so the most quantitative statement the College makes had
   the least presence of any element on the page.

   It is now one object — a low plinth cut into the ground with the
   figures struck into its face. The construction is worth naming
   because it is the same three moves used everywhere below:

     · a translucent dark fill, so the hero's gradient still shows
       through and the plinth belongs to the ground rather than
       covering it;
     · --relief-inset, which is the RECESSED bevel — dark hairline on
       the top edge, light on the bottom — because this object is set
       INTO the page, unlike the eyebrow above it, which sits on top;
     · `.edge-lit` on the container (see css/atelier.css) for the rim
       that turns from champagne at the top-left to shadow at the
       bottom-right.

   The dividers stay hairlines and stay square. They are structure. */
.hero__stats--flagship {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(44px, 4vw, 68px);
  border-radius: var(--r-lg);
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(8,16,34,.50), rgba(8,16,34,.24));
  box-shadow: var(--relief-inset), 0 22px 50px -34px rgba(3,8,20,.95);
  position: relative; isolation: isolate;
}
@media (max-width: 700px) { .hero__stats--flagship { grid-template-columns: repeat(2, 1fr); } }
.hero__stat--flagship {
  padding: 26px 22px 24px; position: relative;
}
@media (max-width: 700px) { .hero__stat--flagship { padding: 22px 14px 20px; } }
.hero__stat--flagship + .hero__stat--flagship::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 20px;
  width: 1px; background: linear-gradient(180deg,
    transparent, rgba(199,162,74,.30) 30%, rgba(199,162,74,.30) 70%, transparent);
}
[dir="rtl"] .hero__stat--flagship + .hero__stat--flagship::before { left: auto; right: 0; }
@media (max-width: 700px) {
  .hero__stat--flagship:nth-child(odd)::before { display: none; }
}
/* The figures are the reason the tabular-numeral rule exists. `1,200`
   and `6` have to sit on the same optical baseline grid across four
   cells, and proportional figures put the comma and the 1 on their own
   private widths — which is invisible in a sentence and glaring in a
   row. */
.hero__stat--flagship strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem); line-height: 1;
  color: var(--gold-champagne); letter-spacing: -.012em; margin-bottom: .42em;
  font-optical-sizing: auto;
  /* A FIGURE MUST NEVER BREAK, and here it could.
     js/atelier.js wraps every digit in its own inline-block for the
     assemble animation, and CSS treats consecutive atomic inlines as
     having a wrap opportunity between them — so `1,200` is, to the line
     breaker, five separate things it may stack. Widening the cell's
     padding by 22px was enough to trigger it, and at 390px the hero's
     headline figure rendered as a vertical column of digits.
     `nowrap` closes the whole class of fault rather than the instance:
     no future padding, font-size or column change can reintroduce it. */
  white-space: nowrap;
  /* NOT gradient-clipped text, and the reason is worth recording so it
     is not "improved" back. `background-clip: text` was tried here and
     rendered four invisible figures: js/atelier.js wraps each digit in
     a transformed inline-block for the assemble animation, and a
     transformed descendant is painted in its own pass — outside the
     ancestor's text-clipped background. Nothing errored; the numbers
     were simply not there.
     A struck highlight does the same job with no such dependency: a
     hairline of light along the top of each glyph and a shadow beneath
     it, which is what an engraved figure catching an overhead source
     actually looks like. */
  text-shadow: 0 1px 0 rgba(255,252,240,.22), 0 -1px 1px rgba(3,8,20,.5);
}
/* THE CHILD COMBINATOR IS THE ENTIRE FIX, and it is worth the paragraph.

   This rule read `.hero__stat--flagship span` — every span inside the
   cell. The label is a span, so it worked. But js/atelier.js wraps each
   digit of an assembling figure in its OWN span, inside the <strong>,
   and those are spans inside the cell as well. Every digit was
   therefore `display: block`, and `1,200` rendered as a vertical column
   of five characters, one per line, on the College's headline statistic.

   It shipped, and nothing could have caught it: the route audit measures
   overflow and tap targets, the typography audit measures leading and
   script, and a five-line number overflows nothing and is set in the
   right face. It was visible only by looking, which is the argument for
   looking.

   `>` restricts the rule to the cell's own children. The digits are
   grandchildren, inside <strong>, and are left as the inline-blocks the
   animation needs them to be. */
.hero__stat--flagship > span {
  font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247,244,236,.62); font-weight: 600; line-height: 1.5; display: block;
}

/* =========================================================
   SPLIT FEATURE — a plate beside a column of text
   ========================================================= */
.split-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gutter); align-items: start;
}
/* The plate is pinned and the prose scrolls past it.

   Centring it instead left a third of the column empty at the bottom
   of every split chapter, because the feature lists are two to three
   times the height of the artwork beside them. Pinning turns that
   surplus height into the reason the plate is there: it stays with the
   reader through the whole chapter, the way a plate faces a spread
   rather than sitting at one point in it.

   `top` clears the condensed header. Sticky is inert on the one-column
   layout below, where the plate is a block in the flow. */
@media (min-width: 901px) {
  .split-feature > .plate { position: sticky; top: 112px; }
}
.split-feature--wide-text { grid-template-columns: 1.15fr .85fr; }
.split-feature--wide-plate { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) {
  .split-feature, .split-feature--wide-text, .split-feature--wide-plate {
    grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px);
  }
  /* On one column the plate always comes after the words it
     illustrates, whichever side it was authored on. */
  .split-feature > .plate { order: 2; }
}

/* =========================================================
   FEATURE LIST — icon, rule, text
   The workhorse of the page. Not a card grid: cards are what
   a template looks like. A ruled list with a drawn icon is
   what a prospectus looks like.
   ========================================================= */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list > li {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--line-stone);
}
.section--dark .feature-list > li, .section--oxford .feature-list > li,
.section--midnight .feature-list > li { border-top-color: rgba(231,201,122,.18); }
.feature-list > li:last-child { border-bottom: 1px solid var(--line-stone); }
.section--dark .feature-list > li:last-child, .section--oxford .feature-list > li:last-child,
.section--midnight .feature-list > li:last-child { border-bottom-color: rgba(231,201,122,.18); }
/* THE ICON WELL.
   A 1px circle, previously — a drawn outline, which is a diagram of a
   button rather than an object. It is now a disc turned into the page:
   the fill is a radial gradient lit from the upper left, and the bevel
   is the recessed pair, so the icon reads as engraved into a counter-
   sunk medallion. Under the pointer the well fills with light and the
   disc rises to meet the reader — the only movement in the list. */
.feature-list__icon {
  width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--gold-royal); flex-shrink: 0;
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 32% 26%,
    rgba(255,252,240,.30), rgba(199,162,74,.05) 58%, rgba(10,20,40,.06) 100%);
  box-shadow: var(--relief-inset);
  transition: border-color var(--dur-med) ease, color var(--dur-med) ease,
              background var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium);
}
/* .tilt__sheen and the pointer-tracking radial light (.gold-live) are
   the shared atelier system — see css/atelier.css — applied here so
   the icon reads as a small piece of the same engraved-metal surface
   as the plates, not a separate, flatter decoration. */
.feature-list__icon .icon { position: relative; z-index: 1; }
.feature-list__icon .icon { width: 22px; height: 22px; }
.section--dark .feature-list__icon, .section--midnight .feature-list__icon,
.section--oxford .feature-list__icon {
  background: radial-gradient(circle at 32% 26%,
    rgba(242,227,192,.20), rgba(199,162,74,.06) 56%, rgba(3,8,20,.42) 100%);
}
.section--warm .feature-list__icon { color: var(--burgundy); border-color: rgba(110,31,46,.3); }
.section--pearl .feature-list__icon { color: var(--teal); border-color: rgba(29,92,99,.3); }
.section--cream .feature-list__icon { color: var(--emerald); border-color: rgba(30,106,79,.3); }
.feature-list > li:hover .feature-list__icon {
  border-color: currentColor; transform: translateY(-2px);
  background: radial-gradient(circle at 32% 26%,
    rgba(255,252,240,.42), rgba(199,162,74,.14) 60%, rgba(10,20,40,.06) 100%);
  box-shadow: var(--relief-raised), 0 10px 20px -12px rgba(10,23,48,.55);
}
.feature-list h3 {
  font-size: clamp(1.05rem, .98rem + .32vw, 1.24rem);
  margin: 0 0 .42em; letter-spacing: -.008em;
}
.feature-list p { margin: 0; color: var(--slate); font-size: .95rem; max-width: 56ch; }
.section--dark .feature-list p, .section--oxford .feature-list p,
.section--midnight .feature-list p { color: rgba(247,244,236,.72); }
/* Reading copy, not a label — raised to the site's new 16px floor.
   Scoped to English only; see the note in brand.css's type system. */
[dir="ltr"] .feature-list p { font-size: 1rem; }

/* Two columns once there is width for it — used where a chapter has
   four short entries rather than three long ones, so the list does not
   read as an unusually tall single column. */
@media (min-width: 720px) {
  .feature-list--twocol { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .feature-list--twocol > li { border-top: 1px solid var(--line-stone); }
  .feature-list--twocol > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-stone); }
}

/* =========================================================
   THE VISTA
   One full-bleed photograph, edge to edge, the width of the
   viewport rather than the width of the container. Every other
   image on this page sits inside a bordered plate because a
   plate is what a prospectus does with a photograph — bounded,
   captioned, one of several. This is deliberately the only
   exception on the page: a single widescreen establishing shot
   for the one chapter that is actually about a place rather
   than about the College's method, used once so it still reads
   as a departure rather than a second register.
   ========================================================= */
.vista {
  position: relative; overflow: hidden; margin: 0 0 var(--chapter-pad);
  height: clamp(320px, 52vw, 560px);
}
.vista__img {
  position: absolute; inset: -10% 0; width: 100%; height: 120%;
  object-fit: cover; will-change: transform;
  filter: grayscale(.22) contrast(1.06) brightness(.93);
}
.vista__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,20,40,.05) 0%, transparent 34%, transparent 60%, rgba(10,20,40,.62) 100%),
    linear-gradient(100deg, rgba(10,20,40,.30) 0%, transparent 42%);
}
.vista__caption {
  position: absolute; left: 0; right: 0; bottom: 24px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .7em;
  color: rgba(247,244,236,.94);
  font-family: var(--font-body); font-weight: 700;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
.vista__caption .icon { width: 1.1em; height: 1.1em; color: var(--gold-champagne); }
@media (prefers-reduced-motion: reduce) { .vista__img { transform: none !important; } }

/* The living-diagram frame (.diagram) moved to css/atelier.css when
   the second diagram landed on /students/assessment/ — it was defined
   here, and css/home.css loads on the homepage only, so any diagram on
   any other page rendered at its native 900px with no caption styling
   and nobody would have seen it until they looked. */

/* =========================================================
   THE CHAPTER SPREAD
   The argument on one page, the figure that proves it on the
   facing one — see the note in pages/home.html for what this
   replaced and why. Two rules only: the head loses its bottom
   margin (the grid gap is the space now), and the figure is
   pinned so it stays with the reader through the column of
   text beside it, exactly as .split-feature pins a plate.
   ========================================================= */
.chapter__spread { margin-bottom: clamp(44px, 4.5vw, 72px); align-items: center; }
.chapter__head--flush { margin-bottom: 0; max-width: none; }
/* The figure's own bottom margin exists to separate it from whatever
   follows it in a stack. In a spread nothing follows it — the grid gap
   and the spread's own margin do that job — and leaving it in opened a
   second, unequal gap under the right-hand column only. */
.diagram--spread { margin: 0 auto; max-width: 100%; }
@media (max-width: 900px) {
  /* Same rule the split-feature keeps: on one column the figure follows
     the words it illustrates, whichever side it was authored on. */
  .chapter__spread > .diagram { order: 2; }
}

/* =========================================================
   THE PROGRAMME LEDGER
   ========================================================= */
/* THE MOUNT.
   The table itself stays square — a ledger is ruled, and rounding the
   rules that make it a ledger would be rounding the wrong thing. What
   gains a corner is the PLATE it is mounted on: the table is now
   tipped into a recessed panel, the way the plates elsewhere on the
   page hold their artwork. Structure square, object curved, which is
   the rule the whole radius scale is built on. */
.ledger-mount {
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 26px);
  background: linear-gradient(168deg, rgba(8,16,34,.42), rgba(31,61,122,.12));
  box-shadow: var(--relief-inset), 0 24px 54px -38px rgba(3,8,20,.9);
  position: relative;
}
.ledger--flagship { margin-top: 0; }
.ledger--flagship th {
  font-size: .64rem; letter-spacing: .18em; padding: 0 16px 14px;
  color: var(--gold-soft); border-bottom-color: rgba(199,162,74,.4);
}
.ledger--flagship td { padding: 20px 16px; font-size: .95rem; }
/* A row lights as the eye crosses it. Six rows of near-identical
   figures is exactly the place a reader loses their line. */
.ledger--flagship tbody tr {
  transition: background var(--dur-fast) ease;
}
.ledger--flagship tbody tr:hover { background: rgba(199,162,74,.055); }
.ledger--flagship tbody tr:last-child td {
  border-top: 1px solid rgba(199,162,74,.4);
  border-bottom: none; padding-top: 22px;
}
.ledger__level { display: flex; align-items: baseline; gap: .7em; }
.ledger__roman {
  font-size: 1rem; color: var(--gold-rich); min-width: 2.6ch; font-weight: 600;
}
/* THE LEVEL MARK.
   A1 through C2 are the only shorthand on this page a reader is meant
   to memorise, so each is set as a small struck medallion: ceremonial
   capitals, a gilded pill with a lit top rim and a shaded floor. At
   this size --r-xs holds the pill's proportion; --r-pill would turn a
   two-character mark into a lozenge. */
.ledger__cefr {
  display: inline-block; font-weight: 600;
  font-size: .7rem; letter-spacing: .1em;
  border: 1px solid rgba(199,162,74,.42); border-radius: var(--r-xs);
  padding: .34em .78em; color: var(--gold-champagne);
  background: linear-gradient(180deg, rgba(242,227,192,.16), rgba(199,162,74,.05));
  box-shadow: var(--relief-raised);
}

/* =========================================================
   CURRICULUM STRANDS
   ========================================================= */
.strand-group + .strand-group { margin-top: 40px; }
.strand-group__title {
  display: flex; align-items: center; gap: .7em;
  margin: 0 0 18px; color: var(--teal);
  font-family: var(--font-body); font-weight: 700;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}
.strand-group__title .icon { width: 1.15em; height: 1.15em; }
.strand-row { display: flex; flex-wrap: wrap; gap: 9px; }
.strand {
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid var(--line-stone); border-radius: 999px;
  padding: .52em 1.05em; font-size: .82rem; font-weight: 600;
  color: var(--charcoal); background: rgba(255,255,255,.5);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-premium);
}
.strand:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.strand--core { border-color: rgba(29,92,99,.35); }

/* =========================================================
   AUDIENCE GRID
   ========================================================= */
/* THE AUDIENCE GRID.
   ---------------------------------------------------------
   Eight cells divided by 1px of stone, previously: a hairline mesh,
   which is the honest way to draw a TABLE and the wrong way to draw
   eight separate objects. Nothing in it could be lit, lifted or
   individually addressed, because none of it had an edge of its own —
   they shared one.

   Separating them costs a little density and buys everything else: each
   tile now has its own rim, its own shadow, its own corner, and its own
   perimeter light under the pointer. */
.audience-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 16px);
  background: none; border: 0;
}
/* minmax(0, 1fr), not 1fr, and one column on a small phone.
   `1fr` is shorthand for `minmax(auto, 1fr)`, and `auto` floors the
   track at its MIN-CONTENT width — so a cell holding "International
   applicants" and 48px of padding refuses to go below about 156px no
   matter how narrow the viewport gets. Two of those on a 320px phone
   overflowed the document by 15px.

   Only in the real faces, which is why nothing had seen it: the
   fallback stack sets that heading narrower than Inter does, so the
   audit — which renders on fallbacks — measured no overflow at all.

   minmax(0, …) lets the track shrink; the single column below 520 is
   the design answer, since two 136px cells carrying a heading and a
   sentence are not readable at any font. */
@media (max-width: 860px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .audience-grid { grid-template-columns: minmax(0, 1fr); } }
.audience {
  /* Lighter than its ground, always. A tile the same value as the page
     is legible only by its rim, which on cream is a whisper — the
     objects have to be a step up in the light before the rim has
     anything to describe. */
  background: linear-gradient(168deg, #FFFFFF 0%, var(--paper) 58%, #FBF8F0 100%);
  padding: 28px 24px; border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; isolation: isolate;
  --aurum-dur: 7s;
  transition: background var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium);
}
/* Two millimetres, not eight. A tile that leaps at the pointer reads as
   a web page being helpful; one that rises just enough to throw a
   longer shadow reads as an object being picked up. */
.audience:hover {
  background: linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 58%, var(--paper) 100%);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.audience .icon { color: var(--emerald); width: 24px; height: 24px; }
.audience h3 { font-size: 1rem; margin: 0; letter-spacing: -.005em; }
.audience p { margin: 0; font-size: .87rem; color: var(--slate); }
[dir="ltr"] .audience p { font-size: 1rem; }

/* =========================================================
   REGION STRIP
   Gives physical presence, above the audience grid, to a claim
   that was previously one sentence of prose ("The College
   teaches across the Gulf, Europe, Africa and Asia"). Built on
   .tilt/.gold-live — the same pointer-tracking system as the
   plates — so it reads as part of the existing material
   language rather than a bolted-on new effect. No counts are
   claimed anywhere here; only who each region is for.
   ========================================================= */
.region-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: clamp(28px, 3vw, 40px) 0 0;
}
@media (max-width: 860px) { .region-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .region-strip { grid-template-columns: 1fr; } }
.region {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--line-stone); border-top-width: 2px;
  background: var(--warm-white); padding: 22px 20px;
}
.region .badge-dome .icon { position: relative; z-index: 1; }
.region h3 { font-size: .96rem; margin: 0 0 .4em; letter-spacing: -.005em; position: relative; z-index: 1; }
.region p { margin: 0; font-size: .85rem; color: var(--slate); position: relative; z-index: 1; }
[dir="ltr"] .region p { font-size: .92rem; }
.region--gulf { border-top-color: var(--burgundy); }
.region--gulf .icon { color: var(--burgundy); }
.region--europe { border-top-color: var(--teal); }
.region--europe .icon { color: var(--teal); }
.region--africa { border-top-color: var(--emerald); }
.region--africa .icon { color: var(--emerald); }
.region--asia { border-top-color: var(--gold-royal); }
.region--asia .icon { color: var(--gold-royal); }

/* =========================================================
   THE PRINCIPLES
   Chapter 06. Numbered plates on the deepest ground of the
   page, with a purple wash — the one place the honours colour
   is used, because this chapter is where the College states
   what it holds itself to.
   ========================================================= */
.chapter--principles {
  background:
    radial-gradient(ellipse 78% 62% at 16% 4%, rgba(78,52,108,.78), transparent 64%),
    radial-gradient(ellipse 66% 58% at 94% 98%, rgba(122,34,52,.52), transparent 62%),
    var(--oxford);
}
.principle-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px); background: none;
}
@media (max-width: 780px) { .principle-grid { grid-template-columns: 1fr; } }
/* Translucent, not opaque. An opaque card here covered the entire
   grid area and with it the purple and burgundy wash that is the
   whole reason this chapter has its own ground — the gradient was
   being painted and then hidden by the four rectangles on top of it.

   Now they are four panes of smoked glass laid on that wash: the same
   translucency, plus a real edge (`.edge-lit`), a real corner, and a
   light that runs the perimeter of whichever one the reader is
   considering. This is the most heavily worked component on the page,
   and it should be — it is where the College states what it will not
   trade. */
.principle {
  background: linear-gradient(162deg, rgba(20,38,74,.58), rgba(10,20,40,.72));
  padding: clamp(30px, 3vw, 44px);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: var(--relief-glass), 0 26px 56px -34px rgba(3,8,20,.9);
  --aurum-dur: 8s;
  transition: background var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium);
}
.principle:hover {
  background: linear-gradient(162deg, rgba(31,61,122,.46), rgba(10,20,40,.52));
  transform: translateY(-3px);
  box-shadow: var(--relief-glass), 0 34px 70px -34px rgba(3,8,20,.95);
}
/* The gold rule that drew across the top on hover moved to ::after: the
   travelling perimeter light claims ::after on `.aurum` and the lit rim
   claims ::before on `.edge-lit`, so this needed a third home. It is
   drawn INSIDE the radius rather than across a square top edge, which
   is why it is inset and rounded rather than full-bleed. */
.principle::after {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--gold-rich), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-med) var(--ease-premium);
  z-index: 4; pointer-events: none;
}
.principle:hover::after { transform: scaleX(1); }
/* The numeral is a struck mark, not a number in a sentence: ceremonial
   capitals, at the weight of an engraved edition number. */
.principle__num {
  font-family: var(--font-ceremonial); font-weight: 600;
  font-size: 2.2rem; line-height: 1;
  color: rgba(212,175,55,.34); display: block; margin-bottom: .34em;
  letter-spacing: .04em;
}
.principle h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.34rem); color: #fff; margin: 0 0 .55em; }
.principle p { margin: 0; color: rgba(247,244,236,.74); font-size: .94rem; max-width: 46ch; }
[dir="ltr"] .principle p { font-size: 1rem; }
.principle .icon { position: absolute; top: 34px; right: 34px; width: 26px; height: 26px; color: rgba(212,175,55,.42); }
[dir="rtl"] .principle .icon { right: auto; left: 34px; }

/* The status line that closes chapter 06 — one sentence, set
   as a ruled note rather than as a warning box. */
/* Set as a well rather than a ruled note. It is the one paragraph on
   the page that qualifies everything above it, and a reader who skims
   past it has been let down by the design, not by their attention. */
.status-note {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: clamp(36px, 3.5vw, 52px);
  padding: 24px clamp(20px, 2vw, 30px);
  border-radius: var(--r-md);
  border: 0; border-inline-start: 2px solid rgba(199,162,74,.5);
  background: linear-gradient(110deg, rgba(8,16,34,.5), rgba(8,16,34,.16));
  box-shadow: var(--relief-inset);
  color: rgba(247,244,236,.72); font-size: .89rem; max-width: 82ch;
}
.status-note .icon { color: var(--gold-royal); margin-top: .15em; width: 20px; height: 20px; }
.status-note p { margin: 0; }
.status-note a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.status-note a:hover { color: var(--gold-champagne); }

/* =========================================================
   CLOSING CTA
   ========================================================= */
.cta--flagship {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(199,162,74,.16), transparent 60%),
    var(--oxford);
  padding: clamp(72px, 6vw, 116px) 0; text-align: center;
  border-top: 1px solid rgba(199,162,74,.3);
  position: relative; overflow: hidden;
}
.cta--flagship .container { position: relative; z-index: 2; max-width: 760px; }
.cta__seal { width: clamp(84px, 9vw, 116px); margin: 0 auto 28px; display: block; }
.cta--flagship h2 { color: #fff; margin-bottom: .5em; }
.cta--flagship .lede { color: rgba(247,244,236,.78); margin: 0 auto 34px; max-width: 54ch; }
.cta--flagship .btn-row { justify-content: center; }
.cta__note {
  margin-top: 30px; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,244,236,.48); font-weight: 600;
}

/* THE GLANCE section and THE WORLD CLOCK panel that used to live here
   were both removed — the grid repeated the header's quicknav strip,
   and the clock moved into the header above it (.headerclock,
   css/brand.css). The tile component itself (.glance__tile and its
   two-layer badge) survives, relocated to css/brand.css so the
   footer's own tile grid can share it. */

/* =========================================================
   RTL
   Every physical-direction property this file introduces has
   its counterpart above, alongside the rule it mirrors, so
   there is no separate RTL block to fall out of sync. The two
   rules below are the exceptions: they belong to no single
   component.
   ========================================================= */
[dir="rtl"] .chapter__num::after { transform: scaleX(-1); }
[dir="rtl"] .vista__scrim { transform: scaleX(-1); }
[dir="rtl"] .feature-list > li { grid-template-columns: auto 1fr; }

/* =========================================================
   REDUCED MOTION
   css/brand.css holds the site-wide carve-out; these are the
   animations this file adds on top of it.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__crest { animation: none; }
  .strand:hover, .feature-list > li:hover .feature-list__icon { transform: none; }
  .principle, .principle::before, .audience, .strand, .region { transition: none; }
  /* .glance__tile's own reduced-motion carve-out now lives in
     css/brand.css, alongside the component itself. */
}

/* =========================================================
   THE CASE  ·  chapter I
   ---------------------------------------------------------
   The one chapter on the page whose job is to be FELT before
   it is read, so it is the one place the icon is allowed to
   be an object rather than a mark: a 74px struck medallion
   with its own light, above the heading rather than beside
   it. Everywhere else on this page an icon sits at 22–26px
   inside a list, which is what keeps this size meaning
   something.
   ========================================================= */
.case-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
@media (max-width: 1000px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .case-grid { grid-template-columns: minmax(0, 1fr); } }

.case {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px) clamp(30px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(31,61,122,.32), rgba(8,16,34,.62));
  box-shadow: var(--relief-glass), 0 24px 52px -32px rgba(3,8,20,.9);
  --aurum-dur: 10s;
  transition: transform var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-premium),
              background var(--dur-med) var(--ease-premium);
}
.case:hover {
  transform: translateY(-3px);
  background: linear-gradient(168deg, rgba(39,80,143,.42), rgba(8,16,34,.5));
  box-shadow: var(--relief-glass), 0 34px 68px -32px rgba(3,8,20,.95);
}
.case h3 { color: #fff; font-size: clamp(1.08rem, 1rem + .38vw, 1.3rem); margin: 0 0 .5em; }
.case p  { margin: 0; color: rgba(247,244,236,.76); font-size: .93rem; }

/* THE MEDALLION.
   A dark dome with a gilded glyph, the same worked-vessel recipe the
   quicknav and footer badges use — bevel above, shadow below, gold
   hairline around — so a reader who has seen one recognises the other.
   The glyph breathes: a 6.5s scale cycle of about three percent, which
   is under the threshold at which motion reads as animation and over
   the threshold at which a surface reads as inert. */
.case__medallion {
  width: 74px; height: 74px; border-radius: 26px;
  display: grid; place-items: center; margin-bottom: 22px;
  background: radial-gradient(circle at 32% 24%, var(--sapphire) 0%, var(--navy) 55%, var(--oxford) 100%);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.22),
    inset 0 -4px 6px rgba(0,0,0,.55),
    0 10px 22px -10px rgba(0,0,0,.7),
    0 0 0 1.5px rgba(199,162,74,.45);
}
.case__medallion .icon {
  width: 34px; height: 34px; stroke-width: 1;
  stroke: url(#i-foil-gold); color: var(--gold-soft);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  animation: medallion-breathe 6.5s var(--ease-premium) infinite alternate;
}
.case:nth-child(2) .case__medallion .icon { animation-delay: .8s; }
.case:nth-child(3) .case__medallion .icon { animation-delay: 1.6s; }
.case:nth-child(4) .case__medallion .icon { animation-delay: 2.4s; }
@keyframes medallion-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
/* Under the pointer the dome turns toward the light rather than
   growing: the highlight moves, which is what a tilted metal surface
   does, and the glyph lifts a hair with it. */
.case:hover .case__medallion {
  background: radial-gradient(circle at 26% 18%, #35619f 0%, var(--sapphire) 45%, var(--navy) 100%);
}
.case:hover .case__medallion .icon { transform: scale(1.08); }

.case__close {
  max-width: 72ch; margin: clamp(34px, 3.4vw, 50px) auto 0; text-align: center;
  color: var(--gold-champagne); font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.5;
  font-style: italic; font-optical-sizing: auto;
}

/* The chapter itself sits on a deeper ground than the hero above it,
   so the two dark chapters do not read as one long band. */
.chapter--case {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(31,61,122,.5), transparent 62%),
    radial-gradient(ellipse 60% 55% at 88% 100%, rgba(29,92,99,.30), transparent 64%),
    var(--midnight);
}

/* =========================================================
   THE RESIDENCY  ·  chapter IV
   ========================================================= */
.chapter--residency .feature-list__icon { color: var(--teal); border-color: rgba(29,92,99,.34); }

/* =========================================================
   REDUCED MOTION — the additions above
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .case__medallion .icon { animation: none; }
  .case, .case:hover { transform: none; transition: none; }
}

/* =========================================================
   THE PATHWAY  ·  stage marks
   ---------------------------------------------------------
   DELIBERATELY NOT BADGES. These name real schemes with public
   registers — ASIC, BAC, Accreditation UK — and a pill that reads as a
   granted mark is the one thing this table must never become. So the
   mark carries STATUS, never an authority's identity: it is a small
   ruled label, square-cornered like the ledger it sits in, and it is
   never gold. Gold on this site means conferred.
   ========================================================= */
.stage-mark {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .42em .8em; border-radius: var(--r-xs);
  color: rgba(247,244,236,.66);
  border: 1px solid rgba(247,244,236,.2);
  background: rgba(255,255,255,.03);
}
/* The one stage actually underway reads as live — teal, the platform
   colour, which on this palette means "working" and never "awarded". */
.stage-mark--live {
  color: #7FC3C9; border-color: rgba(127,195,201,.42);
  background: rgba(29,92,99,.18);
}
/* And the one that is explicitly distant recedes rather than shouts. */
.stage-mark--future {
  color: rgba(247,244,236,.44); border-style: dashed;
  border-color: rgba(247,244,236,.18);
}
.chapter--pathway .ledger--flagship td { vertical-align: top; }
.chapter--pathway .ledger--flagship td:nth-child(2) {
  color: rgba(247,244,236,.72); font-size: .9rem; max-width: 46ch;
}