:root {
  --paper: #f3eee6;
  --paper-soft: #faf6ef;
  --ink: #14202a;
  --navy: #182b3a;
  --slate: #3a5364;
  --blue: #b9d5e8;
  --coral: #e57b6b;
  --coral-deep: #cf604f;
  --muted: #667078;
  --white: #fffdf8;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: Inter, Arial, sans-serif;
  --body-size: 17px;
  --body-leading: 1.7;
  --ease: cubic-bezier(.22,.72,.22,1);
  --page-pad: clamp(30px, 7vw, 112px);
  --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.panel-open { overflow: hidden; }
section { scroll-margin-top: var(--header-h); }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
p, li, blockquote { font-weight: 400; }
strong { font-weight: 500; }
::selection { background: var(--coral); color: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(560px, 1.8fr) minmax(120px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  color: var(--ink);
  background: rgba(243,238,230,.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20,32,42,.12);
  transition: color .35s, background .35s, border-color .35s;
}
.site-header.dark { color: var(--white); background: rgba(10,20,29,.74); border-color: rgba(255,255,255,.13); }
.mini-wordmark {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.chapter-track { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; }
.chapter-track a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 23px 8px 21px;
  text-decoration: none;
  color: inherit;
  opacity: .48;
  transition: opacity .25s;
}
.chapter-track a:hover, .chapter-track a.active { opacity: 1; }
.chapter-track a::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 8px;
  right: 8px;
  bottom: -1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.chapter-track a.active::after { transform: scaleX(1); }
.chapter-track span { font-size: 9px; letter-spacing: .08em; }
.chapter-track em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.contents-button {
  justify-self: end;
  border: 0;
  padding: 10px 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
}
.contents-button i { position: relative; width: 22px; height: 1px; background: currentColor; display: block; }
.contents-button i::before, .contents-button i::after {
  width: 22px;
  height: 1px;
  background: currentColor;
  display: block;
  content: "";
  position: absolute;
  left: 0;
}
.contents-button i::before { top: -6px; }
.contents-button i::after { top: 6px; }
.progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left; }

.contents-panel {
  position: fixed;
  z-index: 110;
  inset: 0 0 0 auto;
  width: min(520px, 92vw);
  background: var(--paper-soft);
  transform: translateX(103%);
  transition: transform .5s var(--ease);
  box-shadow: -30px 0 80px rgba(20,32,42,.16);
}
.contents-panel.open { transform: translateX(0); }
.contents-inner { height: 100%; overflow: auto; padding: 38px 42px 60px; }
.contents-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 26px; border-bottom: 1px solid rgba(20,32,42,.18); }
.contents-heading p { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.contents-close { border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
.contents-panel ol { list-style: none; margin: 24px 0 0; padding: 0; }
.contents-panel li { border-bottom: 1px solid rgba(20,32,42,.12); }
.contents-panel a,
.contents-panel .contents-modal-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 19px 0;
  text-decoration: none;
}
.contents-panel a span,
.contents-panel .contents-modal-link span { font-size: 10px; color: var(--coral-deep); }
.contents-panel strong,
.contents-panel .contents-modal-link strong {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1;
  font-weight: 500;
}
.contents-panel small,
.contents-panel .contents-modal-link small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-scrim { position: fixed; z-index: 100; inset: 0; background: rgba(10,20,29,.28); backdrop-filter: blur(3px); }

.kicker, .section-index, .chapter-label, .voice-label, .modal-kicker {
  margin: 0 0 22px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 10px;
  font-weight: 600;
}

.entry {
  min-height: min(100svh, 960px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 112px var(--page-pad) clamp(52px, 8vh, 86px);
  background: var(--blue);
}
.entry-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.entry-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(243,238,230,.97) 0%, rgba(243,238,230,.88) 30%, rgba(243,238,230,.34) 56%, rgba(243,238,230,.03) 78%),
    linear-gradient(0deg, rgba(243,238,230,.55), transparent 50%);
}
.entry-copy { position: relative; z-index: 2; width: min(720px, 62vw); }
.entry h1,
.opening-title h2,
.chapter-heading h2,
.bay-citizen h2,
.region-intro h2,
.horizon-copy h2,
.closing h2,
.note-modal h2,
.about-modal-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.035em;
}
.entry h1 { font-size: clamp(76px, 8.2vw, 138px); line-height: .86; }
.entry-deck {
  max-width: 520px;
  margin: 30px 0 0;
  font-family: var(--font-body);
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: 400;
  line-height: 1.6;
}
.enter-link,
.return-link,
.about-source-link {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.enter-link {
  margin-top: 36px;
  width: fit-content;
  display: flex;
  gap: 28px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
}
.enter-link i { font-style: normal; color: var(--coral-deep); font-size: 16px; }

.paper-section {
  min-height: min(100svh, 900px);
  padding: clamp(112px, 13vh, 154px) var(--page-pad) 84px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.paper-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  column-gap: clamp(56px, 9vw, 150px);
  row-gap: 58px;
  max-width: 1320px;
  margin: 0 auto;
}
.opening-title h2 { font-size: clamp(58px, 6vw, 98px); line-height: .95; }
.opening-copy {
  padding-top: 28px;
  max-width: 560px;
  font-size: var(--body-size);
  line-height: var(--body-leading);
}
.opening-copy p { margin: 0 0 20px; }
.opening-copy .serif-line {
  font-family: var(--font-display);
  font-size: 1.4em;
  font-style: italic;
  line-height: 1.35;
  color: var(--coral-deep);
}
.scale-map {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(20,32,42,.2);
  padding-top: 22px;
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 40px;
  align-items: start;
}
.scale-map > p { margin: 3px 0 0; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; }
.scale-map ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 34px; }
.scale-map a {
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20,32,42,.1);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  transition: color .2s, padding-left .2s;
}
.scale-map a:hover { color: var(--coral-deep); padding-left: 6px; }
.scale-map span { font-family: var(--font-body); font-size: 9px; color: var(--coral-deep); }
.coral-orb { position: absolute; right: 7vw; top: 10%; width: clamp(90px, 12vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); opacity: .18; }

