/* =========================================================
   Portfolio — page header, filter bar, editorial grid, single project
   ========================================================= */

.pf-head {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 9rem var(--gutter) 3rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: end;
}
.pf-head h1 {
	font-weight: 500;
	font-size: clamp(3rem, 10vw, 9rem);
	letter-spacing: -0.03em;
	line-height: .9;
	text-transform: lowercase;
	max-width: 10ch;
}
.pf-head h1 .italic {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--accent-deep);
}
.pf-head .side {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 48ch;
	letter-spacing: -0.005em;
}
@media (max-width: 860px) {
	.pf-head { grid-template-columns: 1fr; }
}

/* Filter + sort controls — single row wrapper.
 * The hairline + outer margin live on .pf-controls so adding the sort nav
 * doesn't double-up borders. .pf-filter still works standalone (homepage
 * marquee uses it without the wrapper) — its standalone visual rules below
 * get neutralised inside .pf-controls. */
.pf-controls {
	max-width: var(--maxw);
	margin: 2rem auto 3rem;
	padding: 2rem var(--gutter) 0;
	border-top: 1px solid var(--hairline);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pf-controls .pf-filter {
	margin: 0;
	padding: 0;
	border-top: 0;
	flex: 1 1 auto;
}

.pf-filter {
	max-width: var(--maxw);
	margin: 2rem auto 3rem;
	padding: 0 var(--gutter);
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--hairline);
	padding-top: 2rem;
}
.pf-filter button,
.pf-sort button {
	font-family: var(--font-mono);
	font-size: .72rem;
	text-transform: lowercase;
	letter-spacing: .02em;
	padding: .55em 1em;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	color: var(--muted);
	background: transparent;
	transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.pf-filter button.is-on,
.pf-sort button.is-on {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.pf-filter button:hover,
.pf-sort button:hover { color: var(--ink); border-color: var(--ink); }
.pf-filter button.is-on:hover,
.pf-sort button.is-on:hover { color: var(--bg); }

/* Inline variant — used on service / sub-brand pages where the filter
 * sits inside an existing related-work section. Tighter spacing, no
 * top border (the section above already has its own visual separator),
 * left-aligned to flow under the "selected work" headline. */
.pf-filter--inline {
	margin: 1rem auto 2rem;
	padding: 0 var(--gutter);
	border-top: 0;
	padding-top: 0;
}

/* Sort toggle — sits to the right of the filter chips. Mono micro-label
 * ("sort") matches the typographic register of the chips themselves. */
.pf-sort {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	align-items: center;
	flex: 0 0 auto;
}
.pf-sort-label {
	font-family: var(--font-mono);
	font-size: .68rem;
	color: var(--muted-2);
	text-transform: lowercase;
	letter-spacing: .04em;
	margin-right: .3em;
}
@media (max-width: 640px) {
	.pf-controls { gap: .8rem; }
	.pf-sort { width: 100%; justify-content: flex-start; }
}

/* Grid — fluid 12-col, height-aligned. Tall cards span 2 rows so their
 * height = 2 × standard height + 1 gap. With grid-auto-flow: dense,
 * standards naturally stack alongside a tall to fill the row cleanly. */
.pf-grid {
	max-width: var(--maxw);
	margin: 0 auto 4rem;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: .8rem;
	grid-auto-flow: dense;
}
.pf-grid .seas-card,
.pf-grid .seas-card.size-standard,
.pf-grid .seas-card.size-third {
	grid-column: span 4;
	aspect-ratio: 4 / 3;
}
.pf-grid .seas-card.size-wide {
	grid-column: span 12;
	aspect-ratio: 21 / 9;
}
/* Half-hero gap-filler — auto-applied to the last card by page-portfolio.php
   when the layout would otherwise have a 4-col trailing gap. */
.pf-grid .seas-card.size-fill-8 {
	grid-column: span 8;
	aspect-ratio: 16 / 9;
}
/* Tall cards span 2 rows = (2 × standard-height + gap). With standard cards
 * at 4:3 (height = 0.75 × width), a tall card 4 cols wide × 2 rows works
 * out to ~2/3 aspect (height = 1.5 × width). Setting this explicitly stops
 * the card collapsing to a thin strip when its neighbours are wides —
 * without a standard alongside to anchor row height, `aspect-ratio: auto`
 * had no intrinsic dimension to size against, so the card was just the
 * gap height. */
.pf-grid .seas-card.size-tall {
	grid-column: span 4;
	grid-row: span 2;
	aspect-ratio: 2 / 3;
}
.pf-grid .seas-card.size-square {
	grid-column: span 4;
	aspect-ratio: 1 / 1;
}

/* Aspect-ratio stretch — emitted by the homepage marquee on any card
   that shares (or shares a 2-row span with) a fill-8 or wide neighbour.
   The natural aspect-ratio lock makes the card shorter than the row(s)
   it occupies, leaving visible empty space below it. Releasing the
   lock + height:100% lets the card fill its grid area; the image /
   loop video inside already uses object-fit: cover so it crops
   gracefully when stretched.

   Heights per row (in column-widths) for reference:
     std/third (4-col 4:3)  → 3.0    col-widths
     square    (4-col 1:1)  → 4.0    col-widths
     fill-8    (8-col 16:9) → 4.5    col-widths
     wide      (12-col 21:9)→ 5.14   col-widths
     tall      (4-col 2:3)  → 6.0 col-widths total / 3.0 per row

   The size-tall variant keeps its grid-row: span 2 from the base
   .size-tall rule (which has the same specificity 0,3,0; source order
   in the cascade means this rule's aspect-ratio overrides). */
.pf-grid .seas-card.is-stretched,
.pf-grid .seas-card.is-stretched.size-standard,
.pf-grid .seas-card.is-stretched.size-square,
.pf-grid .seas-card.is-stretched.size-third,
.pf-grid .seas-card.is-stretched.size-tall {
	aspect-ratio: auto;
	height: 100%;
	min-height: 0;
}

@media (max-width: 1024px) {
	.pf-grid .seas-card,
	.pf-grid .seas-card.size-standard,
	.pf-grid .seas-card.size-third,
	.pf-grid .seas-card.size-square {
		grid-column: span 6;
	}
	.pf-grid .seas-card.size-tall {
		grid-column: span 6;
		grid-row: span 2;
		aspect-ratio: 2 / 3;
	}
	.pf-grid .seas-card.size-fill-8 {
		grid-column: span 12;
	}
}
@media (max-width: 640px) {
	.pf-grid .seas-card,
	.pf-grid .seas-card.size-standard,
	.pf-grid .seas-card.size-wide,
	.pf-grid .seas-card.size-square,
	.pf-grid .seas-card.size-third,
	.pf-grid .seas-card.size-fill-8 {
		grid-column: span 12;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
	/* Tall cards stay portrait on mobile but use a gentler 2/3 aspect
	 * (matches the desktop visual rhythm of 2× standard height + gap).
	 * `max-width` + `margin-inline: auto` were dropped — the combo with
	 * `aspect-ratio` was rendering as zero-height in some mobile browsers
	 * (Safari iOS in particular), making vertical cards invisible. */
	.pf-grid .seas-card.size-tall {
		grid-column: span 12;
		grid-row: auto;
		aspect-ratio: 2 / 3;
	}
}

.pf-empty {
	grid-column: span 12;
	text-align: center;
	padding: 6rem 0;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .85rem;
	text-transform: lowercase;
}

/* ---------- Single project page ---------- */
.single-hero {
	max-width: var(--maxw);
	margin: 9rem auto 0;
	padding: 0 var(--gutter);
}
.single-hero .media {
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink);
	position: relative;
	aspect-ratio: 16/9;
}
.single-hero .media img,
.single-hero .media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%; /* favour upper-third of vertical portraits — keeps faces / subject visible when 16:9-cropped */
	border: 0;
}
/* Per-post override hook — use [data-hero-pos="..."] on .single-hero
 * to nudge the focal point if a particular image needs it.            */
.single-hero[data-hero-pos="top"]    .media img { object-position: center top; }
.single-hero[data-hero-pos="center"] .media img { object-position: center center; }
.single-hero[data-hero-pos="bottom"] .media img { object-position: center bottom; }

.single-meta {
	max-width: var(--maxw);
	margin: 3rem auto 0;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3rem;
	align-items: start;
	border-top: 1px solid var(--hairline);
	padding-top: 3rem;
}
.single-meta h1 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2.6rem, 6vw, 5rem);
	letter-spacing: -0.045em;
	line-height: .95;
	text-transform: lowercase;
}
.single-meta .meta-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	text-transform: lowercase;
	letter-spacing: .02em;
	color: var(--muted);
}
.single-meta .meta-cols .label {
	display: block;
	color: var(--muted-2);
	margin-bottom: .3em;
	letter-spacing: .04em;
}
.single-meta .meta-cols strong {
	color: var(--ink);
	font-weight: 500;
	font-size: .95rem;
	font-family: var(--font-sans);
	letter-spacing: -0.01em;
	text-transform: none;
}
@media (max-width: 860px) {
	.single-meta { grid-template-columns: 1fr; gap: 1.5rem; }
	.single-meta .meta-cols { grid-template-columns: 1fr 1fr; }
}

