/* ===================================================================
   THE PORTAL CHROME
   -------------------------------------------------------------------
   Sixty-eight pages of the Digital Campus are hand-authored rather than
   built from the partials, so none of them carried the site's masthead
   or its colophon. They opened on a thin white strip with a crest in it
   and ended on nothing at all — the page simply stopped.

   They should not wear the marketing masthead: a portal is a room you
   are already inside, and eight section plates and a quick row would be
   noise there. So this is chrome of its own — the same materials, at
   working weight. An espresso band with the crest, the standing line
   and the chronometer at the head; a ruled colophon with the way back
   out at the foot; and the gold hairline on both that ties them to
   everything else the school publishes.
   =================================================================== */

/* ---- The calendar band ---------------------------------------------
   Every public page of the school opens on this: both calendars, the
   time in Ikorodu, and the way to the Adhkār. The Digital Campus did
   not have it, and that absence is most of why the portal read as
   somebody else's software bolted onto the school — the one band a
   reader recognises before they have read a word was missing.

   It is the deepest tone on the page, under the masthead rather than
   over it, so the crest line reads as lifted off it. Stated against
   this band's own ground and nothing else: the ground is written here,
   in this file, in every edition, so there is no theme underneath it to
   be wrong about. That is the fifth time that pattern has cost
   something — see docs/measuring-contrast-honestly.md.
   ------------------------------------------------------------------- */
.pch-strip{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,#150C03 0%,#1B1106 100%);
  border-bottom:1px solid rgba(233,206,138,.14);
  padding:0 28px;}
.pch-strip::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.34) 30%,
    rgba(198,161,91,.34) 70%,transparent);}
.pch-strip-inner{
  max-width:1180px;margin:0 auto;min-height:34px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:2px 14px;}
.pch-strip-item{
  display:inline-flex;align-items:center;gap:7px;min-width:0;
  font-size:.72rem;letter-spacing:.02em;line-height:1;
  color:rgba(233,206,138,.82);}
.pch-strip-icon{flex:0 0 auto;opacity:.7;}
/* The time is the one thing here that changes every second, so it is set in
   the figure face at a fixed advance — otherwise the whole band shuffles
   sideways once a second, which is the cheapest-looking thing a header can
   do. */
