/* =====================================================================
   LULU'S LAB — LAYOUT / COMPONENTS
   Pass one: header, hero, AVAILABLE FOR, collection divider.
   Geometry measured from the approved comp; see tokens.css for sources.
   ===================================================================== */

/* =====================================================================
   HERO BAND
   Two flow columns that start on the same top line (comp: logo top y30,
   nav top y31), plus the photograph absolutely positioned into the
   top-right corner and bleeding off the right edge.
   ===================================================================== */

.page-shell { position: relative; }

.hero {
  position: relative;
  padding-block-start: var(--page-margin);   /* comp: logo top y30 */
  padding-inline: var(--page-margin);
  isolation: isolate;
}

/* The banner is positioned, not in flow, so the text column reserves the
   height the navigation occupies: comp nav top y31 -> headline top y86. */
.hero__main { padding-block-start: 3.5rem; }

/* ---- Photograph -----------------------------------------------------
 * Cropped from the comp with its soft left/bottom transition already in
 * the pixels; the CSS mask cleans the crop edges so the photo dissolves
 * into the page rather than ending on a hard line. */
.hero__media {
  position: absolute;
  inset-block-start: 0;
  /* Sits at the right edge of the capped composition at its natural
     aspect. Widening it to reach the viewport edge forced an object-fit
     crop that cut the figure — the comp's crop matters more than the
     last 120px of bleed. */
  inset-inline-end: 0;
  width: var(--hero-media-w);
  z-index: -1;
  pointer-events: none;
}
.hero__media img {
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 26%),
    linear-gradient(to bottom, #000 76%, transparent 99%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 26%),
    linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-composite: intersect;
}

/* ---- Two-column frame ---------------------------------------------- */
.hero__inner {
  display: grid;
  grid-template-columns: var(--col-aside) minmax(0, var(--col-main));
  column-gap: var(--col-gutter);
  align-items: start;
}
/* DOM order is headline-first so the <h1> precedes the aside's <h2> and
   the reading order matches the content hierarchy; the grid puts the
   aside back on the left visually. */
/* Single row. The aside is one flow — logo, hairline, AVAILABLE FOR —
   so it stacks at the comp's spacing instead of being stretched by a
   row-spanning neighbour. */
.hero__aside { grid-column: 1; grid-row: 1; }
.hero__main  { grid-column: 2; grid-row: 1; }

/* =====================================================================
   LEFT COLUMN — logo, hairline, AVAILABLE FOR, LEARN MORE
   ===================================================================== */

.site-brand { display: block; }
.site-brand__logo { width: 100%; height: auto; }

.hero__aside-rule {
  margin-block-start: var(--space-logo-rule);
  border: 0;
  border-block-start: var(--rule-hairline) solid var(--color-pink-rule);
}

.availability { margin-block-start: var(--space-rule-label); }

.availability__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-pink);
  padding-inline-start: 1.5rem;   /* comp: block inset 24px from rule   */
}

.availability__list {
  margin-block-start: var(--space-label-list);
  padding-inline-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-list-item) - var(--fs-listitem));
}
.availability__item {
  position: relative;
  padding-inline-start: 1.125rem;
  font-size: var(--fs-listitem);
  font-weight: 700;
  letter-spacing: var(--tracking-listitem);
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1;
}
.availability__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.28em;
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-pink);
}

/* LEARN MORE — DORMANT: removed by client decision 2026-08-17. Kept so
   setting hero.availabilityCta.label restores it intact. */
.availability__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-start: var(--space-list-cta);
  margin-inline-start: 1.5rem;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-pink);
}
.availability__cta svg { width: 1rem; height: 0.6rem; flex: none; }
.availability__cta:hover { color: var(--color-ink); }
/* Inert until a destination is supplied. */
.availability__cta[aria-disabled='true'] { cursor: default; }

/* =====================================================================
   CENTER COLUMN — nav, headline, taglines, ornament, statement, copy
   ===================================================================== */

/* The banner sits outside <main> in the DOM (correct landmark order) and
 * is positioned onto the hero's top line, so the logo and the navigation
 * share a baseline exactly as they do in the comp (logo top y30, nav top
 * y31). It uses the same column track sizes as .hero__inner, with an
 * empty first cell where the logo sits. */
.site-header {
  position: absolute;
  inset-block-start: 1.6875rem;  /* comp: nav ink top y31, social y26 */
  inset-inline: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--col-aside) minmax(0, var(--col-main)) 1fr;
  column-gap: var(--col-gutter);
  align-items: start;
  padding-inline: var(--page-margin);
  pointer-events: none;          /* let the empty cells pass clicks through */
}
.site-header > * { pointer-events: auto; }
.site-header__brand-slot { pointer-events: none; }

