/* Rushmore Academy top bar. One header for every page: landing, paper, app shells, lessons, newsroom. Needs tokens.css and base.css;
   header.js adds the behaviour (compact state with hysteresis, the phone sheet). Without JS the bar simply stays at its full size.

   The bar is fixed and stays up all the time. At the top of the page it shows the full lockup: shield, the wordmark in Roman
   capitals, the navigation, sign in and the plan button. Once the page has scrolled (.is-compact) the bar eases down to its
   compact height, the wordmark fades and its column collapses (grid 1fr to 0fr: no layout jump, no text wrap), the shield
   stays a little smaller, the navigation condenses, and a translucent backdrop with a hairline gold rule and a soft shadow
   comes in. Scrolling back to the very top restores everything. Transform and opacity carry the motion; the only measured
   change is the bar's own height, which lays out nothing but its children (the page sits under a fixed-height spacer).

   Markup:
   <header class="ra-top" id="top"><div class="ra-top-bar"><div class="ra-top-inner">
     <a class="ra-top-brand" href="/"><img class="ra-top-crest" src="/design/brand/shield.svg" alt="" width="30" height="36">
       <span class="ra-top-word" aria-hidden="true"><span class="ra-top-wordmark">Rushmore Academy<small>Supra Petram</small></span></span>
       <span class="visually-hidden">Rushmore Academy, home</span></a>
     <nav class="ra-top-nav" id="ra-top-nav" aria-label="Primary"> links, .btn-gold </nav>
     <button class="ra-top-menu" type="button" aria-expanded="false" aria-controls="ra-top-nav" aria-label="Menu"> hamburger svg </button>
   </div></div></header>
   body.ra-top-over (the landing): the page runs under the bar with no spacer. body.ra-on-dark: ivory text on the night. */
:root { --top-h: 64px; --top-h-compact: 50px; --top-sentinel: 72px; --top-t: 520ms; --top-ease: cubic-bezier(.22, 1, .36, 1); --top-fade: cubic-bezier(.4, .05, .3, 1); --top-break: 900px; }
@media (max-width: 640px) { :root { --top-h: 56px; --top-h-compact: 46px; } }

/* The spacer: every page except an overlay page begins below the bar. */
body:not(.ra-top-over)::before { content: ''; display: block; height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); }
.ra-top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: var(--top-sentinel); pointer-events: none; visibility: hidden; }

.ra-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--text); }
.ra-on-dark .ra-top { color: var(--paper-on-night, #F4EFE4); }
.ra-top-bar { position: relative; height: var(--top-h); transition: height var(--top-t) var(--top-ease); }
.ra-top.is-compact .ra-top-bar { height: var(--top-h-compact); }
/* The veil: a translucent backdrop that reaches up under the notch, with the gold hairline and a soft shadow. Opacity only. */
.ra-top-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * env(safe-area-inset-top, 0px)); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 70%, transparent), 0 14px 34px -22px rgba(21, 32, 43, .45); opacity: 0; transition: opacity 420ms var(--top-fade); pointer-events: none; }
.ra-on-dark .ra-top-bar::before { background: rgba(7, 11, 17, .82); box-shadow: 0 1px 0 rgba(201, 162, 78, .5), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.ra-top.is-compact .ra-top-bar::before { opacity: 1; }
/* A faint hairline in the full state on parchment pages, so the bar reads as part of the page before anything scrolls under it. */
.ra-top-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); opacity: 1; transition: opacity 300ms var(--top-fade); pointer-events: none; }
.ra-top-over .ra-top-bar::after { display: none; }
.ra-top.is-compact .ra-top-bar::after { opacity: 0; }
/* The landing: a soft dark gradient keeps the lockup legible over the night sky before the veil arrives. */
.ra-top-over .ra-top-bar { background: linear-gradient(180deg, rgba(5, 8, 14, .78), rgba(5, 8, 14, 0)); }
/* Where the browser drives scroll animations, the veil scrubs in over the first 140 px instead of switching with the class. */
@supports (animation-timeline: scroll()) {
  html.ra-js .ra-top-bar::before { animation: ra-top-veil linear both; animation-timeline: scroll(root); animation-range: 0px 140px; transition: none; }
}
@keyframes ra-top-veil { from { opacity: 0; } to { opacity: 1; } }

.ra-top-inner { height: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); position: relative; }

