/* ===================================================================
   THE ATELIER LAYER (v5.1)
   -------------------------------------------------------------------
   Everything here is finishing: the work that separates a page that is
   well made from a page that feels expensive. None of it carries
   meaning, so all of it yields — to prefers-reduced-motion, to the
   Ornament setting, to the Motion setting — and the page reads exactly
   the same with the whole file removed.

   House rule throughout: an effect that announces itself has failed.
   Every value below is deliberately one step quieter than the point at
   which you would notice it happening.
   =================================================================== */

/* -------------------------------------------------------------------
   1. LETTERPRESS
   Display type on paper takes a hairline of light along its top edge
   and a whisper of shadow beneath — the debossed impression a metal
   face leaves in a good stock. At 1px and these opacities it is not
   visible as an effect; it is visible as weight.
   ------------------------------------------------------------------- */
html[data-pc-press="on"] .pr-section.is-ivory h2,
html[data-pc-press="on"] .pr-section.is-ivory h1.page-title,
html[data-pc-press="on"] .mvv h2,html[data-pc-press="on"] .academics > .wrap > h2,
html[data-pc-press="on"] .hx-marks h2,html[data-pc-press="on"] .hx-path h2,
html[data-pc-press="on"] .hx-faq h2,html[data-pc-press="on"] .hero-subline,
html[data-pc-press="on"] .mono-letter .mg,html[data-pc-press="on"] .el-figure-n{
  text-shadow:0 1px 0 rgba(255,255,255,.68), 0 -1px 0 rgba(var(--lv-cfs,59,42,29),.09);}
/* On a dark ground the impression runs the other way: the light catches
   the lower edge, because the light is above. */
html[data-pc-press="on"] .pr-section.is-royal h2,
html[data-pc-press="on"] .chapter-band-alt > .wrap > h2,
html[data-pc-press="on"] .governance h2,html[data-pc-press="on"] .contact h2{
  text-shadow:0 -1px 0 rgba(0,0,0,.42), 0 1px 0 rgba(var(--lv-gbs,233,206,138),.14);}

/* -------------------------------------------------------------------
   2. THE LETTERHEAD RULE, DRAWN
   The double rule under every section heading now draws itself from the
   start edge as the heading arrives, instead of being there already.
   It is the single most on-brand motion available to this site: the
   page is signing itself.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html[data-pc-motion="standard"] section h2::after,
  html[data-pc-motion="standard"] section h1.page-title::after{
    transform-origin:left center;transform:scaleX(0);
    transition:transform 1.05s cubic-bezier(.16,.8,.24,1) .12s;}
  [dir="rtl"] html[data-pc-motion="standard"] section h2::after,
  [dir="rtl"] html[data-pc-motion="standard"] section h1.page-title::after{transform-origin:right center;}
  html[data-pc-motion="standard"] .pr-in h2::after,
  html[data-pc-motion="standard"] .in h2::after,
  html[data-pc-motion="standard"] .pr-in h1.page-title::after,
  html[data-pc-motion="standard"] .in h1.page-title::after,
  html[data-pc-motion="standard"] section.at-rule-in h2::after,
  html[data-pc-motion="standard"] section.at-rule-in h1.page-title::after{transform:scaleX(1);}
}

/* -------------------------------------------------------------------
   3. AMBIENT MOTES
   A dark band is never perfectly still in a real room: there is always
   something in the light. Twelve points of gold drift upward across the
   royal grounds at wildly different speeds, none of them fast enough to
   track with the eye. Drawn as one element with a radial-gradient tile,
   so the whole effect costs a single compositor layer.
   ------------------------------------------------------------------- */
.at-motes{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  opacity:0;transition:opacity 1.6s ease;}
.at-motes.is-lit{opacity:1;}
.at-motes span{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--lv-gbs,233,206,138),.9),rgba(var(--lv-gbs,233,206,138),0) 70%);
  animation:at-drift var(--d,42s) linear infinite;animation-delay:var(--dl,0s);}
@keyframes at-drift{
  0%{transform:translate3d(0,110%,0) scale(.6);opacity:0;}
  12%{opacity:var(--o,.5);}
  88%{opacity:var(--o,.5);}
  100%{transform:translate3d(var(--dx,14px),-14%,0) scale(1);opacity:0;}
}
html[data-pc-motes="off"] .at-motes,
html[data-pc-motion="reduced"] .at-motes{display:none;}
@media (prefers-reduced-motion:reduce){.at-motes{display:none;}}

