:root {
  --bg: #f4f7fb;
  --paper: #ffffff;
  --surface: rgba(255,255,255,0.82);
  --surface-2: rgba(247, 250, 252, 0.92);
  --ink: #183148;
  --ink-soft: #56697a;
  --navy: #17324d;
  --navy-2: #244766;
  --ocean: #5f95bf;
  --ocean-deep: #2f698f;
  --teal: #74b5b6;
  --mint: #e9f6f3;
  --sand: #f8f2e4;
  --sand-deep: #ecd9b0;
  --coral: #ef9ea7;
  --coral-deep: #dc6878;
  --lavender: #eef0ff;
  --line: rgba(22, 49, 72, 0.08);
  --line-strong: rgba(22, 49, 72, 0.14);
  --shadow-sm: 0 12px 28px rgba(21, 41, 58, 0.06);
  --shadow-md: 0 22px 55px rgba(21, 41, 58, 0.10);
  --shadow-lg: 0 36px 80px rgba(21, 41, 58, 0.14);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 8% 6%, rgba(116,181,182,0.24), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(239,158,167,0.18), transparent 26rem),
    linear-gradient(180deg, #f7fafc 0%, #f2f5f9 100%);
  color: var(--ink);
  font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .5;
  pointer-events: none;
}
.ambient-one {
  width: 320px; height: 320px;
  top: 140px; right: -70px;
  background: radial-gradient(circle, rgba(116,181,182,.35) 0%, rgba(116,181,182,0) 65%);
}
.ambient-two {
  width: 280px; height: 280px;
  bottom: 80px; left: -80px;
  background: radial-gradient(circle, rgba(239,158,167,.24) 0%, rgba(239,158,167,0) 68%);
}

.page-frame {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100% - 32px));
  margin: 20px auto 32px;
}
.story-card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.story-top {
  position: sticky;
  top: 14px;
  z-index: 30;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mini-bar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px 10px;
  font-size: .76rem;
  color: #798996;
  font-weight: 800;
  letter-spacing: .02em;
}
.story-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 16px 14px;
}
.tab-button {
  min-height: 66px;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 16px;
  background: #f3f6f9;
  color: #768392;
  text-align: left;
  font-weight: 850;
  line-height: 1.2;
  transition: .18s ease;
}
.tab-button:hover {
  transform: translateY(-1px);
  color: var(--ink);
  background: #eef4f7;
}
.tab-button.active {
  background: linear-gradient(180deg, rgba(23,50,77,.95), rgba(36,71,102,.95));
  color: white;
  box-shadow: 0 12px 24px rgba(23,50,77,.18);
}
.control-strip {
  display: grid;
  grid-template-columns: 1.15fr .68fr .68fr auto minmax(260px, 1fr);
  align-items: end;
  gap: 14px;
  padding: 0 16px 18px;
}
.control-strip label {
  display: grid;
  gap: 7px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #74818f;
}
.control-strip select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 0 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.control-strip select:focus {
  border-color: rgba(95,149,191,.45);
  box-shadow: 0 0 0 4px rgba(95,149,191,.12);
}
.control-strip button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  color: white;
  font-weight: 900;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
}
.control-strip p {
  margin: 0;
  color: #6b7785;
  font-size: .9rem;
  line-height: 1.42;
  font-weight: 650;
}

.story-stage {
  padding-top: 24px;
}
.chapter { display: none; }
.chapter.active {
  display: grid;
  gap: 22px;
  animation: fadeIn .28s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chapter-title {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 26px 28px;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.1), transparent 18rem),
    radial-gradient(circle at 82% 30%, rgba(116,181,182,.18), transparent 20rem),
    linear-gradient(135deg, #0e253c 0%, #17324d 50%, #244766 100%);
  box-shadow: var(--shadow-lg);
}
.chapter-title::before,
.chapter-title::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.chapter-title::before { width: 240px; height: 240px; left: -70px; top: -100px; }
.chapter-title::after { width: 180px; height: 180px; right: -40px; bottom: -80px; }
.chapter-title-inner { position: relative; z-index: 1; }
.eyebrow, .section-kicker {
  display: inline-block;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow {
  color: rgba(255,255,255,.66);
  margin-bottom: 10px;
}
.section-kicker {
  color: var(--ocean-deep);
  margin-bottom: 8px;
}
.chapter-title h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: .88;
  letter-spacing: -.05em;
}
.chapter-title p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
}

