/* The story's final section, revised 2026-09-20 after Joseph's review: the
   riverline kept its line, gold dots, and small prints, and gained the copy
   under every year so the whole record, text and images, reads in one view.
   Desktop is two rows of six; each cell draws its own segment of the line so
   the row reads as one continuous river. Linked only from story/index.html
   so the archived story-end-* mockups stay independent. */

.history-summary{padding:64px 24px 72px;background:var(--stripe)}
.summary-head{text-align:center;margin-bottom:40px}
.summary-kicker{margin:0 0 6px;font:400 12px/1 var(--sans);letter-spacing:.18em;color:var(--muted)}
.summary-head h2{margin:0;font:600 clamp(26px,3.6vw,40px)/1.3 var(--mincho);color:var(--anchor)}
.summary-list{margin:0 auto;padding:0;list-style:none;max-width:1280px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:14px;row-gap:34px}
.sum{position:relative;min-width:0}
.sum::before{content:'';position:absolute;left:-7px;right:-7px;top:38px;height:4px;background:var(--brand)}
.sum:nth-child(6n+1)::before{left:50%;border-radius:2px 0 0 2px}
.sum:nth-child(6n)::before{right:50%;border-radius:0 2px 2px 0}
.sum a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit}
.sum-year{display:flex;justify-content:center;align-items:flex-end;height:28px;margin-bottom:6px;font:600 17px/1 var(--mincho);color:var(--anchor);white-space:nowrap;font-feature-settings:"palt"}
.sum-year .year-range{font-size:12px;margin-left:1px}
.sum-year .now-label{font:600 10px/1 var(--sans);margin-left:4px;color:var(--muted);align-self:center}
.sum a::after{content:'';position:absolute;left:50%;top:34px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--brand)}
.sum-thumb{margin-top:18px;width:64px;aspect-ratio:2/3;overflow:hidden;border-radius:2px;box-shadow:0 8px 18px rgba(0,0,0,.28);background:var(--anchor)}
.sum-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sum-text{display:block;margin-top:12px;padding-inline:4px;font:400 11.5px/1.65 var(--sans);color:var(--ink);text-align:center}
.sum-text .subperiod{display:block;color:var(--muted)}
.sum:not(.pictured) .sum-text{margin-top:18px}
.sum a:hover .sum-year,.sum a:focus-visible .sum-year{color:var(--brand)}
.sum a:hover .sum-thumb{box-shadow:0 12px 24px rgba(0,0,0,.36)}
.summary-note{margin:36px 0 0;text-align:center;font:400 11px/1.8 var(--sans);color:var(--muted)}

@media(max-width:1000px) and (min-width:641px){
  .summary-list{grid-template-columns:repeat(4,1fr)}
  .sum:nth-child(6n+1)::before,.sum:nth-child(6n)::before{left:-7px;right:-7px;border-radius:0}
  .sum:nth-child(4n+1)::before{left:50%;border-radius:2px 0 0 2px}
  .sum:nth-child(4n)::before{right:50%;border-radius:0 2px 2px 0}
}

@media(max-width:640px){
  .summary-list{display:block;max-width:520px}
  .sum::before,.sum a::after{display:none}
  .sum a{display:grid;grid-template-columns:60px 1fr 44px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
  .sum:first-child a{border-top:1px solid var(--line)}
  .sum-year{height:auto;margin:0;justify-content:flex-start;font-size:15px;grid-row:1;grid-column:1}
  .sum a::after{content:none}
  .sum-thumb{margin:0;width:44px;grid-row:1;grid-column:3}
  .sum-text,.sum:not(.pictured) .sum-text{margin:0;padding:0;text-align:left;font-size:12px;grid-row:1;grid-column:2}
}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .history-summary{transition:opacity .9s cubic-bezier(.19,1,.22,1),translate .9s cubic-bezier(.19,1,.22,1)}
  .reveal-ready .history-summary:not(.is-seen){opacity:.2;translate:0 26px}
}