/* Coastal Signature only. Existing semantic typography; horizon to table line. */
.miri-coastal {
  padding-top: 88px;
  background: var(--miri-paper);
  color: var(--miri-color-body-primary);
  font-family: var(--miri-type-copy-family);
  font-size: var(--miri-type-body-regular-size);
  font-weight: var(--miri-type-copy-weight);
  line-height: var(--miri-type-body-regular-line-height);
}
.miri-coastal h1, .miri-coastal h2, .miri-coastal h3 {
  color: var(--miri-color-heading-light);
  font-family: var(--miri-type-heading-family);
  font-weight: var(--miri-type-heading-weight);
  margin: 0 0 28px;
}
.miri-coastal h1 {
  font-size: var(--miri-type-page-h1-size);
  line-height: var(--miri-type-page-h1-line-height);
  letter-spacing: var(--miri-type-page-h1-letter-spacing);
  max-width: 12ch;
}
.miri-coastal h2 {
  font-size: var(--miri-type-section-h2-size);
  line-height: var(--miri-type-section-h2-line-height);
  letter-spacing: var(--miri-type-section-h2-letter-spacing);
  max-width: 19ch;
}
.miri-coastal h3 {
  font-size: var(--miri-type-subsection-h3-size);
  line-height: var(--miri-type-subsection-h3-line-height);
  letter-spacing: var(--miri-type-subsection-h3-letter-spacing);
}
.miri-coastal p { margin: 0 0 24px; }
.miri-coastal figure { margin: 0; min-width: 0; }
.miri-coastal img { display: block; width: 100%; height: auto; }
.miri-coastal .miri-gate4-eyebrow { color: var(--miri-rust); }
.miri-coastal figcaption, .miri-coastal-caption {
  font-size: var(--miri-type-caption-size);
  line-height: var(--miri-type-caption-line-height);
  color: var(--miri-color-body-secondary);
  margin-top: 14px;
}

/* 1–2: portrait portal and a single editorial margin on the 12-column grid. */
.miri-coastal-prologue { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-block: 40px 72px; }
.miri-coastal-prelude { grid-column: 7 / -1; grid-row: 1; width: min(100%, 600px); justify-self: end; }
.miri-coastal-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--miri-paper); }
.miri-coastal-video-tools { display: flex; justify-content: flex-end; min-height: 44px; }
.miri-coastal-video-toggle {
  margin: 0; min-height: 44px; padding: 8px 0 8px 20px;
  border: 0; box-shadow: none; background: transparent; color: var(--miri-navy); text-transform: none;
  font-family: var(--miri-type-copy-family); font-size: var(--miri-type-button-size);
  font-weight: var(--miri-type-button-weight); letter-spacing: var(--miri-type-button-letter-spacing);
}
.miri-coastal-video-toggle[hidden] { display: none; }
.miri-coastal-video-toggle:focus-visible { outline: 2px solid var(--miri-rust); outline-offset: 3px; }
.miri-coastal-editorial { grid-column: 1 / 7; grid-row: 1; }
.miri-coastal h1 { max-width: 14ch; }
.miri-coastal h1 span { display: block; }
.miri-coastal-thesis { max-width: 33ch; color: var(--miri-navy); font-size: var(--miri-type-body-large-size); line-height: var(--miri-type-body-large-line-height); }
.miri-coastal-opening { max-width: 54ch; border-top: 1px solid var(--miri-rust); margin-top: 32px; padding-top: 32px; }
.miri-coastal .miri-gate4-editorial-link { color: var(--miri-navy); }
.miri-coastal-chapter { padding-block: clamp(64px, 7vw, 104px); }

/* 3: two un-cropped catches, one quiet CSS dissolve and an editorial margin. */
.miri-coastal-catch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--miri-rust); align-items: start; }
.miri-coastal-catch-main { grid-column: 1 / 8; grid-row: 1; }
.miri-coastal-catch-copy { grid-column: 9 / -1; grid-row: 1; }
.miri-coastal-catch-frames { display: grid; }
.miri-coastal-catch-frames img { grid-area: 1 / 1; }
.miri-coastal-catch-frames img + img { opacity: 0; }
.miri-coastal-catch-main.is-ready .miri-coastal-catch-frames img + img { animation: miriCoastalCatchFade 20s ease-in-out infinite; }
.miri-coastal-catch-main.is-paused .miri-coastal-catch-frames img + img { animation-play-state: paused; }
@keyframes miriCoastalCatchFade {
  0%, 43%, 100% { opacity: 0; }
  50%, 93% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-miri-motion="enabled"]) .miri-coastal-catch-main.is-ready .miri-coastal-catch-frames img + img { animation: none; }
}

/* 4: full dish spread across nine columns; no food cropped or overlaid. */
.miri-coastal-leaf { background: var(--miri-ivory); }
.miri-coastal-leaf-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: min-content 1fr; gap: 28px 24px; }
.miri-coastal-leaf-heading { grid-column: 1 / 4; grid-row: 1; padding-top: 48px; }
.miri-coastal-leaf-inner > figure { grid-column: 4 / -1; grid-row: 1 / 3; }
.miri-coastal-leaf-caption { grid-column: 1 / 4; grid-row: 2; align-self: start; }
.miri-coastal-leaf-caption h3 { padding-top: 24px; border-top: 1px solid var(--miri-rust); }