.pch-strip-time{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.pch-strip-sep{
  flex:0 0 auto;width:1px;height:12px;
  background:linear-gradient(180deg,transparent,rgba(198,161,91,.45),transparent);}
.pch-strip-link{
  text-decoration:none;position:relative;padding-bottom:2px;
  transition:color .3s ease;}
.pch-strip-link::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:100%;
  background:var(--gold-bright,#E9CE8A);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .38s cubic-bezier(.16,.8,.24,1);}
.pch-strip-link:hover,.pch-strip-link:focus-visible{color:#FFF6DF;}
.pch-strip-link:hover::after,.pch-strip-link:focus-visible::after{transform:scaleX(1);}
@media (max-width:620px){
  .pch-strip{padding:0 14px;}
  .pch-strip-inner{min-height:0;padding:7px 0;gap:2px 10px;}
  .pch-strip-item{font-size:.66rem;letter-spacing:0;}
}

/* ---- The head ------------------------------------------------------ */
.portal-topbar{
  position:relative;isolation:isolate;
  background:
    radial-gradient(700px 160px at 50% -60%,rgba(233,206,138,.20),transparent 74%),
    linear-gradient(168deg,#3B2A1D 0%,#241708 62%,#1C1207 100%)!important;
  border-bottom:1px solid rgba(233,206,138,.45)!important;
  box-shadow:inset 0 1px 0 rgba(233,206,138,.18),
             0 14px 30px -24px rgba(0,0,0,.9)!important;
  padding:0!important;}

/* ---- The masthead, in two tiers -------------------------------------
   It was one row: crest, standing line, a theme toggle, a chronometer, an
   office badge, four bare links, a language control, Sign Out, and the
   calendar — nine things fighting over 1280px. They wrapped, and the bar's
   own height cut the second row in half, so "Registrar's Office" and "Sign
   Out" were sliced through the middle on the page a registrar opens every
   morning.
     Two tiers, then, each with one job. Above: who this is — crest, the
   school's name, the standing line, and the calendar. Below: what you can do
   from here. The order property does the arranging, because the markup lives
   in sixty-eight hand-authored pages and is not going to be rewritten
   sixty-eight times.
   ------------------------------------------------------------------- */
.portal-topbar.pch-mast{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;}
/* EVERY CHILD IS PLACED, NOT JUST THE FOUR THAT WERE NAMED. The first pass
   gave orders to the brand, the standing line, the calendar and the utility
   cluster, and left everything else at the initial order:0 — which is ahead
   of all four. On the pages that HAVE a utility cluster nothing else was
   loose in the bar and it looked right; on the ones that do not, the pilot
   badge and the language switcher are loose, so /portal/login/ opened on
   "PILOT · English · crest SULTAN HANAFI", with the school's own crest third
   in its own masthead. A default for the unnamed is the whole fix: they sit
   between the standing line and the calendar, on the trailing side, which is
   where a badge and a control belong. */
.pch-mast > *{order:4;}
.pch-mast > .portal-brand{order:1;padding:13px 0 13px 28px;}
[dir="rtl"] .pch-mast > .portal-brand{padding:13px 28px 13px 0;}
.pch-mast > .pch-standing{order:2;margin-inline:auto;}
.pch-mast > .portal-topbar-calendar{order:5;margin-inline-end:28px;}
/* The working tier: its own full-width band, ruled off from the crest line. */
.pch-mast > .pch-utility{
  order:9;flex:0 0 100%;display:flex;align-items:center;flex-wrap:wrap;
  gap:9px 12px;padding:9px 28px;margin:0;
  border-top:1px solid rgba(233,206,138,.16);
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0));}
/* The account controls sit at the far end, away from the navigation. */
.pch-mast > .pch-utility > .lang-switch-mount{margin-inline-start:auto;}

/* Bare links beside pills is what made this read as unfinished. Every control
   on the working tier is a plate now, at one weight, with one rhythm. */
.pch-mast .portal-topbar-link{
  font-family:var(--font-label,'Cinzel',serif);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding:7px 13px;border-radius:99px;
  border:1px solid rgba(233,206,138,.22);
  background:linear-gradient(168deg,rgba(233,206,138,.09),rgba(233,206,138,.02));
  box-shadow:inset 0 1px 0 rgba(255,246,223,.10);
  transition:border-color .3s ease,background .3s ease,color .3s ease,transform .3s ease;}
.pch-mast .portal-topbar-link:hover,
.pch-mast .portal-topbar-link:focus-visible{
  border-color:rgba(233,206,138,.62);background:rgba(233,206,138,.16);
  color:#FFF6DF!important;transform:translateY(-1px);}
.pch-mast .portal-pilot-badge{
  font-family:var(--font-label,'Cinzel',serif);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;padding:7px 14px;border-radius:99px;
  color:#1A1006!important;
  background:linear-gradient(135deg,#E9CE8A,#C6A15B)!important;
  border:1px solid rgba(255,246,223,.45)!important;
  box-shadow:0 6px 14px -8px rgba(140,100,40,.9),inset 0 1px 0 rgba(255,255,255,.4);}
.pch-mast > .portal-topbar-calendar{
  font-family:var(--font-label,'Cinzel',serif);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 14px;border-radius:99px;
  border:1px solid rgba(233,206,138,.28);
  background:linear-gradient(168deg,rgba(233,206,138,.10),rgba(233,206,138,.02));}
@media (max-width:820px){
  .pch-mast > .portal-brand{padding-inline:16px;}
  .pch-mast > .pch-utility{padding-inline:16px;}
  /* The calendar wraps onto its own line here, and with only a trailing
     margin it sat flush against the viewport edge with its rounded corner
     sliced off. It needs both sides once it is no longer the last thing on
     a row with something else. */
  .pch-mast > .portal-topbar-calendar{margin:0 16px 11px;}
}
.portal-topbar::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    rgba(198,161,91,.5) 16%,rgba(255,246,223,.9) 50%,
    rgba(198,161,91,.5) 84%,transparent);
  transform:scaleX(0);transform-origin:center;
  animation:pch-rule 1.4s cubic-bezier(.16,.8,.24,1) .2s forwards;}
@keyframes pch-rule{to{transform:scaleX(1);}}

/* ---- The lockup ----------------------------------------------------
   The crest beside two lines, which is what the school's masthead has
   always been: the name in Cinzel with the gold sweep passing through
   it, "Royal Schools" under it in gold small caps. The treatment is
   already written, in css/brand.css, and the portal already loads that
   file — the bar was one span short of wearing it. js/portal-chrome.js
   supplies the span. What is written here is only what changes because
   the ground is espresso rather than the marketing header's own.
   ------------------------------------------------------------------- */
.portal-brand{position:relative;align-items:center;gap:12px;}
/* A 10px blur under a 40px crest is wider than the arms themselves, and once
   the rotating halo was added around it the two glows overlapped into a
   luminous plate — the crest looked mounted on a tile. Tightened to a
   hairline lift, so the halo is the only ring the eye reads. */
.portal-brand img{
  width:40px!important;height:40px!important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
.portal-brand .brand-text{display:block;line-height:1.12;}
/* Cinzel at the masthead's weight. The single span this replaced was set
   from css/portal.css at .92rem with wide tracking; .line1 carries its own
   size and the shimmer, and only needs the face named for the portal's
   shorter bar. */
.portal-brand .line1{
  font-size:1rem!important;letter-spacing:.05em!important;text-transform:uppercase!important;}

/* THE WORDMARK IS ON ESPRESSO. IN EVERY EDITION. THE SIXTH TIME.
   The wordmark is not coloured type: it is a gradient clipped to the glyphs
   with -webkit-text-fill-color:transparent, so whichever stylesheet writes
   that gradient last owns whether the school's name is legible at all.
   css/prestige.css writes it twice for the Clear edition —
   html[data-pc-theme="light"] .brand-text .line1 — running the sweep between
   coffee and dark gold, because the Clear edition's MARKETING masthead is a
   pale cream band and white-on-cream was invisible there. Correct, for that
   band.
     The portal's masthead is espresso in all three editions; it is painted
   in this file, unconditionally, a few rules above. So the moment the portal
   was given the real lockup it inherited a gradient written for cream and
   the school's own name vanished out of its own masthead for every reader on
   the default edition. Caught in a screenshot, not in a stylesheet: the crop
   taken without a stored preference looked perfect.
     Restated here against the ground it actually stands on, and stated for
   all three editions rather than for the two that happen to be dark — which
   is the same correction, in the same words, as the fifth time. See
   docs/measuring-contrast-honestly.md. */
.portal-brand .line1{
  background-image:linear-gradient(100deg,
    rgb(var(--lv-wh,255,255,255)) 30%,
    var(--gold-bright,#E9CE8A) 45%,
    rgb(var(--lv-wh,255,255,255)) 60%)!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;}
@media (prefers-reduced-motion:reduce){
  .portal-brand .line1{
    background:none!important;-webkit-text-fill-color:#FFF6DF!important;color:#FFF6DF!important;}
}

/* The crest wrap carries two decorations: a rotating gold halo, which is a
   hairline ring and reads beautifully on espresso, and a foil sweep, which is
   a RECTANGLE blended with `screen`. Over the marketing header's cream the
   rectangle is a whisper. Over espresso `screen` lifts the whole square and
   the crest sits in a visible tan box — a lit panel behind the school's arms.
   The ring stays; the rectangle goes. */
.portal-brand .crest-shimmer-wrap::after{display:none;}
.portal-brand .line2{
  color:rgba(233,206,138,.9)!important;font-size:.55rem!important;letter-spacing:.22em!important;}
[dir="rtl"] .portal-brand .line1{letter-spacing:normal!important;}
[dir="rtl"] .portal-brand .line2{letter-spacing:normal!important;}
/* Before the lockup existed the bar's only text was this one span, so it was
   inked here. Anything still arriving as a bare span in the bar — a page that
   brings its own — keeps that ink. */
.portal-brand > span:not(.brand-text):not(.crest-shimmer-wrap){color:#FFF6DF!important;}
.portal-topbar-link{color:rgba(247,238,223,.86)!important;}
.portal-topbar-link:hover{color:#FFF6DF!important;}
.portal-logout{
  border:1px solid rgba(233,206,138,.55)!important;
  background:linear-gradient(150deg,rgba(233,206,138,.16),rgba(198,161,91,.06))!important;
  color:#EBD3A0!important;border-radius:99px!important;
  transition:background .35s ease,border-color .35s ease,color .35s ease;}
.portal-logout:hover{
  border-color:#E9CE8A!important;color:#1A1006!important;
  background:linear-gradient(135deg,#C6A15B,#E9CE8A)!important;}

/* The standing line, folded away where the bar is tight. */
.pch-standing{
  display:none;align-items:center;gap:12px;margin-inline:auto;
  font-family:var(--font-label,'Cinzel',serif);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap;color:rgba(233,206,138,.8);}
@media (min-width:1080px){.pch-standing{display:flex;}}
.pch-standing::before,.pch-standing::after{
  content:"";width:44px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.7));}
.pch-standing::after{background:linear-gradient(270deg,transparent,rgba(198,161,91,.7));}
/* Two statements and a raised point, as the marketing masthead sets them.
   The gap belongs between the phrases, not around the point. */
.pch-standing{gap:0 12px;}
.pch-standing-d{color:rgba(198,161,91,.8);letter-spacing:0;margin-inline:-4px;}
[dir="rtl"] .pch-standing{letter-spacing:normal;}

.pch-clock{display:none;align-items:center;}
@media (min-width:760px){.pch-clock{display:inline-flex;}}

/* ---- The foot ------------------------------------------------------ */
.pch-foot{
  position:relative;isolation:isolate;margin-top:auto;
  padding:34px 28px 26px;
  background:linear-gradient(168deg,#241708 0%,#170E04 100%);
  border-top:1px solid rgba(233,206,138,.4);
  box-shadow:inset 0 1px 0 rgba(233,206,138,.16);}
/* The crest, watermarked. At 150% of the foot's height and five per cent it
   was a watermark on a footer 180px tall and a mural on the one that stands
   here now: the arms filled the whole plate, the statement and the live panel
   read through a shield, and the espresso ground looked mid-brown because a
   pale ornament was lying across all of it. A watermark is the thing you
   notice second. */
.pch-foot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.02;
  background-image:url("/assets/images/crest-watermark.png");
  background-size:auto 64%;background-repeat:no-repeat;background-position:center 30%;}
/* ---- The arrival ----------------------------------------------------
   The school's own footer does not begin with columns; it begins with a
   ruled plate carrying four corner marks, the statement, and a lozenge.
   That plate is why the public footer closes a document and the
   portal's merely ended a screen. The portal has it now, at the weight
   a working page can carry: one plate, not the marketing footer's full
   arrival sequence.
   ------------------------------------------------------------------- */
.pch-arrival{
  position:relative;max-width:1180px;margin:0 auto 30px;
  padding:34px 44px 30px;text-align:center;
  border:1px solid rgba(233,206,138,.2);border-radius:3px;
  background:
    radial-gradient(560px 180px at 50% 0%,rgba(233,206,138,.08),transparent 72%),
    linear-gradient(168deg,rgba(233,206,138,.045),rgba(0,0,0,.14));
  box-shadow:inset 0 1px 0 rgba(255,246,223,.08);}
.pch-corner{position:absolute;width:26px;height:26px;color:rgba(233,206,138,.55);}
.pch-corner svg{width:100%;height:100%;display:block;}
.pch-corner.tl{top:9px;inset-inline-start:9px;}
.pch-corner.tr{top:9px;inset-inline-end:9px;transform:scaleX(-1);}
.pch-corner.bl{bottom:9px;inset-inline-start:9px;transform:scaleY(-1);}
.pch-corner.br{bottom:9px;inset-inline-end:9px;transform:scale(-1);}
.pch-statement{
  margin:0;font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);
  font-size:clamp(1.05rem,2.2vw,1.42rem);font-style:italic;line-height:1.5;
  color:rgb(255,246,223);text-wrap:balance;}
.pch-mark{
  margin:16px auto 0;width:20px;height:20px;color:rgba(233,206,138,.75);}
.pch-mark svg{width:100%;height:100%;display:block;}
@media (max-width:620px){
  .pch-arrival{padding:26px 20px 22px;margin-bottom:22px;}
  .pch-corner{width:18px;height:18px;}
}

/* ---- The school, right now ------------------------------------------
   The same live panel the public footer carries, on the same
   js/footer-live.js: the time in Ikorodu, whether the offices are open
   at this moment, and today's hours. Worth more here than on the
   marketing pages — a parent who has just read a fee notice on their
   dashboard wants to know whether there is anybody at the desk.

   Written against espresso rather than borrowed from css/listen.css,
   where the public panel's colours live. Those are stated for paper.
   ------------------------------------------------------------------- */
.pch-now{
  position:relative;max-width:1180px;margin:0 auto 30px;
  padding:24px 30px;border-radius:3px;
  border:1px solid rgba(233,206,138,.18);
  background:linear-gradient(168deg,rgba(233,206,138,.05),rgba(0,0,0,.2));}
.pch-now-head{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:4px 20px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid rgba(233,206,138,.16);}
.pch-now-eyebrow{
  margin:0;font-family:var(--font-label,'Cinzel',serif);font-size:.68rem;
  letter-spacing:.19em;text-transform:uppercase;color:#E4C87F;}
.pch-now-place{margin:0;font-size:.71rem;color:rgba(247,238,223,.56);}
.pch-now-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 34px;}
.pch-now-cell{display:flex;flex-direction:column;gap:5px;min-width:0;}
.pch-now-k{
  font-family:var(--font-label,'Cinzel',serif);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(233,206,138,.72);}
.pch-now-clock,.pch-now-hours{
  font-size:1.14rem;color:#FFF6DF;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.pch-now-state{display:inline-flex;align-items:center;gap:9px;font-size:1.14rem;color:#FFF6DF;}
.pch-now-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:rgba(247,238,223,.45);box-shadow:0 0 0 0 rgba(247,238,223,0);}
[data-now-state="open"] .pch-now-dot{
  background:#7FCB8E;box-shadow:0 0 10px 1px rgba(127,203,142,.55);}
[data-now-state="closed"] .pch-now-dot{
  background:#D08C6A;box-shadow:0 0 10px 1px rgba(208,140,106,.4);}
.pch-now-sub{font-size:.73rem;color:rgba(247,238,223,.58);}
.pch-now-link{color:rgba(233,206,138,.86);text-decoration:none;
  border-bottom:1px solid rgba(233,206,138,.3);padding-bottom:1px;
  transition:color .3s ease,border-color .3s ease;}
.pch-now-link:hover,.pch-now-link:focus-visible{color:#FFF6DF;border-color:#E9CE8A;}
@media (max-width:820px){
  .pch-now-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .pch-now{padding:20px 18px;}
  .pch-now-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---- The colophon, in columns ---------------------------------------
   This was a row of bare underlined links, a right-orphaned meta line, four
   flat lozenges and a dashed box, divided by three stacked rules. It read as
   the bottom of a form. The school's own footer speaks a different language —
   columns, Cinzel headings over a gold hairline, a crest that carries weight —
   and there is no reason the portal should not speak it too.
   ------------------------------------------------------------------- */
.pch-foot-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:30px 42px;align-items:start;}
.pch-col{min-width:0;}
.pch-col-brand{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;}
.pch-crest{grid-row:1 / span 2;width:46px;height:46px;
  filter:drop-shadow(0 0 12px rgba(233,206,138,.35));}
.pch-foot-name{
  align-self:end;font-family:var(--font-label,'Cinzel',serif);font-size:.92rem;
  letter-spacing:.05em;color:#FFF6DF;}
.pch-foot-sig{align-self:start;font-size:.72rem;color:rgba(247,238,223,.62);}
.pch-col-brand .pch-note{grid-column:1 / -1;margin:14px 0 0;}

/* The heading treatment the site footer uses: small Cinzel gold, over a rule
   that runs the width of the column. */
.pch-h{
  font-family:var(--font-label,'Cinzel',serif);font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#E4C87F;
  margin:0 0 12px;padding-bottom:9px;position:relative;}
.pch-h::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(233,206,138,.62),rgba(233,206,138,.06));}
[dir="rtl"] .pch-h::after{
  background:linear-gradient(270deg,rgba(233,206,138,.62),rgba(233,206,138,.06));}

.pch-list{display:flex;flex-direction:column;gap:9px;}
/* Links read as links by their own weight, not by an underline. The gold rule
   arrives on hover from the leading edge, which is what the site's own
   navigation does. */
.pch-link{
  position:relative;width:fit-content;font-size:.8rem;text-decoration:none;
  color:rgba(247,238,223,.82);padding-bottom:2px;
  transition:color .3s ease,transform .3s ease;}
.pch-link::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:100%;
  background:var(--gold-bright,#E9CE8A);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .38s cubic-bezier(.16,.8,.24,1);}
.pch-link:hover,.pch-link:focus-visible{color:#FFF6DF;}
.pch-link:hover::after,.pch-link:focus-visible::after{transform:scaleX(1);}

.pch-rule{
  max-width:1180px;margin:26px auto 0;height:1px;
  background:linear-gradient(90deg,transparent,
    rgba(198,161,91,.45) 20%,rgba(233,206,138,.7) 50%,
    rgba(198,161,91,.45) 80%,transparent);}

.pch-colophon{
  max-width:1180px;margin:16px auto 0;display:flex;align-items:center;
  justify-content:space-between;gap:14px 26px;flex-wrap:wrap;}
.pch-meta{
  display:flex;flex-wrap:wrap;gap:4px 20px;
  font-size:.71rem;color:rgba(247,238,223,.56);}
.pch-meta a{color:inherit;}
/* A seal, not a dashed placeholder box. */
.pch-badge{
  font-family:var(--font-label,'Cinzel',serif);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:#E4C87F;white-space:nowrap;
  padding:8px 16px;border-radius:99px;
  border:1px solid rgba(233,206,138,.34);
  background:linear-gradient(168deg,rgba(233,206,138,.10),rgba(233,206,138,.02));
  box-shadow:inset 0 1px 0 rgba(255,246,223,.12);}
.pch-note{
  margin:0;font-size:.71rem;line-height:1.62;color:rgba(247,238,223,.56);}

@media (max-width:900px){
  .pch-foot-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .pch-col-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .pch-foot-inner{grid-template-columns:minmax(0,1fr);}
  .pch-colophon{justify-content:flex-start;}
}

/* The whole page becomes a column so the colophon sits at the bottom of
   a short page rather than floating in the middle of the window. */
html.has-portal-chrome,html.has-portal-chrome body{min-height:100%;}
html.has-portal-chrome body{display:flex;flex-direction:column;min-height:100vh;}
html.has-portal-chrome body > main,
html.has-portal-chrome body > .portal-main{flex:1 0 auto;}

@media (max-width:620px){
  .pch-foot{padding:26px 16px 20px;}
  .pch-foot-inner{justify-content:center;text-align:center;}
  /* On a phone the foot is a tall, narrow column, and a watermark sized by
     height came out wider than the page: two cropped letters of the school's
     name lay across the middle of the links, reading as damage rather than as
     a watermark. Sized to fit the width instead, it is the crest again. */
  .pch-foot::before{background-size:contain;background-position:center 6%;}
  /* The brand column is a two-column grid — crest, then three rows beside it.
     Centring the text inside it left the crest hard against the leading edge
     with the school's name floating past it. On one column it stacks. */
  .pch-col-brand{grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;}
  .pch-crest{grid-row:auto;}
}
@media (prefers-reduced-motion:reduce){
  .portal-topbar::after{animation:none;transform:scaleX(1);}
  .pch-link,.portal-logout{transition:none;}
}
html[data-pc-motion="reduced"] .portal-topbar::after{animation:none;transform:scaleX(1);}

/* ---- What the espresso bar changes underneath it -------------------
   The bar used to be pale, so everything sitting in it was inked dark.
   Taking it to espresso means re-lighting its contents; anything left
   behind is dark ink on a dark ground. Measured before and after:
   the calendar link was the one that had been left. */
/* The edition switch is the clearest case of it. css/portal.css gives the
   button `background:var(--portal-card)`, which is the colour of the CARD —
   correct if the button stood on the page, and it does not: it stands in the
   bar. In Midnight the card is espresso and nobody noticed; in Clear the card
   is white, so a white disc sat in the masthead beside a gilded chronometer
   and a gold-ruled plate. It was the cheapest thing in the header and it was
   one line of CSS pointing at the wrong ground. */
.portal-topbar .portal-theme-toggle{
  width:34px;height:34px;
  background:linear-gradient(168deg,rgba(233,206,138,.11),rgba(233,206,138,.02))!important;
  border:1px solid rgba(233,206,138,.34)!important;
  color:#EBD3A0!important;
  box-shadow:inset 0 1px 0 rgba(255,246,223,.12);}
.portal-topbar .portal-theme-toggle:hover,
.portal-topbar .portal-theme-toggle:focus-visible{
  background:rgba(233,206,138,.18)!important;
  border-color:rgba(233,206,138,.75)!important;color:#FFF6DF!important;}

.portal-topbar-calendar{
  color:#EBD3A0!important;border-color:rgba(233,206,138,.4)!important;
  border-radius:99px;}
.portal-topbar-calendar:hover{
  color:#FFF6DF!important;border-color:rgba(233,206,138,.85)!important;
  background:rgba(233,206,138,.12);}
.portal-topbar .lang-switch > summary{
  color:#EBD3A0!important;border-color:rgba(233,206,138,.4)!important;}
.portal-topbar .lang-switch > summary:hover{
  color:#FFF6DF!important;border-color:rgba(233,206,138,.8)!important;
  background:rgba(233,206,138,.12);}

/* The chronometer sits on espresso here whatever edition the visitor
   has chosen for the marketing site, so it takes the dark dial. */
.portal-topbar{
  --rlx-face-1:#3A2A18; --rlx-face-2:#241708; --rlx-face-3:#170E04;
  --rlx-track:rgba(233,206,138,.5); --rlx-idx:#E9CE8A;
  --rlx-sig:rgba(233,206,138,.75);
  --rlx-hand-1:#F7EEDF; --rlx-hand-2:#C6A15B;
  --rlx-hand-edge:rgba(255,246,223,.5);
  --rlx-sec:#D8A24A; --rlx-glass:rgba(255,246,223,.1);}

/* ---- THE CARD IS A CREAM PLATE. IN EVERY EDITION. ------------------
   This is the root of a whole family of faults, and the earlier fix here got
   it half right. It read: the back-links are gold-on-paper in Clear and Royal,
   so darken them there — "Midnight, whose cards really are dark, keeps the
   bright gold it was written for."
     Midnight's cards are not dark. css/prestige.css paints .portal-card with
   an unconditional cream gradient and is a later stylesheet than portal.css,
   so it wins in all three editions. Sampled from painted pixels the plate is
   rgb(249,244,233) in Clear, Royal and Midnight alike.
     Meanwhile --ink, --ink-soft and --portal-heading are declared on
   body.portal-body for the page's DARK ground. So every element inside a card
   that inherits them was inked for a ground it is not standing on. A sweep of
   fifteen portal pages across three editions found fifty-three of them: the
   pilot notices, the contact lines, the register's step labels, the password
   hint, the section headings on the application, and the secondary links on
   every sign-in screen — between 1.06:1 and 1.50:1.
     Patching them one at a time would have meant fifty-three rules and a
   fifty-fourth the next time something is added to a card. The card declares
   its own ink instead, once, and everything inside inherits correctly.
     Scoped to .portal-card deliberately: .portal-aside carries a
   .portal-back-link too and that panel really is dark in every edition, so it
   keeps the pale ink it was written with. */
.portal-card{
  --ink:rgb(var(--lv-cfd,42,28,16));
  --ink-soft:rgba(var(--lv-cf,59,42,29),.82);
  --portal-heading:rgb(var(--lv-cfd,42,28,16));}
.portal-card .portal-back-link{ color:rgb(var(--lv-gt3,99,72,27)); }
.portal-card .portal-back-link:hover,
.portal-card .portal-back-link:focus-visible{ color:rgb(var(--lv-gt,124,84,48)); }
/* Only the card. The same link inside .portal-aside-cta sits on that
   aside's dark panel, where the pale ink it was written with is right —
   a first pass gave it the deep gold too and took it to 2.1:1. */

/* The aside's eyebrow measured 4.22:1 on the aside's own dark panel; a
   little more gold clears it. Scoped to that panel — the same class is
   used on the office index, which is paper, where brightening it took
   it the wrong way. */
.portal-aside .portal-aside-eyebrow{color:#E4C87F!important;}

/* ---- The office index -----------------------------------------------
   The staff office index was written for a dark ground and renders on paper:
   its section headings, its two head links and its eyebrow were all bright
   gold, measuring 1.37:1, 1.46:1 and 1.56:1. Paper gets the deep gold.

   BUT "paper" IS NOT "NOT MIDNIGHT". This block was written as
   :not([data-pc-theme="dark"]), which is the third time in this codebase that
   Royal has been treated as a light edition. Royal's portal ground is dark
   espresso — rgb(41,28,15) sampled from painted pixels — so forcing the deep
   gold there took the section headings to 1.95:1, and the rows beneath them,
   which inherit the portal's ink, to 1.03:1. The whole directory of thirty-two
   offices was unreadable on the edition named after the school.

   The editions whose portal ground is paper are Clear and the no-attribute
   default. They are named by exclusion of BOTH dark grounds, so a future
   edition has to declare which kind it is rather than silently inherit paper. */
html:not([data-pc-theme="dark"]):not([data-pc-theme="royal"]) .office-index-wrap h3,
html:not([data-pc-theme="dark"]):not([data-pc-theme="royal"]) .office-index-wrap .portal-aside-eyebrow,
html:not([data-pc-theme="dark"]):not([data-pc-theme="royal"]) .office-index-wrap p > a{
  color:rgb(var(--lv-gt3,99,72,27))!important;}
html:not([data-pc-theme="dark"]):not([data-pc-theme="royal"]) .office-index-wrap p > a:hover{
  color:rgb(var(--lv-gt,124,84,48))!important;}

/* ===================================================================
   THE COLOPHON HAS ONE GROUND NOW — and the block this replaces
   -------------------------------------------------------------------
   Forty lines stood here restating every colour of the colophon a
   second time, for cream. They were written because the colophon
   really was cream in the Clear edition, and the reason it was is
   that `html[data-pc-theme="light"] footer` in css/prestige.css is a
   TAG selector: written for the marketing footer, which does turn
   pearl, it caught .pch-foot as well. So a dashboard opened with an
   espresso masthead at the top and a cream colophon at the bottom, the
   page changing materials halfway down, and this file spent forty
   lines making the accident legible instead of asking whether it
   should be happening.

   Nothing there read as broken. Every ratio passed — that block was
   added after a sweep found the school's own name at 1.06:1 and fixed
   it honestly. It simply looked cheap, and a contrast audit cannot see
   cheap. It took building the arrival plate and the live panel on top
   of it, and watching them arrive pale-on-cream, to notice that the
   ground underneath had never been intended.

   prestige.css now excludes .pch-foot, so the Digital Campus is
   espresso from its calendar band to its seal, in all three editions,
   and the colophon needs one set of colours rather than two. The forty
   lines are gone; what they were compensating for is gone with them.
   =================================================================== */

/* ===================================================================
   THE TOPBAR MUST NOT COLLIDE
   -------------------------------------------------------------------
   It was one flex row with space-between and nothing allowed to wrap or
   shrink: crest, wordmark, a badge, the theme switch, the language
   globe and the calendar button. On a 390px phone the wordmark ran
   underneath the badge and the badge ran underneath the controls —
   three things occupying the same pixels, which is what the screenshot
   showed. The row now wraps, the wordmark is allowed to shrink, the
   controls travel together as one group, and below 430px the badge —
   the only element of the six carrying no function — stands down.
   =================================================================== */
.portal-topbar{
  flex-wrap:wrap; gap:10px 14px; padding:14px clamp(14px,4vw,28px);
}
.portal-brand{ min-width:0; flex:0 1 auto; }
.portal-brand span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-pilot-badge{ flex:0 0 auto; white-space:nowrap; }
.portal-topbar > .lang-switch-mount{ flex:0 0 auto; margin-inline-start:auto; }
.portal-topbar .lang-switch-mount{ display:inline-flex; align-items:center; gap:8px; }

@media (max-width:640px){
  .portal-brand img{ width:30px; height:30px; }
  .portal-brand span{ font-size:.82rem; letter-spacing:.05em; }
}
@media (max-width:430px){
  .portal-pilot-badge{ display:none; }
  .portal-topbar{ padding:12px 14px; gap:8px 10px; }
}

/* The .pch-adopted rules that stood here — the strip's own plate and, after
   it, six more restating its ink for cream — are gone. Nothing sets that
   class: js/portal-chrome.js stopped inserting the shell's strip whole and
   started moving its two halves into the Verification column and the colophon
   bar, so the strip no longer exists to be styled. Dead rules for a dead
   element, kept alive only by a grep that never found them. */

/* The standalone shell footer, on any portal page the colophon has not
   adopted it into. */
html[data-pc-theme="light"] .portal-shell-footer,
html[data-pc-theme="light"] .portal-shell-footer-links a{ color:rgba(59,42,29,.82); }

/* ---- The state most people actually see -----------------------------
   A portal page that cannot load — signed out, session expired, an office
   you have no access to — is the page a member of staff meets most often,
   and it was the least designed thing in the building: a bare panel with a
   heading, one sentence, and an underlined link, stranded at the top of an
   otherwise empty screen.
     It is given the same materials as everything else here. The crest above
   it, so the page still looks like the school's. A gold rule under the
   heading, which is the site's own way of marking a title. And a way out
   that looks like a control, because it is the only one on the page.
     Scoped to .pch-state, which portal-chrome.js puts on error cards only.
   An earlier draft matched `.portal-card:has(> .portal-back-link)` instead —
   and the full application form on /portal/apply/ has a back-link as a direct
   child, so the whole form was centre-aligned with a crest stuck on top of it.
   A heuristic that catches the wrong card is worse than no treatment at all.
   ------------------------------------------------------------------- */
.pch-state:not([hidden]){
  text-align:center;}
.pch-state::before{
  content:"";display:block;width:52px;height:52px;margin:2px auto 16px;
  background:url("/assets/images/brand-mark.png") center/contain no-repeat;
  opacity:.9;filter:drop-shadow(0 0 12px rgba(233,206,138,.32));}
.pch-state h1{position:relative;padding-bottom:15px;}
.pch-state h1::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:74px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright,#E9CE8A),transparent);}

/* ===================================================================
   THE REGISTRAR'S OFFICE AND THE CERTIFICATE CENTRE —
   THE PUBLIC SITE'S OWN LIGHT, NOT ESPRESSO
   -------------------------------------------------------------------
   Scoped to body:is([data-office-page="registrar"],
   [data-office-page="certificate-centre"]) — two attribute values,
   one on portal/staff/registrar/index.html, the other on
   portal/staff/certificate-centre/index.html, both set deliberately
   rather than inferred from data-atmosphere="registrar" (which
   graduation-control also carries, and which does NOT get this
   treatment — that page still wears the base espresso chrome below).
   This is two offices' furniture, not a rewrite of the chrome the
   other sixty-six pages depend on. The Certificate Centre shares the
   Registrar's own footer and masthead markup byte-for-byte (both come
   from the one mount() in js/portal-chrome.js) and its footer's
   Verification and Campus links are the identical fixed sequence, so
   every rule and every :nth-child icon below applies to both pages
   without change — only the two pages' own page-specific content
   (the pilot badge's text, the body of each page) differs.

   The base chrome above is deliberately espresso in every edition —
   that is the whole point of the "ONE GROUND NOW" block a page up.
   This office asked to leave that ground: ivory and parchment, gold
   hairlines and deep-gold-brown ink, sampled from the school's own
   public masthead and footer rather than invented — the same
   --ivory-bg / --cream-bg / --parchment-bg values css/brand.css
   already declares, and the same ink (#2A1C10, #6B4E22, #8C6834)
   .pch-state's own back-link already uses for the one thing in this
   file that has always stood on cream. Hardcoded rather than read
   from those custom properties, on purpose, matching how the espresso
   ground above is hardcoded too: a visitor's chosen livery must not
   be able to turn this office espresso again, or ivory-on-something-
   the-livery-picked, any more than it could before.

   Every rule below repaints a selector the base chrome already
   states for its dark ground — background, border, text, the gloss
   and grid overlay's own colours — for this light one instead. Two
   new things ride on top of the repaint: a ledger-grid-and-gloss
   overlay (unchanged in technique from the espresso version, only
   retinted) and a grid of bordered tiles for the colophon's link
   columns, in place of a plain list — the layout idea the last round
   of this brief pointed at in Worldwide English College's own
   footer, built here in this school's own materials rather than
   copied in theirs.
   ------------------------------------------------------------------- */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]){
  --rgo-cream-1:rgb(251,246,234); --rgo-cream-2:rgb(247,238,223);
  --rgo-parchment:rgb(241,228,200);
  --rgo-ink:#2A1C10; --rgo-ink-soft:rgba(59,42,29,.74);
  --rgo-gold-deep:#8C6834; --rgo-gold-mid:#6B4E22;
  --rgo-line:rgba(140,104,52,.32);
  /* Royal navy, joining the gold rather than replacing it — a crest is
     traditionally cut in both metals, never one alone. --navy-bg
     elsewhere in this codebase resolves to a warm coffee brown (the
     visitor's chosen livery, see css/liveries.css); these are genuine
     blue, stated once here so every rule below can reach for real
     sapphire without depending on a livery token that was never
     guaranteed to render as blue in the first place. */
  --rgo-navy-deep:#0F2247; --rgo-navy:#1B3A66;
  --rgo-sapphire:#2C5DA8; --rgo-sapphire-bright:#8FB4E8;
}

/* ===================================================================
   THE CERTIFICATE CENTRE'S OWN SECOND METAL
   -------------------------------------------------------------------
   Two sister offices, not one office rendered twice. Both stand on the
   same ivory ground and reach for the same gold, but the Registrar's
   own second colour is a records office's navy; the Certificate Centre
   issues sealed, signed documents, and its own second colour is the
   deep crimson of a wax seal instead — the --rgo-sapphire/--rgo-navy
   custom properties are simply redefined here, later in the cascade
   and at equal specificity to the shared block above (body[attr] vs
   body:is([attr],[attr]) — one attribute selector either way, so
   source order decides), so every rule already written against those
   two names — the travelling card frame, the child-head accent bar —
   repaints itself in the Certificate Centre's own colour without a
   second copy of any of them. */
body[data-office-page="certificate-centre"]{
  --rgo-navy-deep:#4A0E14; --rgo-navy:#7A2530;
  --rgo-sapphire:#A02638; --rgo-sapphire-bright:#E5A8AF;
}

/* ---- The page itself, not just its chrome ---------------------------
   The ivory masthead and colophon were landing on the espresso ground
   css/prestige.css's own body.portal-body{...} paints underneath them
   — unconditionally, in every edition, for the same reason the base
   chrome above used to be espresso too. The seam was the actual
   complaint: a light bar, a dark room, a light bar again.
     Fixed the same way .portal-card re-inks its own contents a few
   hundred lines up in this file — not by chasing every element that
   sits directly on the page (the hero title, the section dividers,
   the eyebrow lines) with an individual override, but by redeclaring
   the custom properties they already read (--ink, --ink-soft,
   --portal-heading, --ivory, --milk, --line) so all of them re-ink at
   once, the same way every element inside .portal-card already does.
   !important, and not by choice: the default theme (js/portal-theme.js,
   'royal' when no preference is stored) stamps data-pc-theme="royal" on
   <html> before first paint, and :root[data-pc-theme="royal"] .portal-
   body in css/portal.css sets these same custom properties for that
   theme — two compound selectors joined by a descendant combinator, which
   out-specifies this rule's one compound selector even with the
   attribute qualifier added. Measured, not assumed: the pale ink was
   still showing on .cc-greeting and .portal-hello-sub without this. */
body.portal-body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]){
  --ink:var(--rgo-ink) !important; --ink-soft:var(--rgo-ink-soft) !important;
  --portal-heading:var(--rgo-gold-deep) !important;
  --ivory:var(--rgo-cream-1) !important; --milk:var(--rgo-cream-2) !important;
  --line:var(--rgo-line) !important;
  background:
    radial-gradient(1200px 620px at 78% -12%,rgba(198,161,91,.16),transparent 62%),
    radial-gradient(900px 500px at 8% 108%,rgba(198,161,91,.10),transparent 60%),
    linear-gradient(180deg,var(--rgo-cream-1) 0%,var(--rgo-parchment) 100%);
  color:var(--rgo-ink);}

/* ---- The surfaces, repainted ---------------------------------------- */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip{
  background:linear-gradient(180deg,var(--rgo-cream-2) 0%,var(--rgo-parchment) 100%);
  border-bottom:1px solid var(--rgo-line);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip::after{
  background:linear-gradient(90deg,transparent,rgba(140,104,52,.4) 30%,rgba(140,104,52,.4) 70%,transparent);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar.pch-mast{
  background:
    radial-gradient(700px 160px at 50% -60%,rgba(198,161,91,.16),transparent 74%),
    linear-gradient(180deg,var(--rgo-cream-1) 0%,var(--rgo-cream-2) 100%)!important;
  border-bottom:1px solid var(--rgo-line)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.7),0 14px 30px -26px rgba(60,40,20,.22)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast > .pch-utility{
  background:linear-gradient(180deg,rgba(140,104,52,.06),rgba(140,104,52,0));
  border-top:1px solid var(--rgo-line);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar::after{
  background:linear-gradient(90deg,transparent,rgba(140,104,52,.55) 16%,
    rgba(140,104,52,.95) 50%,rgba(140,104,52,.55) 84%,transparent);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot{
  background:
    radial-gradient(1000px 280px at 50% -8%,rgba(198,161,91,.16),transparent 68%),
    linear-gradient(180deg,var(--rgo-cream-2) 0%,var(--rgo-parchment) 100%);
  border-top:1px solid var(--rgo-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival{
  background:
    radial-gradient(560px 180px at 50% 0%,rgba(198,161,91,.14),transparent 72%),
    linear-gradient(168deg,rgba(255,255,255,.68),rgba(233,206,138,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px var(--rgo-line),
    0 30px 60px -32px rgba(60,40,20,.4);
  border-color:var(--rgo-line);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::before{
  content:"";position:absolute;inset:5px;z-index:-1;pointer-events:none;
  border:1px solid rgba(140,104,52,.16);border-radius:2px;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now{
  background:linear-gradient(168deg,rgba(255,255,255,.72),rgba(233,206,138,.14));
  border-color:var(--rgo-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 26px 52px -30px rgba(60,40,20,.35);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-head{border-bottom-color:var(--rgo-line);}
@media (min-width:821px){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-cell:not(:first-child){
    border-inline-start:1px solid var(--rgo-line);padding-inline-start:20px;}
}

/* ---- The ink -------------------------------------------------------- */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip-item{color:var(--rgo-ink-soft);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip-icon{opacity:.62;color:var(--rgo-gold-deep);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip-sep{
  background:linear-gradient(180deg,transparent,rgba(140,104,52,.4),transparent);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip-link:hover,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip-link:focus-visible{color:var(--rgo-ink);}

body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-brand .line1{
  background-image:linear-gradient(100deg,var(--rgo-ink) 30%,var(--rgo-gold-deep) 45%,var(--rgo-ink) 60%)!important;}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-brand .line1{
    background:none!important;-webkit-text-fill-color:var(--rgo-ink)!important;color:var(--rgo-ink)!important;}
}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-brand .line2{color:var(--rgo-gold-mid)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-brand > span:not(.brand-text):not(.crest-shimmer-wrap){
  color:var(--rgo-ink)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar-link{color:var(--rgo-ink-soft)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar-link:hover{color:var(--rgo-ink)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast .portal-topbar-link{
  color:var(--rgo-gold-mid);border-color:var(--rgo-line);
  background:linear-gradient(168deg,rgba(255,255,255,.7),rgba(233,206,138,.08));
  box-shadow:0 3px 9px -6px rgba(107,78,34,.4),inset 0 1px 0 rgba(255,255,255,.75);
  transition:border-color .3s ease,background .3s ease,color .3s ease,
    transform .3s ease,box-shadow .3s ease;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast .portal-topbar-link:hover,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast .portal-topbar-link:focus-visible{
  border-color:rgba(140,104,52,.6);background:rgba(233,206,138,.2);
  color:var(--rgo-ink)!important;
  box-shadow:0 8px 16px -8px rgba(107,78,34,.5),inset 0 1px 0 rgba(255,255,255,.75);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast > .portal-topbar-calendar{
  color:var(--rgo-gold-mid)!important;border-color:var(--rgo-line)!important;
  background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(233,206,138,.08));}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar-calendar:hover{
  color:var(--rgo-ink)!important;border-color:rgba(140,104,52,.7)!important;
  background:rgba(233,206,138,.16);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar .portal-theme-toggle{
  background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(233,206,138,.08))!important;
  border-color:var(--rgo-line)!important;color:var(--rgo-gold-mid)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar .portal-theme-toggle:hover,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar .portal-theme-toggle:focus-visible{
  background:rgba(233,206,138,.2)!important;border-color:rgba(140,104,52,.7)!important;
  color:var(--rgo-ink)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar .lang-switch > summary{
  color:var(--rgo-gold-mid)!important;border-color:var(--rgo-line)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-topbar .lang-switch > summary:hover{
  color:var(--rgo-ink)!important;border-color:rgba(140,104,52,.7)!important;
  background:rgba(233,206,138,.16);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-logout{
  border-color:var(--rgo-line)!important;
  background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(233,206,138,.08))!important;
  color:var(--rgo-gold-mid)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-logout:hover{
  border-color:#C6A15B!important;color:#1A1006!important;
  background:linear-gradient(135deg,#C6A15B,#E9CE8A)!important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-standing{color:var(--rgo-gold-mid);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-standing::before,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-standing::after{
  background:linear-gradient(90deg,transparent,rgba(140,104,52,.55));}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-standing::after{
  background:linear-gradient(270deg,transparent,rgba(140,104,52,.55));}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-standing-d{color:rgba(140,104,52,.7);}

body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-statement{color:var(--rgo-ink);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mark,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-corner{color:rgba(140,104,52,.6);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-eyebrow{color:var(--rgo-gold-deep);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-place,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-sub{color:var(--rgo-ink-soft);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-clock,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-hours,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-state{color:var(--rgo-ink);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-dot{background:rgba(59,42,29,.3);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-link{
  color:var(--rgo-gold-deep);border-color:rgba(140,104,52,.4);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-link:hover,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now-link:focus-visible{
  color:var(--rgo-ink);border-color:var(--rgo-gold-deep);}

body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-h{color:var(--rgo-gold-deep);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-h::after{
  background:linear-gradient(90deg,rgba(140,104,52,.5),rgba(140,104,52,.05));}
[dir="rtl"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-h::after{
  background:linear-gradient(270deg,rgba(140,104,52,.5),rgba(140,104,52,.05));}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot-name{color:var(--rgo-ink);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot-sig,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-meta,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-note{color:var(--rgo-ink-soft);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-rule{
  background:linear-gradient(90deg,transparent,rgba(140,104,52,.4) 20%,
    rgba(140,104,52,.7) 50%,rgba(140,104,52,.4) 80%,transparent);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-badge{
  color:var(--rgo-gold-mid);border-color:rgba(140,104,52,.4);
  background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(233,206,138,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-crest{
  filter:drop-shadow(0 0 12px rgba(198,161,91,.4));}

/* ---- The colophon, as floating cards with a glossy grid of tiles ----
   The first pass matched the public site's own footer, which lays its
   columns flat on one ground with no card of their own — correct for
   that page, and exactly what read as thin here once seen beside
   Worldwide English College's footer, where each section is its own
   bright panel lifted off the navy behind it. That lift is the piece
   worth taking: not WEC's navy (this office's ground stays the ivory
   the public masthead already stands on — the brief before this one
   was explicit that brown, in any depth, does not come back), but the
   contrast of a brighter card sitting on top of it with real shadow
   under it, and — inside that card — a grid of tiles with their own
   glossy badge rather than a flat list.
     The badge is a drawn circle, layered like a cast disc: a bright
   highlight near the top-left, a metal gradient under it, a hairline
   rim, and a shadow that lifts it off the tile — the same layering a
   pressed coin or a wax seal actually has, not a flat dot standing in
   for one. A small drawn check sits inside it rather than a fetched
   icon, keeping the file's own habit (.pch-mark, .pch-corner) of
   small SVG-or-CSS marks over an icon font — and reading, on a page
   of verification tools, as what these links actually do: confirm. */
/* Full-width stacked sections rather than three columns shoulder to
   shoulder — the piece of WEC's own footer this was still missing.
   Their EXPLORE FURTHER, STUDY, ADMISSIONS and so on are not one of
   several narrow columns in a row; each is its own full-width card,
   and the tiles inside it run in as wide a grid as the card allows.
   Three columns cannot carry that — a column a third of 1180px has no
   room for a six-wide grid — so the brand plate, Verification and
   Campus now stack, each the full width of the footer. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot-inner{
  grid-template-columns:minmax(0,1fr);gap:20px;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col{
  padding:24px 26px 28px;border-radius:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  box-shadow:
    0 26px 50px -32px rgba(60,40,20,.4),
    0 0 0 1px var(--rgo-line),
    inset 0 1px 0 rgba(255,255,255,.85);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col-brand{grid-column:auto;}
/* A glass sheen crossing each card, on top of the content rather than
   behind it — the way a highlight crosses a photograph under real
   glass, not a texture painted onto the card's surface. Kept faint
   (peak alpha .5, overlay-blended) so it reads as glazing rather than
   as fog sitting over the tiles. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col{position:relative;isolation:isolate;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;mix-blend-mode:overlay;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.28) 46%,
    rgba(255,255,255,.5) 50%,rgba(255,255,255,.28) 54%,transparent 68%);
  background-size:260% 260%;background-position:135% -25%;
  animation:pchCardGlass 12s ease-in-out infinite;}
@keyframes pchCardGlass{
  0%,22%{background-position:135% -25%;}
  62%,100%{background-position:-35% 65%;}
}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col::before{animation:none;opacity:.5;}
}
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-col::before{
  animation:none;opacity:.5;}

/* A small mark beside each section heading — the file's own diamond
   (see .pch-mark) rather than WEC's icon-in-a-circle, so the heading
   stays in this file's language while still announcing the section
   the way theirs does. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-h{
  display:flex;align-items:center;gap:9px;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-h::before{
  content:"";flex:0 0 auto;width:9px;height:9px;transform:rotate(45deg);
  background:
    linear-gradient(135deg,rgba(255,255,255,.9) 0%,transparent 38%),
    linear-gradient(155deg,#F3DFA0,#C6A15B 55%,#8C6834 100%);
  box-shadow:0 0 6px 0 rgba(140,104,52,.55),inset 0 0 0 1px rgba(255,255,255,.4);}

/* The tiles: icon above, label below, centred — WEC's own tile shape —
   in a grid wide enough to run six or more across the full-width card
   rather than the two a narrow column allowed. auto-fit rather than
   auto-fill so four tiles (Verification, Campus) stretch to fill the
   row exactly as WEC's own four-tile GET IN TOUCH section does, instead
   of leaving empty track width unclaimed at the row's end. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:18px 12px;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:12px;width:auto;text-align:center;
  padding:22px 10px 15px;border-radius:14px;border:1px solid var(--rgo-line);
  color:var(--rgo-ink-soft);font-size:.76rem;font-weight:600;line-height:1.35;
  letter-spacing:.005em;
  background:linear-gradient(168deg,rgba(255,255,255,.72),rgba(233,206,138,.08));
  box-shadow:0 4px 12px -8px rgba(107,78,34,.4),inset 0 1px 0 rgba(255,255,255,.78);
  transition:border-color .3s ease,background .3s ease,transform .3s ease,
    color .3s ease,box-shadow .3s ease;}

/* ---- The vessel: a worked-metal badge with its own travelling light -
   Not a flat dot standing in for an icon, and not one icon standing in
   for every link either — that was the actual complaint. Each link
   below sets --pch-icon to its own drawn glyph (a seal, a passport, a
   lock — the same "one hand drew the whole set" discipline WEC's own
   sprite in partials/icons.html uses: 24x24, a single stroke weight,
   no fills), and every link shares the one badge and ring rule that
   reads it. This school's own gold-on-bronze in place of WEC's navy-
   and-sapphire dome, since the ground here stays this office's own
   material — but the same construction: a domed disc with a bevel and
   a specular sweep, and, orbiting it, one travelling arc of light,
   the way WEC's own .vessel::before is a comet circling the frame
   rather than a static ring. WEC runs two counter-rotating arcs per
   badge (.vessel::before and ::after); a link here only has ::before
   and ::after between them and ::after already carries the arc, so
   this is the one arc rather than two — the same idea at one remove,
   not a shortcut taken silently. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link{
  --pch-dome-hi:#EAD09A; --pch-dome-mid:#C6A15B; --pch-dome-lo:#7A5A28;
  --pch-ring-soft:rgba(212,175,55,.5); --pch-ring-mid:#D4AF37; --pch-ring-peak:#FFF6DA;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link::before{
  content:"";flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  background-image:
    var(--pch-icon,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10Z'/%3E%3C/svg%3E"),
    linear-gradient(128deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.16) 22%,
      transparent 46%,transparent 60%,rgba(0,0,0,.24) 100%),
    radial-gradient(circle at 32% 24%,var(--pch-dome-hi) 0%,var(--pch-dome-mid) 55%,var(--pch-dome-lo) 100%);
  background-repeat:no-repeat;background-position:center,top 4px right 6px,center,center;
  background-size:23px 23px,10px 10px,100% 100%,100% 100%;
  background-blend-mode:normal,screen,overlay,normal;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.42),
    inset 0 -4px 6px rgba(90,62,20,.4),
    0 6px 12px -7px rgba(60,40,20,.55),
    0 0 0 1.5px rgba(140,104,52,.35),
    0 0 0 4.5px rgba(255,255,255,.6),
    0 0 0 6px rgba(140,104,52,.28);}
/* The bezel above reads as a medal's edge; the ring below is the light
   that moves round it — sized and centred to that 54px badge plus its
   6px bezel (66px), not to the tile. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link::after{
  content:"";position:absolute;top:15px;left:50%;margin-left:-36px;
  width:72px;height:72px;border-radius:50%;padding:2.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background:conic-gradient(from 0deg,
    transparent 0deg,transparent 230deg,
    var(--pch-ring-soft) 250deg,var(--pch-ring-mid) 285deg,var(--pch-ring-peak) 320deg,
    var(--pch-ring-mid) 345deg,var(--pch-ring-soft) 358deg,transparent 360deg);
  filter:blur(.7px) drop-shadow(0 0 4px var(--pch-ring-soft));
  animation:pchVesselSpin 4.5s linear infinite;}
@keyframes pchVesselSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link::after{animation:none;opacity:.75;}
}
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link::after{
  animation:none;opacity:.75;}

/* A royal treasury does not set every stone in the same metal: three of
   the eight badges below are cut in sapphire, emerald and ruby rather
   than gold, gold staying the majority so the office still reads as
   itself rather than a gem sampler. Picked by what the link actually
   is, not at random — the lock (data protection) in a warning-adjacent
   but still jewelled ruby, the receipt (a paid, settled record) in
   emerald, identity verification in sapphire, the trust colour for an
   ID document. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(2){
  --pch-dome-hi:#B7D3F5; --pch-dome-mid:#3E6FB8; --pch-dome-lo:#16305A;
  --pch-ring-soft:rgba(111,168,232,.5); --pch-ring-mid:#6FA8E8; --pch-ring-peak:#EAF3FF;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(3){
  --pch-dome-hi:#B9E7CB; --pch-dome-mid:#3F9564; --pch-dome-lo:#173D28;
  --pch-ring-soft:rgba(89,194,137,.5); --pch-ring-mid:#59C289; --pch-ring-peak:#EAFBF1;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(4){
  --pch-dome-hi:#F3B9BE; --pch-dome-mid:#B23A46; --pch-dome-lo:#4E1319;
  --pch-ring-soft:rgba(216,93,104,.5); --pch-ring-mid:#D85D68; --pch-ring-peak:#FFE9EB;}

/* Verification: seal, passport, receipt, lock — fixed order, since
   js/portal-shell.js always writes Certificate / Identity / Receipt /
   Data Protection Notice in that sequence before portal-chrome.js
   moves them into [data-pch-verify]. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(1){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.2'/%3E%3Ccircle cx='12' cy='9.5' r='3.1'/%3E%3Cpath d='M8.3 15 7 21.5l5-2.4 5 2.4L15.7 15'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(2){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.2'/%3E%3Ccircle cx='12' cy='9.5' r='3'/%3E%3Cpath d='M8.3 16h7.4'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(3){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v16l-1.5-1.2L15 19l-1.5-1.2L12 19l-1.5-1.2L9 19l-1.5-1.2L6 19Z'/%3E%3Cpath d='M9 8h6M9 11.5h6'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) [data-pch-verify] .pch-link:nth-child(4){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='11' width='13' height='9.5' rx='1.4'/%3E%3Cpath d='M8.2 11V8a3.8 3.8 0 0 1 7.6 0v3'/%3E%3Ccircle cx='12' cy='15.3' r='1.4'/%3E%3Cpath d='M12 16.7v2'/%3E%3C/svg%3E");}

/* Campus: portico, globe, envelope, columns — fixed order, written
   directly in the markup above (Gateway, Main site, Contact, Policies).
   Targeted by :not([data-pch-verify]) since it is the one .pch-list
   that never carries that attribute. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-list:not([data-pch-verify]) .pch-link:nth-child(1){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 3l9 5.5'/%3E%3Cpath d='M5 8.5V20M9.3 8.5V20M14.7 8.5V20M19 8.5V20'/%3E%3Cpath d='M3 21.5h18M4 20h16'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-list:not([data-pch-verify]) .pch-link:nth-child(2){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.5 3.8 5.6 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.6-3.8-9S9.5 5.5 12 3Z'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-list:not([data-pch-verify]) .pch-link:nth-child(3){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1'/%3E%3Cpath d='m3.4 6 8.6 6.8L20.6 6'/%3E%3C/svg%3E");}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-list:not([data-pch-verify]) .pch-link:nth-child(4){
  --pch-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFBEF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.6h18M4.5 21h15'/%3E%3Cpath d='M6.5 6.6V19M12 6.6V19M17.5 6.6V19'/%3E%3Cpath d='M3 6.6 12 2.6l9 4'/%3E%3C/svg%3E");}

body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link:hover,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-link:focus-visible{
  color:var(--rgo-ink);border-color:rgba(140,104,52,.6);
  background:rgba(233,206,138,.22);transform:translateY(-3px);
  box-shadow:0 16px 26px -14px rgba(107,78,34,.5),inset 0 1px 0 rgba(255,255,255,.78);}

/* ---- The ledger grid and gloss sweep, retinted for ivory ------------
   Same technique as the espresso version this replaces — one
   pseudo-element per surface at z-index:-1, painted above that
   surface's own background and below its real content — only the
   colour stops change: a warm gold sheen in place of a near-white one
   (near-white read as a glossy highlight against espresso; against
   ivory it would all but disappear), and slightly higher-opacity grid
   hairlines, since gold-on-cream carries less contrast than gold-on-
   espresso did. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now{isolation:isolate;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip::before,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast::before,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot::after,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::after,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(115deg,transparent 40%,rgba(140,104,52,.07) 48%,
      rgba(140,104,52,.13) 50%,rgba(140,104,52,.07) 52%,transparent 60%),
    linear-gradient(rgba(140,104,52,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,104,52,.06) 1px,transparent 1px);
  background-size:240% 240%,34px 34px,34px 34px;
  background-position:140% -40%,0 0,0 0;
  animation:pchRegistrarGloss 10s ease-in-out infinite;
}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot::after,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::after,
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::after{animation-duration:13s;animation-delay:.6s;}
@keyframes pchRegistrarGloss{
  0%,18%{background-position:140% -40%,0 0,0 0;}
  62%,100%{background-position:-40% 70%,0 0,0 0;}
}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip::before,
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast::before,
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot::after,
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::after,
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::after{
    animation:none;
    background-image:
      linear-gradient(rgba(140,104,52,.065) 1px,transparent 1px),
      linear-gradient(90deg,rgba(140,104,52,.06) 1px,transparent 1px);
    background-size:34px 34px,34px 34px;background-position:0 0,0 0;}
}
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-strip::before,
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-mast::before,
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-foot::after,
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::after,
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::after{
  animation:none;
  background-image:
    linear-gradient(rgba(140,104,52,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,104,52,.06) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;background-position:0 0,0 0;}

/* ---- The office's own badge, sealed rather than flat ----------------
   Already an opaque gold pill, so it stands on ivory exactly as it
   stood on espresso — only the outer ring is deepened slightly, since
   a pale cream ring on pale cream ground read as almost no ring here. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-pilot-badge{
  position:relative;padding-inline-start:26px;
  background:linear-gradient(135deg,#F3DFA0,#C6A15B,#9C7A3C)!important;
  border-color:rgba(107,78,34,.5)!important;
  box-shadow:
    0 6px 16px -8px rgba(140,100,40,.75),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,246,223,.4);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-pilot-badge::before{
  content:"";position:absolute;inset-inline-start:11px;top:50%;
  width:6px;height:6px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%,#FFF6DF,#8C6834 78%);
  box-shadow:0 0 6px 1px rgba(233,206,138,.7);}
[dir="rtl"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-pilot-badge{
  padding-inline-start:14px;padding-inline-end:26px;}
[dir="rtl"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-pilot-badge::before{
  inset-inline-start:auto;inset-inline-end:11px;}

/* ===================================================================
   THE TRAVELLING LIGHT, PAST THE FOOTER — ON EVERY CARD IN THE ROOM
   -------------------------------------------------------------------
   The footer's badges got a ring; the body's own cards — Look Up a
   Student, Enrol from Admissions, every .portal-child-card on both
   pages — still had a static edge.
     The first version of this carried the badge's own conic-gradient
   ring straight up to card scale, and it was wrong the moment it
   rendered: a conic gradient is a polar shape, drawn as true rings only
   on a box close to square, and a card here runs five, eight, ten times
   wider than it is tall. Stretched that far the "ring" stopped reading
   as one at all — it showed as a single hard diagonal streak, the same
   wedge fault WEC's own css/brand.css documents at .vessel::before
   ("a conic gradient fills its whole box from the centre outward... a
   PIE SLICE"), arrived at by a different road (aspect ratio, not a
   broken mask) but visually the same failure. Caught in a screenshot of
   the actual card, not assumed to work because the identical technique
   worked on the circular badges above.
     A travelling LINEAR gradient in its place: two short bands, gold
   and sapphire, swept along the frame by animating background-position
   the same way .pch-col's own glass sheen already does a few hundred
   lines up — a technique with no polar coordinates to distort on a wide
   box. Masked to the frame with the same content-box/border-box
   exclude trick as the badge ring, so it still reads as light moving
   round an edge rather than across a surface.
     inset:-3px rather than a fixed pixel size: unlike the footer's
   fixed-diameter badges, these cards vary in height page to page, so
   the frame has to scale to whatever box it is drawn on. .portal-
   child-card already draws its own inset bevel on ::after (see
   css/portal.css, "a faint engraved bevel line set slightly inside the
   card edge") — this uses ::before instead, unclaimed until now. Every
   card also gets a small cast-gold diamond on its own head, echoing the
   colophon's section-heading mark at working scale. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-card{
  isolation:isolate;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-card::before{
  content:"";position:absolute;inset:-3px;z-index:2;border-radius:inherit;
  padding:2.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-image:linear-gradient(90deg,
    transparent 0%,transparent 4%,
    rgba(44,93,168,.2) 8%,var(--rgo-sapphire) 11%,#CFE0F7 13%,var(--rgo-sapphire) 15%,rgba(44,93,168,.2) 18%,
    transparent 24%,transparent 60%,
    rgba(140,104,52,.22) 65%,#D4AF37 69%,#FFF6DA 72%,#D4AF37 75%,rgba(140,104,52,.22) 79%,
    transparent 85%,transparent 100%);
  background-size:280% 100%;background-position:280% 0;
  filter:drop-shadow(0 0 3px rgba(44,93,168,.22));
  animation:pchFrameTravel 9s linear infinite;}
@keyframes pchFrameTravel{to{background-position:-280% 0;}}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-card::before{
    animation:none;opacity:.7;background-position:0 0;}
}
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-card::before{
  animation:none;opacity:.7;background-position:0 0;}

/* The head's own accent bar, restated in real navy rather than the
   brown --navy-bg resolves to elsewhere — the one place on the card a
   solid block of the second metal belongs, since a ring already
   carries the travelling version of it — and a small gold diamond at
   the head's trailing edge, .portal-child-head's own ::after being
   free (only ::before, the accent bar itself, was claimed). */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head{
  position:relative;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head::before{
  background:linear-gradient(180deg,#E9CE8A 0%,var(--rgo-navy) 100%);}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head::after{
  content:"";position:absolute;inset-inline-end:26px;top:50%;
  width:10px;height:10px;transform:translateY(-50%) rotate(45deg);
  background:
    linear-gradient(135deg,rgba(255,255,255,.9) 0%,transparent 38%),
    linear-gradient(155deg,#F3DFA0,#C6A15B 55%,#8C6834 100%);
  box-shadow:0 0 7px 0 rgba(140,104,52,.55),inset 0 0 0 1px rgba(255,255,255,.4);}
[dir="rtl"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head::after{
  inset-inline-end:auto;inset-inline-start:26px;}

/* The arrival plate's inner frame, and the live-hours panel's own
   previously-unclaimed ::before, take the same travelling linear frame
   as the cards above rather than the conic ring — both are wide,
   short panels, exactly the aspect ratio the conic version broke on. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::before{
  inset:5px;padding:2px;border:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-image:linear-gradient(90deg,
    transparent 0%,transparent 4%,
    rgba(44,93,168,.2) 8%,var(--rgo-sapphire) 11%,#CFE0F7 13%,var(--rgo-sapphire) 15%,rgba(44,93,168,.2) 18%,
    transparent 24%,transparent 60%,
    rgba(140,104,52,.22) 65%,#D4AF37 69%,#FFF6DA 72%,#D4AF37 75%,rgba(140,104,52,.22) 79%,
    transparent 85%,transparent 100%);
  background-size:280% 100%;background-position:280% 0;
  filter:drop-shadow(0 0 3px rgba(44,93,168,.22));
  animation:pchFrameTravel 9s linear infinite;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::before{
  content:"";position:absolute;inset:4px;border-radius:inherit;padding:2px;
  pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-image:linear-gradient(90deg,
    transparent 0%,transparent 4%,
    rgba(140,104,52,.22) 8%,#D4AF37 11%,#FFF6DA 13%,#D4AF37 15%,rgba(140,104,52,.22) 18%,
    transparent 24%,transparent 60%,
    rgba(44,93,168,.2) 65%,var(--rgo-sapphire) 69%,#CFE0F7 72%,var(--rgo-sapphire) 75%,rgba(44,93,168,.2) 79%,
    transparent 85%,transparent 100%);
  background-size:280% 100%;background-position:-280% 0;
  filter:drop-shadow(0 0 3px rgba(140,104,52,.22));
  animation:pchFrameTravelRev 11s linear infinite;}
@keyframes pchFrameTravelRev{to{background-position:280% 0;}}
@media (prefers-reduced-motion:reduce){
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::before,
  body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::before{
    animation:none;opacity:.7;background-position:0 0;}
}
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-arrival::before,
html[data-pc-motion="reduced"] body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .pch-now::before{
  animation:none;opacity:.7;background-position:0 0;}

/* ===================================================================
   THE CERTIFICATE CENTRE, CINEMATICALLY — ITS OWN ENTRANCE
   -------------------------------------------------------------------
   Two sister offices sharing one construction (the ivory ground, the
   badge, the travelling frame) is not the same as two offices that
   look interchangeable. This office issues sealed documents, and gets
   an entrance built on that: the wordmark catches a single pass of ink
   light on load, the cards settle into place the way a stack of
   freshly pressed certificates does rather than simply appearing, and
   each card's own diamond arrives a half-beat later as a seal actually
   struck — an impact with a little overshoot and settle, not a fade.
     One-shot animations, all of them, played once on load rather than
   looped — a working dashboard staff open forty times a day should not
   perform for them every time; the first arrival is the moment worth
   the show. All three respect prefers-reduced-motion and the site's
   own html[data-pc-motion="reduced"] toggle by simply not animating
   the entrance is not a loss of content, only of the choreography.
   =================================================================== */

/* The wordmark: one slow pass of light, like foil catching light as a
   fresh certificate is turned toward it. */
body[data-office-page="certificate-centre"] .portal-hello{
  background-image:linear-gradient(100deg,
    var(--rgo-ink) 35%,var(--rgo-gold-deep) 48%,#FFF6DA 52%,var(--rgo-gold-deep) 56%,var(--rgo-ink) 68%);
  background-size:320% 100%;background-position:150% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:pchInkPass 2.4s cubic-bezier(.3,.1,.2,1) .3s 1 backwards;}
@keyframes pchInkPass{
  0%{background-position:150% 0;}
  100%{background-position:-90% 0;}
}
@media (prefers-reduced-motion:reduce){
  body[data-office-page="certificate-centre"] .portal-hello{
    animation:none;background:none;-webkit-text-fill-color:var(--rgo-ink);color:var(--rgo-ink);}
}
html[data-pc-motion="reduced"] body[data-office-page="certificate-centre"] .portal-hello{
  animation:none;background:none;-webkit-text-fill-color:var(--rgo-ink);color:var(--rgo-ink);}

/* The cards: settling into place as each one is actually scrolled to,
   not on a fixed page-load clock.
     The first version of this staggered by :nth-of-type, and it was
   wrong for two separate reasons, both caught by inspecting the
   computed animation-delay in a browser rather than trusting the
   selectors on paper. First: :nth-of-type counts a DIV's position
   among ALL sibling <div>s sharing its parent, by tag alone — it does
   not filter by .portal-child-card first. Every card on this page sits
   inside its own numbered section (1 — Batch Setup, 2 — Student
   Roster...) with its own heading and paragraph divs ahead of it, so
   each card's real sibling-of-type position was nowhere near 1, 2, 3;
   one measured at 7+ and silently fell into the catch-all delay.
   Second, and worse even if the count had been right: a fixed delay
   from page load fires and finishes for every card immediately,
   including the ones several sections below the fold that a reader has
   not scrolled to yet — by the time they arrive, the entrance already
   played to an empty viewport.
     animation-timeline:view() fixes both at once: each card's entrance
   is driven by ITS OWN visibility crossing the viewport, not by
   counting siblings, and it only plays once that card is actually
   coming into view — a reader scrolling down through Batch Setup,
   Student Roster and the rest sees each section arrive as they reach
   it, which is the effect a fixed page-load stagger was only ever
   approximating for whatever happened to be above the fold. Guarded by
   @supports: browsers without scroll-driven animations (Safari and
   older Firefox, at the time this was written) simply render every
   card in its resting state with no animation, rather than a broken
   or unsupported declaration doing something stranger. */
@supports (animation-timeline:view()){
  body[data-office-page="certificate-centre"] .portal-child-card{
    animation:pchSealDrop .6s cubic-bezier(.16,.8,.24,1) both;
    animation-timeline:view();animation-range:entry 0% cover 35%;}
  body[data-office-page="certificate-centre"] .portal-child-head::after{
    animation:pchStampImpact .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-timeline:view();animation-range:entry 8% cover 42%;}
}
@keyframes pchSealDrop{
  0%{opacity:0;transform:translateY(20px) scale(.97);}
  62%{opacity:1;transform:translateY(-3px) scale(1.006);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes pchStampImpact{
  0%{opacity:0;transform:translateY(-50%) rotate(45deg) scale(2.4);}
  55%{opacity:1;transform:translateY(-50%) rotate(45deg) scale(.82);}
  100%{opacity:1;transform:translateY(-50%) rotate(45deg) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  body[data-office-page="certificate-centre"] .portal-child-card,
  body[data-office-page="certificate-centre"] .portal-child-head::after{animation:none;}
}
html[data-pc-motion="reduced"] body[data-office-page="certificate-centre"] .portal-child-card,
html[data-pc-motion="reduced"] body[data-office-page="certificate-centre"] .portal-child-head::after{animation:none;}

/* The one control on the page reads as one. */
.pch-state .portal-back-link{
  display:inline-flex;align-items:center;gap:9px;width:auto;margin:22px auto 0;
  font-family:var(--font-label,'Cinzel',serif);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;text-decoration:none;
  padding:11px 22px;border-radius:99px;
  /* The card's plate is cream in every edition (see the note in
     css/prestige.css beside .portal-card .sub), so this control is stated once
     against cream rather than once per theme. */
  color:#6B4E22;
  border:1px solid rgba(140,104,52,.45);
  background:linear-gradient(168deg,rgba(255,255,255,.6),rgba(255,255,255,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .3s ease,background .3s ease,transform .3s ease,color .3s ease;}
.pch-state .portal-back-link:hover,
.pch-state .portal-back-link:focus-visible{
  color:#3B2A1D;border-color:rgba(140,104,52,.85);
  background:rgba(255,255,255,.9);transform:translateY(-1px);}

/* ── Module-body legibility (Office elevation pass) ──────────────────
   At rest, the card's dark-to-ivory gradient put the first rows of
   body text — field labels above all — on the DARK span, at unreadable
   contrast (measured on the live capture). The head keeps its dark
   worked-metal band; everything beneath it now sits on solid parchment
   with full-ink text. !important matches the re-inking layer above,
   which this must override at equal specificity. */
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-card{
  background:linear-gradient(180deg,var(--rgo-cream-2) 0%,var(--rgo-cream-1) 100%) !important;
  color:var(--rgo-ink) !important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head{
  background:linear-gradient(172deg,#241606 0%,#191006 70%,#20130A 100%) !important;
  border-bottom:1px solid rgba(198,161,91,.5) !important;}
body:is([data-office-page="registrar"],[data-office-page="certificate-centre"]) .portal-child-head h2{
  color:#F3DFAE !important;}