/* The Molten Survival Guide. Cannes / Marché du Film 2026
   Brand tokens (verified against live Webflow CSS, May 2026):
   --primary-accent  #ff3b5e   brand red (use for active accents)
   --primary-deep    #ff143f   bright red secondary
   --bg              #151719   page background (web-native)
   --bg-deep         #0a1628   contrasting dark for interstitial
   --surface         #1f2225   card surface
   --surface-2       #25282c   higher card surface
   --border          #33363a
   --text            #e6e8ea   body text on dark
   --text-muted      #abb2b7   muted body
   --text-dim        #7c8388
   Type:
   Headlines      "Avant Garde", system fallback
   Body           Inter (Google Fonts)
   Eyebrow        Inter, uppercase, letter-spaced
*/

:root {
  --primary-accent: #ff3b5e;
  --primary-deep: #ff143f;
  --bg: #0a1628;          /* deeper page bg (navy), shows in side gutters */
  --book: #151719;         /* book body, slightly lighter than the page */
  --bg-deep: #0a1628;
  --surface: #1f2225;
  --surface-2: #25282c;
  --border: #33363a;
  --text: #e6e8ea;
  --text-muted: #abb2b7;
  --text-dim: #7c8388;
  --max-read: 720px;
  --book-max: 880px;
  --toc-width: 260px;
  --gate-z: 9999;
  --bar-z: 1000;
  --footer-z: 900;
  --toc-z: 800;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* lock scroll while gate is up */
body.gated {
  overflow: hidden;
  height: 100vh;
}

a {
  color: var(--primary-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 120ms ease;
}
a:hover { color: var(--primary-deep); }

h1, h2, h3, h4 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

/* -----------------------------------------------------------------
   PROGRESS BAR (top)
----------------------------------------------------------------- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-accent), var(--primary-deep));
  z-index: var(--bar-z);
  transition: width 60ms linear;
}

/* -----------------------------------------------------------------
   CHAPTER CHIP (sticky pill)
----------------------------------------------------------------- */
.chapter-chip {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(31, 34, 37, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  z-index: var(--bar-z);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.chapter-chip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chapter-chip .num {
  background: var(--primary-accent);
  color: #fff;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

/* -----------------------------------------------------------------
   GATE OVERLAY (full-page)
----------------------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, 0.96);
  backdrop-filter: blur(20px);
  z-index: var(--gate-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  transition: opacity 360ms ease;
}
.gate.hidden {
  opacity: 0;
  pointer-events: none;
}
.gate-card {
  max-width: 480px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary-accent);
  padding: 36px 32px 28px;
}
.gate-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 14px;
}
.gate-card h2 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
}
.gate-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.gate-card label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  margin-top: 14px;
}
.gate-card input,
.gate-card select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 0;
  outline: none;
  transition: border-color 120ms ease;
}
.gate-card input:focus,
.gate-card select:focus {
  border-color: var(--primary-accent);
}
.gate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gate-submit {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 13px 20px;
  background: var(--primary-accent);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 0;
}
.gate-submit:hover { background: var(--primary-deep); }
.gate-legend {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 14px;
  line-height: 1.5;
}
.gate-legend a { font-size: inherit; }

/* -----------------------------------------------------------------
   HERO
----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 160px 24px 110px;
  max-width: none;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--bg);
  background-image: url("https://cdn.prod.website-files.com/6345727d07a9481ca0683e84/69d7fd44e627c9c37b2cf716_cannes-festival-2025-background.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Heavier overlay because the photo is bright daylight (blue sky, palms,
     green Marche du Film banner). Goal: keep the photo legible as a sense
     of place while the headline stays sharp white. */
  background:
    radial-gradient(ellipse 80% 65% at 50% 40%,
      rgba(255, 59, 94, 0.12) 0%,
      rgba(255, 59, 94, 0) 60%),
    linear-gradient(180deg,
      rgba(10, 22, 40, 0.72) 0%,
      rgba(10, 22, 40, 0.82) 50%,
      rgba(15, 17, 19, 0.97) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero > * {
  position: relative;
  z-index: 2;
}
.hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 18px;
}
.hero h1 .accent { color: var(--primary-accent); }
.hero p.lead {
  font-size: 19px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.hero-meta {
  display: inline-flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.hero-meta span { white-space: nowrap; }
.hero-meta strong { color: var(--text); font-weight: 600; }

/* -----------------------------------------------------------------
   BOOK BODY (the raised "page" the chapter column sits on)
----------------------------------------------------------------- */
.book-body {
  background: var(--book);
  max-width: var(--book-max);
  margin: 0 auto;
  position: relative;
  /* dual shadow: outer for elevation, inner-ish red glow at edges */
  box-shadow:
    0 0 0 1px var(--border),
    0 24px 60px -20px rgba(0, 0, 0, 0.65),
    0 8px 24px -10px rgba(255, 59, 94, 0.08);
}
/* thin gold rule running along each side, like a page marker */
.book-body::before,
.book-body::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--primary-accent) 20%,
    var(--primary-accent) 80%,
    transparent 100%);
  opacity: 0.45;
}
.book-body::before { left: 0; }
.book-body::after { right: 0; }

/* page bg fills space outside the book-body */
body {
  background-color: var(--bg);
}

@media (max-width: 920px) {
  .book-body {
    max-width: 100%;
    box-shadow: none;
  }
  .book-body::before,
  .book-body::after { display: none; }
}

/* -----------------------------------------------------------------
   CHAPTERS
----------------------------------------------------------------- */
.chapter {
  padding: 88px 24px 64px;
  max-width: var(--max-read);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.chapter.revealed {
  opacity: 1;
  transform: translateY(0);
}
.chapter-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 14px;
}
.chapter h2 {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 26px;
  letter-spacing: -0.02em;
}
.chapter h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 38px 0 12px;
  color: #fff;
  letter-spacing: -0.01em;
}
.chapter p {
  margin-bottom: 18px;
  color: var(--text);
}
.chapter p strong { color: #fff; font-weight: 600; }
.chapter ul, .chapter ol {
  margin: 0 0 22px 22px;
  color: var(--text);
}
.chapter li { margin-bottom: 8px; }
.chapter-figure {
  margin: 32px 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
.chapter-figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: opacity 160ms ease, transform 240ms ease;
}
.chapter-figure:hover img { opacity: 0.92; }
.chapter-figure::after {
  content: "⤢";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: rgba(15, 17, 19, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.chapter-figure:hover::after { opacity: 1; }
.chapter-figure figcaption {
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.chapter-figure.full-bleed {
  margin: 36px calc((var(--max-read) - 100vw) / 2);
  max-width: 100vw;
}
.chapter blockquote {
  border-left: 3px solid var(--primary-accent);
  padding: 8px 0 8px 18px;
  margin: 22px 0;
  color: var(--text-muted);
  font-style: italic;
}
.chapter blockquote strong {
  display: block;
  font-style: normal;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--primary-accent);
  margin-bottom: 6px;
}
.chapter table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14px;
}
.chapter th, .chapter td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.chapter th {
  background: var(--surface);
  color: var(--primary-accent);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chapter hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 32px auto;
  max-width: 60px;
}

/* -----------------------------------------------------------------
   SPONSORED PLACEMENTS
----------------------------------------------------------------- */

/* Type A: end-of-chapter sponsor card */
.sponsor-card {
  margin: 36px auto 0;
  max-width: var(--max-read);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary-accent);
  padding: 22px 24px 24px;
}
.sponsor-card .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 10px;
}
.sponsor-card .hook {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 14px;
}
.sponsor-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sponsor-card .cta:hover { color: var(--primary-deep); }

/* Type B: inline pull-quote sponsored aside */
.sponsor-aside {
  margin: 28px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--primary-accent);
  background: rgba(255, 59, 94, 0.04);
  font-size: 15px;
  color: var(--text-muted);
}
.sponsor-aside .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 4px;
}
.sponsor-aside p {
  margin: 0;
  color: #fff;
  font-weight: 500;
}
.sponsor-aside a {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Type C: mid-guide team interstitial */
.interstitial {
  background: var(--bg-deep);
  padding: 88px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.interstitial .inner {
  max-width: 720px;
  margin: 0 auto;
}
.interstitial .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 18px;
}
.interstitial h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #fff;
}
.interstitial p.lead {
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.team-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.team-card {
  text-align: center;
  width: 160px;
  flex-shrink: 0;
}
.team-card .photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary-accent);
  margin: 0 auto 12px;
  background-size: cover;
  background-position: center;
}
.team-card .name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 2px;
}
.team-card .role {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.interstitial .cta-button {
  display: inline-block;
  background: var(--primary-accent);
  color: #fff;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-bottom: none;
}
.interstitial .cta-button:hover { background: var(--primary-deep); }

/* Type D: sticky footer bar */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 17, 19, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text);
  z-index: var(--footer-z);
  transition: transform 280ms ease, opacity 280ms ease;
}
.sticky-footer.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.sticky-footer .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-accent);
  flex-shrink: 0;
}
.sticky-footer a {
  color: var(--text);
  border-bottom: 1px solid var(--primary-accent);
  font-weight: 600;
}
.sticky-footer .close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}
.sticky-footer .close:hover { color: var(--text); }

