/* ==========================================================================
   Layout system for the case studies — one rhythm for every section.
   Loaded after the Cargo-derived css, so it can override the per-page rules
   (e.g. `[id="…"] .page-content { padding-bottom: 20rem }`) without !important.

   Vertical rhythm (all in rem, so it scales with the viewport like the type):
     title → body ................. --gap-tb
     body  → image ................ --gap-bm
     image/text → next section .... --section-gap
     end of the page .............. --end-gap
   ========================================================================== */

:root {
	--gap-tb: 2.8rem;
	--gap-bm: 2.5rem;
	--slide-top: 6rem;
	--slide-bottom: 6rem;
}
.mobile {
	--gap-tb: 2.2rem;
	--gap-bm: 2rem;
	--slide-top: 5rem;
	--slide-bottom: 5.5rem;
}

/* ---------- one slide = one screen ---------- */
.pages > .page.sec-text,
.pages > .page.sec-media,
.pages > .page.sec-hero,
.pages > .page.sec-sticky { min-height: var(--viewport-height); }

.pages > .page.sec-text > .page-layout,
.pages > .page.sec-media > .page-layout { align-items: stretch; }

/* text slide: rule + label + title at the top (clear of the nav), body below with air */
.pages > .page.sec-text > .page-layout > .page-content {
	padding: var(--slide-top) 1rem var(--slide-bottom);
}
/* image slide: the picture keeps the full content width (as on the original); if it is shorter than
   the screen it is centred, if it is taller the slide simply grows with it */
.pages > .page.sec-media > .page-layout > .page-content {
	padding: 1rem;
	align-items: center;
	justify-content: center;
}
.sec-media bodycopy { width: 100%; }
.sec-media .grid-item { justify-self: center; }
.sec-media .gallery-grid { align-items: center; }

/* title → body: one gap, whatever markup the content used */
.sec-text .col-body { margin-top: var(--gap-tb); }
.sec-text .column-unit h2,
.sec-text .column-unit h1 { margin: 0; }
.sec-text .column-unit h1 { line-height: .98; }
.sec-text .column-unit h2 { line-height: 1.22; }
.mobile .sec-text .column-set:not([data-stack="false"]) > .column-unit:not(.is-empty) + .column-unit:not(.is-empty) { margin-top: .75rem; }

/* ---------- hero (first screen of a case) ---------- */
.pages > .page.sec-hero bodycopy { width: 100%; }
.pages > .page.sec-hero { min-height: var(--viewport-height); }
.pages > .page.sec-hero > .page-layout { align-items: stretch; }
.pages > .page.sec-hero > .page-layout > .page-content {
	align-items: flex-end;
	padding: 1rem;
}

/* ---------- gallery spacing ---------- */
/* a single image that spans less than the full grid sits centred, like the slideshows */
.gallery-grid.solo > .grid-item {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - (var(--cols) - 1) * 1rem) / var(--cols) * var(--span) + (var(--span) - 1) * 1rem);
}
.mobile .gallery-grid.solo > .grid-item { width: 100%; }
.sec-media .gallery-grid { row-gap: 1rem; }

/* ---------- fixed project bar: readable over any content ---------- */
.page.pinned-bottom.fixed .button {
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	background: rgba(35, 35, 35, .8);
}

/* ---------- lists in body text ---------- */
bodycopy ol { padding-left: 1.6em; }
bodycopy ol li::marker { font-variant-numeric: tabular-nums; }

/* ---------- focus ---------- */
a:focus-visible, .button:focus-visible, [tabindex]:focus-visible {
	outline: 1px solid rgba(255, 255, 255, .7);
	outline-offset: 3px;
	border-radius: .25rem;
}
.overlay-content .page-content:focus { outline: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.blink { animation: none !important; opacity: 1; }
	.mi-frame { filter: none !important; transform: none !important; transition: none !important; }
	.overlay-content, .overlay-content * { animation-duration: .001s !important; }
	.sec-end h1 a, .sec-end .next-arrow { transition: none; }
}

/* ---------- ultrawide: keep the content column readable ---------- */
.pages > .page.sec-hero > .page-layout,
.pages > .page.sec-text > .page-layout,
.pages > .page.sec-media > .page-layout { max-width: 140rem; }