.single-body {
	max-width: 900px;
	margin: 4rem auto 0;
	padding: 0 var(--gutter);
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.single-body p { margin-bottom: 1.5em; max-width: 62ch; }

/* Vertical reel section — between body copy and gallery on single project pages */
.single-reel {
	max-width: var(--maxw);
	margin: 5rem auto 0;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.single-reel-meta {
	max-width: 36ch;
}
.single-reel-meta .section-label {
	margin-bottom: 1.2rem;
}
.single-reel-caption {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--muted);
	margin: 0;
	letter-spacing: -0.005em;
}
.single-reel-frame {
	width: clamp(220px, 28vw, 320px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink);
}
.single-reel-frame .video-wrap--vertical {
	max-width: none; /* parent already constrains width */
}
@media (max-width: 760px) {
	.single-reel { grid-template-columns: 1fr; gap: 1.5rem; }
	.single-reel-frame { width: 80%; max-width: 320px; margin: 0 auto; }
}

/* Gallery — true CSS masonry via multi-column layout. Each image keeps
 * its natural aspect ratio and falls into the column with the shortest
 * current height, so vertical 9:16 stills, horizontal 3:2 portraits and
 * square crops mix cleanly without leaving gaps or stretching anything.
 *
 * Modern grid `masonry` is still in flux across browsers; CSS columns
 * are universally supported and produce a near-identical look.
 *
 * Wider screens get 3 columns to break monotony when galleries are big.
 */
.single-gallery {
	max-width: var(--maxw);
	margin: 5rem auto 0;
	padding: 0 var(--gutter);
	column-count: 2;
	column-gap: 1rem;
}
.single-gallery img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1rem; /* vertical gap between images in a column */
	border-radius: var(--radius-lg);
	break-inside: avoid;            /* never split an image across columns */
	page-break-inside: avoid;       /* legacy WebKit fallback */
	-webkit-column-break-inside: avoid;
}
@media (min-width: 1280px) {
	.single-gallery {
		column-count: 3;
	}
}
@media (max-width: 860px) {
	.single-gallery {
		column-count: 1;
	}
}