.site-nav {
  padding-inline-start: 3rem;   /* comp: nav starts 48px into column   */
}
.site-nav__list {
  display: flex;
  align-items: baseline;
  gap: 2.0625rem;               /* comp: 33px between items            */
}
.site-nav__link,
.site-nav__text {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 800;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
  padding-block-end: var(--space-nav-underline);
  border-block-end: var(--underline-weight) solid transparent;
}
.site-nav__link:hover { color: var(--color-pink); }

/* Active state: pink label with pink rule beneath (comp: LULU'S LAB). */
.site-nav__link[aria-current='page'],
.site-nav__text[aria-current='page'] {
  color: var(--color-pink);
  border-block-end-color: var(--color-pink);
}

/* Navigation items with no destination render as text rather than as
   links that go nowhere. Unused while the nav is KELLY COVENY +
   LULU'S LAB only; kept for future items. */
.site-nav__text { color: var(--color-ink); cursor: default; }

/* ---- Social marks: top-right, over the photograph -------------------
 * DORMANT: removed from the page by client decision 2026-08-17. The
 * rules are kept so adding entries back to data/site.json > social
 * renders them correctly with no CSS work. Nothing is emitted while
 * that array is empty. */
.site-social {
  justify-self: end;
  display: flex;
  gap: var(--social-gap);
}
.site-social__item { display: block; }
.site-social svg {
  width: var(--social-size);
  height: var(--social-size);
  fill: var(--color-ink);
}
.site-social a:hover svg { fill: var(--color-pink); }

/* ---- Headline ------------------------------------------------------- */
.hero__headline {
  /* Vertical position comes from .hero__main's top padding, which
     reserves the height the positioned navigation occupies. */
  margin-block-start: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--color-ink);
  text-transform: uppercase;
}

.hero__tagline {
  margin-block-start: var(--space-headline-tag);
  font-family: var(--font-serif);
  font-size: var(--fs-tagline);
  line-height: 1.1;
  color: var(--color-pink);
}

.hero__subtagline {
  margin-block-start: var(--space-tag-sub);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-subtagline);
  line-height: 1.2;
  color: var(--color-ink);
}

/* ---- Star ornament: rule ★ rule ------------------------------------ */
.hero__ornament {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: var(--space-sub-ornament);
  width: 92%;
}
.hero__ornament::before,
.hero__ornament::after {
  content: '';
  flex: 1 1 auto;
  height: var(--rule-hairline);
  background: var(--color-pink-rule);
}
.hero__ornament svg {
  flex: none;
  width: var(--star-size);
  height: var(--star-size);
  fill: var(--color-pink);
}