/* 5: sequential visual moments, connected by the existing thesis. */
.miri-coastal-waters-intro { max-width: 70%; margin-bottom: 48px; }
.miri-coastal-hotpots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; }
.miri-coastal-fish { grid-column: 1 / 11; display: grid; grid-template-columns: 1.35fr 1fr; align-items: end; gap: 40px; }
.miri-coastal-fish-copy { padding-bottom: 40px; }
.miri-coastal-waters-bridge { grid-column: 5 / 11; max-width: 62ch; margin-block: 12px; padding-block: 32px; border-top: 1px solid var(--miri-rust); border-bottom: 1px solid var(--miri-rust); }
.miri-coastal-waters-bridge p { margin: 0; }
.miri-coastal-crab { grid-column: 5 / -1; }
.miri-coastal-crab h3 { max-width: 34ch; margin-top: 28px; }
.miri-coastal-crab [data-coastal-copy] { max-width: 62ch; }

/* 6: a broad shared-table moment, then a separate editorial band. */
.miri-coastal-table { background: var(--miri-navy); color: var(--miri-ivory); scroll-margin-top: 88px; }
.miri-coastal-table h2, .miri-coastal .miri-coastal-table .miri-gate4-eyebrow { color: var(--miri-ivory); }
.miri-coastal-table-band { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; margin-top: 48px; align-items: start; }
.miri-coastal-table-band [data-coastal-copy] { max-width: 61ch; }
.miri-coastal-table-band h2 { max-width: 20ch; }
.miri-coastal-table-band p:last-child { margin-bottom: 0; }

/* A horizontal conclusion: one quiet lead-in, a full-width statement, an endnote. */
.miri-coastal-table-line { height: 1px; width: 100%; background: var(--miri-rust); margin-bottom: 48px; }
.miri-coastal-closing-copy {
  width: 100%; color: var(--miri-navy); font-family: var(--miri-type-heading-family);
  font-weight: var(--miri-type-heading-weight); font-size: var(--miri-type-section-h2-size);
  line-height: var(--miri-type-section-h2-line-height); letter-spacing: var(--miri-type-section-h2-letter-spacing);
}
.miri-coastal-closing-copy p:first-child { font-size: var(--miri-type-subsection-h3-size); line-height: var(--miri-type-subsection-h3-line-height); margin-bottom: 40px; }
.miri-coastal-closing-copy p:nth-child(2) { max-width: 39ch; }
.miri-coastal-closing-copy p:last-child { color: var(--miri-rust); font-size: var(--miri-type-subsection-h3-size); line-height: var(--miri-type-subsection-h3-line-height); text-align: right; margin-top: 48px; }
.miri-coastal-related { margin-top: 96px; }
.miri-coastal-links { display: flex; flex-wrap: wrap; gap: 24px 36px; margin-bottom: 32px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .miri-coastal-prologue { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 40px; }
  .miri-coastal-prelude { grid-column: 2; width: 100%; }
  .miri-coastal-editorial { grid-column: 1; }
}

@media (max-width: 767px) {
  .miri-coastal { padding-top: 74px; }
  .miri-coastal-prologue { display: flex; flex-direction: column; align-items: stretch; padding-block: 24px 56px; gap: 40px; }
  .miri-coastal-prelude { width: 100%; }
  .miri-coastal h1 { max-width: none; }
  .miri-coastal-opening { margin-top: 28px; padding-top: 28px; }
  .miri-coastal-catch { display: flex; flex-direction: column; gap: 32px; }
  .miri-coastal-catch-main { order: 0; width: 100%; }
  .miri-coastal-catch-copy { order: 1; }
  .miri-coastal-leaf-inner { display: flex; flex-direction: column; gap: 32px; }
  .miri-coastal-leaf-heading { padding: 0; order: 1; }
  .miri-coastal-leaf-inner > figure { order: 0; }
  .miri-coastal-leaf-caption { order: 2; }
  .miri-coastal-leaf-caption h3 { padding-top: 0; border-top: 0; }
  .miri-coastal-leaf-heading h2 { margin-bottom: 0; }
  .miri-coastal-waters-intro { max-width: none; }
  .miri-coastal-hotpots, .miri-coastal-fish { display: flex; flex-direction: column; gap: 32px; }
  .miri-coastal-fish-copy { padding: 0; }
  .miri-coastal-waters-bridge { margin: 0; padding-block: 28px; }
  .miri-coastal-crab h3 { margin-top: 24px; }
  .miri-coastal-table { scroll-margin-top: 74px; }
  .miri-coastal-table-band { display: block; margin-top: 32px; }
  .miri-coastal-closing-copy p:last-child { text-align: left; margin-top: 36px; }
  .miri-coastal-table-line { margin-bottom: 36px; }
  .miri-coastal-related { margin-top: 64px; }
  .miri-coastal-links { align-items: flex-start; flex-direction: column; gap: 24px; }
}