/* -------------------------------------------------------------------
   4. THE VIGNETTE, AND THE LIT CENTRE
   A dark band lit evenly reads as a rectangle of paint. Lit from above
   and fallen away at the corners, it reads as a room.
   ------------------------------------------------------------------- */
.pr-section.is-royal,.governance,.contact,.digital-campus-teaser,
.chapter-band-alt,.facilities{position:relative;}
.pr-section.is-royal::before,.governance::before,.contact::before,
.digital-campus-teaser::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 60% at 50% -12%,rgba(var(--lv-gbs,233,206,138),.10),transparent 62%),
    radial-gradient(140% 100% at 50% 50%,transparent 42%,rgba(0,0,0,.30) 100%);}
.pr-section.is-royal > *,.governance > *,.contact > *,
.digital-campus-teaser > *{position:relative;z-index:1;}
html[data-pc-ornament="none"] .pr-section.is-royal::before,
html[data-pc-ornament="none"] .governance::before,
html[data-pc-ornament="none"] .contact::before,
html[data-pc-ornament="none"] .digital-campus-teaser::before{display:none;}

/* -------------------------------------------------------------------
   5. THE SPECULAR SWEEP
   A single band of light crosses a card as the pointer enters it, the
   way light crosses a varnished surface when you lean over it. Runs
   once per entry — a loop would be a screensaver.
   ------------------------------------------------------------------- */
.hx-mark,.pr-card,.gateway-card,.ct-office,.dc-tile,.hx-q,.pr-feature,
.institution-card,.pr-committee,.fac-profile{position:relative;isolation:isolate;}
.hx-mark::after,.pr-card::after,.ct-office::after,.dc-tile::after,
.hx-q::after,.pr-committee::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(var(--lv-wh,255,255,255),.30) 50%,transparent 62%);
  transform:translateX(-130%);opacity:0;}
.hx-mark:hover::after,.pr-card:hover::after,.ct-office:hover::after,
.dc-tile:hover::after,.hx-q:hover::after,.pr-committee:hover::after{
  opacity:1;transform:translateX(130%);
  transition:transform 1.05s cubic-bezier(.22,.7,.3,1),opacity .2s;}
[dir="rtl"] .hx-mark::after,[dir="rtl"] .pr-card::after,[dir="rtl"] .ct-office::after,
[dir="rtl"] .dc-tile::after,[dir="rtl"] .hx-q::after{transform:translateX(130%);}
[dir="rtl"] .hx-mark:hover::after,[dir="rtl"] .pr-card:hover::after,
[dir="rtl"] .ct-office:hover::after,[dir="rtl"] .dc-tile:hover::after,
[dir="rtl"] .hx-q:hover::after{transform:translateX(-130%);}
@media (prefers-reduced-motion:reduce),(hover:none){
  .hx-mark::after,.pr-card::after,.ct-office::after,.dc-tile::after,
  .hx-q::after,.pr-committee::after{display:none;}
}

/* -------------------------------------------------------------------
   6. THE RULED MARGIN
   On a wide screen the reading column floats in space. A single hairline
   down each side of the measure gives it an edge to sit against, the way
   a ruled ledger does. Only above 1500px, where there is room for it to
   be a margin rather than a border.
   ------------------------------------------------------------------- */
@media (min-width:1500px){
  html[data-pc-ornament="full"] .pr-section.is-ivory > .wrap::before,
  html[data-pc-ornament="full"] .pr-section.is-ivory > .wrap::after{
    content:"";position:absolute;top:0;bottom:0;width:1px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(var(--lv-gs,198,161,91),.26) 12%,
               rgba(var(--lv-gs,198,161,91),.26) 88%,transparent);}
  html[data-pc-ornament="full"] .pr-section.is-ivory > .wrap::before{inset-inline-start:-34px;}
  html[data-pc-ornament="full"] .pr-section.is-ivory > .wrap::after{inset-inline-end:-34px;}
  .pr-section.is-ivory > .wrap{position:relative;}
}

/* -------------------------------------------------------------------
   7. THE LINK, UNDERWRITTEN
   An inline link's rule wipes in from the start edge rather than fading.
   Two properties, no pseudo-element, no layout cost.
   ------------------------------------------------------------------- */
