/* ==========================================================================
   LOKUST RECORDS — site.css (final design tweaks)
   Design W (Unbounded "Lokust" + P's type: Instrument Serif · Anton ·
   Space Mono · Archivo) with the finishing fixes:
     1. Record: needle/swap buttons never wrap — stacked full-width on
        phones (and in narrow columns), side by side everywhere else.
     2. Record: chunkier A1–B2 tracklist rows with "?:??" run-times.
     3. Listen: brighter link text on phones (no hover there).
     4. About: same layout as W (only the "About" label is lifted for legibility).
     5. Smooth nav scrolling; "Lokust Records" sticky on the cover like LISTEN.
   ========================================================================== */

/* Nav links glide to their section instead of jumping
   (base.css turns this off for prefers-reduced-motion). */
html { scroll-behavior: smooth; }

/* ---- Cover word (from W) ----------------------------------------------- */
.cover__word {
  font-family: "Unbounded", var(--sans);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-size: clamp(3.8rem, 16.5vw, 20rem);
  text-shadow: 0.035em 0.035em 0 var(--moss);
}
@media (max-width: 36em) { .cover__word { font-size: 18vw; } }

/* "Lokust Records" pins while the cover scrolls, like LISTEN (desktop only),
   and stops just above the "Music discovery" cut-outs.
   .cover__pin is the box it pins within: rows 1–2 of the cover, i.e. from
   the top down to where the cut-outs begin. Below desktop it's display:
   contents, so the tablet/phone layouts are untouched.
   overflow: clip keeps the logo bleed cropped without breaking sticky. */
.cover__pin { display: contents; }
@media (min-width: 60.01em) {
  .cover { overflow: clip; grid-template-rows: auto 1fr auto; }
  .cover__pin {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    position: relative;
    z-index: 1;
    padding-bottom: 1.5rem; /* breathing room above the cut-outs */
  }
  .cover__title { position: sticky; top: 2.5rem; }
  .cover__logo { grid-row: 1 / 4; }
  .cutouts { grid-row: 3; }
}

/* ---- 1. Deck buttons: always one row, or always a stack ---------------- */
.deck-controls { flex-wrap: nowrap; }
.chip { justify-content: center; white-space: nowrap; }

@media (min-width: 60.01em) {
  .release__text { container-type: inline-size; }
}
@container (max-width: 27rem) {
  .deck-controls { flex-direction: column; align-items: stretch; }
}
@media (max-width: 36em) {
  .deck-controls { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .deck-controls .chip { width: 100%; padding-block: 0.9rem; }
}

/* ---- 2. Tracklist rows -------------------------------------------------- */
.redacted li {
  grid-template-columns: 2.6rem 1fr auto;
  gap: 0.9rem;
  padding: 0.7rem 0;
}
.redacted li > span { color: var(--gold); }
.redacted li::after {
  content: "?:??";
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.redacted i { height: 1.25rem; opacity: 1; }

@media (max-width: 36em) {
  .redacted { border-top-width: 3px; }
  .redacted li { padding: 0.95rem 0; font-size: 1rem; }
  .redacted i { height: 1.5rem; min-width: 45%; }
}

/* ---- 3. Listen: brighter on phones -------------------------------------- */
@media (max-width: 36em) {
  .links a { color: #A7AB7F; } /* slate lifted toward lime */
  .links a:active { color: var(--lime); }
}

/* the kicker sits on green here — lift it so "About" stays legible */
.about--fade .kicker { color: var(--dim); border-color: rgba(222, 228, 140, 0.35); }

/* ---- Sign-up spam trap: present in the form, invisible to people -------- */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }