.story-page { background: var(--paper); }
.story-archive { padding: clamp(46px, 4vw, 66px) clamp(24px, 6vw, 96px) 0; }
.story-archive-head { max-width: 1180px; }
.story-archive-head > p, .archive-story-copy > p, .story-share > div > p { margin: 0; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.story-archive-head h1 { max-width: 1100px; margin: 12px 0 4px; font-family: var(--font-hand); font-size: clamp(62px, 6.5vw, 96px); line-height: .95; }
.story-archive-head strong { display: block; width: fit-content; margin: 12px 0 16px; padding-bottom: 4px; border-bottom: 2px solid var(--red); font-family: var(--font-hand); font-size: clamp(22px, 2.3vw, 34px); font-weight: 400; }
.story-archive-head > span { display: block; max-width: 650px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.story-archive-head > small { display: block; margin-top: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 15px; }
.story-selection { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 3vw, 48px); max-width: 1280px; padding: 24px 0 38px; border-bottom: 1px solid var(--ink); }
.archive-story { min-width: 0; }
.archive-story-mia { display: grid; grid-template-columns: minmax(190px, .78fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 42px); }
.archive-story figure { margin: 0; }
.archive-story figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.archive-story-copy { max-width: 690px; }
.archive-story-copy h2 { margin: 10px 0 18px; font-family: var(--font-hand); font-size: clamp(32px, 3.2vw, 48px); line-height: 1.03; }
.archive-story-copy blockquote { margin: 0 0 24px; padding-left: 18px; border-left: 3px solid var(--red); color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.story-full { max-height: 0; overflow: hidden; transition: max-height 360ms ease; }
.story-full p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.7; }
.story-full.is-open { max-height: 620px; }
.story-read { padding: 0 0 5px; border: 0; border-bottom: 2px solid var(--red); background: transparent; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.story-read span { color: var(--red); }
.archive-story-eli .archive-story-copy { margin-top: 18px; }
.archive-video { position: relative; overflow: hidden; background: #171614; }
.archive-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-play { position: absolute; inset: auto 0 0; display: flex; gap: 14px; align-items: center; padding: 18px 24px; border: 0; color: white; background: rgba(0,0,0,.76); font: inherit; font-weight: 800; cursor: pointer; }
.video-play i { width: 46px; height: 46px; padding: 13px; border-radius: 50%; color: var(--ink); background: var(--paper-light); }
.video-play.is-hidden { display: none; }
.story-share { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1fr) auto; gap: 36px; align-items: center; max-width: 1280px; padding: 48px 0 70px; }
.story-share h2 { margin: 8px 0 0; font-family: var(--font-hand); font-size: clamp(32px, 3vw, 48px); line-height: 1.05; }
.story-share > p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.story-share > small { grid-column: 1 / -1; text-align: right; color: var(--ink-soft); }
@media (max-width: 820px) {
  .story-archive { padding-top: 74px; }
  .story-archive-head h1 { font-size: clamp(56px, 18vw, 78px); }
  .story-selection { grid-template-columns: 1fr; gap: 42px; }
  .archive-story-mia { grid-template-columns: 1fr; gap: 28px; }
  .archive-story figure { max-width: 260px; }
  .archive-story-copy h2 { font-size: clamp(36px, 11vw, 52px); }
  .story-share { grid-template-columns: 1fr; }
  .story-share > small { grid-column: auto; text-align: left; }
}