.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--duration-base) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Tab shell ----------
   A fixed-height app frame with the scroll living inside each page rather than
   on the document. That's what a native tabbed app does, and it's what makes
   per-tab scroll position survive a tab switch. */
.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-stack {
  position: relative;
  flex: 1;
  min-height: 0;
}

.page {
  --page-x: 1.25rem;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--page-x), 0, 0);
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}

.page.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear 0s;
}

/* Positioning context for the absolutely-positioned top bar, which overlays the
   hero from the top of the page and scrolls away with it. */
.home-view {
  position: relative;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.site-main {
  display: flex;
  flex-direction: column;
  /* Tightened 2026-08-30, per explicit product request — was --space-7/8
     (3rem/4rem). This is the shared gap between every direct child of
     site-main, hero included, so it's also what sets the space between the
     hero and the first section (Continue Watching); only the space *above*
     the hero itself (outside this flex flow, on .hero-carousel's own
     margin) is untouched. */
  gap: var(--space-4);
  /* No footer below this anymore — the fixed bottom-nav dock still needs the
     same clearance the footer used to provide, or the last row hides behind it. */
  padding-bottom: calc(var(--bottom-nav-clearance) + var(--space-6));
}

.section {
  position: relative;
  /* Scopes the wash pseudo-element's z-index: -1 to this section alone,
     instead of racing every other negative-z-index element on the page for
     stacking order. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Tightened 2026-08-30, per explicit product request — top cushion was
     --space-5 (1.5rem), bottom was --space-1 (0.25rem). Kept asymmetric
     (more room above the heading than below the last row) for the same
     reason as before — it's what gives each section room to read as its
     own band rather than the next section's whitespace bleeding into it —
     just less of both. */
  padding-block: var(--space-3) 0;
}

/* The very first section sits directly under the hero, which already ends on
   a strong, self-contained visual edge (rounded card + scrim) — an identical
   top cushion here would just double that separation. */
.section:first-of-type {
  padding-top: 0;
}

/* A soft full-width seam between sections — the primary "this is a new
   section" cue. Neutral (border-strong, not accent) so it reads as
   structure, not decoration, and needs no per-theme color override. */
.section:not(:first-of-type)::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: var(--container-padding);
  inset-inline-end: var(--container-padding);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border-strong) 18%,
    var(--color-border-strong) 82%,
    transparent 100%
  );
}

/* Every other section gets a barely-there luminance wash — full-bleed, soft
   at both edges — so the eye can tell sections apart at a glance without any
   hard box or card outline. Purely atmospheric: alternating, not tied to
   content, and subtle enough to stay out of the way of the posters sitting
   on top of it. */
.section:nth-of-type(even)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.025) 14%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.025) 86%,
    transparent 100%
  );
  pointer-events: none;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--container-padding);
}

.section-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Slightly smaller than --fs-xl — a full step down to --fs-lg read as too
   * small a change in size relative to the row content beneath it. */
  font-size: calc(var(--fs-xl) * 0.92);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-inline-start: 0;
}

/* No leading accent bar — the leading glyph (`.section-icon` below) is what
   marks a section now, matching Theme 3 ("Ember")'s approach. */
.section-title::before {
  content: none;
}

/* Wraps the h2 (and its optional one-line strapline) so the head stays a
   two-child flex row — headings block on one side, "All" pill on the other —
   now that the title can be two stacked lines. `min-width: 0` lets the block
   shrink instead of pushing the pill off-screen on a narrow phone. */
.section-headings {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Both emitted by `section.js#createSectionHead()` for every theme. Every
   theme now renders them (aligned with Theme 3/"Ember"'s icon-usage
   approach), each in its own accent color via the shared tokens below. */
.section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent-strong);
}

.section-icon svg {
  width: 100%;
  height: 100%;
}

.section-sub {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: 7px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.section-link:hover,
.section-link:focus-visible {
  color: var(--color-accent-strong);
  border-color: rgba(236, 194, 127, 0.35);
  background: rgba(215, 163, 92, 0.08);
}

/* Ember spells the destination out — "All Hottest This Week" — rather than a
   bare "All"; every theme now does the same, dropping back to the bare word
   below ~26rem where a two-line title no longer leaves room for both. */
.section-link-detail {
  display: inline;
}

@media (max-width: 23rem) {
  .section-link-detail {
    display: none;
  }
}

.section-link-chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
}

.section-link-chevron svg {
  width: 100%;
  height: 100%;
}

/* The pill is the one part of the head that must never shrink away — its label
   is `nowrap`, so without this a long section title would squeeze it into an
   unreadable sliver instead of wrapping itself. */
.section-link {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .site-main {
    /* Tightened 2026-08-30 alongside the mobile value above — was --space-8 (4rem). */
    gap: var(--space-6);
  }
}