.chapter { position: relative; overflow: hidden; }
.chapter-bill, .chapter-block {
  min-height: min(100svh, 900px);
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  background: var(--paper);
}
.chapter-block { grid-template-columns: .88fr 1.12fr; }
.chapter-media { position: relative; overflow: hidden; }
.chapter-media img { width: 100%; height: 100%; object-fit: cover; }
.chapter-panel {
  position: relative;
  z-index: 3;
  align-self: center;
  margin: 80px clamp(30px, 5vw, 76px);
  padding: clamp(34px, 4vw, 54px);
  background: rgba(250,246,239,.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(20,32,42,.12);
  box-shadow: 0 28px 80px rgba(20,32,42,.12);
}
.panel-left { order: -1; }
.chapter-heading > p { margin: 0 0 23px; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.chapter-heading > p span, .chapter-label span { margin-right: 13px; color: var(--coral-deep); }
.chapter-heading h2, .bay-citizen h2, .region-intro h2, .horizon-copy h2 {
  font-size: clamp(64px, 6vw, 98px);
  line-height: .9;
}
.chapter-heading h3,
.bay-citizen h3,
.region-intro h3,
.horizon-copy h3 {
  margin: 19px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}
.chapter-excerpt,
.bay-citizen > p:last-child,
.region-copy,
.horizon-copy > p:not(.chapter-label),
.closing-frame > p:not(.section-index),
.note-modal > p:not(.modal-kicker),
.about-modal-copy,
.about-modal .source-list li {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
}
.chapter-excerpt { margin-top: 28px; color: #4f5b61; }
.chapter-excerpt p { margin: 0 0 17px; }
.note-toggle {
  width: 100%;
  margin-top: 28px;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid rgba(20,32,42,.18);
  border-bottom: 1px solid rgba(20,32,42,.18);
  background: none;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.note-toggle i { font-style: normal; font-size: 16px; transition: transform .25s; }
.note-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.note-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.note-drawer > p {
  overflow: hidden;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--coral-deep);
}
.note-toggle[aria-expanded="true"] + .note-drawer { grid-template-rows: 1fr; }
.note-toggle[aria-expanded="true"] + .note-drawer > p { padding-top: 22px; }
.pull-quote {
  margin: 30px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(20,32,42,.18);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  color: var(--coral-deep);
}

.bay-waterline {
  min-height: min(100svh, 960px);
  background: var(--paper);
  display: grid;
  grid-template-rows: minmax(580px, 1fr) auto;
}
.bay-above { position: relative; overflow: hidden; }
.bay-above > img { width: 100%; height: 100%; object-fit: cover; }
.bay-above::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,238,230,.96), rgba(243,238,230,.56) 38%, transparent 67%); }
.bay-citizen { position: absolute; z-index: 2; top: 50%; left: var(--page-pad); width: min(510px, 40vw); transform: translateY(-42%); }
.bay-citizen > p:last-child { margin: 28px 0 0; max-width: 46ch; }
.waterline-band {
  position: relative;
  z-index: 3;
  padding: 32px var(--page-pad);
  background: var(--slate);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.42);
}
.otter-voice { max-width: 920px; }
.otter-voice blockquote {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(38px, 3.2vw, 52px);
  font-weight: 500;
  line-height: 1;
}
.otter-voice > p:last-child { max-width: 76ch; margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; }
.tech-button {
  border: 1px solid rgba(255,255,255,.52);
  background: transparent;
  color: white;
  padding: 13px 17px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  transition: background .25s, color .25s;
}
.tech-button:hover { background: white; color: var(--slate); }

