/* ===================================================================
   THE READER
   -------------------------------------------------------------------
   A bar pinned to the foot of the window while a page is being read
   aloud, and a lit passage in the page itself so a reader can follow
   with their eyes. Both take the livery's own gold; neither exists
   until the reader asks for one.
   =================================================================== */

.lsn-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:340;pointer-events:none;
  transform:translateY(110%);transition:transform .42s cubic-bezier(.16,.8,.24,1);}
.lsn-bar.is-open{transform:translateY(0);}
html[data-pc-motion="reduced"] .lsn-bar{transition:none;}

.lsn-inner{
  pointer-events:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:1180px;margin:0 auto 14px;padding:12px 18px;
  border-radius:var(--pr-r-lg,18px);
  background:linear-gradient(168deg,
    rgb(var(--lv-cfd2,42,28,16)) 0%,rgb(var(--lv-cfd4,26,16,6)) 100%);
  border:1px solid rgba(var(--lv-gb,233,206,138),.42);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(var(--lv-gb,233,206,138),.22);
  color:rgb(var(--lv-p3,247,238,223));}
@media (max-width:620px){
  .lsn-inner{margin-inline:12px;gap:10px;padding:10px 12px;}
  .lsn-rate{display:none;}
}

/* The five bars of a level meter, still until it speaks. */
.lsn-wave{display:inline-flex;align-items:flex-end;gap:3px;height:18px;flex-shrink:0;}
.lsn-wave i{
  display:block;width:3px;height:5px;border-radius:2px;
  background:linear-gradient(180deg,rgb(var(--lv-gl,255,246,223)),rgb(var(--lv-g,198,161,91)));
  transform-origin:bottom;}
.lsn-bar.is-speaking .lsn-wave i{animation:lsn-wave 1.05s ease-in-out infinite;}
.lsn-bar.is-speaking .lsn-wave i:nth-child(2){animation-delay:.12s;}
.lsn-bar.is-speaking .lsn-wave i:nth-child(3){animation-delay:.24s;}
.lsn-bar.is-speaking .lsn-wave i:nth-child(4){animation-delay:.36s;}
.lsn-bar.is-speaking .lsn-wave i:nth-child(5){animation-delay:.48s;}
@keyframes lsn-wave{0%,100%{height:5px;}50%{height:18px;}}
@media (prefers-reduced-motion:reduce){.lsn-bar.is-speaking .lsn-wave i{animation:none;height:11px;}}
html[data-pc-motion="reduced"] .lsn-bar.is-speaking .lsn-wave i{animation:none;height:11px;}

.lsn-btn{
  appearance:none;cursor:pointer;border-radius:99px;padding:8px 16px;
  font-family:var(--font-label,'Cinzel',serif);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;transition:background .3s ease,border-color .3s ease,color .3s ease;}
.lsn-play{
  border:1px solid rgba(var(--lv-gb,233,206,138),.75);
  background:linear-gradient(135deg,rgb(var(--lv-g,198,161,91)),rgb(var(--lv-gb,233,206,138)));
  color:rgb(var(--lv-cfd4,26,16,6));font-weight:600;}
.lsn-play:hover{filter:brightness(1.07);}
.lsn-stop{
  border:1px solid rgba(var(--lv-gb,233,206,138),.45);background:transparent;
  color:rgb(var(--lv-gb,233,206,138));}
.lsn-stop:hover{background:rgba(var(--lv-gb,233,206,138),.14);border-color:rgb(var(--lv-gb,233,206,138));}

.lsn-label{font-size:.82rem;color:rgba(var(--lv-p3,247,238,223),.86);min-width:5.5em;}
.lsn-meter{
  flex:1;min-width:90px;height:3px;border-radius:99px;overflow:hidden;
  background:rgba(var(--lv-gb,233,206,138),.18);}
.lsn-meter i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,rgb(var(--lv-g,198,161,91)),rgb(var(--lv-gl,255,246,223)));
  transition:transform .5s ease;}
[dir="rtl"] .lsn-meter i{transform-origin:right center;}

.lsn-rate{
  display:inline-flex;align-items:center;gap:7px;font-size:.72rem;
  color:rgba(var(--lv-p3,247,238,223),.7);
  font-family:var(--font-label,'Cinzel',serif);letter-spacing:.1em;text-transform:uppercase;}
.lsn-rate-sel{
  background:rgba(var(--lv-gb,233,206,138),.10);color:rgb(var(--lv-p3,247,238,223));
  border:1px solid rgba(var(--lv-gb,233,206,138),.4);border-radius:8px;
  padding:5px 8px;font-size:.75rem;font-family:inherit;cursor:pointer;}
