/* ==========================================================================
   5. Header & nav
   ========================================================================== */

.site-header {
  position:sticky;
  top:0;
  z-index:60;
  background:var(--surface-invert-deep);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:0.6rem;
}

.brand img {
  height:clamp(46px, 5.5vw, 62px);
  width:auto;
  filter:brightness(0) invert(1);
}

.menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  padding:0;
  background:transparent;
  border:2px solid rgba(var(--rgb-white),0.35);
  border-radius:var(--radius-sm);
  cursor:pointer;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display:block;
  width:20px; height:2px;
  background:var(--ppe-white);
  content:'';
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle-bars { position:relative; }
.menu-toggle-bars::before { position:absolute; top:-6px; }
.menu-toggle-bars::after { position:absolute; top:6px; }

body.menu-open .menu-toggle-bars { background:transparent; }
body.menu-open .menu-toggle-bars::before { transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle-bars::after { transform:translateY(-6px) rotate(-45deg); }

.site-nav {
  position:absolute;
  inset:100% 0 auto;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  padding:1rem var(--gutter) 1.5rem;
  background:var(--surface-invert-deep);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-md);
  visibility:hidden;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

body.menu-open .site-nav {
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
}

.site-nav a {
  padding:0.6rem 0;
  color:var(--ppe-white);
  font-family:var(--font-display);
  font-weight:500;
  text-decoration:none;
}
.site-nav a:hover { color:var(--ppe-gold); }
.site-nav .btn {
  align-self:stretch;
  margin-top:0.8rem;
  padding:0.8rem 1.4rem;
  text-align:center;
  color:var(--ppe-navy-deep);
}

@media (min-width:900px) {
  .menu-toggle { display:none; }

  .site-nav {
    position:static;
    flex-direction:row;
    align-items:center;
    gap:1.75rem;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
    visibility:visible;
    opacity:1;
    transform:none;
    transition:none;
  }
  .site-nav a { padding:0; }
  .site-nav .btn { align-self:center; margin-top:0; padding:0.6rem 1.2rem; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  overflow:hidden;
  padding-block:calc(var(--section-y) * 0.45) calc(var(--section-y) * 1.3);
  background:
    radial-gradient(90% 70% at 15% 10%, rgba(var(--rgb-gold),0.16) 0%, transparent 55%),
    radial-gradient(70% 60% at 90% 80%, rgba(var(--rgb-magenta),0.3) 0%, transparent 60%),
    var(--surface-invert);
}

.hero-inner { position:relative; z-index:2; display:grid; gap:2rem; }

.hero-copy { text-align:center; container-type:inline-size; }
.hero-actions { justify-content:center; }

.letters { position:absolute; inset:0 0 var(--band-arc); z-index:1; pointer-events:none; }
.letters span {
  position:absolute;
  left:var(--x);
  top:var(--y);
  font-family:var(--font-display);
  font-size:calc(var(--size) * var(--letter-scale));
  font-weight:600;
  line-height:1;
  color:rgba(var(--rgb-gold),0.28);
  transform:rotate(var(--rot));
}

.letters.is-live span { left:0; top:0; will-change:transform; }

.seal {
  display:inline-grid;
  justify-items:center;
  gap:0.1rem;
  margin:0 0 1.25rem;
  padding:0.7rem 1.2rem;
  border:2px solid rgba(var(--rgb-gold),0.55);
  border-radius:var(--radius);
  transform:rotate(-2.5deg);
  color:var(--ppe-gold);
  text-align:center;
}
.seal-top,
.seal-bottom { font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; }
.seal-main { font-family:var(--font-display); font-size:1.3rem; font-weight:600; line-height:1.1; }

.hero-title {
  font-size:min(var(--step-hero), var(--hero-fit));
  color:var(--ppe-white);
  text-wrap:balance;
}
.hero-guide { display:block; white-space:nowrap; }

.rotator { display:inline-grid; vertical-align:top; text-align:left; }
.rotator-item {
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(0.25em);
  color:var(--ppe-gold);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.rotator-item.is-active { opacity:1; transform:none; }
.rotator-item[data-strand="comprehension"] { color:var(--strand-comprehension-on-dark); }
.rotator-item[data-strand="writing"] { color:var(--strand-writing-on-dark); }
.rotator-item[data-strand="grammar"] { color:var(--strand-grammar-on-dark); }

.hero .lede { color:var(--text-on-invert-muted); max-width:46ch; margin-inline:auto; }

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin:1.9rem 0 0;
}

.hero-cast { display:grid; place-items:center; }
.hero-cast img {
  width:100%;
  max-width:38rem;
  filter:drop-shadow(var(--shadow-cast));
}

@media (min-width:900px) {
  .hero-inner { grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:center; gap:3rem; }
  .hero-copy { text-align:left; }
  .hero .lede { margin-inline:0; }
  .hero-actions { justify-content:flex-start; }
}

/* ==========================================================================
   7. Marquee
   ========================================================================== */

.marquee { overflow:hidden; }
.marquee-track {
  display:flex;
  width:max-content;
  gap:2rem;
  animation:marquee var(--marquee-dur) linear infinite;
}
.marquee-track span {
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:0.04em;
  white-space:nowrap;
  color:var(--ppe-navy-deep);
}

.marquee-svg { display:none; }
.marquee-text {
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:0.04em;
  fill:var(--ppe-navy-deep);
}

.marquee.is-curved .marquee-track { display:none; }
.marquee.is-curved .marquee-svg { display:block; width:100%; height:auto; }

.band.marquee.is-curved {
  padding-top:0.85rem;
  padding-bottom:0.45rem;
}

@keyframes marquee {
  from { transform:translateX(0); }
  to { transform:translateX(calc(-50% - 1rem)); }
}