.chapter-strait {
  min-height: max(100svh, 820px);
  background: #172a3a;
  color: var(--white);
}
.full-media { position: absolute; inset: 0; }
.full-media img { object-position: center; }
.dark-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,19,29,.93), rgba(8,19,29,.65) 43%, rgba(8,19,29,.12) 74%), linear-gradient(0deg, rgba(8,19,29,.48), transparent 55%); }
.dark-panel {
  width: min(560px, 43vw);
  margin: 0;
  position: absolute;
  top: 50%;
  left: var(--page-pad);
  transform: translateY(-44%);
  background: rgba(19,37,51,.78);
  color: var(--white);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
  overflow: hidden;
}
.dark-panel .chapter-excerpt { color: rgba(255,255,255,.84); }
.water-coda { margin-top: 27px; padding: 20px 0 0; background: transparent; border-top: 1px solid rgba(255,255,255,.22); }
.water-coda span { display: block; margin-bottom: 10px; color: var(--coral); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; }
.water-coda p { margin: 0; font-size: 16px; line-height: 1.65; }

.chapter-region {
  min-height: min(100svh, 880px);
  padding: 104px var(--page-pad) 80px;
  background: var(--paper-soft);
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  grid-template-rows: auto 1fr;
  gap: 42px 68px;
  align-items: center;
}
.region-intro { align-self: end; }
.region-map { grid-row: 1 / 3; grid-column: 2; margin: 0; }
.region-map img { width: 100%; aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 30px 80px rgba(20,32,42,.12); }
.region-copy { align-self: start; max-width: 500px; color: #4e5a61; }
.region-copy p { margin: 0 0 18px; }
.region-copy p:last-child {
  font-family: var(--font-display);
  color: var(--coral-deep);
  font-style: italic;
  font-size: 25px;
  line-height: 1.35;
}

.chapter-horizon {
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding: 100px var(--page-pad) 72px;
}
.horizon-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.horizon-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,238,230,.97) 0%, rgba(243,238,230,.78) 39%, rgba(243,238,230,.14) 72%), linear-gradient(0deg, rgba(243,238,230,.65), transparent 56%); }
.horizon-copy { position: relative; z-index: 2; width: min(610px, 46vw); }
.horizon-copy > p:not(.chapter-label) { margin: 28px 0 0; max-width: 47ch; }
.horizon-copy blockquote {
  margin: 34px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--coral);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--coral-deep);
}

.closing {
  min-height: min(100svh, 760px);
  padding: 112px var(--page-pad) 82px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.closing-frame { max-width: 960px; position: relative; z-index: 2; }
.closing h2 { font-size: clamp(76px, 8vw, 132px); line-height: .9; }
.closing-frame > p:not(.section-index) { max-width: 720px; margin: 27px 0 0; color: rgba(255,255,255,.78); }
.closing-links { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; margin-top: 42px; }
.return-link {
  width: fit-content;
  display: flex;
  gap: 28px;
  align-items: center;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.55);
  padding-bottom: 8px;
}
.return-link i { font-style: normal; color: var(--coral); }
.about-source-link {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.38);
  padding: 0 0 8px;
  background: transparent;
  color: rgba(255,255,255,.74);
  cursor: pointer;
}
.about-source-link:hover { color: var(--white); border-color: var(--coral); }