.text-link,.hx-mark-link,.ct-office-go{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .42s cubic-bezier(.16,.8,.24,1),color .3s;}
[dir="rtl"] .text-link,[dir="rtl"] .hx-mark-link{background-position:100% 100%;}
.text-link:hover,.hx-mark-link:hover,.ct-office:hover .ct-office-go{background-size:100% 1px;}
@media (prefers-reduced-motion:reduce){
  .text-link,.hx-mark-link,.ct-office-go{transition:none;}
}

/* -------------------------------------------------------------------
   8. THE PAGE WIPE
   A gold curtain crosses the screen between pages, using the View
   Transitions API where the browser has it. Where it does not, nothing
   happens and navigation is exactly as it was.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html[data-pc-pagewipe="on"]::view-transition-old(root){
    animation:at-fade-out .28s cubic-bezier(.4,0,1,1) both;}
  html[data-pc-pagewipe="on"]::view-transition-new(root){
    animation:at-fade-in .5s cubic-bezier(0,0,.2,1) both;}
}
@keyframes at-fade-out{to{opacity:0;transform:scale(.994);}}
@keyframes at-fade-in{from{opacity:0;transform:scale(1.006);}}
.at-curtain{position:fixed;inset:0;z-index:200;pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(100deg,
    rgba(var(--lv-cfd4s,26,16,6),.96),
    rgba(var(--lv-gds,156,122,60),.9) 48%,
    rgba(var(--lv-cfd4s,26,16,6),.96));}
.at-curtain.is-in{animation:at-curtain-in .46s cubic-bezier(.7,0,.3,1) both;}
.at-curtain.is-out{animation:at-curtain-out .52s cubic-bezier(.7,0,.3,1) both;}
@keyframes at-curtain-in{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes at-curtain-out{from{transform:scaleX(1);transform-origin:right center;}
                          to{transform:scaleX(0);transform-origin:right center;}}
@media (prefers-reduced-motion:reduce){.at-curtain{display:none;}}

/* -------------------------------------------------------------------
   9. THE READING RULER
   A band of warmth that follows the pointer down the page, so the line
   being read is the line that is lit. Off by default — it is an aid,
   not an ornament, and it belongs to whoever asks for it.
   ------------------------------------------------------------------- */
.at-ruler{position:fixed;inset-inline:0;height:var(--rh,58px);z-index:8;pointer-events:none;
  top:0;transform:translate3d(0,var(--ry,-200px),0);opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,transparent,rgba(var(--lv-gbs,233,206,138),.16) 22%,
             rgba(var(--lv-gbs,233,206,138),.16) 78%,transparent);
  border-top:1px solid rgba(var(--lv-gs,198,161,91),.28);
  border-bottom:1px solid rgba(var(--lv-gs,198,161,91),.28);}
html[data-pc-ruler="on"] .at-ruler{opacity:1;}

/* -------------------------------------------------------------------
   10. THE CREST, FOILED
   The crest is stamped foil, not printed ink, and foil moves. A slow
   sheen crosses it — 14 seconds, so it is never the reason your eye
   went there.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html[data-pc-ornament="full"] .crest-shimmer-wrap{position:relative;display:inline-block;overflow:hidden;}
  html[data-pc-ornament="full"] .crest-shimmer-wrap::after{
    content:"";position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(104deg,transparent 42%,rgba(255,248,225,.42) 50%,transparent 58%);
    background-size:260% 100%;background-position:260% 0;
    animation:at-foil 14s ease-in-out infinite;}
}
@keyframes at-foil{0%,62%{background-position:260% 0;}92%,100%{background-position:-60% 0;}}

/* ---- Everything above yields to the Motion setting ---------------- */
html[data-pc-motion="reduced"] .at-motes,
html[data-pc-motion="reduced"] .at-curtain,
html[data-pc-motion="reduced"] .crest-shimmer-wrap::after{display:none!important;}
html[data-pc-motion="reduced"] section h2::after,
html[data-pc-motion="reduced"] section h1.page-title::after{transform:none!important;}

