/* Editorial: warm paper, engraved vignettes, confident serif headlines.
   Compositions share spacing and a carousel-wide type theme; colour is bounded.
   Motion is limited to reader-controlled scrolling, with reduced-motion support. */
@font-face { font-family: 'Glimpse Graphik'; src: url('fonts/graphik-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Glimpse Graphik'; src: url('fonts/graphik-medium.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
.story-carousel { --carousel-serif: var(--serif); --carousel-sans: 'Glimpse Graphik', Arial, sans-serif; --card-padding: 30px; container-type: inline-size; border-block: 1px solid var(--line); padding-block: 16px 12px; }
.story-carousel .figure-head { align-items: center; }
.story-carousel .figure-head h2 { margin: 0; font: 500 .8125rem/1.4 var(--carousel-sans); color: #3d5141; }
.carousel-controls { display: flex; gap: 8px; flex-shrink: 0; }
.carousel-controls button { width: 44px; height: 44px; }
.carousel-controls button:disabled { opacity: .3; cursor: default; }
.carousel-track { --card-width: calc((100% - 18px) / 2); display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; list-style: none; margin: 16px 0 0; padding: 0 0 8px; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid #9a5743; outline-offset: 5px; }
.carousel-card { --card-bg: #f7f3e9; --card-ink: #303a30; --card-body: #4b5346; --card-muted: #606b58; --card-rule: #d9d8c8; --card-art-bg: #eceade; flex: 0 0 var(--card-width); scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--card-rule); border-radius: 2px; overflow: hidden; background: var(--card-bg); color: var(--card-ink); overflow-wrap: anywhere; }
.carousel-card:last-child { scroll-snap-align: end; }
.carousel-tone-paper { --card-bg: #f7f3e9; }
.carousel-tone-sage { --card-bg: #e5ebdf; --card-art-bg: #dde5d5; --card-rule: #c8d3bf; }
.carousel-tone-sand { --card-bg: #f0e1c5; --card-ink: #443a2b; --card-body: #574b38; --card-muted: #685a43; --card-rule: #d9c7a7; --card-art-bg: #e9d9b9; }
.carousel-tone-forest { --card-bg: #344537; --card-ink: #faf7ec; --card-body: #e7ecdc; --card-muted: #c9d0bd; --card-rule: #6f7f68; --card-art-bg: #e9e8da; }
.carousel-tone-clay { --card-bg: #884c3d; --card-ink: #fff8ed; --card-body: #f6e9db; --card-muted: #f0d7c7; --card-rule: #b27c69; --card-art-bg: #efe1d0; }
.carousel-tone-ink { --card-bg: #303d4a; --card-ink: #faf5e9; --card-body: #e2e8eb; --card-muted: #c8d4dc; --card-rule: #728392; --card-art-bg: #e8ece8; }
.carousel-copy { display: flex; flex: 1; flex-direction: column; padding: var(--card-padding); }
.carousel-meta { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--card-rule); padding-bottom: 12px; margin-bottom: 20px; color: var(--card-muted); font: 400 .625rem/1.4 var(--carousel-sans); letter-spacing: .02em; }
.carousel-number { white-space: nowrap; }
.carousel-card h3 { font: 400 1.5rem/1.2 var(--carousel-serif); letter-spacing: -.025em; color: var(--card-ink); margin: 0 0 18px; text-wrap: pretty; }
.carousel-card .carousel-detail { color: var(--card-body); }
.carousel-card p { font: 400 .875rem/1.6 var(--carousel-sans); margin: 0 0 15px; }
.carousel-card p:last-child { margin-bottom: 0; }
.carousel-art { flex-shrink: 0; background: var(--card-art-bg); }
.carousel-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Headline: a title carries the slide; any drawing remains a small vignette. */
.carousel-headline h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 20px; }
.carousel-headline .carousel-copy { min-height: 280px; }
.carousel-headline .carousel-art { align-self: flex-end; width: 104px; height: 96px; margin-top: 24px; padding: 5px; }
/* Opening: a display title, introduction and optional full-width engraved panel.
   Never demote the cover to a body-text card just because it includes a drawing. */
.carousel-opening h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 18px; }
.carousel-opening .carousel-copy { min-height: 280px; }
.carousel-opening .carousel-art { height: 108px; margin: auto calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)); padding: 8px var(--card-padding); border-top: 1px solid var(--card-rule); }
.carousel-opening .carousel-detail:has(+ .carousel-art) { padding-bottom: 22px; }
/* Illustration: a drawing with enough detail earns a real area on the page. */
.carousel-illustration h3, .carousel-illustration-bottom h3 { font-size: 1.5rem; margin-bottom: 18px; }
.carousel-illustration .carousel-art, .carousel-illustration-bottom .carousel-art { height: 160px; margin: 0 calc(-1 * var(--card-padding)) 20px; padding: 8px 22px; }
/* Bottom illustration: the passage leads, then the drawing closes the slide. */
.carousel-illustration-bottom .carousel-art { margin-top: auto; margin-bottom: calc(-1 * var(--card-padding)); border-top: 1px solid var(--card-rule); }
.carousel-illustration-bottom .carousel-detail { padding-bottom: 24px; }
/* Modern uses the existing Graphik family throughout, sized for its larger x-height. */
.carousel-theme-modern .carousel-card h3 { font-family: var(--carousel-sans); font-weight: 500; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.035em; }
/* Text cards use the same body scale as the illustrated cards. */
.carousel-text .carousel-copy { min-height: 280px; }
.carousel-text .carousel-detail { border-top: 1px solid var(--card-rule); padding-top: 20px; margin-top: 4px; }
/* Integrated: a modest illustration sits beside the copy, not in a large empty panel. */
.carousel-integrated .carousel-detail { display: flow-root; }
.carousel-integrated .carousel-art { float: right; width: 100px; height: 98px; margin: 4px 0 12px 16px; padding: 5px; }
.carousel-tone-paper.carousel-integrated .carousel-art, .carousel-tone-sage.carousel-integrated .carousel-art, .carousel-tone-sand.carousel-integrated .carousel-art { background: transparent; }
.carousel-long-heading h3 { font-size: 1.5rem; }
.carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; color: #61705d; font: 400 .6875rem/1.4 var(--carousel-sans); }
.carousel-progress { position: relative; width: 112px; height: 3px; background: #e1e4d8; border-radius: 2px; }
.carousel-progress > span { display: block; position: absolute; height: 100%; background: #445d47; border-radius: inherit; }
/* Switch by available article width, including a narrow desktop split view. */
@container(max-width:560px) { .carousel-track { --card-width: 90%; gap: 14px; } }
@media(max-width:720px) { .story-carousel { --card-padding: 24px; } .carousel-illustration .carousel-art, .carousel-illustration-bottom .carousel-art { height: 150px; } .carousel-opening .carousel-art { height: 100px; } }
@media(prefers-reduced-motion:reduce) { .carousel-track { scroll-behavior: auto; } }
@media print { .carousel-controls,.carousel-footer { display: none; } .carousel-track { display: block; overflow: visible; } .carousel-card { break-inside: avoid; margin-bottom: 18px; background: white; --card-ink:#222; --card-body:#333; --card-muted:#555; --card-rule:#bbb; } }