/* Zelt hero: the product shot has a white card under the headline; invert the type where it crosses it.
   (.page-layout is the first element that shares a stacking group with the hero image, so the blend sits there.) */
.pages > .page.hero-blend > .page-layout { mix-blend-mode: difference; }

/* the bouncing photo plays in the free part of its slide instead of stretching it */
.sec-text .marquee-bounce { height: calc(var(--fit-height, 50vh) * .42); }

/* phones: a row of screens becomes a swipeable strip, so the slide still fits one screen */
.mobile .gallery-grid.multi {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -1rem;
	padding: 0 1rem;
	width: calc(100% + 2rem);
	max-width: none;
}
.mobile .gallery-grid.multi::-webkit-scrollbar { display: none; }
.mobile .gallery-grid.multi > .grid-item { flex: 0 0 78%; scroll-snap-align: center; max-width: none; width: 78%; }

/* text + its picture read as one slide: the picture follows the body at the original distance,
   then a generous pause before the next slide */
.pages > .page.sec-text:has(+ .page.sec-media) { min-height: 0; }
.pages > .page.sec-text:has(+ .page.sec-media) > .page-layout > .page-content { padding-bottom: var(--gap-bm); }
.pages > .page.sec-text + .page.sec-media { min-height: 0; }
.pages > .page.sec-text + .page.sec-media > .page-layout > .page-content { padding: 0 1rem 8rem; }
.mobile .pages > .page.sec-text + .page.sec-media > .page-layout > .page-content { padding-bottom: 5rem; }

/* large type: 4.5rem -> 4rem (mobile 3.1rem -> 2.8rem) */
.pages h1 { font-size: 4rem; }
.mobile .pages h1 { font-size: 2.8rem; }

/* hero title: same tight leading as the text slides */
.pages > .page.sec-hero h1 { line-height: .98; }

/* ---------- slide reveal: barely-there fade + 1.4rem rise ---------- */
.reveal-on { opacity: 0; transform: translateY(1.4rem); will-change: opacity, transform; }
.reveal-on.shown {
	opacity: 1;
	transform: none;
	will-change: auto;
	transition: opacity .9s cubic-bezier(.24, 1, .29, 1), transform .9s cubic-bezier(.24, 1, .29, 1);
}

/* buttons that belong together sit in one row (they may run wider than the text column; on phones they wrap) */
.button-row { display: flex; flex-wrap: nowrap; gap: .75rem; width: max-content; max-width: none; }
.button-row .button { white-space: nowrap; }
.mobile .button-row { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: .75rem; }
.mobile .button-row .button { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* phones: the 23.8rem side margin is wider than the screen, so the fixed bus image collapsed to nothing;
   keep a 1rem gutter instead and let the image fit the width */
.mobile .backdrop.clip .backdrop-contents img {
	inset: 0 1rem;
	width: calc(100% - 2rem);
	height: 100%;
}

/* background videos are never controllable: no native play button, no tap-to-pause, ever */
video { pointer-events: none; }
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-enclosure { display: none !important; opacity: 0 !important; -webkit-appearance: none; }
video::-moz-media-controls { display: none !important; }

/* Inter is scaled to Diatype's x-height (88.7%), which makes it narrower; this restores the measured line width */
bodycopy, .button, .card { letter-spacing: .0135em; }
h2 { letter-spacing: .013em; }


/* the small hollow bullet between role and dates was a private-use glyph of Diatype; drawn here so it survives any font */
.dot { display: inline-block; width: .46em; height: .46em; border: .08em solid currentColor; border-radius: 50%; box-sizing: border-box; margin: 0 .1em 0 .06em; vertical-align: .06em; }

/* captions: Inter at Diatype's x-height made the 0.85rem captions too small and heavy (letters merged);
   a little larger, lighter, more open */
.caption { font-size: 1rem; font-weight: 520; line-height: 1.3; letter-spacing: .015em; }

/* closing the Info panel: keep the final frame of the fade-out until the panel is hidden,
   otherwise it snaps back to fully visible for a moment and reads as a twitch */
.overlay-content.overlay-close, .overlay-content.overlay-close * { animation-fill-mode: forwards !important; }

/* the ↗ glyph in Inter runs long and thin next to the label; drawn at a compact size instead */
.button .arr { display: inline-block; width: .62em; height: .62em; margin-left: .3em; vertical-align: .02em; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }