/* 2Q page — theme bindings for the shared chapter system (chapters.css).
   Loaded AFTER chapters.css so these win the cascade. */

/* Fredoka Bold — playful display face for 2Q headlines */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/external/fonts.gstatic.com/fonts/Fredoka-Bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Headlines: Fredoka Bold, white, black outer glow */
body[data-theme="2q"] .rk-chapter-title,
body[data-theme="2q"] .rk-chapter-title--hero,
body[data-theme="2q"] .rk-chapter-gallery__head .rk-chapter-title,
body[data-theme="2q"] .rk-chapter-closer .rk-chapter-title {
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.75),
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 10px 36px rgba(0, 0, 0, 0.45);
}


body[data-theme="2q"] {
  --chapter-bg: #08160d;
  --chapter-accent: var(--q2-accent);           /* #7dbd7d forest green */
  --chapter-accent-soft: var(--q2-accent-soft); /* #b8e0b8 light green */
  --chapter-text-strong: var(--q2-text-strong);
  --chapter-text-soft: var(--q2-text-soft);
  --chapter-text-muted: var(--q2-text-muted);
}

body[data-theme="2q"] .rk-footer {
  background: #08160d;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Subtle tonal shifts per chapter — forest gradient walk */
body[data-theme="2q"] #chapter-trailer {
  background: linear-gradient(180deg, #060f08 0%, #08160d 100%);
}
body[data-theme="2q"] #chapter-mosey {
  background: linear-gradient(180deg, #08160d 0%, #0c2014 100%);
}
body[data-theme="2q"] #chapter-friends {
  background: linear-gradient(180deg, #0a1d11 0%, #0e2316 100%);
}
body[data-theme="2q"] #chapter-tv {
  background: linear-gradient(180deg, #0c2014 0%, #102818 100%);
}
body[data-theme="2q"] #chapter-imessage {
  background: linear-gradient(180deg, #0e2316 0%, #122a1a 100%);
}
body[data-theme="2q"] #chapter-categories {
  background: linear-gradient(180deg, #102818 0%, #143020 100%);
}
body[data-theme="2q"] #chapter-platforms {
  background: linear-gradient(180deg, #122a1a 0%, #163422 100%);
}
body[data-theme="2q"] #chapter-privacy {
  background: linear-gradient(180deg, #143020 0%, #183826 100%);
}
body[data-theme="2q"] #chapter-gallery {
  background: linear-gradient(180deg, #163422 0%, #1a3c2a 100%);
}

/* Make Apple TV chapter media display landscape (16:9) instead of phone aspect */
body[data-theme="2q"] .rk-chapter__media--tv img {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 760px;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

/* iPad chapter media — slightly larger, 3:4 portrait */
body[data-theme="2q"] .rk-chapter__media--ipad img {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 580px;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

/* iMessage chapter media — phone aspect already covered by .rk-chapter__media--phone */

/* Multi-device gallery: per-track heading + size variants */
body[data-theme="2q"] .rk-gallery-track-head {
  text-align: center;
  margin: clamp(40px, 5vw, 72px) 0 clamp(20px, 2vw, 32px);
  padding: 0 clamp(24px, 6vw, 96px);
}
body[data-theme="2q"] .rk-gallery-track-head__kicker {
  font-family: 'Black Ops One', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--chapter-accent);
  font-size: clamp(11px, 1.1vw, 13px);
}
body[data-theme="2q"] .rk-gallery-track-head__label {
  display: block;
  margin-top: 6px;
  color: var(--chapter-text-soft);
  font-size: clamp(13px, 1.2vw, 15px);
}

/* iPad gallery items — wider portrait */
body[data-theme="2q"] .rk-chapter-gallery__item--ipad {
  width: clamp(280px, 34vw, 440px);
  border-radius: 32px;
}

/* Apple TV gallery items — 16:9 landscape, wider */
body[data-theme="2q"] .rk-chapter-gallery__item--tv {
  width: clamp(360px, 50vw, 640px);
  border-radius: 18px;
}
body[data-theme="2q"] .rk-chapter-gallery__item--tv img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

/* Trailer chapter — video inside phone-aspect media should mirror img treatment */
body[data-theme="2q"] .rk-chapter__media--phone video {
  width: auto;
  height: auto;
  max-width: min(90%, 440px);
  max-height: 85%;
  object-fit: contain;
  border-radius: 42px;
  filter:
    drop-shadow(0 40px 80px rgba(4, 8, 12, 0.7))
    drop-shadow(0 0 40px color-mix(in srgb, var(--chapter-accent) 18%, transparent));
  display: block;
  background: #000;
  cursor: pointer;
}

/* ─────────────────────────────────────────────
   Layout polish pass — May 2026
   Goal: tighten vertical rhythm, fix headline
   wrap, lift kickers, align iPad chapter, polish
   the hero. All scoped to the 2Q theme so other
   pages (FFM, PatchShepherd) keep their cadence.
   ───────────────────────────────────────────── */

/* 1. Hero: cap at 85svh so the headline + body + badge all fit
       in one viewport on a typical laptop without forcing the user
       to scroll a full screen of empty space first. */
body[data-theme="2q"] .rk-chapter-hero {
  min-height: 85svh;
  padding: clamp(60px, 7vh, 100px) clamp(24px, 6vw, 96px) clamp(32px, 5vh, 64px);
}

/* 2. Chapters: each split-media chapter caps at 85svh so the page
       reads as one continuous narrative instead of nine separate
       full-viewport screens. */
body[data-theme="2q"] .rk-chapter {
  min-height: 85svh;
}

/* 3. Full-bleed chapters: shrink padding so kicker/title/lead
       sit closer together, less dead space top + bottom. */
body[data-theme="2q"] .rk-chapter--full {
  min-height: auto;
  padding: clamp(60px, 8vh, 110px) clamp(24px, 6vw, 96px);
}

/* 4. Chapter copy padding: trim a bit to keep sibling chapters
       visually connected. */
body[data-theme="2q"] .rk-chapter__copy {
  padding: clamp(48px, 6vh, 96px) clamp(32px, 5vw, 80px);
}

/* 5. Headline word-wrap: native CSS balance so the renderer
       picks the most aesthetic line break instead of orphaning
       single words. Manual <br> in HTML still wins on the
       chapters where we want a specific shape. */
body[data-theme="2q"] .rk-chapter-title {
  text-wrap: balance;
  text-wrap: pretty; /* progressive enhancement on supporting browsers */
}

/* 6. Kicker visibility: the small caps subtitle line above each
       chapter title. Bumping size + opacity so it actually reads. */
body[data-theme="2q"] .rk-chapter-kicker {
  font-size: clamp(12px, 1.05vw, 14px);
  opacity: 0.92;
  letter-spacing: 0.22em;
}

/* 7. iPad chapter media — explicit center alignment so the iPad
       screenshot vertically aligns with the copy column instead of
       floating high. The grid is align-items:stretch by default;
       this forces the contents inside the media half to center. */
body[data-theme="2q"] #chapter-ipad .rk-chapter__media,
body[data-theme="2q"] #chapter-ipad .rk-chapter__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 8. Hero wordmark watermark — kill it. The faded behind-text
       version reads as a render glitch. Better to let the headline
       breathe. (The wordmark image at top still shows; this only
       hides the duplicated ghost watermark behind the H1.) */
body[data-theme="2q"] .rk-chapter-wordmark,
body[data-theme="2q"] .rk-chapter-title-watermark {
  display: none !important;
}

/* 9. Secondary hero CTA ("Watch the trailer ↓") — paired with the
       primary App Store badge so the badge isn't lonely in the
       middle of the hero. */
body[data-theme="2q"] .rk-chapter-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 40%, transparent);
  border-radius: 999px;
  color: var(--chapter-text-strong);
  font-family: var(--chapter-body-font);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body[data-theme="2q"] .rk-chapter-hero__secondary:hover {
  background: color-mix(in srgb, var(--chapter-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--chapter-accent) 60%, transparent);
  transform: translateY(-1px);
}

/* 10. Privacy + categories headlines: cap max-width so they wrap
        consistently across viewport widths. */
body[data-theme="2q"] #chapter-privacy .rk-chapter-title,
body[data-theme="2q"] #chapter-categories .rk-chapter-title {
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
body[data-theme="2q"] #chapter-platforms .rk-chapter-title {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* 11. Hero meta + chapter scroll indicator: tighter top margin
        since we shrunk the hero overall. */
body[data-theme="2q"] .rk-chapter-hero__meta {
  margin-top: clamp(16px, 2vw, 24px);
}