/* ===================================================================
   11. THE ARRIVAL — the photograph, undecorated
   -------------------------------------------------------------------
   The hero's scrim went through two rounds of lightening and was still
   the wrong fix, because the actual problem was never the scrim's
   opacity: the words were sitting on top of a photograph that already
   has words on it. The school's real front elevation carries its own
   painted signage, and in Arabic especially the overlaid heading and
   the building's own English lettering occupied the same patch of the
   frame — neither legible, both fighting for it.

   The photograph now carries no type at all. What is left here is a
   light photographic vignette — not a legibility device, just a corner
   fall-off so the frame doesn't read as a flat rectangle — scoped to
   `.hero-photo`, the box that now holds only the picture. The heading
   moved below it, onto the page's own ground; see `.hero-inner` further
   down this file. */
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(150% 120% at 50% 45%,transparent 62%,rgba(110,38,34,.14) 100%);
}
/* css/brand.css's original `.hero::before` — a near-opaque dark wash —
   was written for the old one-layer hero, where `.hero` itself was the
   photo box. It now sits behind the text band instead (nothing paints
   over it there), which would tint the page's own white ground dark
   for no reason. The vignette above, scoped to `.hero-photo`, is the
   only overlay this hero needs now. */
.hero::before{display:none;}

/* The drawn frame — a rectangular border with four corner brackets laid
   over the photograph — read as a decorative afterthought rather than
   as part of the photograph itself, and the founder asked for the
   photograph clean, without lines over it. Hidden rather than deleted:
   the markup (.frame, .corner) still exists in pages/home.html and
   pages/home.ar.html should anyone want it back. */
.hero .frame,.hero .corner{display:none;}

/* The masthead sits on the page rather than floating above it: a lit
   edge along its foot, the way a raised surface catches light. */
header.nav::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--lv-gbs,233,206,138),.42) 22%,
             rgba(var(--lv-gbs,233,206,138),.42) 78%,transparent);}
/* Deliberately no position declaration. This rule once read
   header.nav{position:relative;} — added to give the lit edge above a
   containing block, without noticing the masthead was already
   position:sticky, which is itself a containing block. It silently
   overrode the sticky, and the navigation stopped following the reader
   on every page of the site. */

/* Display type at this size does not need to be spread to fill the
   frame; it needs to be set. Tighter tracking, a heavier optical
   weight — no shadow to speak of, now that it sits on the page's own
   ground rather than on the photograph. */
.hero h1{letter-spacing:.012em;}

/* A gilded threshold where the photograph meets the words — the join a
   bound volume has between the board and the first leaf. Moved from
   the foot of the whole section to the foot of the photograph itself,
   now that the two are separate blocks rather than one stacked scene. */
.hero-photo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--lv-gds,156,122,60),.5) 12%,
    rgba(var(--lv-gbs,233,206,138),.9) 50%,
    rgba(var(--lv-gds,156,122,60),.5) 88%,
    transparent);
  box-shadow:0 0 22px -4px rgba(var(--lv-gbs,233,206,138),.55);}
html[data-pc-ornament="none"] .hero-photo::after,
html[data-pc-ornament="none"] header.nav::after{display:none;}

/* ===================================================================
   THE HERO STAGE — a photograph on its own, and words on their own
   -------------------------------------------------------------------
   The hero used to be one full-bleed scene: photograph and words on the
   same stacked layer, sized to fill most of the viewport so the words
   would have somewhere dark enough to sit. That is exactly what put the
   heading on top of the building's own painted sign. Splitting the two
   into a photograph block followed by a text block removes the need for
   any of it — the photograph is free to be shown at a natural, generous
   size without reserving space for type, and the words get their own
   plain ground immediately under it, on the page.
   =================================================================== */
.hero{ padding-block:0; background-image:none!important; }
.hero-photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  height:clamp(300px,52vh,560px);
}
/* The words' own ground. `.hero-inner` used to be a flex child centred
   over the photograph and inherited `.hero`'s ivory text colour because
   it needed to read on a dark image. It now sits on the page below the
   photograph — the same white/off-white ground every other section
   opens on — so it takes the page's own dark ink, and gets the
   generous top-and-bottom air the rest of the site's sections get. */
.hero-inner{
  color:var(--ink-soft);
  padding-block:56px 64px;
}
.hero p.lede{color:var(--ink-soft);}
@media (max-width:600px){ .hero-inner{ padding-block:32px 40px; } }

/* RESTORED FRAMING. Before the hero was rebuilt as a plated two-column stage,
   this photograph was the hero's own full-bleed background at center 65% and
   full strength — css/brand.css, .hero. The rebuild moved it to this layer so
   it could be transformed rather than repainted (a background-image cannot be
   transformed, and the drift below has to be), which is worth keeping; but it
   also held the picture back to between 14% and 50% opacity and walked its
   crop around the frame, because in that arrangement the photograph beside the
   words was the subject and this was only scenery.
     It is the subject again. Full strength, original crop, and the four later
   opacity/position overrides are struck out where they stood rather than
   deleted silently, so it is plain what was removed and why. */
