/* ===========================================================================
   High Falls Media — home.css
   Homepage-only sections, isolated so shop.html and product.html stay untouched.
   Uses the shared tokens from main.css; reuses .hf-card / .hf-badge / .hf-price
   for the featured rail.
   Hero sits on the page's own cream background (transparent) with dark type, so
   it reads as one continuous surface with the rest of the site. Browse-by-format
   is a reflowing card list — stocked formats are solid links with a coloured
   spine edge; coming-soon formats are dashed "empty shelf" slots, no link.
   =========================================================================== */

/* ── Shared section header (featured rail) ──────────────────────────────── */
.hf-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.hf-shead__title {
  font-family: var(--display); font-weight: 700; color: var(--deep);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.04; margin-top: 0.5rem;
}
.hf-shead__lede { color: var(--muted); max-width: 50ch; margin-top: 0.5rem; }
.hf-seeall {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.82rem; color: var(--genesee-dk);
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem;
}
.hf-seeall:hover { color: var(--teal-dk); }
.hf-seeall svg { width: 16px; height: 16px; }

.hf-section { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.hf-section--tint { background: var(--cream-dk); border-block: 1px solid rgba(13,31,51,0.08); }

/* ── HERO (on the page's cream surface) ─────────────────────────────────── */
.hf-hero {
  position: relative; background: transparent; color: var(--ink); text-align: center;
  padding-block: clamp(2.4rem, 5vw, 4rem) clamp(2.6rem, 5vw, 4.2rem);
}
.hf-hero__inner { display: flex; flex-direction: column; align-items: center; }
.hf-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 700;
  font-size: clamp(0.7rem, 1.3vw, 0.84rem);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--amber-dk);
}
.hf-hero__eyebrow .star { color: var(--amber); }
.hf-hero__title {
  font-family: var(--display); font-weight: 700; color: var(--deep);
  font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.005em;
  margin-top: 1rem; max-width: 18ch; text-wrap: balance;
}
.hf-hero__title .roc { color: var(--genesee); }
.hf-hero__accent {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); color: var(--teal-dk); margin-top: 0.9rem;
}
.hf-hero__lede { color: var(--muted); max-width: 52ch; margin-top: 0.9rem; font-size: clamp(0.98rem, 1.6vw, 1.1rem); }
.hf-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.8rem; }

/* ── Browse by format: reflowing card list ──────────────────────────────── */
.hf-fmt-note {
  display: inline-flex; align-items: center; gap: 0.7rem; align-self: center;
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.72rem; color: var(--muted);
}
.hf-fmt-note::before, .hf-fmt-note::after { content: ""; width: clamp(16px, 4vw, 30px); height: 2px; background: var(--genesee); opacity: 0.4; }

.hf-formats { width: 100%; margin-top: 1.1rem; }
.hf-formats ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: clamp(0.7rem, 1.4vw, 1rem);
}
.hf-fmt {
  display: flex; align-items: center; gap: 0.85rem; text-align: left; text-decoration: none;
  background: var(--white); border: 1px solid rgba(13,31,51,0.12);
  border-left: 4px solid var(--col, var(--genesee)); border-radius: var(--card-radius);
  padding: 0.8rem 1rem; box-shadow: 0 1px 2px rgba(13,31,51,0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.hf-fmt:hover, .hf-fmt:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(13,31,51,0.5); }
.hf-fmt__glyph { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: #eaf3fb; color: var(--genesee-dk); }
.hf-fmt__glyph svg { width: 24px; height: 24px; }
.hf-fmt__text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.hf-fmt__name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--deep); line-height: 1.1; }
.hf-fmt__meta { font-family: var(--body); font-weight: 600; font-size: 0.78rem; color: var(--muted); font-feature-settings: "tnum" 1; }
.hf-fmt__arrow { margin-left: auto; color: var(--genesee-dk); flex: none; display: flex; transition: transform 0.16s ease; }
.hf-fmt__arrow svg { width: 18px; height: 18px; }
.hf-fmt:hover .hf-fmt__arrow { transform: translateX(3px); }

/* per-format spine-edge colour (stocked cards only) */
.hf-fmt--dvd      { --col: var(--genesee); }
.hf-fmt--bluray   { --col: var(--genesee-dk); }
.hf-fmt--4k-uhd   { --col: var(--deep); }
.hf-fmt--vhs      { --col: var(--teal); }
.hf-fmt--cd       { --col: var(--teal-dk); }
.hf-fmt--vinyl    { --col: var(--amber); }
.hf-fmt--cassette { --col: var(--genesee); }
.hf-fmt--game     { --col: var(--teal); }

/* coming-soon: a dashed empty shelf slot — informational, not a link */
.hf-fmt.is-soon {
  background: transparent; border: 1.5px dashed rgba(13,31,51,0.22); box-shadow: none; cursor: default;
}
.hf-fmt.is-soon:hover { transform: none; box-shadow: none; }
.hf-fmt.is-soon .hf-fmt__glyph { background: rgba(13,31,51,0.05); color: var(--muted); }
.hf-fmt.is-soon .hf-fmt__name { color: var(--muted); }
.hf-fmt.is-soon .hf-fmt__meta { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; }

.hf-fmt-fallback { color: var(--muted); margin-top: 1.5rem; }

/* ── FEATURED RAIL ──────────────────────────────────────────────────────── */
.hf-featured__grid {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* ── RESPONSIVE: vertical phone — single column ─────────────────────────── */
@media (max-width: 560px) {
  .hf-formats ul { grid-template-columns: 1fr; }
  .hf-featured__grid { grid-template-columns: 1fr; }
  .hf-hero__title { max-width: none; }
  .hf-shead { align-items: flex-start; }
}

/* ── RESPONSIVE: 4K / ultrawide — scale up from 3440×1440 ────────────────── */
@media (min-width: 3440px) {
  .hf-formats ul { max-width: 1500px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
  .hf-fmt__glyph { width: 56px; height: 56px; }
  .hf-fmt__glyph svg { width: 32px; height: 32px; }
  .hf-fmt__name { font-size: 1.35rem; }
  .hf-featured__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-fmt, .hf-fmt__arrow { transition: none; }
}

/* ── FEATURED: per-category subsections ─────────────────────────────────── */
.hf-featured__sub { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.hf-featured__sub:first-child { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.hf-featured__subhead {
  font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.01em;
  margin: 0; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
}
.hf-featured__sub .hf-featured__grid { margin-top: clamp(0.8rem, 2vw, 1.2rem); }