.note-modal {
  width: min(660px, calc(100vw - 36px));
  border: 0;
  background: var(--paper-soft);
  color: var(--ink);
  padding: clamp(34px, 5vw, 60px);
  box-shadow: 0 30px 120px rgba(8,19,29,.35);
}
.note-modal::backdrop, .about-modal::backdrop { background: rgba(8,19,29,.6); backdrop-filter: blur(5px); }
.note-modal h2 { font-size: 54px; line-height: .95; }
.note-modal > p:not(.modal-kicker) { margin: 25px 0 0; }
.modal-close {
  position: absolute;
  right: 20px;
  top: 20px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.about-modal {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper-soft);
  color: var(--ink);
}
.about-modal[open] { display: block; }
.about-modal-shell { min-height: 100%; padding: clamp(32px, 5vw, 72px) var(--page-pad) 72px; overflow: auto; }
.about-modal-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(20,32,42,.16); }
.about-modal-head .modal-kicker { margin: 0; }
.about-modal-head .modal-close { position: static; }
.about-modal-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px 76px; max-width: 1380px; margin: 64px auto 0; }
.about-modal-intro h2 { font-size: clamp(60px, 6vw, 98px); line-height: .95; }
.about-modal-copy { max-width: 760px; color: #516068; }
.about-modal-copy p { margin: 0 0 20px; }
.about-modal-copy strong { color: var(--ink); font-weight: 500; }
.about-modal .source-list { grid-column: 2; max-width: 860px; padding-top: 24px; border-top: 1px solid rgba(20,32,42,.14); }
.about-modal .source-list > p { margin: 0 0 16px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); }
.about-modal .source-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.about-modal .source-list li { margin: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(20,32,42,.09); font-size: 15px; line-height: 1.5; }
.about-modal .source-list a { color: var(--ink); text-decoration-color: rgba(207,96,79,.48); text-underline-offset: 4px; }
.about-modal .source-list a:hover { color: var(--coral-deep); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  :root { --header-h: 60px; --page-pad: clamp(30px, 5vw, 54px); }
  .site-header { height: var(--header-h); grid-template-columns: 1fr auto; padding: 0 24px; }
  .chapter-track { display: none; }
  .entry {
    min-height: clamp(720px, 94vw, 900px);
    padding: 104px var(--page-pad) 62px;
  }
  .entry-copy { width: min(650px, 74vw); }
  .paper-section,
  .chapter-bill,
  .chapter-block,
  .bay-waterline,
  .chapter-strait,
  .chapter-region,
  .chapter-horizon,
  .closing { min-height: 0; }

  .paper-section { padding: 104px var(--page-pad) 72px; }
  .paper-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .opening-copy { padding-top: 0; max-width: 700px; }
  .scale-map { grid-template-columns: 1fr; gap: 12px; }
  .scale-map ol { grid-template-columns: repeat(3, 1fr); }

  .chapter-bill, .chapter-block { display: flex; flex-direction: column; }
  .chapter-media { order: 1; aspect-ratio: 16/9; }
  .chapter-panel, .panel-left { order: 2; width: min(720px, calc(100% - 64px)); margin: -72px auto 68px; padding: 44px; }

  .bay-waterline { display: block; }
  .bay-above { min-height: 0; aspect-ratio: 16/10; }
  .bay-citizen { width: min(540px, 58vw); }
  .waterline-band { padding: 32px var(--page-pad); }

  .chapter-strait { padding-top: var(--header-h); }
  .full-media { position: relative; inset: auto; aspect-ratio: 16/9; }
  .full-media img { height: 100%; filter: brightness(.64); }
  .dark-vignette { display: none; }
  .dark-panel {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(680px, calc(100% - 64px));
    margin: -130px auto 68px;
    padding: 44px;
  }

  .chapter-region { padding: 92px var(--page-pad) 72px; grid-template-columns: 1fr; grid-template-rows: auto; gap: 30px; }
  .region-intro { align-self: auto; max-width: 700px; }
  .region-map { grid-row: auto; grid-column: auto; }
  .region-copy { align-self: auto; max-width: 700px; }

  .chapter-horizon { min-height: clamp(680px, 80vw, 820px); padding: 92px var(--page-pad) 64px; }
  .horizon-copy { width: min(620px, 70vw); }

  .closing { padding: 100px var(--page-pad) 76px; }
  .about-modal-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 46px; }
  .about-modal .source-list { grid-column: auto; }
}