.hero__statement {
  margin-block-start: var(--space-ornament-stmt);
  font-family: var(--font-sans);
  font-size: var(--fs-statement);
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero__copy {
  margin-block-start: var(--space-stmt-body);
  max-width: 100%;
}
.hero__copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.hero__copy p + p { margin-block-start: var(--space-paragraph); }

/* =====================================================================
   COLLECTION DIVIDER — ——— ★ EXPLORE THE COLLECTION ★ ———
   ===================================================================== */

.collection-divider {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  margin-block-start: var(--space-hero-divider);
  padding-inline: var(--page-margin);
}
.collection-divider::before,
.collection-divider::after {
  content: '';
  flex: 1 1 auto;
  height: var(--rule-hairline);
  background: var(--color-rule);
}
.collection-divider__title {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  flex: none;
}
.collection-divider__title svg {
  flex: none;
  width: var(--star-size);
  height: var(--star-size);
  fill: var(--color-pink);
}
.collection-divider__text {
  font-family: var(--font-sans);
  font-size: var(--fs-divider);
  font-weight: 800;
  letter-spacing: var(--tracking-divider);
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
  /* letter-spacing adds trailing space after the last glyph; pull it
     back so the right-hand star sits symmetrically. */
  margin-inline-end: calc(var(--tracking-divider) * -1);
}

/* =====================================================================
   RESPONSIVE
   The comp is a desktop composition. Below 60em the three zones stack:
   photograph first (it is the strongest brand asset), then the headline
   block, then AVAILABLE FOR.
   ===================================================================== */

/* =====================================================================
   TABLET  (46em - 64em)
   The two-column editorial relationship is kept rather than collapsed:
   identity left, story centre, photograph right at its natural aspect.
   Stacking here was what made the photograph a giant standalone opening
   image — at 820 it became a full-width band over 1100px tall. Held in
   two columns it is ~300px wide and the branding and story sit at the
   top of the page where they belong.
   ===================================================================== */

@media (max-width: 64em) {
  .site-nav { padding-inline-start: 1.5rem; }
  .availability__label,
  .availability__list,
  .availability__cta { padding-inline-start: 0; margin-inline-start: 0; }
}

/* =====================================================================
   MOBILE  (below 46em)
   A composed order, not a collapsed desktop layout. The visitor meets
   the identity and the promise before the photograph.

   `display: contents` on the three wrappers lifts their children into
   one flex column, which is the only way to interleave items that live
   in different containers — the logo sits in the aside, the headline in
   the main column, the photograph outside both. The wrappers are plain
   divs with no semantics to lose.
   ===================================================================== */

@media (max-width: 46em) {
  .hero {
    padding-block-start: 0;
    display: flex;
    flex-direction: column;
  }
  .hero__inner,
  .hero__main,
  .hero__aside { display: contents; }

  .hero__main { padding-block-start: 0; }

  /* 1 logo · 2 headline · 3 tagline · 4 subtagline · 5 photograph
     6 rule+star · 7 statement · 8 story copy · 9 AVAILABLE FOR        */
  .site-brand        { order: 1; max-width: 8.5rem; margin-block-start: 0.5rem; }
  .hero__headline    { order: 2; margin-block-start: 1.5rem; }
  .hero__tagline     { order: 3; }
  .hero__subtagline  { order: 4; }
  .hero__media       { order: 5; }
  .hero__ornament    { order: 6; width: 100%; }
  .hero__statement   { order: 7; }
  .hero__copy        { order: 8; }
  .hero__listen-row  { order: 9; }
  /* An <hr> is an empty flex item, so it collapses to zero width
     without an explicit one. */
  .hero__aside-rule  { order: 10; width: 100%; margin-block-start: 2rem; }
  .availability      { order: 11; margin-block-start: 1.5rem; }

  /* Photograph: full-bleed edge to edge, natural aspect, dissolving into
     the page at the bottom the way it does on desktop. */
  .hero__media {
    position: static;
    width: calc(100% + (var(--page-margin) * 2));
    margin-inline-start: calc(var(--page-margin) * -1);
    margin-block: 1.75rem 0.5rem;
    z-index: 0;
  }
  .hero__media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  }

  /* Navigation stays compact at the very top. */
  .site-header {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-inline: var(--page-margin);
    padding-block: 1rem 0.25rem;
  }
  .site-header__brand-slot { display: none; }
  .site-nav { padding-inline-start: 0; }
  .site-nav__list { flex-wrap: wrap; gap: 1.25rem; }
  .site-nav__link,
  .site-nav__text { padding-block-end: 0.3rem; }
  .site-social { position: static; }
}

@media (max-width: 34em) {
  .collection-divider { gap: 0.75rem; }
  .collection-divider__title { gap: 0.75rem; }
  .collection-divider__text { font-size: 0.75rem; letter-spacing: 0.2em; }
}


/* =====================================================================
   HERO — LISTEN affordance
   Functional only. Sized and coloured from existing tokens; no new
   visual language introduced pending art direction.
   ===================================================================== */

.hero__listen-row { margin-block-start: 0.75rem; }

.hero__listen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-pink);
  white-space: nowrap;
  padding-block-end: 0.25rem;
  border-block-end: var(--underline-weight) solid transparent;
}
.hero__listen:hover { border-block-end-color: var(--color-pink); }
.hero__listen-icon { display: inline-flex; }
.hero__listen-icon svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }

/* =====================================================================
   PLAYER
   Native <audio>, entirely custom interface. The audio element itself is
   never displayed and carries no `controls` attribute, so the browser's
   default player can never appear.
   ===================================================================== */

.player {
  margin-block-start: 2.5rem;
  padding-inline: var(--page-margin);
}

.player__inner {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.player audio { display: none; }

.player__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-pink);
}

.player__album {
  margin-block-start: 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-ink);
}

.player__artist {
  margin-block-start: 0.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-subtagline);
  color: var(--color-ink-soft);
}

/* ---- Transport ------------------------------------------------------ */
.player__transport {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.player__btn:hover { color: var(--color-pink); }
.player__btn svg { fill: currentColor; }

.player__btn--prev svg,
.player__btn--next svg { width: 1rem; height: 1rem; }

.player__btn--toggle {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
}
.player__btn--toggle:hover { border-color: var(--color-pink); }
.player__btn--toggle svg { width: 0.9rem; height: 0.9rem; }

/* Icon swap is driven by the button's own state attribute, which the
   script keeps in sync with the aria-label. */
.player__icon--pause { display: none; }
.player__btn--toggle[data-state='playing'] .player__icon--play  { display: none; }
.player__btn--toggle[data-state='playing'] .player__icon--pause { display: inline-flex; }

/* ---- Seek bar -------------------------------------------------------
 * A real <input type="range">: arrow keys, Home and End work natively and
 * assistive tech gets a slider with a value. Appearance is reset so the
 * platform widget never shows through. */
.player__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1rem;
  margin: 0;
  background: none;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--color-rule);
}
.player__seek::-moz-range-track {
  height: 2px;
  background: var(--color-rule);
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-block-start: -0.29rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-pink);
}
.player__seek::-moz-range-thumb {
  width: 0.6rem;
  height: 0.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-pink);
}

