/* Downstream — story theme on top of scrolly-maplibre.
   Uses the site's palette: paper, green-black ink, Source Serif 4 and DM Sans. */
:root {
  --paper: #f7f8f5;
  --surface: #ecefe9;
  --ink: #202e28;
  --muted: #59665f;
  --rule: #d7ded5;
  --accent: #365b45;
  --water: #2a78d6;
  --mine: #c4501f;
  --mine-tint: #e8892f;
  --protected: #3f8f5a;
  --story-reading-gutter: clamp(1.25rem, 4vw, 2rem);
  --story-space-block: clamp(1.75rem, 3vw, 2.5rem);
  --story-space-section: clamp(2.5rem, 5vw, 4rem);

  --scrolly-bg: var(--paper);
  --scrolly-panel: var(--paper);
  --scrolly-text: var(--ink);
  --scrolly-muted: var(--muted);
  --scrolly-accent: var(--accent);
  --scrolly-rule: var(--surface);
  --scrolly-card-bg: rgba(247, 248, 245, 0.94);
  --scrolly-card-text: var(--ink);
  --scrolly-font: "DM Sans", system-ui, sans-serif;
  --scrolly-heading-font: "Source Serif 4", Georgia, serif;
}

/* The site header and footer come from /styles.css */
.story-credits {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 3rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- Long-form text ---- */
.story-container .text-content {
  max-width: 720px;
  padding: 0;
}

.story-container .text-content > :first-child:not(.story-hero) {
  margin-top: 0;
}

.story-container .text-content > :last-child {
  margin-bottom: 0;
}

.story-container .text-content .paragraph {
  font-family: var(--scrolly-heading-font);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--ink);
  padding: 0;
  margin: 0 0 1.4rem;
}

.story-container .text-content .story-lede {
  font-family: var(--scrolly-heading-font);
  font-size: 1.45rem;
  line-height: 1.55;
}

.story-container .text-content .story-heading,
.story-container #pre-map-section .story-heading,
.story-container .intermediate-section .story-heading,
.story-container #post-map-section .story-heading {
  font-family: var(--scrolly-heading-font);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.story-container .text-content .story-subheading {
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0;
  margin: var(--story-space-block) 0 0.75rem;
}

.story-container .text-content .story-kicker {
  color: var(--accent);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: var(--story-space-section) 0 0.5rem;
}

.story-container .intermediate-section,
.story-container #pre-map-section,
.story-container #post-map-section {
  padding: var(--story-space-section) var(--story-reading-gutter);
}

.story-container .stat-tile {
  background: var(--surface);
}

.story-container .media-container {
  padding: 0;
}

.story-container .media-container,
.story-container .story-embed,
.story-container .story-compare,
.story-container .story-stats,
.story-container .story-quote {
  margin-top: var(--story-space-block);
  margin-bottom: var(--story-space-block);
}