.lsn-close{
  appearance:none;background:none;border:none;cursor:pointer;font-size:1.4rem;line-height:1;
  color:rgba(var(--lv-gb,233,206,138),.75);padding:0 4px;transition:color .3s ease;}
.lsn-close:hover{color:rgb(var(--lv-gl,255,246,223));}

/* ---- The lit passage ----------------------------------------------
   The paragraph being spoken, marked in the page. Alpha over the
   reader's own ground rather than a colour of its own, so it holds in
   every edition and never touches the ink. */
.lsn-lit{
  position:relative;border-radius:6px;
  box-shadow:0 0 0 6px rgba(var(--lv-gb,233,206,138),.14);
  background:rgba(var(--lv-gb,233,206,138),.14);
  transition:background .35s ease,box-shadow .35s ease;}
html[data-pc-theme="dark"] .lsn-lit{
  box-shadow:0 0 0 6px rgba(233,206,138,.16);
  background:rgba(233,206,138,.16);}
@media (prefers-reduced-motion:reduce){.lsn-lit{transition:none;}}

/* Room at the foot of the page for the bar, so it never covers the
   last line of what it is reading. */
html.has-reader body{padding-bottom:96px;}

/* ---- The control in the masthead ---------------------------------- */
.listen-toggle{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:6px;position:relative;
  color:var(--gold-bright);transition:color .3s ease,transform .3s ease;}
.listen-toggle:hover{color:#fff;transform:translateY(-1px);}
html[data-pc-theme="light"] .listen-toggle{color:rgb(var(--lv-gt2,138,106,47));}
html[data-pc-theme="light"] .listen-toggle:hover{color:rgb(var(--lv-gt,124,84,48));}
.listen-toggle::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;opacity:0;transform:scale(.6);
  transition:opacity .6s ease,transform .6s ease;}
.listen-toggle:hover::after{opacity:.6;transform:scale(1.3);}
@media (prefers-reduced-motion:reduce){.listen-toggle,.listen-toggle::after{transition:none;}}

/* ===================================================================
   THE SCHOOL, RIGHT NOW
   -------------------------------------------------------------------
   The live panel at the head of the colophon. An aurora moves behind
   it and three points orbit its face; the state lamp is green while
   the offices are open and amber while they are not, and it pulses
   only while they are open, so the movement itself carries meaning
   rather than decoration.
   =================================================================== */
.now-panel{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 0 34px;padding:30px 32px 26px;
  border-radius:var(--pr-r-lg,22px);
  background:linear-gradient(168deg,
    rgba(var(--lv-gb,233,206,138),.10),
    rgba(var(--lv-g,198,161,91),.03) 58%,
    rgba(var(--lv-gb,233,206,138),.07));
  border:1px solid rgba(var(--lv-gb,233,206,138),.34);
  box-shadow:inset 0 1px 0 rgba(var(--lv-gb,233,206,138),.20);}
@media (max-width:620px){.now-panel{padding:24px 18px 20px;}}

.now-aurora{
  position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38% 46% at 18% 34%,rgba(var(--lv-gb,233,206,138),.30),transparent 70%),
    radial-gradient(32% 40% at 72% 62%,rgba(var(--lv-g,198,161,91),.24),transparent 72%),
    radial-gradient(26% 34% at 48% 12%,rgba(var(--lv-gl,255,246,223),.22),transparent 74%);
  filter:blur(14px);
  animation:now-aurora 26s ease-in-out infinite alternate;}
@keyframes now-aurora{
  0%{transform:translate3d(-4%,-2%,0) scale(1);}
  50%{transform:translate3d(3%,2%,0) scale(1.07);}
  100%{transform:translate3d(-2%,3%,0) scale(1.02);}}