.player__time {
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

/* ---- External links ------------------------------------------------- */
/* [hidden] must beat display:flex — the UA rule is weaker than any
   author display declaration, which is the classic way hidden elements
   stay visible. */
.player__external[hidden] { display: none; }

.player__external {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-block-start: 1.25rem;
}
.player__external-label {
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.player__external-link {
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  border-block-end: 1px solid var(--color-rule);
}
.player__external-link:hover { color: var(--color-pink); border-block-end-color: currentColor; }
.player__external-link[hidden] { display: none; }

@media (max-width: 34em) {
  .player__transport {
    grid-template-columns: auto auto auto;
    justify-content: center;
    row-gap: 0.75rem;
  }
  .player__seek { grid-column: 1 / -1; }
  .player__time { grid-column: 1 / -1; }
}

/* =====================================================================
   COLLECTION
   The catalogue, in the hero's language: white ground, square artwork,
   an uppercase title, editorial description, and a restrained LISTEN
   row. No cards, no borders, no shadows, no price-tag furniture — the
   artwork is the object and the type does the rest.

   Columns: 3 desktop / 2 tablet / 1 mobile. Authoritative.
   ===================================================================== */

.collection {
  margin-block-start: var(--space-collection-top);
  padding-inline: var(--page-margin);
}

.album-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}
@media (min-width: 48em) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.album { display: flex; flex-direction: column; }

/* ---- Artwork ---------------------------------------------------------
 * 1:1 site-wide standard. The whole cover is the click target when the
 * release has a destination. */
.album__artwork {
  width: 100%;
  aspect-ratio: var(--album-aspect);
  object-fit: cover;
  background: var(--color-artwork-bg);
  transition: opacity var(--transition-base);
}
.album__artwork-link,
.album__artwork-static { display: block; }
.album__artwork-link:hover .album__artwork { opacity: 0.86; }

.album__artwork-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.album__play-badge {
  position: absolute;
  inset-block-end: 0.625rem;
  inset-inline-start: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-pink);
  transition: transform var(--transition-fast);
}
.album__play-badge svg { width: 0.6rem; height: 0.6rem; fill: #fff; }
.album__artwork-button:hover .album__play-badge { transform: scale(1.12); }
.album__artwork-button[aria-pressed='true'] .album__play-badge { background: var(--color-ink); }
@media (prefers-reduced-motion: reduce) {
  .album__artwork-button:hover .album__play-badge { transform: none; }
}

/* ---- Title ----------------------------------------------------------- */
.album__title {
  margin-block-start: 0.95rem;
  font-family: var(--font-sans);
  font-size: var(--fs-album-title);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-ink);
}
.album__year {
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-soft);
}

/* ---- Description ------------------------------------------------------ */
.album__description {
  margin-block-start: 0.5rem;
  font-size: var(--fs-album-desc);
  line-height: 1.5;
  color: var(--color-ink);
}
/* A gap we know about, marked as such rather than left blank or invented. */
.album__description--pending {
  color: var(--color-pending);
  font-style: italic;
}

/* ---- LISTEN row -------------------------------------------------------
 * Secondary by design: small, uppercase label, service names carrying
 * their own colour, separated by a hairline rather than a glyph. */
.album__listen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-block-start: auto;
  padding-block-start: 1.05rem;
  font-family: var(--font-sans);
  font-size: var(--fs-album-listen);
}
.album__listen-label {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.album__listen-sep {
  width: 1px;
  height: 0.85em;
  background: var(--color-rule);
}
.album__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-block-end: 1px solid transparent;
  padding-block-end: 1px;
}
.album__link--spotify { color: var(--color-spotify); }
.album__link--apple   { color: var(--color-pink); }
.album__link:hover    { border-block-end-color: currentColor; }
.album__service-mark  { width: 0.72em; height: 0.72em; fill: currentColor; }

/* Service with no URL yet: holds its place in the row, plainly inert. */
.album__link--pending {
  color: var(--color-pending);
  cursor: default;
  border-block-end: 1px dotted var(--color-rule);
}
.album__link--pending:hover { border-block-end-color: var(--color-rule); }

/* =====================================================================
   FOOTER
   ===================================================================== */

.site-footer {
  margin-block-start: 2.5rem;
  padding: 1.5rem var(--page-margin);
  border-block-start: var(--rule-hairline) solid var(--color-rule);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: var(--fs-nav);
  color: var(--color-ink-soft);
}