/* ───────────────────────────────────────────────────
   Fixed HUD layer — sits above every section, never
   scrolls. Flips to ink-on-paper over light sections.
   ─────────────────────────────────────────────────── */

.hud {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  mix-blend-mode: difference;
  transition: opacity 0.6s var(--ease-out);
}

.hud a,
.hud button {
  pointer-events: auto;
}

/* Brand lockup — visible in the hero, inverted over light sections by the
   layer's difference blend. */
.hud__brand {
  position: absolute;
  top: 1.05rem;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-transform: none;
}

.hud__logo {
  font-size: 1.25rem;
  font-weight: 800;
  /* Matches .display — the wordmark should read as the same typeface voice
     as the headlines, not as a tracked-out HUD label. */
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}

.hud__logo b {
  font-weight: 800;
}

.hud__tag {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--fg-faint);
}

@media (max-width: 767px) {
  .hud__tag {
    display: none;
  }
  .hud__logo {
    font-size: 1rem;
  }
}

.hud__clock {
  position: absolute;
  bottom: 1.15rem;
  left: var(--gutter);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.hud__status {
  position: absolute;
  top: 50%;
  right: 1.15rem;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
}

.hud__mark {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.34em;
}

/* ── left tick rail ─────────────────────────────── */

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) * 0.42);
  width: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding-block: 5rem;
}

.rail__tick {
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: width 0.3s var(--ease-out), opacity 0.3s;
}

.rail__tick.is-on {
  width: 18px;
  opacity: 1;
}

.rail__cursor {
  position: absolute;
  left: -4px;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: top 0.18s linear;
}

/* ── barcode progress ───────────────────────────── */

.barcode {
  position: absolute;
  right: 1.15rem;
  bottom: 1.15rem;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 14px;
}

.barcode i {
  display: block;
  width: 1.5px;
  height: 100%;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.25s;
}

.barcode i.is-on {
  opacity: 1;
}

/* ── honors / silver-button tab ─────────────────── */

.honors {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: var(--paper-1);
  color: var(--ink-0);
  mix-blend-mode: normal;
  padding: 0.85rem 0.6rem 1.1rem;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.honors__n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  display: block;
}

.honors__t {
  writing-mode: vertical-rl;
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  margin-top: 0.4rem;
  display: inline-block;
}

/* ── custom scrollbar ───────────────────────────── */

.sbar {
  position: absolute;
  top: 0;
  right: 2px;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
}

.sbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: currentColor;
  will-change: transform;
}

/* ── nav ─────────────────────────────────────────── */

.nav {
  position: absolute;
  top: 1rem;
  right: var(--gutter);
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.nav a {
  position: relative;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--fg-dim);
  transition: color 0.3s;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav a:hover {
  color: var(--fg);
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav a.is-active {
  color: var(--fg);
}

@media (max-width: 1023px) {
  .rail,
  .barcode,
  .honors,
  .hud__status {
    display: none;
  }
  .nav {
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .nav a:not(.nav__cta) {
    display: none;
  }
  .hud__mark {
    display: none;
  }
}

/* ═══ phone · keep the HUD from fighting the content ═══════════════
   The instrument layer is a desktop conceit. On a 390px screen the clock
   lands on the footer, the centre mark sits under the CTA buttons, and the
   brand lockup gets clipped by the first section. Keep the wordmark and the
   CTA, drop the rest. */

@media (max-width: 767px) {
  .hud {
    /* The layer was full-bleed and interactive-blocking across the page;
       on a phone it only needs to own the top bar. */
    bottom: auto;
    height: 56px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
    mix-blend-mode: normal;
    color: #fff;
  }

  .hud__brand {
    top: 0.9rem;
  }

  .hud__logo {
    font-size: 1.05rem;
    color: #fff;
  }

  .hud__clock,
  .sbar {
    display: none;
  }

  .nav {
    top: 0.95rem;
  }

  .nav a.nav__cta {
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
  }
}

/* Over the light sections the top scrim has to flip, or white-on-white. */
@media (max-width: 767px) {
  .hud.is-over-light {
    background: linear-gradient(to bottom, rgba(233, 233, 231, 0.85), transparent);
    color: var(--ink-0);
  }
  .hud.is-over-light .hud__logo {
    color: var(--ink-0);
  }
  .hud.is-over-light .nav a {
    color: rgba(11, 13, 18, 0.7);
  }
  .hud.is-over-light .nav a.nav__cta {
    border-color: rgba(11, 13, 18, 0.35);
    color: var(--ink-0);
  }
}