/* Three points on one slow orbit — the panel's own quiet clockwork. */
.now-orbit{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.now-orbit i{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:rgb(var(--lv-gb,233,206,138));
  box-shadow:0 0 10px 1px rgba(var(--lv-gb,233,206,138),.7);
  transform-origin:0 0;opacity:.55;
  animation:now-orbit 34s linear infinite;}
.now-orbit i:nth-child(1){--r:230px;animation-duration:34s;}
.now-orbit i:nth-child(2){--r:300px;animation-duration:47s;animation-direction:reverse;opacity:.4;}
.now-orbit i:nth-child(3){--r:170px;animation-duration:26s;opacity:.3;}
@keyframes now-orbit{
  from{transform:rotate(0deg) translateX(var(--r,240px)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(var(--r,240px)) rotate(-360deg);}}

.now-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid rgba(var(--lv-g,198,161,91),.3);}
.now-eyebrow{
  margin:0;font-family:var(--font-label,'Cinzel',serif);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgb(var(--lv-gb,233,206,138));}
html[data-pc-theme="light"] .now-eyebrow{color:rgb(var(--lv-gt3,99,72,27));}
.now-place{margin:0;font-size:.76rem;color:var(--on-charcoal-soft,rgba(241,231,214,.68));}
html[data-pc-theme="light"] .now-place{color:rgb(var(--lv-ink2,87,71,47));}

.now-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.now-cell{display:flex;flex-direction:column;gap:5px;min-width:0;}
.now-k{
  font-family:var(--font-label,'Cinzel',serif);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(var(--lv-gb,233,206,138),.72);}
html[data-pc-theme="light"] .now-k{color:rgb(var(--lv-gt3,99,72,27));}
.now-clock{
  font-family:var(--font-label,'Cinzel',serif);font-size:2.1rem;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
  color:rgb(var(--lv-p3,247,238,223));}
html[data-pc-theme="light"] .now-clock{color:rgb(var(--lv-cf,59,42,29));}
.now-hours{
  font-family:var(--font-label,'Cinzel',serif);font-size:1.05rem;
  color:rgb(var(--lv-p3,247,238,223));}
html[data-pc-theme="light"] .now-hours{color:rgb(var(--lv-cf,59,42,29));}
.now-sub{font-size:.8rem;color:var(--on-charcoal-soft,rgba(241,231,214,.68));}
html[data-pc-theme="light"] .now-sub{color:rgb(var(--lv-ink2,87,71,47));}

/* The state lamp. Green while open, amber while closed; it breathes
   only while it is open, so the movement means something. */
.now-state{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-label,'Cinzel',serif);font-size:1.05rem;letter-spacing:.04em;
  color:rgb(var(--lv-p3,247,238,223));}
html[data-pc-theme="light"] .now-state{color:rgb(var(--lv-cf,59,42,29));}
.now-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:#B98A2E;box-shadow:0 0 0 0 rgba(185,138,46,.5);}
.now-state[data-state="open"] .now-dot{
  background:#2F7D4F;box-shadow:0 0 0 0 rgba(47,125,79,.55);
  animation:now-pulse 2.6s ease-out infinite;}
@keyframes now-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,125,79,.5);}
  70%{box-shadow:0 0 0 10px rgba(47,125,79,0);}
  100%{box-shadow:0 0 0 0 rgba(47,125,79,0);}}
html[data-pc-theme="dark"] .now-state[data-state="open"] .now-dot{background:#4FBE80;}
html[data-pc-theme="dark"] .now-dot{background:#E0AC4B;}

.now-link{color:rgb(var(--lv-gb,233,206,138));text-decoration:none;
  border-bottom:1px solid rgba(var(--lv-gb,233,206,138),.4);transition:border-color .3s ease;}
.now-link:hover{border-color:rgb(var(--lv-gb,233,206,138));}
/* The panel sits on its own warm ground, not on the page's paper, so the
   gold that clears on paper does not clear here: --lv-gt2 measured 3.83:1
   and --lv-gt 4.47:1 against it. The deep gold clears at 6.5:1. */
html[data-pc-theme="light"] .now-link{color:rgb(var(--lv-gt3,99,72,27));
  border-bottom-color:rgba(var(--lv-gt3,99,72,27),.5);}
html[data-pc-theme="light"] .now-link:hover{border-bottom-color:rgb(var(--lv-gt3,99,72,27));}

.now-foot{
  margin:20px 0 0;font-size:.74rem;line-height:1.55;
  color:var(--on-charcoal-soft,rgba(241,231,214,.6));
  padding-top:14px;border-top:1px solid rgba(var(--lv-g,198,161,91),.2);}
html[data-pc-theme="light"] .now-foot{color:rgb(var(--lv-ink2,87,71,47));}

html[data-pc-ornament="none"] .now-aurora,
html[data-pc-ornament="none"] .now-orbit{display:none;}
html[data-pc-motion="reduced"] .now-aurora,
html[data-pc-motion="reduced"] .now-orbit i,
html[data-pc-motion="reduced"] .now-state[data-state="open"] .now-dot{animation:none;}
@media (prefers-reduced-motion:reduce){
  .now-aurora,.now-orbit i,.now-state[data-state="open"] .now-dot{animation:none;}
}