.single-nav {
	max-width: var(--maxw);
	margin: 6rem auto 0;
	padding: 3rem var(--gutter);
	border-top: 1px solid var(--hairline);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 1.5rem;
	font-family: var(--font-mono);
	font-size: .75rem;
	text-transform: lowercase;
	color: var(--muted);
}
.single-nav-slot--all { text-align: center; }
.single-nav-slot--next { text-align: right; }
.single-nav a { color: var(--ink); }
.single-nav-button {
	display: inline-flex;
	align-items: center;
	gap: .75em;
	max-width: min(100%, 28rem);
	min-height: 3.25rem;
	padding: .9rem 1.05rem;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%);
	transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.single-nav-button span:not(.single-nav-arrow) {
	overflow-wrap: anywhere;
	line-height: 1.25;
}
.single-nav-button:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
	transform: translateY(-1px);
}
.single-nav-arrow {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	line-height: 1;
}
.single-nav-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 3.25rem;
	padding: .9rem 1.05rem;
}
.single-nav .label {
	display: block;
	color: var(--muted-2);
	margin-bottom: .6em;
	letter-spacing: .04em;
}
@media (max-width: 760px) {
	.single-nav {
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 1.25rem;
	}
	.single-nav-slot--all,
	.single-nav-slot--next {
		text-align: left;
	}
	.single-nav-slot--all {
		order: 3;
	}
	.single-nav-button,
	.single-nav-all {
		width: 100%;
		justify-content: space-between;
	}
}

