/* Why Mahal Tana (/about/mahal-tana): the province in four syllables, one chapter under another.
   The chapters were the homepage's MAHAL TANA stage (Docs/plan-homepage-length.md, L3). */
.story { display: grid; gap: var(--s9); padding: 0 var(--gutter) var(--s9); }
.story-ch { display: grid; gap: var(--s5); }
.story-title { font-size: var(--fs-l); }
.story-title b { font-weight: 800; }
.story-title span { font-style: italic; font-weight: 400; text-transform: none; font-size: .5em; letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.story-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-vis .v-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.story-vis .v-sub { aspect-ratio: 4 / 3; }
.story-vis .v-sub:last-child:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.story-text p { max-width: 34rem; margin: 0; }
.story-text .cap { margin-top: var(--s4); }
.story-text .credit { margin-top: var(--s2); font-size: .7rem; }
.story-text .credit a { color: inherit; }
.story-text .link-arrow { margin-top: var(--s5); }
.species { display: grid; gap: 2px; max-width: 22rem; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid currentColor; font-size: .82rem; }
.species dd { margin: 0; }
.species i { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1; }
@media (min-width: 900px) {
  .story { gap: clamp(72px, 14vh, 140px); max-width: 1240px; margin-inline: auto; }
  .story-ch { grid-template-columns: 1.15fr .85fr; gap: var(--s5) 5vw; align-items: start; }
  .story-title { grid-column: 1 / -1; }
  .story-ch:nth-child(even) .story-vis { order: 2; }
}