.story-container .media-container.position-wide,
.story-container .story-embed.position-wide,
.story-container .story-compare.position-wide {
  width: min(900px, calc(100vw - var(--story-reading-gutter) * 2));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.story-container .media-caption {
  font-family: var(--scrolly-font);
}

.story-container .story-stats.position-wide {
  width: min(1100px, calc(100vw - var(--story-reading-gutter) * 2));
}

.story-container .text-content .media-container figcaption {
  margin-top: 0.75rem;
  color: var(--muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
  text-align: left;
}

.story-container .story-quote {
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.story-container .story-quote blockquote p {
  font-size: clamp(1.35rem, 3vw, 1.55rem);
  font-style: italic;
}

.story-container .story-list {
  font-family: var(--scrolly-font);
  font-size: 0.95rem;
  line-height: 1.6;
}

.story-container .text-content .story-note {
  font-size: 0.9rem;
  line-height: 1.6;
}

.story-container .story-scrolly-embed {
  margin-top: var(--story-space-section);
  margin-bottom: var(--story-space-section);
}

.story-container .story-divider.treaty-divider {
  height: 2px;
  background: #879a86;
}

/* ---- Map step cards ---- */
.story-container .content-box {
  border-radius: 3px;
  border: 1px solid rgba(32, 46, 40, 0.12);
  box-shadow: 0 6px 24px rgba(10, 20, 15, 0.18);
  max-width: min(420px, 90%);
  padding: 1.6rem 1.75rem;
}

.story-container .content-box .content-title {
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.story-container .content-box p {
  font-family: var(--scrolly-heading-font);
  font-size: 1.06rem;
  line-height: 1.6;
}

.story-container .content-box .content-kicker {
  font-family: var(--scrolly-font);
}

.story-container .map-legend {
  font-family: var(--scrolly-font);
}

/* Small swatches used inline in step text, e.g. the colour of a map layer */
.story-container .swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 3px;
  vertical-align: -0.05em;
}

@media (max-width: 48em) {
  .story-container .text-content .paragraph {
    font-size: 1.08rem;
  }
  .story-container .text-content .story-lede {
    font-size: 1.25rem;
  }
}

/* ---- Legend ---- */
.story-container .map-legend {
  --scrolly-legend-bg: rgba(247, 248, 245, 0.94);
  --scrolly-legend-text: var(--ink);
  font-size: 12px;
  max-width: 230px;
}

.story-container .map-legend .legend-title {
  font-family: var(--scrolly-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.story-container .map-legend .legend-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.story-container .map-legend .legend-section + .legend-section {
  margin-top: 0.6rem;
}

/* ---- Hero fills the first screen below the site header ---- */
.story-container #pre-map-section {
  padding-top: 0;
}

.story-container #pre-map-section > .text-content {
  padding-top: 0;
}

.story-container .story-hero {
  margin-top: 0;
  margin-bottom: 3rem;
  min-height: calc(100svh - var(--site-header-height, 73px));
  background: #202e28;
}

.story-container .story-hero::after {
  background: linear-gradient(180deg, rgba(10, 24, 17, 0.24), transparent 32%, rgba(10, 24, 17, 0.8)), rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.story-container .story-hero .hero-image {
  /* Keep the top of the frame just below the site header; any crop comes off the water */
  object-position: 55% top;
}

.story-container .story-hero video.hero-image {
  max-height: none; /* the site's video rule caps players at 80vh */
  opacity: 0;
}

.story-container .story-hero.hero-video-ready video.hero-image {
  opacity: 1;
}

.story-container .story-hero .hero-content {
  box-sizing: border-box;
  padding-bottom: clamp(5.5rem, 11svh, 8rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.2);
}

.story-container .story-hero .hero-title {
  font-size: clamp(2.4rem, 6vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.story-container .story-hero .hero-dek {
  max-width: 37em;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  text-wrap: pretty;
}

.story-container .story-hero .hero-credit {
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: calc(100% - 11rem);
  text-align: right;
}

.hero-video-toggle {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  bottom: 1rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2rem;
  background: rgba(10, 24, 17, 0.65);
  color: #fff;
  font: 500 0.8rem var(--scrolly-font);
  cursor: pointer;
}

.hero-video-toggle:hover {
  background: rgba(10, 24, 17, 0.9);
}

.hero-video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Keep the legend clear of the step cards on the left */
@media (min-width: 769px) {
  .story-container .map-legend {
    left: auto;
    right: 3.25rem;
    bottom: 2.6rem !important;
  }
}

/* ---- Phones: a compact legend at the top, out of the cards' way ---- */
@media (max-width: 768px) {
  .story-container .map-legend {
    top: 0.6rem;
    bottom: auto !important;
    left: 0.6rem;
    right: auto;
    max-width: 58%;
    padding: 6px 8px;
    font-size: 11px;
  }
  .story-container .map-legend .legend-title {
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .story-container .map-legend .legend-label {
    font-size: 0.75rem;
  }
  .story-container .map-legend .legend-section + .legend-section {
    margin-top: 0.3rem;
  }
  .story-container .content-box {
    padding: 1.2rem 1.25rem;
  }
  .story-container .content-box .content-title {
    font-size: 1.25rem;
  }
  .story-container .content-box p {
    font-size: 0.98rem;
  }
}

/* A sticky element stays within its margin box's containing block, which here is the whole embed,
   sources line included. The bottom margin makes the graphic let go before the sources line arrives. */
.story-container .story-scrolly-embed .se-graphic {
  margin-bottom: 8rem;
}

/* Phones: the cards scroll up over the graphic, so each step is longer than a screen.
   That leaves about a screen and a half of clear graphic between cards while the step animates. */
@media (max-width: 768px) {
  .story-container .story-scrolly-embed .se-steps {
    padding-top: 90vh;
    padding-bottom: 60vh;
  }
  .story-container .story-scrolly-embed .se-step {
    min-height: 190vh;
  }
  /* Map steps: most of a screen between cards (the player uses half), so each map move has room. */
  .story-container .scroll-content .scroll-step:not(:last-child) {
    margin-bottom: 88vh !important;
  }
  /* The graphic is 58% of the screen tall; pin it in the middle of the screen rather than at the top. */
  .story-container .story-scrolly-embed .se-graphic {
    top: calc(var(--vh, 1vh) * 21);
  }
  /* The lease timeline is tall and narrow, so it takes nearly the whole screen and stretches its time axis */
  .story-container .story-scrolly-embed:has(iframe[src*="timeline"]) .se-graphic {
    top: calc(var(--vh, 1vh) * 4);
    height: calc(var(--vh, 1vh) * 92);
  }
}

/* Cards beside the scrolly graphics match the map step cards */
.story-container .story-scrolly-embed .se-card {
  border-radius: 3px;
  border: 1px solid rgba(32, 46, 40, 0.12);
}

.story-container .story-scrolly-embed .se-card p:not(.se-kicker) {
  font-family: var(--scrolly-heading-font);
  font-size: 1.04rem;
}

.story-container .story-scrolly-embed .se-title {
  font-weight: 600;
}

/* The mining track record, as a full-width band that stops the reader */
.story-container .story-stats.stats-feature {
  width: 100vw;
  margin: var(--story-space-section) 0 var(--story-space-section) calc(50% - 50vw);
  padding: var(--story-space-block) max(var(--story-reading-gutter), calc(50vw - 560px));
  background: #d9e2d4;
  border-top: 1px solid #b9c8b2;
  border-bottom: 1px solid #b9c8b2;
}

.story-container .story-stats.stats-feature .stat-tile {
  background: transparent;
  border-top: 3px solid var(--mine);
  padding: 1rem 0.5rem 0 0;
}

.story-container .story-stats.stats-feature .stat-value {
  font-family: var(--scrolly-heading-font);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--ink);
}

.story-container .story-stats.stats-feature .stat-label {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.story-container .story-stats.stats-feature .stat-note,
.story-container .story-stats.stats-feature .media-caption {
  color: var(--muted);
}

.story-container .story-stats.stats-feature .media-caption {
  max-width: 760px;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .story-container .story-stats .stat-row {
    grid-template-columns: 1fr;
  }

  .story-container .story-stats.position-wide .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-container .story-stats.position-wide .stat-tile {
    padding: 1rem 0.875rem;
  }

  .story-container .story-stats.position-wide .stat-value {
    font-size: 1.75rem;
  }
}