/* The brand: shield, then a column that collapses. */
.ra-top-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; text-decoration: none; color: inherit; min-height: 44px; min-width: 44px; flex: 0 1 auto; -webkit-tap-highlight-color: transparent; }
.ra-top-crest { width: 30px; height: auto; flex: 0 0 auto; transform-origin: 0 50%; transition: transform var(--top-t) var(--top-ease); }
.ra-top.is-compact .ra-top-crest { transform: scale(.84); }
.ra-top-word { display: grid; grid-template-columns: 1fr; min-width: 0; transition: grid-template-columns var(--top-t) var(--top-ease); }
.ra-top.is-compact .ra-top-word { grid-template-columns: 0fr; }
.ra-top-wordmark { display: block; min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.15; padding-top: 2px; opacity: 1; transform: none; transition: opacity 340ms var(--top-fade), transform var(--top-t) var(--top-ease); }
.ra-top-wordmark small { display: block; font-family: var(--font-text); font-variant-caps: small-caps; font-size: 12px; letter-spacing: .1em; text-transform: none; color: var(--gold-text); margin-top: 2px; font-weight: 500; }
.ra-on-dark .ra-top-wordmark small { color: var(--gold-bright); }
.ra-top.is-compact .ra-top-wordmark { opacity: 0; transform: translate3d(-10px, 0, 0); }
@media (max-width: 640px) { .ra-top-crest { width: 26px; } .ra-top-wordmark { font-size: 11px; letter-spacing: .18em; } .ra-top-wordmark small { font-size: 11px; } }
@media (max-width: 400px) { .ra-top-wordmark small { display: none; } }

/* Navigation on a wide screen: small capitals on a hairline, one gold button. */
.ra-top-nav { display: flex; align-items: center; gap: var(--s-5); transform-origin: 100% 50%; }
.ra-top-link { font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: .08em; font-size: var(--fs-2); color: inherit; text-decoration: none; padding: 10px 2px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-bottom: 1px solid transparent; white-space: nowrap; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ra-top-link:hover, .ra-top-link.active, .ra-top-link[aria-current="page"] { border-bottom-color: var(--gold); }
.ra-on-dark .ra-top-link:hover, .ra-on-dark .ra-top-link.active, .ra-on-dark .ra-top-link[aria-current="page"] { border-bottom-color: var(--gold-bright); }
.ra-top .btn-gold { white-space: nowrap; padding: 10px 18px; min-height: 44px; }
.ra-on-dark .ra-top .btn-gold { color: var(--gold-bright); border-color: rgba(232, 197, 108, .7); background: transparent; }
.ra-on-dark .ra-top .btn-gold:hover { background: var(--gold-bright); color: #0B1119; border-color: var(--gold-bright); }
.ra-top-menu { display: none; }
@media (min-width: 901px) {
  .ra-top-nav { transition: transform var(--top-t) var(--top-ease); }
  .ra-top.is-compact .ra-top-nav { transform: scale(.94); }
  /* A wide tablet in landscape: the landing's section links step aside, sign in and the plan button stay. */
  @media (max-width: 1120px) { .ra-top-anchor { display: none; } }
}

/* Phones and tablets: a compact bar with a menu button; the navigation becomes a full-width sheet with large targets. */
@media (max-width: 900px) {
  .ra-top-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; margin-right: -8px; border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; }
  .ra-top-menu svg { width: 24px; height: 24px; display: block; }
  .ra-top-menu .ln { transform-origin: 50% 50%; transition: transform 360ms var(--top-ease), opacity 200ms var(--top-fade); }
  .ra-top-menu[aria-expanded="true"] .ln1 { transform: translateY(6px) rotate(45deg); }
  .ra-top-menu[aria-expanded="true"] .ln2 { opacity: 0; transform: scaleX(.2); }
  .ra-top-menu[aria-expanded="true"] .ln3 { transform: translateY(-6px) rotate(-45deg); }
  .ra-top-nav { position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100dvh; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(var(--top-h) + env(safe-area-inset-top, 0px) + var(--s-5)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--text); visibility: hidden; opacity: 0; transform: translate3d(0, -10px, 0); transition: opacity 360ms var(--top-fade), transform 520ms var(--top-ease), visibility 0s linear 520ms; }
  .ra-on-dark .ra-top-nav { background: #0B1119; color: var(--paper-on-night, #F4EFE4); }
  .ra-top.is-open .ra-top-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s, 0s, 0s; }
  .ra-top.is-open .ra-top-bar::before { opacity: 1; animation: none; }
  .ra-top-nav > * { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 420ms var(--top-fade), transform 560ms var(--top-ease); transition-delay: calc(60ms + var(--i, 0) * 40ms); }
  .ra-top.is-open .ra-top-nav > * { opacity: 1; transform: none; }
  .ra-top-nav .ra-top-link { font-family: var(--font-heading); font-variant-caps: normal; letter-spacing: 0; font-size: var(--fs-4); font-weight: 500; padding: 14px 4px; min-height: 60px; border-bottom: 1px solid var(--line); border-top: 0; justify-content: space-between; white-space: normal; }
  .ra-on-dark .ra-top-nav .ra-top-link { border-bottom-color: rgba(201, 162, 78, .3); }
  .ra-top-nav .ra-top-link::after { content: ''; width: 9px; height: 9px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(-45deg); margin-left: var(--s-3); flex: 0 0 auto; opacity: .8; }
  .ra-top-nav .ra-top-link:hover, .ra-top-nav .ra-top-link.active, .ra-top-nav .ra-top-link[aria-current="page"] { color: var(--gold-text); }
  .ra-on-dark .ra-top-nav .ra-top-link:hover, .ra-on-dark .ra-top-nav .ra-top-link.active { color: var(--gold-bright); }
  .ra-top-nav .btn-gold { margin-top: var(--s-6); width: 100%; min-height: 56px; font-size: var(--fs-1); }
  .ra-top-nav .ra-top-group { margin-top: var(--s-5); font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
  .ra-on-dark .ra-top-nav .ra-top-group { color: var(--gold-bright); }
}
@media (min-width: 901px) { .ra-top-group { display: none; } }
/* Two columns of links on a tablet sheet, so the extra width is used. */
@media (min-width: 640px) and (max-width: 900px) { .ra-top-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); align-content: start; } .ra-top-nav .btn-gold, .ra-top-nav .ra-top-group { grid-column: 1 / -1; } }

