/*
Theme Name: Young
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.37
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: young
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

@font-face {
	font-family: "Advercase";
	src: url("assets/fonts/AdvercaseFont-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/Manrope-Medium.ttf") format("truetype");
	font-weight: 500 600;
	font-style: normal;
	font-display: swap;
}

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === hero === */

/* The landing page never scrolls, at any window size or ratio. Every size in
   the composition is a multiple of --u, a unit that tracks whichever axis is
   scarcer (the reference frame is ~1.5:1, so 1vw of it equals ~1.5vh). Sizing
   off min() instead of vw means a short, wide window shrinks the cluster
   rather than pushing the footer out of view. */
.home {
	overflow: hidden;
}

/* Hero + footer share one screen: the block wrapper is the 100svh flex column
   and the hero takes whatever the footer leaves, so nothing can push past the
   bottom edge. */
.home .wp-site-blocks {
	/* One unit for the whole landing page — hero and footer both inherit it, so
	   their gutters and type always agree. Calibrated to the reference frame
	   (~1.57:1), where the figure is 34u wide and the wordmark 7.4u tall. The
	   preferred value tracks height so a short window shrinks the cluster
	   instead of clipping it; the upper bound keeps the row inside the viewport
	   width on a tall one. */
	--u: clamp(0.65vw, 1.35vh, 1.15vw);
	height: 100vh;
	height: 100svh;
	max-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hero-page {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--background);
}

.hero-row {
	flex: 1 1 auto;
	min-height: 0;
	gap: calc(var(--u) * 4);
	padding-block: calc(var(--u) * 3);
	padding-inline: calc(var(--u) * 4);
}

/* The figure holds ~30% of the frame's width and never more than ~55% of its
   height, so it stays whole in a letterbox window. */
.hero-image {
	flex: 0 1 auto;
	margin: 0;
	width: calc(var(--u) * 34);
	max-width: calc(var(--u) * 34);
	height: calc(var(--u) * 27.6);
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.hero-nav-col {
	flex: 0 0 auto;
	gap: 0;
	align-items: flex-start;
}

.hero-nav-col .hero-wordmark {
	font-family: var(--wp--preset--font-family--advercase);
	font-size: calc(var(--u) * 7.4);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	margin: 0 0 calc(var(--u) * 5);
}

.hero-nav .wp-block-navigation__container {
	gap: calc(var(--u) * 2.6) !important;
}

.hero-nav .wp-block-navigation-item {
	display: block;
}

.hero-nav .wp-block-navigation-item > a,
.hero-nav .wp-block-navigation-item > a:visited {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: max(0.8rem, calc(var(--u) * 1.3));
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hero-nav .wp-block-navigation-item > a:hover,
.hero-nav .wp-block-navigation-item > a:focus {
	color: var(--wp--preset--color--accent);
}

/* Portrait/narrow: the cluster stacks, and --u switches to the narrow axis so
   the stack still fits one screen without scrolling. The stack is deliberately
   lighter than the desktop cluster — it fills ~75% of the available height, so
   the menu keeps clear air beneath it instead of crowding the footer. */
@media (max-aspect-ratio: 4/5) {
	.home .wp-site-blocks {
		--u: clamp(2.4vw, 1.05vh, 3.2vw);
	}
	.hero-row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: calc(var(--u) * 3.5);
		padding-block: calc(var(--u) * 6);
		padding-inline: calc(var(--u) * 4);
	}
	.hero-image {
		width: 100%;
		max-width: 100%;
		height: 30svh;
	}
	.hero-image img {
		width: 100%;
		object-position: left center;
	}
	.hero-nav-col .hero-wordmark {
		font-size: calc(var(--u) * 6);
		margin-bottom: calc(var(--u) * 2.8);
	}
	.hero-nav .wp-block-navigation__container {
		gap: calc(var(--u) * 1.9) !important;
	}
	.hero-nav .wp-block-navigation-item > a {
		font-size: max(0.8rem, calc(var(--u) * 1.6));
	}
}

/* === header === */

.site-header {
	padding-block: var(--wp--preset--spacing--sm);
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--xl)) var(--wp--style--root--padding-right, var(--wp--preset--spacing--xl));
	background-color: var(--wp--preset--color--background);
	gap: var(--wp--preset--spacing--md);
	flex-wrap: wrap;
}

