/* ============================================================
   Tura Arutura — The Story — page-specific components
   Additive layer on top of the shared ecosystem styles.css.
   Same rules apply: flat, hairlines, no decoration, no gradients.
   ============================================================ */

/* Hero portrait — the B&W leap is near-square */
.hero-photo.square { aspect-ratio: 1 / 1; }

/* Stat band — big numbers, hairline top rules (matches .step) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.stat { padding-top: 1.4rem; border-top: 1px solid var(--ink); }
.stat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Timeline — the life in one column */
.timeline { margin: 0; padding: 0; list-style: none; max-width: 980px; }
.timeline li { display: grid; grid-template-columns: clamp(5.2rem, 11vw, 8.5rem) 1fr; gap: clamp(1.4rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.1rem) 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .t-year { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.25rem); line-height: 1.45; color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline h3 { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.timeline p { margin: 0.45rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--muted); max-width: 58ch; }

/* Split media — landscape variant for wide photographs */
.split-media.wide { aspect-ratio: 4 / 3; }

/* Quote photo — square variant for the rock photograph */
.quote-photo.tall { aspect-ratio: 1 / 1; max-width: 560px; justify-self: end; }

/* Chapter video — Croke Park 2018 broadcast clip */
.split-media.media-video { position: relative; aspect-ratio: 16 / 9; }
.split-media.media-video video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.video-mute { position: absolute; right: 0.9rem; bottom: 0.9rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10, 10, 10, 0.6); color: #fff; opacity: 0; transition: opacity 0.2s ease, background 0.18s ease; backdrop-filter: blur(8px); }
.split-media.media-video:hover .video-mute, .video-mute:focus-visible { opacity: 1; }
.video-mute:hover { background: rgba(10, 10, 10, 0.85); }
.video-mute .icon-sound { display: none; }
.video-mute[aria-pressed="true"] .icon-sound { display: block; }
.video-mute[aria-pressed="true"] .icon-muted { display: none; }
@media (hover: none) { .video-mute { opacity: 1; } }

/* Ecosystem index — linked hairline rows */
.eco-list { margin: 2rem 0 0; padding: 0; list-style: none; }
.eco-list a { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2rem); align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.eco-list li:last-child a { border-bottom: 1px solid var(--line); }
.eco-list b { font-size: 0.8rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.eco-list h3 { font-family: var(--font-sans); font-size: 1.04rem; font-weight: 600; color: var(--ink); display: inline; }
.eco-list p { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--muted); max-width: 52ch; }
.eco-arrow { color: var(--muted); font-weight: 600; transition: transform 0.18s ease, color 0.18s ease; }
.eco-list a:hover .eco-arrow { transform: translateX(5px); color: var(--ink); }
.eco-list a:hover h3 { color: var(--accent-ink); }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .quote-photo.tall { max-width: 100%; justify-self: stretch; }
}
@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1fr; gap: 0.35rem; }
  .eco-list a { grid-template-columns: 1fr auto; }
  .eco-list b { display: none; }
}