/* =============================================================
   components.css — Typography & color of inner content pieces
   Block 3–4: nav, hero text, track text, player-slot placeholders,
   reserved-frame label, reveal states, footer. Real audio players
   and drawings arrive in later blocks. Tokens only — no literal
   colors or font sizes.
   ============================================================= */

/* ---------- Nav wordmark + links -------------------------- */
.nav__wordmark {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--text-nav-name);
  letter-spacing: var(--ls-nav-name);
  line-height: 1;
  color: var(--color-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* Hidden over the hero; scroll.js fades it in with .nav__bg. */
  opacity: 0;
  transition: opacity var(--dur-color) ease;
}
/* Subpages (About/Contact): nav is always solid + wordmark visible. */
.subpage .nav__bg { opacity: 1; }
.subpage .nav__wordmark { opacity: 1; }

.nav__links a {
  font-family: var(--font-sans);
  font-size: var(--text-nav-link);
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  text-decoration: none;
  transition: color var(--dur-color) ease;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--color-navy);
}

/* Language switcher (EN FR) — sits after the nav links. */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: var(--text-nav-link);
  font-weight: var(--fw-medium);
}
.nav__lang a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--dur-color) ease;
}
.nav__lang a:hover { color: var(--color-navy); }
.nav__lang .is-active { color: var(--color-ink); }   /* current language */

/* ---------- Hero text ------------------------------------- */
.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-hero-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 18px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--color-ink);
}

/* ---------- Track text ------------------------------------ */
.track__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--text-track-title);
  line-height: var(--lh-title);
  color: var(--color-ink);
}
.track__meta {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  margin-top: 12px;
}
.track__problem {
  font-family: var(--font-sans);
  font-size: var(--text-problem);
  font-weight: var(--fw-regular);
  line-height: var(--lh-problem);
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-top: 44px;
}
.track__problem .lead {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* ---------- Audio player ----------------------------------
   Flat horizontal bar: navy play button (the hero element) + info
   column (label, progress, elapsed / remaining). Button is always
   navy; the icon flips triangle ⇄ pause-bars; the label turns navy
   once the player is active. Wired by player.js.
   --------------------------------------------------------- */
.player {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 48px;
}
.player--final { margin-top: 44px; }

.player__btn {
  flex: 0 0 auto;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  border: 1.5px solid var(--color-navy);
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.player__btn:active { transform: scale(0.94); }

.player__icon { display: flex; align-items: center; justify-content: center; }
.player__icon--play {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--color-white);
  margin-left: 3px;            /* optical centering */
}
.player__icon--pause { display: none; gap: 5px; }
.player__icon--pause i {
  display: block;
  width: 4px;
  height: 14px;
  background: var(--color-white);
}
.player.is-playing .player__icon--play { display: none; }
.player.is-playing .player__icon--pause { display: flex; }

.player__info { flex: 1; min-width: 0; }
.player__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-player-label);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: 14px;
  transition: color var(--dur-color) ease;
}
.player.is-active .player__label { color: var(--color-navy); }

/* Seekable: the visible bar stays thin, but a generous invisible
   hit area (::before) makes it easy to click/drag. */
.player__progress {
  position: relative;
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  touch-action: none;
}
.player__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  bottom: -9px;
}
.player__progress:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 5px;
}
.player__track {
  position: absolute;
  inset: 0;
  background: var(--color-divider);
}
.player__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--color-navy);
  transition: width 0.1s linear;
}
.player__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-navy);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.player__progress:hover .player__thumb,
.player__progress:focus-visible .player__thumb,
.player.is-active .player__thumb { opacity: 1; }
/* During an active drag, drop the easing so fill + thumb track the cursor 1:1. */
.player.is-seeking .player__fill,
.player.is-seeking .player__thumb { transition: none; }
.player__times {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 9px;
}
.player__times span {
  font-family: var(--font-sans);
  font-size: var(--text-elapsed);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- Scroll reveal --------------------------------
   Each staggered element starts hidden + shifted; the section
   gets .is-revealed when it enters the viewport (scroll.js).
   --ri is the element's stagger index, set by tracks.js.
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
.track.is-revealed .reveal {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--ri, 0) * var(--stagger-step));
}
.track__illo.reveal { transition-duration: var(--dur-illo); }
.track.is-revealed .track__illo.reveal { transition-delay: var(--delay-illo); }

/* Reduced motion / no-JS safety: show everything, no movement. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Tracks load error (file:// fallback) ---------- */
.tracks__error {
  font-family: var(--font-sans);
  font-size: var(--text-problem);
  color: var(--color-text-secondary);
  padding: var(--track-pad-first) 0;
  max-width: 52ch;
}

/* ---------- Footer: name, socials, year ------------------- */
.footer__name {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--text-footer-name);
  color: var(--color-ink);
}
.footer__year {
  font-family: var(--font-sans);
  font-size: var(--text-footer-year);
  color: var(--color-text-secondary);
}
.footer__socials a {
  display: flex;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
.footer__socials a:hover {
  color: var(--color-navy);
}

/* ---------- Subpage typography (About / Contact) ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}
.page-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  color: var(--color-ink);
}
.about__sub {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--text-about-sub);
  color: var(--color-navy);
  margin-top: 12px;
}
.about__body p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
.contact__intro {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  max-width: 46ch;
  margin: 20px 0 56px;
}

/* ---------- Contact form ---------------------------------- */
.form { display: flex; flex-direction: column; gap: 34px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.field__input,
.field__textarea {
  border: none;
  border-bottom: var(--border-hairline);
  background: transparent;
  padding: 8px 0;
  font-size: var(--text-field-input);
  color: var(--color-ink);
  outline: none;
  transition: border-color var(--dur-color) ease;
}
.field__textarea { line-height: 1.6; }
.field__input:focus,
.field__textarea:focus { border-bottom-color: var(--color-navy); }

.form__send {
  align-self: flex-start;
  margin-top: 8px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  padding: 16px 40px;
  font-family: var(--font-sans);
  font-size: var(--text-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-color) ease;
}
.form__send:hover { background: var(--color-ink); }

.form__error {
  font-family: var(--font-sans);
  font-size: var(--text-problem);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ---------- Contact: thank-you confirmation --------------- */
.thanks {
  border: var(--border-hairline);
  background: var(--color-surface);
  padding: 40px;
  text-align: center;
}
.thanks__title {
  font-family: var(--font-serif);
  font-size: var(--text-thanks);
  color: var(--color-ink);
  margin-bottom: 8px;
}
.thanks__sub {
  font-family: var(--font-serif);
  font-size: var(--text-thanks-sub);
  color: var(--color-navy);
}