/* ==========================================================================
   Chrome — fixed top marquee, brand (top-left), nav (top-right)
   Hidden while body.is-loading (base.css); fades in over .6s once loaded.
   ========================================================================== */

.chrome {
  --chrome-top: 2.2rem;
  --brand-size: 2.6rem;
  position: relative;            /* one stacking layer above .page */
  z-index: var(--z-chrome);
  color: var(--pearl);
  transition: opacity .6s ease-out;
}

/* --------------------------------------------------------------------------
   Top marquee: pinned to the very top, slides out once the page scrolls
   -------------------------------------------------------------------------- */
.marquee--top {
  --marquee-duration: 45s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: .4rem 0;
  color: var(--pearl);
  transition: transform .6s var(--ease-out), visibility 0s;
}
/* Each copy must span the viewport or the two-track loop opens a gap on wide screens */
.marquee--top .marquee__track { min-width: 100vw; }
.marquee--top:focus-visible { outline-offset: -2px; }

body.is-scrolled .marquee--top {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--ease-out), visibility 0s .6s;
}

/* --------------------------------------------------------------------------
   Brand: mark at 60% with the two-line wordmark overlapping its right side
   -------------------------------------------------------------------------- */
.brand {
  position: fixed;
  top: var(--chrome-top);
  left: var(--gutter);
  display: flex;
  align-items: center;
}

.brand__mark {
  flex: none;
  width: var(--brand-size);
  height: var(--brand-size);
  line-height: 0;
  opacity: .6;
  transition: opacity .3s linear;
}
.brand__mark svg { width: 100%; height: 100%; }

.brand__text {
  position: relative;
  margin-left: calc(var(--brand-size) * -.42);
  line-height: 1.1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nav: tight vertical list, then the single CTA
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  /* first link shares a line with the wordmark: offset = (mark − 2 lines × .6rem × 1.1) / 2 */
  top: calc(var(--chrome-top) + (var(--brand-size) - 1.32rem) / 2);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1rem;
}

.nav__list { line-height: 1.1; }
.nav__list a {
  display: inline-block;
  transition: color .3s linear;
}
.nav__list a:focus-visible { color: var(--champagne); }

.nav__cta { margin-left: -.1rem; }

.nav__login { line-height: 1.1; }
@media (min-width: 768px) {
  .nav__login { font-size: max(11px, .6rem); }
}
.nav__login:focus-visible { color: var(--champagne); }

@media (hover: hover) {
  .brand:hover .brand__mark { opacity: 1; }
  .nav__list a:hover,
  .nav__login:hover { color: var(--champagne); }
}

/* --------------------------------------------------------------------------
   Mobile: smaller brand, CTA only, and a scrim so pearl text survives pale cards
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .chrome {
    --chrome-top: 2.3rem;
    --brand-size: 2.2rem;
  }
  .marquee--top { font-size: .75rem; }

  .nav__list { display: none; }
  /* Log in sits beside the CTA pill */
  .nav {
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
  }
  /* centre the pill CTA (2.2rem) on the mark */
  .nav { top: calc(var(--chrome-top) + (var(--brand-size) - 2.2rem) / 2); }

  .chrome::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6.5rem;
    background: linear-gradient(var(--ink) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s var(--ease-out);
  }
  body.is-scrolled .chrome::before { opacity: 1; }
}

/* Narrow phones: the wordmark and "Log in" + CTA can't share one line, so keep only the mark */
@media (max-width: 419.98px) {
  .nav__login ~ .nav__cta { margin-left: 0; }
  .chrome:has(.nav__login) .brand__text { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion: the marquee fades instead of sliding
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee--top { transition: opacity .3s linear, visibility 0s; }
  body.is-scrolled .marquee--top {
    transform: none;
    opacity: 0;
    transition: opacity .3s linear, visibility 0s .3s;
  }
}