/* Layout and type grounded in Page 11's discovery, account and river frames. */
.new-case .case-study { min-height: 0; padding-bottom: 145px; }
.new-case .case-title-row { gap: 32px !important; flex-wrap: wrap; }
.new-case .case-title-row > .case-group { flex-shrink: 0; }
.new-case .case-title-row h1 { text-transform: none; }
.new-case .case-group.layout-row { flex-wrap: wrap; }
.new-case .case-group:has(> .design-rule) { max-width: 100%; }
.design-rule { display: block; max-width: 100%; }
.discovery-page .case-group:has(> .design-rule) { align-items: flex-start !important; align-self: flex-start; width: fit-content; }
.discovery-page .case-group:has(> .design-rule) > h3 { width: fit-content !important; text-align: left; padding-bottom: 5px; border-bottom: 2px solid currentColor; }
.discovery-page .case-group > .design-rule { display: none; }
.account-page .case-group:has(> .design-rule) { align-items: flex-start !important; align-self: flex-start; width: fit-content; }
.account-page .case-group:has(> .design-rule) > h3 { width: fit-content !important; text-align: left; padding-bottom: 5px; border-bottom: 2px solid currentColor; }
.account-page .case-group > .design-rule { display: none; }
@media (hover:hover) and (pointer:fine) {
 .account-page .case-group:has(> .design-rule) > h3:hover { border-bottom: 4px solid var(--accent); }
}
.inline-figure { margin: 0; min-width: 0; }
.inline-figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }
/* Observation images use half the text-column width, keeping their left edge aligned. */
.story-panel[id^="observations-panel-"] .inline-figure > img { width: 50%; height: auto; }
.discovery-impact > .case-group { flex: 1 1 0 !important; align-self: stretch; box-shadow: 0 2.612px 15.144px 2.527px #acacac40; }
.new-case .case-figure.case-cover > img { min-width: 0; }
.new-case .language-switcher__button { cursor: pointer; }
.play-page .nav__link[aria-current="page"] { font-weight: 700; color: #000; }
/* Clip horizontal paint/animation overflow without creating a sticky scroll container. */
body.play-page { width: 100%; max-width: 100%; overflow-x: clip; }
.play-page .case-study { width: 100%; max-width: 100%; overflow-x: clip; }
.play-page .case-content,
.play-page .case-carousel,
.play-page .scroll-story,
.play-page .story-stage { min-width: 0; max-width: 100%; }
.case-carousel { position: relative; margin: 0; }
.carousel-slides { display: grid; overflow: hidden; }
.event-carousel .carousel-slides, .hero-carousel .carousel-slides { position: relative; }
.carousel-edge { position: absolute; top: 0; bottom: 0; z-index: 2; width: 22%; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.carousel-edge--prev { left: 0; }
.carousel-edge--next { right: 0; }
.carousel-edge span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 2px 12px #0003; font: 400 28px/1 sans-serif; opacity: 0; }
.carousel-edge:hover span, .carousel-edge:focus-visible span { opacity: 1; }
.carousel-edge:focus-visible { outline: 2px solid #1769ff; outline-offset: -3px; }
@media (hover: none) {
 .carousel-edge span { opacity: 1; width: 40px; height: 40px; }
}
.carousel-slide { grid-area: 1 / 1; min-width: 0; align-self: start; }
/* No visible control strip; keyboard users can still reveal playback controls. */
.play-page .carousel-controls:not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carousel-slide[hidden], .story-panel[hidden] { display: none; }
.carousel-slide > img { width: 100%; height: auto; min-width: 0; }
.carousel-slide figcaption { padding: 10px 24px 0; text-align: center; font: 200 14px/18px Geist,sans-serif; }
.event-carousel .carousel-slide > img { height: min(56.25vw,810px); width: 100%; object-fit: contain; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 16px 24px; font: 400 13px/1.3 Geist,sans-serif; }
.carousel-controls button { padding: 8px 12px; border: 1px solid #ddd; border-radius: 20px; background: #fff; cursor: pointer; }
.carousel-controls button:active { background: #eee; }
.scroll-story { position: relative; }
.story-stage { position: sticky; top: var(--stage-top,var(--header-height)); background: white; }
.story-copy { padding: 85px 80px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.story-copy h2 { width: 506px; font: 600 26px/1.3 Geist,sans-serif; }
.story-copy > .case-group { width: 743px; display: flex; flex-direction: column; gap: 20px; }
.story-copy p { font: 400 17px/27px Geist,sans-serif; color: #252525; opacity: .9; }
.story-tabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px 40px; transform-origin: left center; }
.story-tabs button { flex-shrink: 0; white-space: nowrap; }
.story-tabs button { font: 400 15px/25px Geist,sans-serif; opacity: .5; padding: 0 0 5px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #252525; cursor: pointer; }
.story-tabs button[aria-selected="true"] { opacity: 1; font-size: 19px; border-color: #252525; }
.story-panel > .case-section:last-child { padding-top: 0 !important; }
/* Play: reduce only the two reviewed spaces by 20px. */
.play-page .case-content > .case-section:first-child { padding-top: 65px !important; }
.play-page #observations-panel-0 > .case-section:last-child { padding-bottom: 30px !important; }
.story-panel .inline-figure { flex-shrink: 1; }
.story-panel .case-text { overflow-wrap: anywhere; }
.new-case .case-section > .case-group { min-width: 0; }
/* Copy and media share one column definition at every viewport width. */
.story-panel > .case-section {
 display: grid !important;
 grid-template-columns: minmax(0, 506fr) minmax(0, 743fr);
 column-gap: 20px !important;
 padding-inline: var(--page-gutter) !important;
}
.story-panel > .story-copy > h2,
.story-panel > .story-copy > .case-group { width: 100% !important; min-width: 0; }
.story-panel > .case-section:not(.story-copy) { row-gap: 24px !important; }
.story-panel > .case-section:not(.story-copy) > * {
 grid-column: 2;
 width: 100% !important;
 min-width: 0;
}
@media (max-width:1100px) {
 .play-page .case-section .layout-row[style*="29px"] { width: 100% !important; flex-wrap: wrap; }
 .play-page .case-section .layout-row[style*="29px"] > .case-text { white-space: normal; flex-shrink: 1; max-width: 100%; overflow-wrap: anywhere; }
 .play-page .case-content img { max-width: 100%; min-width: 0; }
 .new-case .case-title-row > .case-group { flex-shrink: 1; }
 .story-copy { padding-inline: var(--page-gutter); }
 .story-tabs { gap: 12px 24px; }
}
@media (max-width:760px) {
 .new-case .case-study { padding-bottom: 70px; }
 .new-case .case-group.layout-row { gap: 15px !important; }
 .new-case .case-section > .case-group { width: 100% !important; }
 .new-case .case-section .case-group { max-width: 100% !important; }
 .new-case .case-text { width: auto !important; overflow-wrap: anywhere; }
 .new-case .case-title-row { flex-direction: column !important; align-items: flex-start !important; }
 .new-case .case-figure > img { min-width: 0; }
 .story-copy { padding: 32px var(--page-gutter) !important; }
 .story-copy h2 { width: auto; font-size: 24px; }
 .story-copy p { font-size: 16px; line-height: 25px; }
 .story-tabs { gap: 8px 16px; }
 .story-tabs button[aria-selected="true"] { font-size: 17px; }
 .story-panel > .case-section:last-child { padding-bottom: 32px !important; }
 .play-page .case-content > .case-section:first-child { padding-top: 28px !important; }
 .play-page #observations-panel-0 > .case-section:last-child { padding-bottom: 12px !important; }
 .story-panel > .case-section { grid-template-columns: minmax(0, 1fr); }
 .story-panel > .case-section:not(.story-copy) > * { grid-column: 1; }
 .event-carousel .carousel-slide > img { height: 65svh; }
 .carousel-controls { gap: 12px; }
}
@media (prefers-reduced-motion:reduce) {
 .story-stage { position: static; }
 .scroll-story { height: auto !important; }
}
@media (max-width:1024px) {
 /* Keep the observation quote readable above its image on compact screens. */
 #observations-panel-0 > .case-section:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; padding-inline: var(--page-gutter) !important; box-sizing: border-box; }
 #observations-panel-0 > .case-section:last-child > .case-text,
 #observations-panel-0 > .case-section:last-child > .inline-figure { width: 100% !important; }
 .scroll-story { height: auto !important; }
 .story-stage { position: static; }
 .story-tabs { position: relative; flex-wrap: nowrap; max-width: none; box-sizing: border-box; cursor: grab; user-select: none; touch-action: pan-y pinch-zoom; }
 .story-tabs::-webkit-scrollbar { display: none; }
 .story-tabs:active { cursor: grabbing; }
 .story-tabs button { flex: 0 0 auto; white-space: nowrap; }
}