.site-header-title a,
.site-header-title {
	font-family: var(--wp--preset--font-family--advercase);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.site-header-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--md) !important;
}

.site-header-nav .wp-block-navigation-item > a,
.site-header-nav .wp-block-navigation-item > a:visited {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-header-nav .wp-block-navigation-item > a:hover,
.site-header-nav .wp-block-navigation-item > a:focus {
	color: var(--wp--preset--color--accent);
}

body:not(.home) .wp-site-blocks main h1 {
	font-family: var(--wp--preset--font-family--advercase);
	font-size: 3rem;
}

/* === footer === */

.site-footer {
	padding-block: var(--wp--preset--spacing--sm);
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--xl)) var(--wp--style--root--padding-right, var(--wp--preset--spacing--xl));
	background-color: var(--wp--preset--color--background);
}

/* On the landing page the footer is part of the one-screen composition, so it
   scales with the inherited unit and shares the hero's gutter exactly. */
.home .site-footer {
	flex: 0 0 auto;
	padding-block: calc(var(--u) * 2.4);
	padding-inline: calc(var(--u) * 4);
}

.home .footer-credit {
	font-size: max(0.75rem, calc(var(--u) * 1.05));
}

.home .footer-socials .wp-social-link {
	width: max(18px, calc(var(--u) * 1.8));
	height: max(18px, calc(var(--u) * 1.8));
}

.home .footer-socials .wp-social-link svg {
	width: 100%;
	height: 100%;
}

.footer-credit {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.footer-socials.wp-block-social-links {
	margin: 0;
}

.footer-socials .wp-social-link a {
	color: var(--wp--preset--color--text);
}

/* Mobile footer overrides live here, after the base .home footer rules above —
   they share the same specificity, so source order is what decides. */
@media (max-aspect-ratio: 4/5) {
	.home .site-footer {
		padding-block: calc(var(--u) * 3);
	}
	.home .footer-credit {
		font-size: max(0.8rem, calc(var(--u) * 1.4));
	}
	.home .footer-socials .wp-social-link {
		width: max(20px, calc(var(--u) * 2.2));
		height: max(20px, calc(var(--u) * 2.2));
	}
	.home .footer-socials.wp-block-social-links {
		gap: calc(var(--u) * 1.8);
	}
}

/* === projects === */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The project dividers span 100vw, which can exceed the content box by the
   scrollbar width; clipping here keeps that from creating a scrollbar. */
/* A short project page would otherwise leave the footer stranded mid-screen, so
   the column fills the viewport and main takes up the slack. */
.post-type-archive-project .wp-site-blocks,
.single-project .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.post-type-archive-project .wp-site-blocks > main,
.single-project .wp-site-blocks > main {
	flex: 1 0 auto;
}

.post-type-archive-project .wp-site-blocks,
.single-project .wp-site-blocks {
	overflow-x: clip;
}

.project-header {
	padding-block: clamp(var(--wp--preset--spacing--md), 5vw, var(--wp--preset--spacing--lg)) 0;
}

.back-link {
	margin: 0;
}

/* The arrow is a masked shape on the link itself, so it is part of the link,
   sized in em against the wordmark, with no markup of its own. */
.back-link a,
.back-link a:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: max(0.85rem, 0.88rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.back-link a::before {
	content: "";
	width: 0.54em;
	height: 0.54em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms ease;
}

.back-link a:hover::before,
.back-link a:focus-visible::before {
	transform: translateX(-0.16em);
}

.back-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 10px;
}

/* Matches the weight of the .wp-site-blocks main.is-flush reset above, which
   would otherwise zero this out. */
.wp-site-blocks main.project-index,
.wp-site-blocks main.project-single {
	padding-block: clamp(var(--wp--preset--spacing--lg), 10vw, var(--wp--preset--spacing--xl)) 0;
}

.project-row {
	position: relative;
	padding-top: clamp(32px, 5vw, 56px);
	padding-bottom: clamp(80px, 12vw, 136px);
}

/* On a single project the row is a masthead for the body copy below it, not an
   index entry, so it drops the index's deep trailing gap. */
.single-project .project-row {
	padding-top: 0;
	padding-bottom: clamp(40px, 6vw, 68px);
}

/* Title, description and work type share one rhythm; the figure adds extra
   space beneath itself so it reads as separate from that group. The reset and
   the rhythm live together here — a later `margin: 0` on any individual child
   would otherwise win on source order and flatten the gap. */
.project-row > * {
	margin-block: 0;
}

.project-row > * + * {
	margin-block-start: clamp(12px, 1.6vw, 18px);
}

/* Padding, not margin: a margin here would collapse with the title's
   margin-block-start instead of adding to it. */
.project-figure {
	padding-bottom: clamp(16px, 2.6vw, 30px);
}

/* A hairline under every project, edge to edge rather than column width. */
.post-type-archive-project .project-row::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	height: 1px;
	background-color: var(--wp--preset--color--text);
}

.project-thumb {
	width: clamp(120px, 18vw, 200px);
	max-width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--wp--preset--color--muted);
}

.project-thumb .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-year {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.project-title {
	font-family: var(--wp--preset--font-family--advercase);
	font-size: clamp(2rem, 5.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.project-title a,
.project-title a:visited {
	color: inherit;
	text-decoration: none;
}

.project-desc {
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

.project-desc p {
	margin: 0;
}

.wp-block-post-terms.is-style-pill {
	margin: 0;
}

.wp-block-post-terms.is-style-pill a,
.wp-block-post-terms.is-style-pill a:visited {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--wp--preset--color--text);
	border-radius: 999px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
}

.project-body {
	margin-top: clamp(var(--wp--preset--spacing--md), 4vw, var(--wp--preset--spacing--lg));
}

/* The last row already ends on 136px of its own trailing space plus the
   divider, so the footer only needs to clear the rule — not restate the gap. */
.post-type-archive-project .site-footer,
.single-project .site-footer {
	padding-block: var(--wp--preset--spacing--md);
}

.footer-socials .wp-social-link a {
	transition: opacity 180ms ease;
}

.footer-socials .wp-social-link a:hover,
.footer-socials .wp-social-link a:focus-visible {
	opacity: 0.55;
}

/* === single project hero === */

/* The index has to hold four titles in a column, so it runs smaller. A single
   project has one, and it carries the page.

   The selector is deliberately heavy. `body:not(.home) .wp-site-blocks main h1`
   above pins every interior page heading to 3rem at (0,2,3), which outranks a
   plain `.project-single .project-title` (0,2,0) and silently caps this title.
   Matching that rule's shape wins on specificity instead of on !important. */
.wp-site-blocks main.project-single .project-title {
	font-size: clamp(3rem, 9vw, 6.4rem);
	line-height: 1;
}

.project-single .project-desc {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.4;
	max-width: 42ch;
}

.project-single .project-year {
	font-family: var(--wp--preset--font-family--manrope);
}

/* The hero image is a movement of its own, so it gets more air than the
   12–18px that binds the title, description and pill together. */
.project-single .project-row > .project-hero-image {
	margin-block: clamp(32px, 5vw, 64px) 0;
}

.project-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* === project body patterns === */

/* Movements are separated by air, not rules — the only line on a project page
   is a deliberately placed project-break. */
.project-body > * + * {
	margin-block-start: clamp(48px, 7vw, 88px);
}

.project-prose {
	max-width: 56ch;
}

/* Measured in em, not ch: Advercase's zero is ~0.7em wide, so 34ch resolves to
   over 1100px and never constrains the line. 17em is the same ~34 characters. */
.project-statement-line {
	max-width: 17em;
}

/* alignfull only reaches the padded content box here, because post-content is
   not a global-padding container. This is the same 100vw escape the archive
   divider uses, so both lines read as one language. */
.project-body .project-break {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw;
	margin-right: 0;
	border: 0;
	height: 1px;
	background-color: var(--wp--preset--color--text);
	opacity: 1;
}

/* Stays three-across at every width — the clamp on the numbers does the
   shrinking instead of the grid reflowing. */
.project-metrics {
	gap: clamp(16px, 3vw, 32px);
}

.project-metric-value {
	margin-block: 0;
}

.project-metric-value + .project-label {
	margin-block-start: clamp(6px, 1vw, 10px);
}

.project-credit-row {
	gap: clamp(16px, 3vw, 32px);
	align-items: baseline;
}

.project-credit-role {
	flex: 0 0 clamp(110px, 18vw, 190px);
	margin-block: 0;
}

.project-credit-name {
	flex: 1 1 auto;
	margin-block: 0;
}

/* No margin reset here: the closing group spaces its children with blockGap,
   and a `margin-block: 0` would win on source order and collapse that gap. */
.project-closing-link a,
.project-closing-link a:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

/* Same arrow and same -0.16em slide as the back-link, sized in em so it tracks
   the closing link's larger type. */
.project-closing-link a::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4'/%3E%3Cpath d='m10.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms ease;
}

.project-closing-link a:hover::before,
.project-closing-link a:focus-visible::before {
	transform: translateX(-0.16em);
}

.project-closing-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-nav .wp-block-navigation-item > a,
	.back-link a::before,
	.project-closing-link a::before,
	.footer-socials .wp-social-link a {
		transition: none;
	}
}

/* === project body: match the approved reference rhythm ===
   Labels are quieter than the theme's "label" token, blocks sit closer inside a
   movement, and the break margins are set here so every page shares one rhythm.
   !important is needed only where WordPress emits it itself (preset font-size
   classes) or where the pattern carries inline margins. */
.project-body > * + * {
	margin-block-start: clamp(24px, 4vw, 44px);
}

.project-body .project-label {
	font-size: max(0.8rem, 0.82rem) !important;
}

.project-body .project-metric-value + .project-label {
	font-size: max(0.72rem, 0.76rem) !important;
	line-height: 1.4;
}

.project-body :is(.project-section, .project-statement, .project-results, .project-credits, .project-closing) > .project-label + * {
	margin-block-start: clamp(18px, 2.6vw, 28px);
}

.project-body .project-prose + .project-prose {
	margin-block-start: 1.2em;
}

.project-body .project-credit-role,
.project-body .project-credit-name {
	font-size: 0.95rem !important;
}

.project-body .project-break {
	margin-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px) !important;
}

/* Give the closing link room from the paragraph above it. */
.project-body .project-closing .project-closing-link {
	margin-block-start: clamp(40px, 6vw, 64px);
}

/* About page: same masthead as a project, without the index row's trailing gap. */
.about-page .project-row {
	padding-top: 0;
	padding-bottom: clamp(40px, 6vw, 68px);
}

/* Air between the last thing on an interior page and the footer. The closing
   "All projects" link used to sit directly on the footer. */
.wp-site-blocks main.project-single,
body.page:not(.home) .wp-site-blocks main {
	padding-bottom: clamp(72px, 10vw, 128px);
}

/* palette swatches (brand identity sections) */
.project-body .project-swatches { gap: clamp(8px, 1.4vw, 16px); margin-block-start: clamp(24px, 4vw, 40px); }
.project-body .project-swatch { min-height: clamp(56px, 8vw, 104px); margin: 0; }
.project-body .project-swatches .project-label { margin-block-start: 10px; font-size: max(0.66rem, 0.72rem) !important; line-height: 1.3; }

/* brand identity tiles (wordmark, seal, type specimens) */
.project-body .project-brand-row { gap: clamp(8px, 1.4vw, 16px); margin-block: clamp(24px, 4vw, 40px) 0; }
.project-body .project-brand-row + .project-brand-row,
.project-body .project-brand-row + .project-swatches { margin-block-start: clamp(8px, 1.4vw, 16px); }
.project-body .project-tile { box-sizing: border-box; height: 100%; border: 1px solid rgba(255,255,255,0.22); padding: clamp(18px, 2.6vw, 28px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 3.4vw, 40px); }
.project-body .project-tile > * { margin: 0 !important; }
.project-body .project-seal img { display: block; width: min(100%, 220px); height: auto; }

/* Doberman: the seal is a thumbnail for the projects index only, not a hero on its own page */
.single-project.postid-19 .project-hero-image { display: none; }
/* Doberman thumbnail: the seal stands on its own, no frame */
.post-19 .project-thumb { border: 0; }

