/* Stories, v2 (2026-10-26): a reading page that feels like a good magazine. Serif text, one measure, quiet labels. */
.reading-page { max-width: 660px !important; margin-inline: auto !important; }
.reading-page > p { font: 400 21px/1.62 'Buenard', 'Libertinus Serif', Georgia, serif !important; color: #14263a; letter-spacing: .002em; margin: 0 0 1.05em !important; hanging-punctuation: first; text-wrap: pretty; }
.reading-page > p:first-of-type::first-letter { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important; font-weight: 800; color: #c8202f; }
.reading-page a:not(.sp-label-card):not([class]) { color: inherit; text-decoration: underline; text-decoration-color: #f2c84b; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.reading-page > p.story-note, .reading-page > p:has(+ .story-places), .reading-page .fine { font: 500 12px/1.6 'Red Hat Mono', ui-monospace, monospace !important; color: #5a6b7c !important; }
@media (max-width: 760px) { .reading-page > p { font-size: 19px !important; line-height: 1.6 !important; } }
/* If you go: a hairline index, not a sticky note */
.story-places { position: relative; margin: 56px 0 32px; padding: 20px 0 0; border: 0 !important; border-radius: 0 !important; border-top: 2px solid #0e243a !important; box-shadow: none !important; background: none; color: #0e243a; display: grid; gap: 14px; }
.sp-label { font: 500 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #c8202f; }
.story-places h2 { margin: 0; max-width: 20ch; font: 700 clamp(30px, 3.4vw, 44px)/.95 'Barlow Condensed', 'Arial Narrow', sans-serif; text-wrap: balance; }
.story-places ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.story-places li { padding: 12px 0 0; border-top: 1px solid #d9d0bf; }
.story-places small { display: block; font: 500 11px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #5a6b7c; }
.story-places b { display: block; margin: 6px 0 4px; font: 700 22px/1.05 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.story-places li p { margin: 0; font: 400 15px/1.5 'Public Sans', sans-serif; color: #33475b; }
.sp-links { margin: 6px 0 0; }
.sp-links a { font: 600 16px/1.3 'Public Sans', sans-serif; color: #0e243a; text-decoration: underline; text-decoration-color: #f2c84b; text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* the store, as a museum label */
.sp-label-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 10px; padding: 14px 0; border-top: 1px solid #d9d0bf; border-bottom: 1px solid #d9d0bf; color: #0e243a; text-decoration: none; }
.sp-label-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; background: #efe9dc; }
.sp-label-card small { display: block; font: 500 11px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #c8202f; }
.sp-label-card b { display: block; margin: 4px 0; font: 700 24px/1.05 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.sp-label-card em { font: 600 14px/1.3 'Public Sans', sans-serif; font-style: normal; color: #5a6b7c; }
.sp-label-card:hover em { color: #c8202f; }
@media (max-width: 760px) { .story-places ul { grid-template-columns: minmax(0, 1fr); } }
/* photo breaks inside a story */
.reading-page .story-break { margin: 48px 0; }
.reading-page .story-break img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (min-width: 1000px) { .reading-page .story-break { margin-inline: -10vw; } }