/* Body scroll lock while the sheet is open; the settings button steps out of the way. */
html.ra-menu-open, html.ra-menu-open body { overflow: hidden; overscroll-behavior: none; }
html.ra-menu-open .ra-settings-btn, html.ra-menu-open .ra-panel { visibility: hidden; }

/* Keyboard focus stays visible on the bar, on both surfaces. */
.ra-top a:focus-visible, .ra-top button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ra-on-dark .ra-top a:focus-visible, .ra-on-dark .ra-top button:focus-visible { outline-color: var(--gold-bright); }

/* Anchored headings never hide under the bar. motion.css sets the general rule from --top-h; this covers pages without it. */
[id] { scroll-margin-top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 12px); }

/* Reduced motion: an instant state change, nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .ra-top-bar, .ra-top-bar::before, .ra-top-bar::after, .ra-top-crest, .ra-top-word, .ra-top-wordmark, .ra-top-nav, .ra-top-nav > *, .ra-top-menu .ln, .ra-top-link { transition: none !important; animation: none !important; }
}
:root[data-motion="reduce"] .ra-top-bar, :root[data-motion="reduce"] .ra-top-bar::before, :root[data-motion="reduce"] .ra-top-bar::after, :root[data-motion="reduce"] .ra-top-crest, :root[data-motion="reduce"] .ra-top-word, :root[data-motion="reduce"] .ra-top-wordmark, :root[data-motion="reduce"] .ra-top-nav, :root[data-motion="reduce"] .ra-top-nav > *, :root[data-motion="reduce"] .ra-top-menu .ln, :root[data-motion="reduce"] .ra-top-link { transition: none !important; animation: none !important; }

/* Print: the page, not the bar. */
@media print { .ra-top, .ra-top-sentinel, body:not(.ra-top-over)::before { display: none !important; } }

/* A bar with many links (the paper): on a wide tablet the least needed links step aside and the brand keeps its full wordmark; they are still in the phone sheet. */
@media (min-width: 901px) { .ra-top-brand { flex: 0 0 auto; } .ra-top-nav { min-width: 0; flex: 0 1 auto; } }
@media (min-width: 901px) and (max-width: 1280px) { .ra-top-extra { display: none; } }