/* two vertical photos side by side */
.project-body .project-image-pair { gap: clamp(8px, 1.4vw, 16px); }
.project-body .project-image-pair .wp-block-image { margin: 0; }
.project-body .project-image-pair img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* Upcoming B2B Events: LinkedIn icon thumbnail, no frame, no hero on its own page */
.post-21 .project-thumb { border: 0; }
.single-project.postid-21 .project-hero-image { display: none; }
/* DWDA: ballet shoes thumbnail, no frame, no hero on its own page */
.post-22 .project-thumb { border: 0; }
.single-project.postid-22 .project-hero-image { display: none; }
/* THE BACK ROOM: coin thumbnail, no frame, no hero on its own page */
.post-20 .project-thumb { border: 0; }
.single-project.postid-20 .project-hero-image { display: none; }
/* Logic Solutions: the storefront hero sits in the content like the other projects, so hide the template hero */
.single-project.postid-101 .project-hero-image { display: none; }
.post-101 .project-thumb { border: 0; }
.project-body .project-image-pair.is-landscape img { aspect-ratio: 3 / 2; }
.project-body .project-image-pair figcaption { margin-top: 10px; font-size: 0.8rem; line-height: 1.4; color: var(--wp--preset--color--muted); }
/* Single project images use the same small gray caption as image pairs */
.project-body .project-image figcaption { margin-top: 10px; font-size: 0.8rem; line-height: 1.4; color: var(--wp--preset--color--muted); }

/* Instagram embeds side by side */
.project-body .project-embed-pair { gap: clamp(16px, 2.4vw, 28px); }
.project-body .project-embed-pair .project-label { margin-bottom: 12px; }
.project-body .project-embed-pair .instagram-media { min-width: 0 !important; }
.project-body .project-embed-pair + .project-embed-pair { margin-block-start: clamp(32px, 5vw, 56px); }

/* projects index: thumbnails ~25% larger (was clamp(120px, 18vw, 200px)) */
.project-thumb { width: clamp(150px, 22vw, 250px); }
/* thumbnails sit on the bottom-left of their square, so the gap to the title is identical */
.project-thumb img { object-fit: contain !important; object-position: left bottom !important; }