.hero-plate{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("/assets/images/gallery/campus-aerial-facade.jpg");
  background-size:cover;
  background-position:center 28%;
  transform:scale(1.03);
  filter:brightness(1.06) contrast(1.03) saturate(1.1);
  animation:hero-drift 38s ease-in-out infinite alternate;
}
/* Swapped to the school's own freshly supplied front-elevation
   photograph, real resolution (1121x995) rather than the older,
   repeatedly-upscaled gallery still. The drift's scale range is pulled
   in a touch (was 1.045→1.075) so the modest source resolution never
   gets pushed past its own detail. */
@keyframes hero-drift{
  from{ transform:scale(1.03) translate3d(0,0,0); }
  to  { transform:scale(1.05) translate3d(-0.7%,-0.8%,0); }
}
@media (prefers-reduced-motion:reduce){ .hero-plate{ animation:none; } }
html[data-pc-motion="reduced"] .hero-plate{ animation:none; }

/* ---- The wordmark, set rather than stretched ----------------------
   The promise line carried 0.28em of tracking — at that measure the
   letters stop forming words and the line reads as a row of characters.
   And it shared its size and weight with the school's name above it, so
   the two competed instead of ranking. The name is now the larger, the
   promise is the smaller and lighter, and the tracking is halved. */
.hero h1{ letter-spacing:.005em; }
.hero h1 span.hero-subline{
  font-size:.46em;
  letter-spacing:.14em;
  font-weight:500;
  margin-top:18px;
  color:rgb(var(--lv-gb,233,206,138));
}
@media (max-width:600px){
  .hero h1 span.hero-subline{ font-size:.52em; letter-spacing:.10em; }
}
.hero .hero-type{ letter-spacing:.01em; }

/* ---- Sizing the photograph on its own terms ------------------------
   With the words no longer sharing the frame, the photograph's crop no
   longer has to dodge anything — it just has to look like a good
   picture of the school. A fixed height (not an aspect-ratio — mixing
   aspect-ratio with a max-height clamp on a block box made the browser
   shrink the box's WIDTH to satisfy the ratio instead of just capping
   its height, leaving pale margins down both sides) keeps the roofline
   and the painted sign in view without the extreme cover-crop a
   full-viewport-height stage used to demand. A phone gets a shorter
   band still, since the source photograph (1121×995) is nearly square
   and needs less height to show as much of itself. */
@media (max-width:860px){
  .hero-photo{ height:clamp(260px,46vh,420px); }
  .hero-plate{ background-position:center 24%; }
}

/* ===================================================================
   THE HERO, PLATED — the photograph shown rather than cropped
   -------------------------------------------------------------------
   The frontage is 1121x995, near enough square. A hero band is twice as
   wide as it is tall, so `cover` discarded two fifths of it whatever the
   position, and wherever the school's painted sign landed in that window
   the heading landed on top of it. Three crops in, the sign was pushed
   out of frame entirely and the page was showing a wall.

   So it stops being a background. It is a plate: framed, corner-marked,
   whole, standing beside the words on a ground of the house's own
   espresso rather than floating in a photograph. Every part of the
   picture that carries meaning — both blocks, the forecourt, the sign,
   the neighbourhood it sits in — is visible at last.

   The full-bleed layer stays underneath at low strength. It is the same
   photograph, heavily darkened and drifting, doing the job a ground
   should do: giving the plate somewhere to sit that belongs to it.
   =================================================================== */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(26px,4vw,58px);
  max-width:1220px;
  text-align:start;
}
.hero-split .hero-words{ min-width:0; text-align:start; }
.hero-split .hero-crest{ margin-inline:0; width:118px; }
.hero-split .eyebrow{ justify-content:flex-start; }
.hero-split h1{ text-align:start; }
.hero-split h1::after{ left:0; transform:none; }
.hero-split .hero-subline{ letter-spacing:.11em; }
.hero-split p.lede{ margin-inline:0; max-width:52ch; text-align:start; }
.hero-split .hero-ctas{ justify-content:flex-start; }