.cover-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 470px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,.76);
}
.cover-side { position: relative; overflow: hidden; }
.stable-world {
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 248, 216, .72), transparent 6rem),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(145deg, #fed694 0%, #f3a5b0 48%, #f4ead3 100%);
}
.fragile-world {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    linear-gradient(145deg, #9fd6ea 0%, #b9dde4 42%, #89a885 100%);
}
.world-label {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(15, 43, 68, .08);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.split-line {
  position: absolute;
  left: calc(50% - 3px);
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 16px rgba(22,49,72,.12);
  z-index: 4;
}
.sun {
  position: absolute;
  top: 86px;
  right: 66px;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: #fff6d5;
  box-shadow: 0 0 56px rgba(255,245,185,.78);
}
.island {
  position: absolute;
  left: 6%;
  bottom: 46px;
  width: 82%;
  height: 102px;
  background: linear-gradient(0deg, #78a36b 0 38%, #d1b282 38% 100%);
  clip-path: polygon(0 78%, 14% 48%, 31% 60%, 47% 16%, 64% 58%, 79% 25%, 100% 72%, 100% 100%, 0 100%);
  opacity: .92;
}
.storm-cloud {
  position: absolute;
  right: 10%; top: 72px;
  width: 200px; height: 74px;
  background: rgba(48,73,93,.92);
  border-radius: 72px;
  box-shadow: -58px 14px 0 10px rgba(64,93,116,.86), 48px 16px 0 8px rgba(41,63,81,.94);
}
.waves {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 132px;
  background:
    repeating-radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.45) 0 8px, transparent 10px 28px),
    linear-gradient(180deg, rgba(50,117,160,.12), rgba(31,94,136,.88));
}
.domino-line {
  position: absolute;
  left: 8%; right: 8%; bottom: 42px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 18px;
  z-index: 3;
}
.domino-line i {
  display: block;
  width: clamp(34px, 3.8vw, 52px);
  height: clamp(95px, 11vw, 138px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), #67b6b0);
  border: 2px solid rgba(255,255,255,.58);
  box-shadow: 0 16px 30px rgba(15,43,68,.16);
  transform-origin: bottom center;
}
.domino-line.falling i {
  background: linear-gradient(180deg, rgba(255,235,239,.98), #df697a);
}
.domino-line.falling i:nth-child(1) { transform: rotate(68deg) translateY(8px); }
.domino-line.falling i:nth-child(2) { transform: rotate(46deg) translateY(6px); }
.domino-line.falling i:nth-child(3) { transform: rotate(28deg) translateY(3px); }
.domino-line.falling i:nth-child(4) { transform: rotate(10deg); }

.intro-surface {
  padding: 34px 36px;
}
.intro-copy h2,
.story-block h2,
.shore-scene h2,
.future-hero h2,
.closing-statement h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.intro-copy p,
.story-block p,
.shore-scene p,
.future-hero p,
.closing-statement p,
.facts-panel p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.76;
  font-size: 1rem;
  font-weight: 600;
}
.intro-copy p + p,
.story-block p + p,
.shore-scene p + p,
.future-hero p + p { margin-top: 14px; }
.caution-box {
  margin-top: 22px;
  display: grid;
  gap: 6px;
  padding: 18px 18px 18px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248,242,228,.92), rgba(255,255,255,.66));
  border: 1px solid rgba(236,217,176,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.caution-box strong { color: var(--ink); }
.caution-box span { color: #6b6045; line-height: 1.65; font-weight: 700; }

.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.character-card {
  position: relative;
  min-height: 250px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px 20px;
}
.character-card h3 { margin: 0; font-size: 1.85rem; letter-spacing: -.03em; }
.character-card dl { margin: 10px 0 0; grid-column: 2; display: grid; gap: 10px; }
.character-card dl div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.character-card dt { color: #7d8a97; font-weight: 900; }
.character-card dd { margin: 0; font-weight: 800; }
.stable-card { background: linear-gradient(180deg, rgba(233,246,243,.94), rgba(255,255,255,.9)); }
.fragile-card { background: linear-gradient(180deg, rgba(254,244,245,.96), rgba(255,255,255,.9)); }
.mini-domino {
  width: 56px; height: 118px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 34px rgba(22,49,72,.12);
}
.mini-domino.upright { background: linear-gradient(180deg, #9be0d7, #5daea7); }
.mini-domino.tilted { background: linear-gradient(180deg, #f2b2b8, #dc6878); transform: rotate(28deg); }

.pacific-lens {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
}
.card-header { padding: 24px 24px 0; }
.card-header h3, .facts-panel h3 { margin: 2px 0 10px; font-size: 1.7rem; letter-spacing: -.04em; }
.map-card {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,252,.88));
}
.map-ocean {
  position: relative;
  min-height: 430px;
  margin: 18px 20px 22px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -24px 60px rgba(38,101,122,.08);
}
.pacific-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pacific-svg .graticule line {
  stroke: rgba(255,255,255,.44);
  stroke-width: 1;
}
.pacific-svg .landmass path {
  fill: rgba(244, 248, 246, .94);
  stroke: rgba(140, 164, 154, .48);
  stroke-width: 1.5;
}
.pacific-svg .region-labels text {
  fill: rgba(23,50,77,.48);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pacific-svg .country-marker circle {
  fill: #9ee3d9;
  stroke: rgba(255,255,255,.95);
  stroke-width: 3;
}
.pacific-svg .country-marker line {
  stroke: rgba(23,50,77,.4);
  stroke-width: 2;
}
.pacific-svg .country-marker rect {
  fill: rgba(23,50,77,.92);
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
  rx: 18;
}
.pacific-svg .country-marker text {
  fill: #ffffff;
  font-size: 15px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}
.facts-panel { padding: 28px; }
.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.fact-grid div {
  padding: 20px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(116,181,182,.10), transparent 6rem),
    rgba(255,255,255,.86);
  border: 1px solid rgba(22,49,72,.08);
  box-shadow:
    0 10px 24px rgba(21,41,58,.045),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.fact-grid strong {
  display: block;
  font-size: 2.25rem;
  line-height: 1;
}
.fact-grid span {
  display: block;
  margin-top: 6px;
  color: #7a8894;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.story-block,
.shore-scene,
.future-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 28px;
  align-items: center;
  padding: 30px;
}
.soft-panel {
  background: linear-gradient(180deg, rgba(248,251,252,.92), rgba(255,255,255,.9));
}
.pale-panel,
.clinic-panel,
.future-hero {
  background: linear-gradient(180deg, rgba(233,246,243,.92), rgba(255,255,255,.88));
}
.insight-note {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(116,181,182,.2);
  border-left: 5px solid var(--teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
  font-weight: 800;
  line-height: 1.55;
}
.vital-card {
  min-height: 280px;
  padding: 28px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(248,242,228,.95), rgba(255,255,255,.92));
  border: 1px solid rgba(236,217,176,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.vital-card span {
  color: var(--coral-deep);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
}
.vital-card strong {
  margin: 12px 0 10px;
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: .92;
  letter-spacing: -.06em;
}
.vital-card p { color: #6d7884; font-weight: 700; }

.chart-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px;
}
.viz-card {
  margin: 0;
  padding: 24px;
  min-height: 450px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.86));
}
.viz-card.large { min-height: 490px; }
.viz-card figcaption {
  margin: 0 0 16px;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.chart-box {
  position: relative;
  height: 360px;
  width: 100%;
}
.viz-card.large .chart-box { height: 392px; }
canvas { max-width: 100% !important; }

.impact-bubbles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 270px;
}
.bubble {
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  border-radius: 999px;
  box-shadow: 0 24px 50px rgba(22,49,72,.16);
}
.bubble span { display: block; font-size: 1.7rem; font-weight: 950; }
.bubble small { display: block; max-width: 170px; margin-top: 4px; font-weight: 800; line-height: 1.32; }
.bubble.big {
  width: 230px; height: 230px;
  padding: 22px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), transparent 18%), linear-gradient(145deg, #5f95bf, #3a7098);
}
.bubble.small {
  width: 156px; height: 156px;
  padding: 18px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), transparent 18%), linear-gradient(145deg, #ef9ea7, #dc6878);
}

.shore-scene {
  background: linear-gradient(180deg, rgba(248,242,228,.94), rgba(255,255,255,.9));
}
.shore-illustration {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #aed9e8 0 44%, #f3ebdf 44% 55%, #efcf8a 55% 100%);
  box-shadow: inset 0 30px 40px rgba(255,255,255,.12);
}
.shore-illustration::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: 40%;
  height: 22px;
  background: rgba(255,255,255,.5);
  transform: rotate(-1deg);
}
.boat {
  position: absolute;
  left: 44%; top: 36%;
  width: 96px; height: 32px;
  background: rgba(23,50,77,.35);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.palm {
  position: absolute;
  left: 12%; bottom: 18%;
  width: 12px; height: 110px;
  background: #896341;
  transform: rotate(8deg);
}
.palm::before {
  content: "";
  position: absolute;
  left: -52px; top: -34px;
  width: 128px; height: 70px;
  background: #5b9a70;
  clip-path: polygon(50% 0, 62% 48%, 100% 18%, 70% 58%, 96% 85%, 55% 66%, 35% 100%, 38% 62%, 0 82%, 28% 45%, 4% 20%, 42% 48%);
}
.empty-sign {
  position: absolute;
  right: 24px; bottom: 26px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid rgba(23,50,77,.8);
  background: rgba(255,255,255,.7);
  color: var(--navy);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.clinic-symbol {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
}
.clinic-building {
  position: relative;
  width: 240px; height: 164px;
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  border: 4px solid var(--navy);
  box-shadow: 0 20px 40px rgba(22,49,72,.12);
}
.clinic-building::before {
  content: "";
  position: absolute;
  left: 50%; top: 38px;
  width: 78px; height: 78px;
  transform: translateX(-50%);
  background: var(--coral);
  clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
}
.clinic-symbol p { max-width: 280px; color: #6d7884; font-weight: 800; line-height: 1.5; }

.future-illustration {
  height: 340px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 24px;
}
.future-left,
.future-right {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 28px;
  font-weight: 950;
  text-align: center;
}
.future-left {
  background: linear-gradient(160deg, #bfe8e1, #f7f0e1);
  color: var(--ink);
}
.future-right {
  background: linear-gradient(160deg, #f2b0b6, #34536d);
  color: white;
}
.future-left::before,
.future-right::before {
  content: "";
  position: absolute;
  bottom: 88px;
  width: 70%; height: 90px;
  border-radius: 999px;
  background: rgba(255,255,255,.36);
}
.recommendations {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.recommendations div {
  min-height: 150px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(248,242,228,.94), rgba(255,255,255,.88));
}
.recommendations strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.04rem;
  line-height: 1.22;
}
.recommendations span {
  color: #67727f;
  line-height: 1.52;
  font-weight: 650;
}
.closing-statement {
  padding: 34px 32px;
  text-align: center;
  background: linear-gradient(135deg, #102a42, #1a3c5c 60%, #244766);
  color: white;
  box-shadow: var(--shadow-lg);
}
.closing-statement .section-kicker { color: rgba(255,255,255,.66); }
.closing-statement p {
  max-width: 820px;
  margin: 0 auto 18px;
  color: rgba(255,255,255,.82);
}
.closing-statement strong {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.footer-note {
  margin-top: 22px;
  padding: 22px 24px;
}
.footer-note p {
  margin: 0;
  color: #6f7b89;
  font-size: .9rem;
  line-height: 1.7;
  font-weight: 650;
}

@media (max-width: 1180px) {
  .story-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-strip { grid-template-columns: 1fr 1fr; }
  .control-strip p { grid-column: 1 / -1; }
  .pacific-lens,
  .character-grid,
  .story-block,
  .shore-scene,
  .future-hero,
  .chart-duo { grid-template-columns: 1fr; }
  .recommendations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-frame { width: min(100%, calc(100% - 14px)); margin: 8px auto 18px; }
  .story-top { top: 6px; border-radius: 22px; }
  .mini-bar { flex-direction: column; gap: 4px; padding: 12px 16px 8px; }
  .story-tabs { padding: 6px 12px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-button { min-height: 58px; padding: 12px; font-size: .88rem; }
  .control-strip { grid-template-columns: 1fr; padding: 0 12px 14px; }
  .story-stage { padding-top: 16px; }
  .chapter.active { gap: 16px; }
  .chapter-title { min-height: 154px; padding: 22px 18px; border-radius: 24px; }
  .chapter-title h1 { font-size: 3.4rem; }
  .cover-art { grid-template-columns: 1fr; min-height: 640px; border-radius: 24px; }
  .split-line { left: 0; right: 0; top: calc(50% - 3px); bottom: auto; width: 100%; height: 6px; }
  .cover-side { min-height: 320px; }
  .story-card,
  .intro-surface,
  .story-block,
  .shore-scene,
  .future-hero,
  .footer-note { border-radius: 22px; }
  .intro-surface,
  .story-block,
  .shore-scene,
  .future-hero,
  .closing-statement { padding: 22px; }
  .character-card { grid-template-columns: 1fr; gap: 14px; }
  .character-card dl { grid-column: 1; }
  .character-card dl div { grid-template-columns: 1fr; }
  .fact-grid,
  .recommendations { grid-template-columns: 1fr; }
  .map-ocean { min-height: 320px; }
  .chart-box,
  .viz-card.large .chart-box { height: 320px; }
  .viz-card,
  .viz-card.large { min-height: 390px; padding: 18px; }
  .impact-bubbles { flex-direction: column; }
  .bubble.big { width: 200px; height: 200px; }
  .bubble.small { width: 146px; height: 146px; }
}


@media (max-width: 760px) {
  .map-ocean {
    margin: 14px;
    min-height: 380px;
  }
  .pacific-svg .region-labels text {
    font-size: 15px;
  }
  .pacific-svg .country-marker text {
    font-size: 12px;
  }
}



/* V4 real domino image assets */
.cover-art {
  background-image: url('assets/domino-hero-real.png');
  background-size: cover;
  background-position: center center;
  min-height: 520px;
}
.cover-art .cover-side,
.cover-art .split-line {
  display: none;
}

.mini-domino {
  width: 110px;
  height: 160px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.mini-domino.upright {
  background-image: url('assets/domino-stable-real.png');
}
.mini-domino.tilted {
  background-image: url('assets/domino-falling-real.png');
  transform: none;
}
@media (max-width: 760px) {
  .cover-art {
    min-height: 300px;
    background-position: center top;
  }
  .mini-domino {
    width: 84px;
    height: 128px;
  }
}

/* V5 fix: stable/falling chain cards use clean CSS domino tiles, not cropped images */
.character-card {
  grid-template-columns: 92px 1fr;
  align-items: start;
}

.character-card > .mini-domino {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: center;
}

.mini-domino,
.mini-domino.upright,
.mini-domino.tilted {
  position: relative;
  width: 70px;
  height: 138px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.92);
  background-image: none !important;
  background-repeat: initial;
  background-size: initial;
  background-position: initial;
  box-shadow:
    0 18px 32px rgba(21,41,58,.16),
    inset 8px 8px 14px rgba(255,255,255,.78),
    inset -8px -10px 16px rgba(45,63,72,.11);
}

.mini-domino.upright {
  --pip: #2ba59d;
  background:
    radial-gradient(circle at 50% 23%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 32% 72%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 72%, var(--pip) 0 6px, transparent 7px),
    linear-gradient(145deg, #fffdf4 0%, #f4efe4 50%, #ddd5c9 100%);
  transform: rotate(0deg);
}

.mini-domino.tilted {
  --pip: #e5737f;
  background:
    radial-gradient(circle at 50% 23%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 32% 69%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 69%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 32% 82%, var(--pip) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 82%, var(--pip) 0 6px, transparent 7px),
    linear-gradient(145deg, #fffdf4 0%, #f5eee6 50%, #ded5ca 100%);
  transform: rotate(28deg);
  transform-origin: 50% 84%;
}

.mini-domino::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: rgba(28,35,40,.78);
  transform: translateY(-50%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.mini-domino::after {
  content: "";
  position: absolute;
  inset: 7px 7px auto auto;
  width: 20px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0));
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 760px) {
  .character-card {
    grid-template-columns: 74px 1fr;
  }

  .mini-domino,
  .mini-domino.upright,
  .mini-domino.tilted {
    width: 58px;
    height: 116px;
    border-radius: 15px;
  }
}


/* V6 exact domino card images from approved screenshot */
.character-card {
  grid-template-columns: 110px 1fr;
  align-items: start;
}
.character-card > .mini-domino {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: center;
}
.mini-domino,
.mini-domino.upright,
.mini-domino.tilted {
  position: relative;
  width: 120px;
  height: 210px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center top !important;
  box-shadow: none !important;
  transform: none !important;
}
.mini-domino::before,
.mini-domino::after {
  display: none !important;
}
.mini-domino.upright {
  background-image: url('assets/domino-card-stable.png') !important;
}
.mini-domino.tilted {
  background-image: url('assets/domino-card-falling.png') !important;
}
@media (max-width: 760px) {
  .character-card {
    grid-template-columns: 80px 1fr;
  }
  .mini-domino,
  .mini-domino.upright,
  .mini-domino.tilted {
    width: 88px;
    height: 154px;
  }
}


/* V7 update: use approved beach artwork in The Empty Shore section */
.shore-illustration {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    url('assets/empty-shore-scene.png') center center / cover no-repeat !important;
  min-height: 420px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 18px 34px rgba(21,41,58,.06);
}
.shore-illustration::before {
  display: none !important;
}
.shore-illustration .boat,
.shore-illustration .palm {
  display: none !important;
}
.shore-illustration .empty-sign {
  right: 34px;
  bottom: 34px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 4px solid rgba(23,50,77,.78);
  background: rgba(248,242,228,.86);
  color: var(--navy);
  font-size: 0.82rem;
  letter-spacing: .08em;
  box-shadow: 0 10px 24px rgba(21,41,58,.10);
}
@media (max-width: 760px) {
  .shore-illustration {
    min-height: 250px;
    background-position: center center !important;
  }
  .shore-illustration .empty-sign {
    right: 16px;
    left: 16px;
    bottom: 16px;
    padding: 12px 14px;
    font-size: .72rem;
    text-align: center;
  }
}


/* V8 update: replace The Empty Shore with new beach image */
.shore-illustration {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    url('assets/empty-shore-scene.jpg') center center / cover no-repeat !important;
}


/* V9 update: approved clinic building illustration for The Fragile Clinic */
.clinic-symbol {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
}

.clinic-building {
  position: relative;
  width: min(100%, 360px);
  height: 300px;
  background: url('assets/fragile-clinic-building.jpg') center center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.clinic-building::before {
  display: none !important;
}

.clinic-symbol p {
  max-width: 320px;
  color: #6d7884;
  font-weight: 800;
  line-height: 1.5;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .clinic-symbol {
    min-height: 280px;
  }
  .clinic-building {
    width: min(100%, 280px);
    height: 220px;
  }
}


/* V10 update: illustrated beach image for better style consistency */
.shore-illustration {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    url('assets/empty-shore-scene-illustrated.jpg') center center / cover no-repeat !important;
}


/* V11 update: replace abstract reflection split-box with approved two-futures artwork */
.future-hero {
  align-items: stretch;
}
.future-illustration {
  position: relative;
  height: 380px;
  display: block !important;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    url('assets/two-futures-reflection.png') center center / cover no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}
.future-left,
.future-right {
  position: absolute !important;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0 !important;
  background: transparent !important;
  color: transparent !important;
}
.future-left { left: 0; }
.future-right { right: 0; }
.future-left::before,
.future-right::before,
.future-left span,
.future-right span {
  display: none !important;
}
@media (max-width: 980px) {
  .future-illustration {
    height: 320px;
  }
}
@media (max-width: 760px) {
  .future-illustration {
    height: 240px;
    border-radius: 20px;
    background-position: center center !important;
  }
}