@media (max-width: 720px) {
  :root { --body-size: 16px; --body-leading: 1.68; --page-pad: 20px; }
  .site-header { padding: 0 18px; }
  .mini-wordmark { font-size: 22px; }
  .contents-button span { display: none; }
  .contents-inner { padding: 28px 24px 48px; }
  .contents-panel a,
  .contents-panel .contents-modal-link { grid-template-columns: 30px 1fr; }
  .contents-panel small,
  .contents-panel .contents-modal-link small { grid-column: 2; }

  .entry {
    min-height: 760px;
    padding: 92px 22px 48px;
    align-items: flex-end;
  }
  .entry-image { object-position: 63% center; }
  .entry-wash {
    background:
      linear-gradient(0deg, rgba(243,238,230,.98) 0%, rgba(243,238,230,.84) 36%, rgba(243,238,230,.24) 73%, rgba(243,238,230,.05) 100%);
  }
  .entry-copy { width: 100%; }
  .entry h1 { font-size: clamp(66px, 20vw, 92px); line-height: .86; }
  .entry-deck { max-width: 34ch; font-size: 18px; }

  .paper-section { padding: 88px 22px 56px; }
  .opening-title h2 { font-size: clamp(50px, 14vw, 70px); }
  .opening-copy .serif-line { font-size: 1.32em; }
  .scale-map ol { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .scale-map a { font-size: 25px; }
  .coral-orb { width: 100px; right: 18px; top: 8%; }

  .chapter-media { aspect-ratio: 4/3; }
  .chapter-panel, .panel-left {
    width: calc(100% - 32px);
    margin: -34px 16px 48px;
    padding: 30px 26px;
  }
  .chapter-heading h2,
  .bay-citizen h2,
  .region-intro h2,
  .horizon-copy h2 { font-size: clamp(56px, 16vw, 76px); }
  .chapter-heading h3,
  .bay-citizen h3,
  .region-intro h3,
  .horizon-copy h3 { font-size: 21px; }
  .note-drawer > p { font-size: 20px; }
  .pull-quote { font-size: 31px; }

  .bay-above { aspect-ratio: 3/4; }
  .bay-above::after { background: linear-gradient(0deg, rgba(243,238,230,.96), rgba(243,238,230,.36) 75%); }
  .bay-citizen {
    top: auto;
    bottom: 28px;
    left: 22px;
    width: calc(100% - 44px);
    transform: none;
  }
  .bay-citizen > p:last-child { margin-top: 20px; }
  .waterline-band { grid-template-columns: 1fr; gap: 24px; padding: 30px 22px; }
  .otter-voice blockquote { font-size: 38px; }
  .tech-button { width: fit-content; }

  .full-media { aspect-ratio: 4/3; }
  .dark-panel {
    width: calc(100% - 32px);
    margin: -62px 16px 48px;
    padding: 30px 26px;
  }

  .chapter-region { padding: 82px 22px 54px; gap: 26px; }
  .region-copy p:last-child { font-size: 23px; }

  .chapter-horizon {
    min-height: 720px;
    padding: 82px 22px 50px;
    align-items: flex-end;
  }
  .horizon-image { object-position: 66% center; }
  .horizon-overlay { background: linear-gradient(0deg, rgba(243,238,230,.98) 0%, rgba(243,238,230,.72) 48%, rgba(243,238,230,.10) 82%); }
  .horizon-copy { width: 100%; }
  .horizon-copy blockquote { font-size: 27px; }

  .closing { padding: 90px 22px 62px; }
  .closing h2 { font-size: clamp(68px, 18vw, 92px); }
  .closing-links { align-items: flex-start; flex-direction: column; gap: 22px; }

  .note-modal h2 { font-size: 45px; }
  .about-modal-shell { padding: 28px 22px 52px; }
  .about-modal-intro h2 { font-size: 58px; }
  .about-modal .source-list ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* V8 desktop Strait flow fix: the panel now participates in section layout, so its full content determines section height. */
@media (min-width: 1101px) {
  .chapter-strait {
    display: flex;
    align-items: center;
    min-height: max(100svh, 820px);
    padding: calc(var(--header-h) + 42px) var(--page-pad) 58px;
  }

  .chapter-strait .dark-panel {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0;
  }
}