/* ---- The plate ---------------------------------------------------- */
.hero-plate-figure{ margin:0; min-width:0; }
.hpf-frame{
  position:relative; border-radius:6px; overflow:hidden;
  border:1px solid rgba(var(--lv-gb,233,206,138),.5);
  box-shadow:
    inset 0 1px 0 rgba(var(--lv-gl,255,246,223),.28),
    0 2px 5px rgba(0,0,0,.42),
    0 34px 60px -26px rgba(0,0,0,.9);
}
.hpf-frame img{ display:block; width:100%; height:auto; }
/* A hairline inset rule, the same device as the section frames. */
.hpf-frame::after{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(var(--lv-gl,255,246,223),.30);
}
.hpf-corner{
  position:absolute; width:16px; height:16px; pointer-events:none;
  border:0 solid rgb(var(--lv-gb,233,206,138));
}
.hpf-corner.tl{ top:9px;    left:9px;  border-top-width:2px; border-left-width:2px; }
.hpf-corner.tr{ top:9px;    right:9px; border-top-width:2px; border-right-width:2px; }
.hpf-corner.bl{ bottom:9px; left:9px;  border-bottom-width:2px; border-left-width:2px; }
.hpf-corner.br{ bottom:9px; right:9px; border-bottom-width:2px; border-right-width:2px; }

.hero-plate-figure figcaption{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:14px;
  font-size:.78rem; line-height:1.5;
  color:rgba(var(--lv-w00,248,244,233),.72);
}
.hero-plate-figure figcaption span{
  font-family:var(--font-label,'Cinzel',serif);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgb(var(--lv-gb,233,206,138));
}

/* ---- The ground beneath it ---------------------------------------
   Same photograph, held right back. It is scenery now, not the subject,
   so the wash over it can be heavy without costing anything. */
/* removed on restore: tuned for the plated hero — see the note at .hero-plate */

/* ---- One column when there is not room for two -------------------- */
@media (max-width:940px){
  .hero-split{ grid-template-columns:1fr; text-align:center; gap:32px; }
  .hero-split .hero-words{ text-align:center; }
  .hero-split .hero-crest{ margin-inline:auto; }
  .hero-split .eyebrow{ justify-content:center; }
  .hero-split h1{ text-align:center; }
  .hero-split h1::after{ left:50%; transform:translateX(-50%); }
  .hero-split p.lede{ margin-inline:auto; text-align:center; }
  .hero-split .hero-ctas{ justify-content:center; }
  .hero-plate-figure figcaption{ justify-content:center; }
  .hero{ min-height:0; }
}

/* ---- The ground had to give way to the plate ----------------------
   At half strength the full-bleed layer was still a photograph, and the
   school's own painted sign came through the middle of the lede at
   sign-size — the name appearing twice on one screen again, which is the
   fault this whole rebuild set out to remove. The ground is now scenery
   at a sixth of its strength: enough that the plate is standing on the
   campus rather than on a brown rectangle, not enough to read as a
   second picture competing with the first. */
/* removed on restore: tuned for the plated hero — see the note at .hero-plate */

/* ---- Three buttons, one row, or three rows — never two and a half --
   At this measure the third button dropped alone onto a second line and
   sat under a gap, which reads as a mistake rather than as a wrap. The
   row is allowed to compress before it breaks, and when it does break it
   breaks cleanly. */
.hero-split .hero-ctas{ gap:12px; }
.hero-split .hero-ctas .btn{
  padding-inline:clamp(16px,1.9vw,28px);
  font-size:clamp(.7rem,.92vw,.8rem);
  white-space:nowrap;
}
@media (max-width:1180px) and (min-width:941px){
  .hero-split{ grid-template-columns:minmax(0,1.14fr) minmax(0,1fr); }
  .hero-split .hero-ctas .btn{ padding-inline:14px; font-size:.68rem; }
}

/* Two buttons and a line, rather than three buttons. */
.hero-split .hero-aside{
  margin:18px 0 0; font-size:.84rem;
}
.hero-split .hero-aside a{
  color:rgba(var(--lv-gb,233,206,138),.9);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--lv-gb,233,206,138),.35);
  padding-bottom:2px;
  transition:color .3s ease, border-color .3s ease;
}
.hero-split .hero-aside a:hover,
.hero-split .hero-aside a:focus-visible{
  color:rgb(var(--lv-gl,255,246,223));
  border-bottom-color:rgba(var(--lv-gl,255,246,223),.8);
}
@media (max-width:940px){ .hero-split .hero-aside{ text-align:center; } }

/* The ground drops below the sign as well, so the painted name cannot
   ghost through the promise line even at a sixth of strength. */