/* landing page: looping video in place of the still (same box as .hero-image img) */
.hero-image video {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	display: block;
	background: transparent;
}
@media (max-aspect-ratio: 4/5) {
	.hero-image video { object-position: left center !important; }
}
/* visitors who ask for less motion get the still frame instead of the loop */
@media (prefers-reduced-motion: reduce) {
	.hero-image.wp-block-video {
		background: url("assets/video/hero-poster-v14.webp") center / contain no-repeat;
	}
	.hero-image.wp-block-video video { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 4/5) {
	.hero-image.wp-block-video { background-position: left center; }
}

/* landing video: a taller box than the old still, so the tightly cropped loop reads larger */
.hero-image.wp-block-video {
	width: calc(var(--u) * 37);
	max-width: calc(var(--u) * 37);
	height: calc(var(--u) * 39);
}
@media (max-aspect-ratio: 4/5) {
	/* phones: the video takes only the height left after the wordmark and menu
	   (up to 43% of the screen), so on a short phone it shrinks instead of the
	   whole stack overflowing and getting clipped at the top and bottom */
	.hero-row { justify-content: safe center !important; }
	.hero-image.wp-block-video {
		width: 100%;
		max-width: 100%;
		flex: 1 1 0;
		height: auto;
		min-height: 0;
		max-height: 43svh;
	}
	.hero-nav-col { flex: 0 0 auto; }
}

/* The landing page picks its layout by screen shape, not width: clearly upright
   screens (phones, tablets held upright) stack the video over the wordmark and
   menu; everything else sits side by side. In the stack, the type is sized off
   whichever is tighter, width or height, so the menu never crowds out the video. */
@media (max-aspect-ratio: 4/5) {
	.home .wp-site-blocks { --u: min(2.4vw, 1.2vh); }
	.hero-image.wp-block-video { max-height: 50svh; }
}

/* Play Game teaser: more air under the title, less above the image */
.play-page .project-row > .project-desc { margin-block-start: clamp(24px, 3vw, 40px); }
.play-page .project-row { padding-bottom: 0; }
.play-page .project-body { margin-top: clamp(32px, 4vw, 56px); }

/* Typeface: Times New Roman throughout — bold for headings (title, wordmark,
   section labels), regular for body copy and menus. */
/* The Doberman identity tiles show Doberman's own brand fonts, not the site's. */
.project-wordmark.has-advercase-font-family,
.project-type-specimen.has-advercase-font-family { font-family: "Advercase", Georgia, serif !important; font-weight: 700; }
.project-type-specimen.has-manrope-font-family { font-family: "Manrope", sans-serif !important; font-weight: 500; }

/* Landing page: larger wordmark */
.hero-nav-col .hero-wordmark { font-size: calc(var(--u) * 9.6); }
@media (max-aspect-ratio: 4/5) {
	.hero-nav-col .hero-wordmark { font-size: calc(var(--u) * 7.8); }
}

/* Landing page: no hover effects on any link (menu or footer icons).
   Keyboard users still get a plain outline so they can see where they are. */
.home .hero-nav .wp-block-navigation-item > a:hover,
.home .hero-nav .wp-block-navigation-item > a:focus {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.home .footer-socials .wp-social-link a:hover,
.home .footer-socials .wp-social-link a:focus-visible {
	opacity: 1;
}
.home a:focus-visible {
	outline: 1px solid var(--wp--preset--color--text);
	outline-offset: 4px;
}

/* Doberman: brand strategy deck download link, above "All projects" */
.project-download a,
.project-download a:visited {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.project-download a::after { content: " \2193"; }

/* === About: mentors === */
.about-page .mentor {
	gap: clamp(24px, 4vw, 56px);
	margin-block-start: clamp(32px, 5vw, 56px) !important;
}
.about-page .mentor + .mentor {
	margin-block-start: clamp(56px, 8vw, 96px) !important;
}
.mentor-portrait {
	aspect-ratio: 4 / 5;
	width: 100%;
	margin: 0;
}
.mentor-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mentor-portrait.is-placeholder {
	border: 1px solid rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mentor-portrait-note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
}
.about-page .mentor-name {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.1;
	margin: 0 0 clamp(16px, 2.4vw, 24px);
}
/* experience: one hairline-divided row per role — title and company on the
   left, years on the right */
.mentor-experience {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	margin-block-end: clamp(24px, 3vw, 36px);
}
.mentor-experience > * + * { margin-block-start: 0 !important; }
.mentor-role-row {
	gap: 16px;
	padding-block: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mentor-role-text > * { margin: 0 !important; }
.mentor-role { font-size: 1rem; line-height: 1.35; }
.mentor-org { font-size: 0.95rem; line-height: 1.35; color: var(--wp--preset--color--muted); }
.mentor-years {
	margin: 0;
	flex: none;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mentor-lead {
	font-weight: 700;
	margin-block: 0 0.6em !important;
}
.mentor-text-col > .project-prose { margin-top: 0; }
@media (max-width: 781px) {
	.about-page .mentor-photo-col { max-width: 240px; }
}
/* mentor portraits are square photos, so the frame is square */
.mentor-portrait { aspect-ratio: 1 / 1; }
.mentor-portrait img { aspect-ratio: 1 / 1; }

/* About: the portrait is a grainy photo, so it shows smaller than full width,
   lined up with the left edge of the text */
.about-hero img {
	width: min(100%, 400px) !important;
	height: auto;
}

/* A wide image followed straight by a photo pair reads as one block: the gap
   between them matches the gap between the two paired photos. */
.project-body .project-image.alignwide + .project-image-pair {
	margin-block-start: clamp(8px, 1.4vw, 16px) !important;
}

/* About: photo sits closer under the title */
.about-page:not(.play-page) .project-row { padding-bottom: 0; }
.about-page:not(.play-page) .project-body { margin-top: clamp(24px, 3vw, 40px); }

/* Interior pages: less empty space between "Go back" and the first thing on the page */
.wp-site-blocks main.project-index,
.wp-site-blocks main.project-single {
	padding-top: clamp(28px, 4vw, 56px);
}
.project-index .wp-block-post-template > li:first-child .project-row,
.project-index .project-list > :first-child .project-row {
	padding-top: 0;
}
.wp-site-blocks main.project-index > .wp-block-query { margin-top: 0; }

/* About: smaller mentor portraits */
@media (min-width: 782px) {
	.about-page .mentor-photo-col { flex: 0 0 220px !important; }
	.about-page .mentor-text-col { flex: 1 1 0 !important; }
}
@media (max-width: 781px) {
	.about-page .mentor-photo-col { max-width: 180px; }
}

/* === Doberman: positioning map, rebuilt from the deck (slide 5) as live UI === */
.positioning-map {
	--pm-line: rgba(255, 255, 255, 0.35);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		".    top    ."
		"left grid   right"
		".    bottom .";
	align-items: center;
	column-gap: clamp(12px, 2vw, 28px);
	row-gap: clamp(10px, 1.4vw, 16px);
	margin: clamp(32px, 5vw, 56px) 0 0;
	font-size: clamp(0.78rem, 1.2vw, 1rem);
	line-height: 1.2;
}
.pm-axis { color: var(--wp--preset--color--muted); white-space: nowrap; }
.pm-top { grid-area: top; justify-self: center; }
.pm-bottom { grid-area: bottom; justify-self: center; }
.pm-left { grid-area: left; text-align: right; }
.pm-right { grid-area: right; }
.pm-grid {
	grid-area: grid;
	position: relative;
	aspect-ratio: 960 / 473;
	border: 1px solid var(--pm-line);
	background:
		linear-gradient(var(--pm-line), var(--pm-line)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(var(--pm-line), var(--pm-line)) 0 50% / 100% 1px no-repeat;
}
.pm-q-tr {
	position: absolute;
	left: 50%; top: 0; width: 50%; height: 50%;
	background: var(--wp--preset--color--text);
}
.pm-point {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 0.7em; height: 0.7em;
}
.pm-dot {
	display: block; width: 100%; height: 100%;
	border-radius: 50%;
	background: var(--wp--preset--color--text);
}
.pm-name {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	color: var(--wp--preset--color--text);
}
.pm-label-l .pm-name { right: calc(100% + 0.6em); }
.pm-label-r .pm-name { left: calc(100% + 0.6em); }
/* Doberman sits in the filled quadrant, so it inverts */
.pm-point.is-doberman .pm-dot { background: var(--wp--preset--color--background); }
.pm-point.is-doberman .pm-name { color: var(--wp--preset--color--background); font-weight: 700; }

/* Narrow screens: the side labels move above the map so the map keeps its width */
@media (max-width: 700px) {
	.positioning-map {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"left  right"
			"top   top"
			"grid  grid"
			"bottom bottom";
	}
	.pm-left { text-align: left; justify-self: start; }
	.pm-left::before { content: "\2190  "; }
	.pm-right { text-align: right; justify-self: end; }
	.pm-right::after { content: "  \2192"; }
	.pm-grid { aspect-ratio: 4 / 3; }
}
/* Doberman: the deck download sits right under the cover image, like a caption */
.project-body .project-image + .project-download { margin-block-start: clamp(12px, 1.6vw, 18px) !important; }

/* About: mentor quote (from a recommendation letter) */
.about-page .mentor-quote {
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding: 0 0 0 clamp(16px, 2vw, 24px);
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.about-page .mentor-quote p {
	margin: 0;
	font-style: italic;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
}
.about-page .mentor-quote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

/* Teaser pages: wider description so each line stays on one line on desktop */
.play-page .project-desc { max-width: 64ch; }

/* About photo: a little smaller on desktop */
@media (min-width: 782px) {
	.about-hero img { width: 320px !important; }
}
/* About: a bit more air between the title and the photo */
.about-page:not(.play-page) .project-body { margin-top: clamp(32px, 4.4vw, 64px); }

/* Multiple work-type pills sit side by side, no comma between them. */
.wp-block-post-terms.is-style-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wp-block-post-terms.is-style-pill .wp-block-post-terms__separator {
	display: none;
}

/* Landing video: about 60% larger than the original in the side-by-side layout (phones handled separately) */
@media (min-aspect-ratio: 4/5) {
	.hero-image.wp-block-video {
		width: calc(var(--u) * 59.59);
		max-width: calc(var(--u) * 59.59);
		height: calc(var(--u) * 62.62);
	}
}

/* Phones: landing animation about 25% larger, scaled in place so the
   wordmark, menu and spacing stay exactly where they were. The video's
   black edges may extend past its box, so the menu sits above it. */
@media (max-aspect-ratio: 4/5) and (max-width: 600px) {
	.hero-image.wp-block-video video {
		object-position: center center !important;
		transform: scale(1.377);
		transform-origin: 50% 50%;
	}
	.hero-nav-col { position: relative; z-index: 1; }
}

/* Landing, side-by-side layout: nudge the animation + wordmark group left so the
   empty space on the left of the scene matches the space right of the menu. */
@media (min-aspect-ratio: 4/5) {
	.home .hero-row { position: relative; left: calc(var(--u) * -1.8); }
}

/* 90s pixel cursors (computers only; phones and tablets have no cursor) */
@media (hover: hover) and (pointer: fine) {
	html, body {
		cursor: url("assets/cursors/cursor-arrow-sm.png") 0 0, auto;
		cursor: -webkit-image-set(url("assets/cursors/cursor-arrow-sm.png") 1x, url("assets/cursors/cursor-arrow-sm@2x.png") 2x) 0 0, auto;
		cursor: image-set(url("assets/cursors/cursor-arrow-sm.png") 1x, url("assets/cursors/cursor-arrow-sm@2x.png") 2x) 0 0, auto;
	}
	a, button, summary, label[for], select, [role="button"], input[type="submit"], input[type="button"], .wp-block-button__link {
		cursor: url("assets/cursors/cursor-hand-sm.png") 5 0, pointer;
		cursor: -webkit-image-set(url("assets/cursors/cursor-hand-sm.png") 1x, url("assets/cursors/cursor-hand-sm@2x.png") 2x) 5 0, pointer;
		cursor: image-set(url("assets/cursors/cursor-hand-sm.png") 1x, url("assets/cursors/cursor-hand-sm@2x.png") 2x) 5 0, pointer;
	}
	input[type="text"], input[type="email"], input[type="search"], textarea { cursor: text; }
}

/* Landing page menu: 90s-style underlined links. The underline drops away on hover
   (the hover rule above already sets text-decoration: none). */
.home .hero-nav .wp-block-navigation-item > a,
.home .hero-nav .wp-block-navigation-item > a:visited {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	text-transform: none;
	letter-spacing: normal;
	font-size: calc(max(0.8rem, calc(var(--u) * 1.3)) + 2px);
}
@media (max-aspect-ratio: 4/5) {
	.home .hero-nav .wp-block-navigation-item > a {
		font-size: calc(max(0.8rem, calc(var(--u) * 1.6)) + 2px);
	}
}

/* 90s-style links across the site: every text link is underlined, and the
   underline drops away on hover. Icons, image links, tag pills, buttons and
   the "Young." wordmark stay as they are. The game is a separate page and is
   not affected. */
body a {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em !important;
}
body a:hover,
body a:focus-visible {
	text-decoration: none !important;
}
/* All links stay the site's white, never blue or purple. */
body a,
body a:visited {
	color: var(--wp--preset--color--text) !important;
}
.wp-social-link a,
.wp-block-button__link,
.is-style-pill a,
.site-header-title,
.site-header-title a,
.wp-block-post-featured-image a,
.project-thumb a,
.project-title a,
a:has(> img),
a:has(> svg),
a:has(> figure) {
	text-decoration: none !important;
}

/* Project tag bubbles are labels only, not links. */
.is-style-pill a {
	pointer-events: none;
	cursor: default;
}

/* Back arrows ("Go back", "All projects") stay still on hover. */
.back-link a::before,
.project-closing-link a::before {
	transition: none;
}
.back-link a:hover::before,
.back-link a:focus-visible::before,
.project-closing-link a:hover::before,
.project-closing-link a:focus-visible::before {
	transform: none;
}

/* Phones: keep the footer credit and all four icons on one line, so the
   footer doesn't grow and shrink the landing animation. */
@media (max-aspect-ratio: 4/5) {
	.home .site-footer { flex-wrap: nowrap; }
	.home .footer-socials.wp-block-social-links { gap: calc(var(--u) * 1.3); flex-wrap: nowrap; }
}

/* Phones: less space under the menu, so the extra "Site Stats" link
   doesn't shrink the landing animation. */
@media (max-aspect-ratio: 4/5) {
	.home .hero-row { padding-bottom: calc(var(--u) * 1.8); }
}

/* Animated film grain over every page (the game is a separate page and is
   not affected). Noticeable strength, fine texture, covers everything.
   Clicks pass through. To remove, delete this block. */
body::after {
	content: "";
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-image: url("assets/images/grain.png");
	background-size: 256px 256px;
	opacity: 0.09;
	pointer-events: none;
	z-index: 2147483000;
	animation: young-grain 0.6s steps(6) infinite;
}
@keyframes young-grain {
	0%   { transform: translate(0, 0); }
	17%  { transform: translate(-7%, 4%); }
	33%  { transform: translate(5%, -9%); }
	50%  { transform: translate(-11%, -3%); }
	67%  { transform: translate(9%, 8%); }
	83%  { transform: translate(-3%, 11%); }
	100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; }
}