/* ============================================================================
   Tier A case study — single-portfolio post_content typography.
   The eval-file emits sections with these classes:
     .case-study-act    — five-act sections (brief / approach / making / etc.)
     .client-quote      — pull quote (blockquote)
     .credits           — credits section (dl/dt/dd)
     .faq-block         — FAQ source (filtered into .cs-faq accordion at output)
   Sections are adaptive — only render if present in post_content. Tier B/C
   posts that don't include them simply don't render those sections.
   ============================================================================ */

.single-body > .lede {
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	line-height: 1.5;
	margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
	max-width: 64ch;
	color: var(--ink);
	letter-spacing: -0.005em;
	font-weight: 400;
}

/* ---------- five-act sections ---------- */
.single-body .case-study-act {
	margin: 0;
	padding: clamp(2.5rem, 5vw, 4rem) 0 0;
	max-width: 64ch;
}
.single-body .case-study-act:first-of-type { padding-top: 0; }
.single-body .case-study-act + .case-study-act { border-top: 1px solid var(--hairline); }
.single-body .case-study-act h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 1.1rem;
	text-transform: lowercase;
	color: var(--ink);
}
.single-body .case-study-act p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 1.1em;
	color: var(--ink);
}
.single-body .case-study-act p:last-child { margin-bottom: 0; }
.single-body .case-study-act em { font-style: italic; }
.single-body .case-study-act a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--hairline);
	text-underline-offset: .2em;
	transition: text-decoration-color .25s var(--ease, ease);
}
.single-body .case-study-act a:hover { text-decoration-color: var(--accent); }

/* ---------- pull quote ---------- */
.single-body .client-quote {
	margin: clamp(3rem, 6vw, 5rem) auto;
	max-width: 56rem;
	padding: clamp(2rem, 4vw, 3rem) 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	text-align: center;
}
.single-body .client-quote p {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
	line-height: 1.3;
	letter-spacing: -0.012em;
	margin: 0 0 1.2em;
	color: var(--ink);
}
.single-body .client-quote p:last-of-type { margin-bottom: 1.6em; }
.single-body .client-quote cite {
	display: block;
	font-style: normal;
	font-family: var(--font-mono);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--muted);
	max-width: 56ch;
	margin: 0 auto;
	line-height: 1.5;
}
.single-body .client-quote cite em {
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: .85rem;
}

/* ---------- credits ---------- */
.single-body .credits {
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--hairline);
}
.single-body .credits h2 {
	font-family: var(--font-mono);
	font-size: .8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: var(--muted);
	margin: 0 0 1.6rem;
}
.single-body .credits dl {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
	row-gap: 1rem;
	margin: 0;
	max-width: 64rem;
}
.single-body .credits dt {
	font-family: var(--font-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	font-weight: 500;
	line-height: 1.6;
	align-self: start;
	margin: 0;
}
.single-body .credits dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--ink);
}
.single-body .credits dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--hairline);
	text-underline-offset: .25em;
}
.single-body .credits dd a:hover { text-decoration-color: var(--accent); }

/* ---------- case-study FAQ accordion ----------
 * Source <section class="faq-block"><dl>... is rewritten by
 * mona_case_study_faq_filter() into .faq-section / .faq-list / .faq-item
 * which inherit the existing FAQ accordion styles in components.css. The
 * .cs-faq modifier just trims the section spacing for in-page context. */
.single-body .cs-faq {
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	max-width: none;
	padding: clamp(2.5rem, 5vw, 4rem) 0 0;
	border-top: 1px solid var(--hairline);
}
.single-body .cs-faq .faq-head { margin-bottom: 1.5rem; max-width: none; }
.single-body .cs-faq .faq-title {
	font-family: var(--font-mono);
	font-size: .8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: var(--muted);
	margin: 0;
}
.single-body .cs-faq .faq-list { border-top: 1px solid var(--hairline); }

/* mobile — collapse credits to single column, tighten quote padding */
@media (max-width: 640px) {
	.single-body .credits dl {
		grid-template-columns: 1fr;
		row-gap: .25rem;
	}
	.single-body .credits dt { margin-top: 1rem; }
	.single-body .credits dt:first-of-type { margin-top: 0; }
	.single-body .client-quote { padding-block: 2rem; }
}