/* removed on restore: tuned for the plated hero — see the note at .hero-plate */

/* The ground takes the sky. Moving it down put the painted sign at the
   top of the frame instead of the middle — still the school's name,
   still ghosting, just somewhere emptier. The only crop of this
   photograph with no lettering anywhere in it is the top: rooftops,
   palms and a Lagos sky, which is texture rather than a message. */
/* removed on restore: tuned for the plated hero — see the note at .hero-plate */

/* ===================================================================
   THE SCHOOL'S NAME WAS BEING SET AT HALF SIZE, EVERYWHERE
   -------------------------------------------------------------------
   css/brand.css:1104 says

       .hero h1 span{ font-size:0.5em; letter-spacing:0.28em; ... }

   and the h1 contains TWO spans:

       <span class="hero-type">Sultan Hanafi Royal Schools</span>
       <span class="hero-subline">We Nurture Tomorrow's Leaders</span>

   The rule was written for the second and has been hitting both. The
   school's own name — the largest, most-viewed piece of type on the
   site — has been rendering at half the h1's size, in the body face
   rather than the display one, with 0.28em of tracking that made it
   read as stretched. That is why it looked "letter-spaced and small"
   and why no amount of adjusting the h1 changed it: the h1 was never
   the element being drawn.

   On a 390px phone it compounded into absurdity — an 18px heading
   halved to 9px, smaller than the eyebrow above it and smaller than
   the body copy below it. The name of the school, the smallest type in
   the hero.

   Scoped to the subline, which is what it always meant. */
.hero h1 .hero-type{
  display:block;
  font-size:1em;
  font-family:var(--font-label,'Cinzel','Amiri',serif);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  margin-top:0;
}
/* The heading used to sit on the photograph and needed white ink to
   read against it. It now sits on the page's own ground below the
   photograph, so it takes the page's own dark ink instead — the same
   colour every other heading on the site uses. Midnight theme still
   gets its own gold via css/liveries.css, !important, further down
   the cascade. */

/* And the h1 itself gets a floor that a phone cannot argue with. */
.hero h1{ font-size:clamp(1.9rem,5.4vw,3.4rem); }
@media (max-width:600px){ .hero h1{ font-size:clamp(1.75rem,7.4vw,2.4rem); } }

/* ---- The masthead row was 36px wider than the phone ---------------
   Measured at 390px: nav.wrap scrollWidth exceeded clientWidth by 36,
   so the MENU button — the only way to the rest of the site on a phone
   — was clipped by the right edge. The wordmark is allowed to shrink
   and the row is allowed to compress before anything is pushed off it. */
@media (max-width:640px){
  header.nav nav.wrap{ gap:8px; padding-inline:12px; }
  header.nav .brand-text{ min-width:0; }
  header.nav .brand-text .line1{ font-size:clamp(.86rem,4.3vw,1.15rem); }
  header.nav .brand-text .line2{ font-size:.56rem; letter-spacing:.13em; }
  header.nav .brand-text .line-dual{ font-size:.52rem; }
  header.nav .nav-actions,
  header.nav .nav-right{ gap:6px; flex:0 0 auto; }
  header.nav .menu-toggle{ padding-inline:12px; }
}

/* ---- The typewriter must let go when it has finished ---------------
   js/site.js types the name by animating an inline `width` from 0 to
   the measured width of the text, with overflow hidden and nowrap. That
   measurement was taken when the name was rendering at half size, and
   even now it is a fixed pixel width frozen at first paint — so a name
   that reflows for any reason afterwards (a font swapping in, a
   rotation, a text-size preference) gets guillotined by its own
   animation container.

   When the typing is done, the container has no further business
   constraining anything. It lets go. */
.hero-type.js-type.is-done{
  width:auto!important;
  overflow:visible;
  white-space:normal;
  border-right-color:transparent;
}

/* ---- The masthead, twenty pixels narrower still -------------------- */
@media (max-width:640px){
  header.nav nav.wrap{ gap:6px; padding-inline:10px; }
  header.nav .brand-text .line1{ font-size:clamp(.8rem,4vw,1.05rem); }
  header.nav .brand-text .line2{ font-size:.52rem; letter-spacing:.10em; }
  header.nav .brand-text .line-dual{ font-size:.48rem; }
  header.nav .menu-toggle{ padding-inline:10px; font-size:.66rem; }
  header.nav .menu-toggle svg{ width:15px; height:15px; }
  /* The clock is the one item here that is decoration rather than
     navigation, and it already appears in the strip above. Below 420px
     it stands down so the way into the site is never the thing that
     gets clipped. */
  @media (max-width:420px){ header.nav .rlx{ display:none; } }
}

