/* Sleep Studio — page layout */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: color-mix(in oklch, var(--void) 74%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand .mark {
  width: 1.9rem; height: 1.9rem;
  flex-shrink: 0;
}
.brand .mark .mark-bg { fill: var(--surface-raised); stroke: var(--hairline-strong); }
.brand .mark .mark-moon { fill: var(--ember); }
.brand .mark .mark-wave { stroke: var(--moon); }

.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6.5vw, 5rem) var(--space-6);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  max-width: 24ch;
}
.hero h1 .accent-word {
  color: var(--ember-strong);
  text-shadow: 0 0 28px oklch(0.775 0.168 58 / 0.35);
}
.hero p {
  margin-top: var(--space-4);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
  max-width: 58ch;
}

/* Each section reads as a clearly-bounded, labeled block: a top hairline
   divider (skipped on the first section, which already sits under the
   hero), generous top/bottom air, and an eyebrow + heading pair instead of
   a bare h2 -- so "which of the 5 sections am I in" is answerable without
   scrolling back up to the nav. */
.section {
  padding-block: var(--space-8) var(--space-7);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 7.5rem;
}
.section:first-of-type {
  border-top: none;
  padding-top: var(--space-4);
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.section-head-title {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ember-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.section-head h2 {
  font-size: var(--text-xl);
}
.section-head .section-note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sticky "you are here" strip -- sits just under the sticky site-header,
   hidden until the listener scrolls past the hero into the first section
   (toggled via .is-visible by app.js's scrollspy), and always names
   whichever of the 5 sections is currently in view. */
.section-tracker {
  position: sticky;
  top: 4.25rem;
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
  background: color-mix(in oklch, var(--void) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.section-tracker.is-visible { opacity: 1; transform: translateY(0); }
.section-tracker-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 2.5rem;
}
.section-tracker-index {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ember-strong);
  letter-spacing: 0.06em;
}
.section-tracker-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* Packs toolbar: search + cluster filter + a live visible-count readout,
   so 48 cards are findable/filterable instead of one long scroll. */
.packs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.packs-toolbar #packs-search { flex: 2 1 260px; min-width: 200px; }
.packs-toolbar #packs-cluster-filter { flex: 1 1 160px; min-width: 140px; }
.packs-toolbar-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: auto;
}

.packs-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* The real library is a long unpaginated list -- needs an internal scroll
   region, not an unbounded page (a future pass would add virtualization).
   Accents (89 across 3 tiers) gets the same treatment; Frequencies (10) and
   Packs (48 cards) don't need it. */
#track-list, #accent-list {
  max-height: 64vh;
  overflow-y: auto;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.master-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline);
}
.master-bar .master-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.master-bar .fader-wrap {
  flex: 1;
  max-width: 220px;
}

.site-footer {
  padding-block: var(--space-7) var(--space-8);
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-7);
}
.site-footer p {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .track-row .track-dur { display: none; }
  .transport { flex-wrap: wrap; width: calc(100vw - 2 * var(--gutter)); }
}