/* -----------------------------------------------------------------
   CLOSING FOOTER
----------------------------------------------------------------- */
.page-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 64px 24px 80px;
  text-align: center;
  margin-top: 64px;
}
.page-footer .logo {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: #fff;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.page-footer p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}
.page-footer p a {
  border-bottom-color: var(--primary-accent);
  color: var(--text);
}

/* -----------------------------------------------------------------
   FLOATING GUIDE BUTTON (toggles the overlay TOC)
----------------------------------------------------------------- */
.guide-fab {
  position: fixed;
  left: 22px;
  bottom: 110px;
  z-index: var(--toc-z);
  background: var(--primary-accent);
  color: #fff;
  border: none;
  padding: 13px 20px 13px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(255, 59, 94, 0.35);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  border-radius: 0;
}
.guide-fab:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 20, 63, 0.45);
}
.guide-fab .fab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  width: 16px;
  height: 16px;
}
.guide-fab .fab-grid span {
  background: #fff;
}
.guide-fab .fab-text { line-height: 1; }

/* -----------------------------------------------------------------
   OVERLAY TABLE OF CONTENTS (Net grid)
----------------------------------------------------------------- */
.toc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 12, 0.95);
  backdrop-filter: blur(24px);
  z-index: calc(var(--toc-z) + 5);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 280ms ease;
  padding: 80px 32px 56px;
}
.toc-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.toc-overlay .toc-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.toc-overlay .toc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 44px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.toc-overlay .toc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 12px;
}
.toc-overlay h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.toc-overlay .toc-sub {
  color: var(--text-muted);
  font-size: 14px;
}
.toc-overlay .toc-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 44px;
  height: 44px;
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 160ms ease, color 160ms ease;
}
.toc-overlay .toc-close:hover {
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}
.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-grid li { list-style: none; }
.toc-card {
  display: block;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  position: relative;
  min-height: 160px;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.toc-card:hover {
  border-color: var(--primary-accent);
  background: var(--surface-2);
  transform: translateY(-2px);
  color: var(--text);
}
.toc-card .num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary-accent);
  font-feature-settings: "tnum";
  margin-bottom: 10px;
}
.toc-card .title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.toc-card .blurb {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.toc-card.active {
  border-color: var(--primary-accent);
  background: var(--surface-2);
}
.toc-card.active::before {
  content: "Reading";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary-accent);
  text-transform: uppercase;
}
.toc-meta-bar {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.toc-meta-bar .cta {
  color: var(--primary-accent);
  border-bottom: 1px solid currentColor;
  font-weight: 600;
}

/* lock body scroll while overlay is open */
body.toc-open { overflow: hidden; }

/* -----------------------------------------------------------------
   CHAPTER NAV (prev / next at end of each chapter)
----------------------------------------------------------------- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.chapter-nav a {
  flex: 1 1 240px;
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-color: var(--border);
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.chapter-nav a:hover {
  border-color: var(--primary-accent);
  background: var(--surface-2);
  color: var(--text);
}
.chapter-nav a .label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 6px;
}
.chapter-nav a .title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.chapter-nav a.next { text-align: right; }
.chapter-nav a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* -----------------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
   FLOATING CHAPTER SUMMARY (red side panel)
----------------------------------------------------------------- */
:root {
  --gold: var(--primary-accent);
  --gold-deep: var(--primary-deep);
}

.chapter-summary {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(-12px);
  width: 240px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: rgba(31, 34, 37, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 18px 18px 16px;
  z-index: var(--toc-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease, width 240ms ease, padding 240ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chapter-summary.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Close button (collapses the panel) */
.summary-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.summary-close:hover,
.summary-close:focus-visible {
  color: var(--gold);
  background: rgba(255, 59, 94, 0.10);
  outline: none;
}

/* Default expand cue is hidden; only shown in collapsed mode */
.summary-expand-cue {
  display: none;
}

/* Collapsed pill state: small floating chip showing "CH 07 ›" */
.chapter-summary.collapsed {
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 10px 14px 10px 12px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.chapter-summary.collapsed:hover {
  background: rgba(40, 44, 48, 0.98);
  border-color: var(--gold);
}
.chapter-summary.collapsed .summary-close,
.chapter-summary.collapsed .summary-eyebrow,
.chapter-summary.collapsed .summary-title,
.chapter-summary.collapsed .summary-text,
.chapter-summary.collapsed .summary-progress {
  display: none;
}
.chapter-summary.collapsed .summary-num {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.chapter-summary.collapsed .summary-expand-cue {
  display: inline-block;
  color: var(--gold);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.18s ease;
}
.chapter-summary.collapsed:hover .summary-expand-cue {
  transform: translateX(3px);
}
.chapter-summary .summary-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.chapter-summary .summary-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  font-feature-settings: "tnum";
  margin: 0;
}
.chapter-summary .summary-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}
.chapter-summary .summary-text {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.chapter-summary .summary-progress {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.chapter-summary .summary-bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.chapter-summary .summary-bar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--gold);
  transition: right 320ms ease;
}

/* Hide on mobile / narrow tablets where there isn't room beside the column */
@media (max-width: 1180px) {
  .chapter-summary { display: none; }
}

/* -----------------------------------------------------------------
   PANEL LIST (named-panel cards. Featured Molten panel at the top.)
----------------------------------------------------------------- */
.panel-list {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-list-header {
  margin-bottom: 6px;
}
.panel-list-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 6px;
}
.panel-list-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 24px 20px;
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease;
}
.panel-card:hover {
  border-color: var(--text-dim);
}

.panel-card-featured {
  background:
    linear-gradient(180deg, rgba(255, 59, 94, 0.06) 0%, rgba(255, 59, 94, 0) 70%),
    var(--surface);
  border: 1px solid var(--primary-accent);
  border-top: 3px solid var(--primary-accent);
  padding: 26px 26px 24px;
  box-shadow: 0 8px 32px -16px rgba(255, 59, 94, 0.35);
}

.panel-host-tag {
  display: inline-block;
  background: var(--primary-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  margin-bottom: 14px;
}

/* Cocktail card differentiator: warmer gradient + amber-tinted host tag,
   so the cocktail reads as social rather than the panel's editorial red. */
.panel-card-cocktail {
  background:
    linear-gradient(180deg, rgba(255, 178, 102, 0.07) 0%, rgba(255, 59, 94, 0.04) 100%),
    var(--surface);
}
.panel-card-cocktail .panel-host-tag {
  background: linear-gradient(90deg, var(--primary-accent), #ff8a4a);
}
.panel-card-cocktail .panel-title::before {
  content: "🍸 ";
  margin-right: 2px;
}

.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.panel-card-featured .panel-meta {
  color: var(--primary-accent);
}
.panel-meta span {
  position: relative;
}
.panel-meta span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.panel-meta .meta-track {
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.panel-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}
.panel-card-featured .panel-title {
  font-size: 24px;
}
.panel-blurb {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 18px 0;
}

.panel-speakers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.panel-speakers .speaker {
  background: rgba(15, 17, 19, 0.6);
  border-left: 2px solid var(--primary-accent);
  padding: 10px 14px;
}
.panel-speakers .speaker-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
  line-height: 1.2;
}
.panel-speakers .speaker-role {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.panel-speakers-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-template-columns: none;
}
.speaker-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: rgba(15, 17, 19, 0.6);
  border: 1px solid var(--border);
  padding: 4px 10px 5px;
  letter-spacing: 0.01em;
}

.panel-cta {
  display: inline-block;
  background: var(--primary-accent);
  color: #fff;
  text-decoration: none;
  border: none;
  border-bottom: none;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, transform 160ms ease;
}
.panel-cta:hover {
  background: var(--primary-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Link-out variant (cocktail card uses this — no inline form, single CTA
   to a canonical landing page) */
.panel-cta-link {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  align-self: flex-start;
  padding: 13px 22px;
}

/* Inline reservation form on the featured panel card */
.panel-form {
  margin-top: 8px;
}
.panel-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.panel-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.panel-form input[type="email"] {
  flex: 1 1 240px;
  background: rgba(15, 17, 19, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease;
  border-radius: 0;
  min-width: 0;
}
.panel-form input[type="email"]:focus {
  border-color: var(--primary-accent);
}
.panel-form input[type="email"]::placeholder {
  color: var(--text-dim);
}
.panel-form .panel-cta {
  flex: 0 0 auto;
  padding: 12px 18px;
}
.panel-form-success {
  margin-top: 8px;
  padding: 14px 16px;
  background: rgba(255, 59, 94, 0.08);
  border-left: 2px solid var(--primary-accent);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
}
.panel-form-success::before {
  content: "✓ ";
  color: var(--primary-accent);
  font-weight: 800;
  margin-right: 4px;
}
.panel-form-error {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(255, 59, 94, 0.06);
  border-left: 2px solid var(--primary-accent);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.panel-form-error a { color: var(--primary-accent); }

/* Add-to-calendar button row (Google / Apple-iCal / Outlook) */
.panel-calendar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.panel-cal-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}
.panel-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.panel-cal-btn:hover {
  background: rgba(255, 59, 94, 0.10);
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}
.panel-cal-btn::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-width: 3px;
  opacity: 0.6;
}
.panel-card-featured .panel-calendar {
  border-top-color: rgba(255, 59, 94, 0.18);
}

@media (max-width: 540px) {
  .panel-form-row { flex-direction: column; }
  .panel-form .panel-cta { width: 100%; padding: 13px 18px; }
  .panel-calendar { gap: 6px; }
  .panel-cal-btn { padding: 6px 10px; font-size: 11.5px; }
}

@media (max-width: 720px) {
  .panel-card { padding: 18px 18px 16px; }
  .panel-card-featured { padding: 22px 18px 20px; }
  .panel-title { font-size: 17px; }
  .panel-card-featured .panel-title { font-size: 20px; }
  .panel-blurb { font-size: 13.5px; }
}

/* -----------------------------------------------------------------
   PROGRAMME GRID (replaces the static panel-schedule.png chart)
----------------------------------------------------------------- */
.program-grid {
  margin: 40px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px 22px 18px;
  box-sizing: border-box;
}
.program-grid .program-header {
  margin-bottom: 22px;
}
.program-grid .program-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin-bottom: 6px;
}
.program-grid .program-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.program-table {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) repeat(9, minmax(36px, 1fr));
  gap: 3px 2px;
  font-size: 12px;
  align-items: center;
}

.program-day-header {
  text-align: center;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.program-day-header .day {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}
.program-day-header .date {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.program-day-header.peak .day { color: var(--primary-accent); }
.program-day-header.peak .date { color: var(--primary-accent); opacity: 0.85; }
.program-cell-empty { border-bottom: 1px solid var(--border); }

.program-row-label {
  padding: 8px 12px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-right: 1px solid var(--border);
  margin-right: 6px;
}
.program-row-label .prow-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.program-row-label.top .prow-title {
  color: #fff;
  font-weight: 700;
}
.program-row-label .prow-sub {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.program-row-label.top .prow-sub {
  color: var(--primary-accent);
  opacity: 0.85;
}

.program-cell {
  height: 30px;
  margin: 3px 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  min-width: 0;
}
.program-cell.peak-bg {
  background: rgba(255, 59, 94, 0.04);
}
.program-cell.filled.bar-top {
  background: var(--primary-accent);
  box-shadow: inset 0 0 0 1px var(--primary-deep);
}
.program-cell.filled.bar-ongoing {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.program-cell.filled.bar-top + .program-cell.filled.bar-top,
.program-cell.filled.bar-ongoing + .program-cell.filled.bar-ongoing {
  /* visually merge adjacent same-tier cells */
  margin-left: -3px;
  border-left: 0;
}

.program-legend {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.program-legend .legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 4px;
  vertical-align: middle;
}
.program-legend .legend-top {
  background: var(--primary-accent);
  box-shadow: inset 0 0 0 1px var(--primary-deep);
}
.program-legend .legend-ongoing {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.program-legend .program-source {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Mobile: collapse to a stacked list */
@media (max-width: 720px) {
  .program-table {
    display: block;
  }
  .program-table > .program-day-header,
  .program-cell-empty,
  .program-cell {
    display: none;
  }
  .program-row-label {
    display: block;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    margin: 0;
  }
}

/* -----------------------------------------------------------------
   RIGHT-MARGIN SIDE NOTES (contextual annotations per paragraph)
----------------------------------------------------------------- */
.side-note {
  position: absolute;
  left: 100%;
  margin-left: 28px;
  width: 200px;
  padding: 12px 14px 14px;
  background: rgba(31, 34, 37, 0.92);
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary-accent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 360ms ease, transform 360ms ease;
  z-index: 5;
}
.side-note.revealed {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.side-note .side-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
}
.side-note .side-label {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.side-note.side-note-link {
  width: 220px;
  padding: 0;
  border-top-color: var(--primary-accent);
}
.side-note.side-note-map {
  width: 220px;
  padding: 0;
  border-top-color: var(--primary-accent);
}
.side-note-map a {
  display: block;
  text-decoration: none;
  color: var(--text);
  border-bottom: none;
}
.side-note-map a:hover { color: var(--text); }
.side-note-map img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.9);
  transition: filter 200ms ease, transform 200ms ease;
}
.side-note-map a:hover img {
  filter: saturate(1.1);
}
.side-note-map .side-map-caption {
  padding: 10px 14px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.side-note-map .side-map-cta {
  padding: 0 14px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-accent);
}
.side-note-map a:hover .side-map-cta { color: var(--primary-deep); }
.side-note-link a {
  display: block;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: var(--text);
  border-bottom: none;
}
.side-note-link a:hover { color: var(--text); }
.side-note-link .side-link-host {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.side-note-link .side-link-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.side-note-link .side-link-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.side-note-link .side-link-cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-accent);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.side-note-link a:hover .side-link-cta { color: var(--primary-deep); }

/* Hide on viewports too narrow to fit margin annotations */
@media (max-width: 1180px) {
  .side-note { display: none; }
}

/* -----------------------------------------------------------------
   LIGHTBOX (click-to-zoom for figures)
----------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--gate-z) + 100);
  background: rgba(8, 10, 12, 0.96);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px 88px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  cursor: zoom-out;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border);
  cursor: default;
  transform: scale(0.96);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox.open img { transform: scale(1); }
.lightbox figcaption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 13px;
  max-width: 80vw;
  text-align: center;
  line-height: 1.5;
  background: rgba(15, 17, 19, 0.7);
  padding: 8px 14px;
  letter-spacing: 0.01em;
}
.lightbox .lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid var(--border);
  color: #fff;
  width: 44px;
  height: 44px;
  font-size: 22px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.lightbox .lightbox-close:hover {
  border-color: var(--primary-accent);
  color: var(--primary-accent);
}
.lightbox .lightbox-hint {
  position: absolute;
  top: 28px;
  left: 28px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero { padding: 92px 18px 56px; }
  .chapter { padding: 64px 18px 48px; }
  .chapter h2 { font-size: 28px; }
  .interstitial { padding: 64px 18px; }
  .interstitial h2 { font-size: 28px; }
  .team-row { gap: 24px; }
  .gate-card { padding: 28px 22px 22px; }
  .gate-row { grid-template-columns: 1fr; }
  .sticky-footer { padding: 9px 12px; font-size: 12px; }
  .chapter-nav { gap: 10px; }
}

/* ===== Download CTA section (web-only, hidden in print) ===== */
.download-cta {
  background: var(--bg-deep);
  padding: 88px 24px 96px;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--border);
}
.download-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 64px; height: 3px;
  background: var(--primary-accent);
  transform: translateX(-50%);
}
.download-cta .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-accent);
  font-weight: 700;
  margin-bottom: 18px;
}
.download-cta h2 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 auto 14px;
  max-width: 720px;
  font-weight: 700;
}
.download-cta p.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted, #a8acb1);
  margin: 0 auto 32px;
  max-width: 560px;
}
.download-cta .cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.download-cta .cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  background: var(--primary-accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--primary-accent);
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.download-cta .cta:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
}
.download-cta .cta svg { width: 18px; height: 18px; }
.download-cta .cta-secondary {
  background: transparent;
  color: var(--primary-accent);
}
.download-cta .cta-secondary:hover {
  background: var(--primary-accent);
  color: #fff;
}
.download-cta .cta-link {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 16px 14px;
  font-weight: 600;
  font-size: 13px;
}
.download-cta .cta-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  text-decoration: underline;
}
.download-cta .cta-offline[data-state="saving"] {
  opacity: 0.85;
  cursor: progress;
}
.download-cta .cta-offline[data-state="saved"] {
  background: transparent;
  color: var(--primary-accent);
  border-color: var(--primary-accent);
  cursor: default;
}
.download-cta .cta-offline[data-state="saved"]:hover {
  background: transparent;
  color: var(--primary-accent);
}
.download-cta .cta-meta {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
@media (max-width: 720px) {
  .download-cta { padding: 60px 18px 68px; }
  .download-cta h2 { font-size: 28px; }
}

/* ===== Print stylesheet (PDF export) ===== */
@media print {
  @page { size: A4; margin: 18mm 14mm; }
  :root {
    --bg: #ffffff !important;
    --book: #ffffff !important;
    --bg-deep: #ffffff !important;
    --surface: #ffffff !important;
    --surface-2: #ffffff !important;
    --text: #111111 !important;
    --text-muted: #333333 !important;
    --text-dim: #666666 !important;
    --border: #dddddd !important;
  }
  html, body { background: #ffffff !important; color: #111 !important; }
  body { font-size: 10.5pt; }
  .book-body { background: #ffffff !important; box-shadow: none !important; max-width: 100% !important; }
  /* Hide all interactive chrome */
  .gate, .progress-bar, .chapter-chip,
  .sticky-footer, .guide-fab, .toc-overlay,
  .chapter-summary, .chapter-nav,
  .panel-form, .panel-form-success, .panel-form-error,
  .download-cta {
    display: none !important;
  }
  /* Force reading body to full width, no gutters/side-notes column tricks */
  .book-body { padding: 0 !important; }
  .book-body::before, .book-body::after { display: none !important; }
  .chapter {
    opacity: 1 !important;
    transform: none !important;
    page-break-before: always;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .chapter:first-of-type { page-break-before: auto; }
  /* Hero stays on page 1 but compact */
  .hero {
    background: #ffffff !important;
    color: #111 !important;
    min-height: auto !important;
    padding: 0 0 18pt !important;
    page-break-after: always;
  }
  .hero::before { display: none !important; }
  .hero h1, .hero p.lead, .hero-eyebrow, .hero-meta { color: #111 !important; }
  .hero h1 .accent { color: var(--primary-accent) !important; }
  /* Headings + body on white */
  .chapter-num { color: var(--primary-accent) !important; }
  .chapter h2, .chapter h3, .chapter p, .chapter li,
  .chapter strong, .chapter blockquote { color: #111 !important; }
  .chapter p strong { color: #000 !important; }
  /* Side-notes inline in print (no absolute positioning) */
  .side-note, .side-note-link, .side-note-map {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 8pt 0 !important;
    background: #f4f4f6 !important;
    border-left: 2pt solid var(--primary-accent) !important;
    padding: 8pt 10pt !important;
    color: #333 !important;
    page-break-inside: avoid;
  }
  /* Figures contained, no shadows */
  .chapter-figure {
    background: #fff !important;
    border: 1pt solid #ddd !important;
    page-break-inside: avoid;
  }
  .chapter-figure::after { display: none !important; }
  .chapter-figure figcaption { color: #555 !important; border-top: 1pt solid #eee !important; }
  /* Sponsor cards still in print but on white */
  .sponsor-card {
    background: #fafafa !important;
    border: 1pt solid #ddd !important;
    color: #111 !important;
    page-break-inside: avoid;
  }
  .sponsor-card .hook { color: #111 !important; }
  /* Cocktail / featured panel cards */
  .panel-card-cocktail, .panel-card.featured {
    background: #fafafa !important;
    border: 1pt solid #ddd !important;
    color: #111 !important;
    page-break-inside: avoid;
  }
  /* Don't print the interstitial booking section background imagery */
  .interstitial { background: #fff !important; color: #111 !important; page-break-inside: avoid; }
  /* Links plain */
  a { color: var(--primary-accent) !important; text-decoration: none !important; }
  /* Page footer prints */
  .page-footer { background: #fff !important; color: #555 !important; }
}

/* -----------------------------------------------------------------
   FLOATING SAVE BUTTON (always visible, bottom-right)
   Combines "save offline" (Service Worker pre-cache) and "install as
   app" (beforeinstallprompt) into one tap.
----------------------------------------------------------------- */
.save-fab {
  position: fixed;
  left: 22px;
  bottom: 56px;
  z-index: var(--toc-z);
  background: var(--primary-accent);
  color: #fff;
  border: none;
  padding: 13px 20px 13px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(255, 59, 94, 0.35);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  border-radius: 0;
}
.save-fab:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 20, 63, 0.45);
}
.save-fab .save-fab-icon { width: 16px; height: 16px; flex-shrink: 0; }
.save-fab .save-fab-label { line-height: 1; white-space: nowrap; }

.save-fab[data-state="saving"] {
  cursor: progress;
  background: var(--primary-deep);
  opacity: 0.92;
}
.save-fab[data-state="saved"] {
  background: transparent;
  color: var(--primary-accent);
  border: 1px solid var(--primary-accent);
  padding: 12px 19px 12px 15px;
  box-shadow: none;
}
.save-fab[data-state="saved"]:hover {
  background: var(--primary-accent);
  color: #fff;
  transform: none;
}
.save-fab[data-state="installed"] {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 12px 19px 12px 15px;
  box-shadow: none;
  cursor: default;
}
.save-fab[data-state="installed"]:hover {
  transform: none;
  background: transparent;
  color: var(--text-dim);
}

/* Mobile: collapse both FABs to icon-only squares laid out HORIZONTALLY
   side by side on the bottom-left. Vertical stacking placed the lower
   button under the iOS Safari / Chrome bottom UI band, where it was
   clipped and tappable only by accident. Horizontal layout + safe-area
   inset keeps both clear. */
@media (max-width: 720px) {
  .guide-fab,
  .save-fab {
    width: 50px;
    height: 50px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Lift above the browser bottom bar + iOS home indicator,
       plus one button height of breathing room. */
    bottom: calc(122px + env(safe-area-inset-bottom, 0px));
  }
  .guide-fab { left: 14px; }
  .save-fab  { left: 78px; }   /* 14 + 50 + 14 gap */

  /* hide text labels on mobile (still readable by screen readers via aria-label) */
  .guide-fab .fab-text,
  .save-fab .save-fab-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* enlarge the icons to be visible on their own */
  .guide-fab .fab-grid { width: 22px; height: 22px; gap: 3px; }
  .save-fab .save-fab-icon { width: 22px; height: 22px; }

  /* Tables (e.g. chapter 3 hybrid windows) need their own horizontal
     scroller on mobile, otherwise their min-content width pushes the
     whole page sideways and creates a phantom right-side gap. */
  .chapter table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .chapter table th,
  .chapter table td { white-space: normal; }
}

/* Hide save-fab in print (the printed guide IS the offline copy) */
@media print {
  .save-fab { display: none !important; }
}

/* -----------------------------------------------------------------
   iOS Add-to-Home-Screen instructions overlay
   iOS Safari has no JS install API, so when an iOS user taps Download
   we surface a small instruction sheet anchored to the bottom of the
   viewport with a pointer toward the share button.
----------------------------------------------------------------- */
.ios-install {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.ios-install.open { display: flex; }
.ios-install-card {
  background: var(--surface);
  border-top: 3px solid var(--primary-accent);
  width: 100%;
  max-width: 520px;
  padding: 24px 22px 28px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.ios-install-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent);
  margin: 0 0 8px;
}
.ios-install-card h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.ios-install-steps {
  margin: 0;
  padding: 0 0 0 1.1em;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.ios-install-steps li { margin-bottom: 8px; }
.ios-install-steps strong { color: #fff; }
.ios-install-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.ios-install-note strong { color: var(--primary-accent); }
.ios-install-share {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin: 0 4px;
}
.ios-install-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 22px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  line-height: 1;
}
.ios-install-close:hover { color: var(--text); }