/* ===================================================================
   THE ARRIVAL — a sequence rather than a pile
   -------------------------------------------------------------------
   Everything in the hero was already animated, and that was the
   problem: five entrances all firing at once, in an order that made no
   sense. The lede arrived at 0.15s and the buttons at 0.3s, while the
   promise line — the thing they are the consequence of — did not appear
   until 2.1s, by which time the reader had already read past the gap
   where it was going to be. Motion that arrives in the wrong order is
   worse than no motion, because the eye follows it.

   This is the order a herald would use: the ground, then the arms, then
   where we are, then who we are, then the rule drawn under it, then
   what we claim, then what we say, then what you may do. Each step
   waits for the one before to finish rather than racing it. The whole
   sequence is over in three seconds — long enough to read as ceremony,
   short enough that nobody waiting to click has to wait.

   One easing curve throughout, and it is not the browser's. `ease` is
   symmetrical and reads as mechanical; this one leaves quickly and
   settles slowly, which is how a physical thing comes to rest.
   =================================================================== */
:root{ --arr:cubic-bezier(.16,.84,.28,1); }

@keyframes arr-rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes arr-plate{
  from{ opacity:0; transform:translateY(26px) scale(.972); }
  to  { opacity:1; transform:none; }
}
@keyframes arr-rule{
  from{ transform:translateX(-50%) scaleX(0); }
  to  { transform:translateX(-50%) scaleX(1); }
}
@keyframes arr-rule-start{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

.hero-split .hero-plate-figure{ animation:arr-plate 1.15s var(--arr) .10s both; }
.hero-split .hero-crest       { animation:arr-rise  .85s var(--arr) .34s both; }
.hero-split .eyebrow          { animation:arr-rise  .75s var(--arr) .60s both; }
.hero-split h1                { animation:arr-rise  .80s var(--arr) .78s both; }
.hero-split h1 .hero-subline  { animation:arr-rise  .75s var(--arr) 1.92s both; }
.hero-split p.lede            { animation:arr-rise  .80s var(--arr) 2.16s both; }
.hero-split .hero-ctas        { animation:arr-rise  .80s var(--arr) 2.40s both; }
.hero-split .hero-aside       { animation:arr-rise  .75s var(--arr) 2.62s both; }
.hero-plate-figure figcaption { animation:arr-rise  .75s var(--arr) 2.80s both; }

/* The rule under the name draws itself once the name has been typed,
   left to right in the split layout, from the centre when centred. */
.hero-split h1::after{
  transform-origin:left center;
  animation:arr-rule-start .9s var(--arr) 1.62s both;
}
@media (max-width:940px){
  .hero-split h1::after{
    transform-origin:center;
    animation:arr-rule .9s var(--arr) 1.62s both;
  }
}

/* The typewriter waits its turn. js/site.js starts it the moment the
   script runs; a delay on the transition holds it until the heading has
   finished rising, so the name is not being typed into a line that is
   still moving. */
.hero-type.js-type{ transition-delay:.86s; }

@media (prefers-reduced-motion:reduce){
  .hero-split .hero-plate-figure,.hero-split .hero-crest,.hero-split .eyebrow,
  .hero-split h1,.hero-split h1 .hero-subline,.hero-split p.lede,
  .hero-split .hero-ctas,.hero-split .hero-aside,
  .hero-plate-figure figcaption,.hero-split h1::after{
    animation:none!important; opacity:1!important; transform:none!important;
  }
}
html[data-pc-motion="reduced"] .hero-split *{ animation-duration:.001s!important; animation-delay:0s!important; }

/* The plate's edge light is slower and quieter than the site default —
   it is the largest lit rectangle on any page, and what reads as a
   glint at card size reads as a strobe at this one. It also holds off
   until the plate has finished arriving. */
.hpf-frame{ --rg-dur:16s; }
.hpf-frame > .rg-edge{ opacity:0; animation-delay:1.3s; transition:opacity 1.2s ease 1.3s; }
.hero-split .hpf-frame > .rg-edge{ opacity:.5; }
.hpf-frame:hover > .rg-edge,
.hpf-frame:focus-within > .rg-edge{ opacity:.9; }