/* Stacked Shapes — theme styles. Colors, fonts and sizes come from theme.json presets. */

:root {
	--ss-radius: var(--wp--custom--radius--md, 24px);
	--ss-gutter: var(--wp--custom--gutter, 40px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Header ---------- */
/* The template-part <header> is what sticks (an inner wrapper can't: it's only as tall as itself). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* The frosted background sits on a layer behind the header. A blur on the header itself
   would trap the full-screen mobile menu inside the 64px bar. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.ss-header { padding-inline: var(--ss-gutter); }
/* On phones the admin bar scrolls away with the page, so don't leave room for it. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
	.admin-bar .ss-hero.is-animated .ss-stage { top: var(--ss-header-h, 64px); }
}
.ss-brand { display: inline-flex; color: var(--wp--preset--color--contrast); line-height: 0; }
.ss-brand .ss-logo-banner { height: 28px; width: auto; }
@media (max-width: 781px) { .ss-brand .ss-logo-banner { height: 18px; } }
.ss-header .wp-block-navigation a { text-decoration: none; }
.ss-header .wp-block-navigation a:hover { text-decoration: underline; }
@media (max-width: 781px) { .ss-header .wp-block-buttons { display: none; } }

/* Mobile menu: full-screen pink, big left-aligned links, like the rest of the site */
.ss-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 20px 16px 40px;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.ss-header .is-menu-open .wp-block-navigation__responsive-container-content,
.ss-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}
.ss-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; }
.ss-header .is-menu-open .wp-block-navigation__container { gap: 4px !important; width: 100%; }
.ss-header .is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start !important; border-top: 1px solid var(--wp--preset--color--line); }
.ss-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 14px 0 !important;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.ss-header .wp-block-navigation__responsive-container-close { top: 20px; right: 16px; }
.ss-header .wp-block-navigation__responsive-container-close svg,
.ss-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ---------- Sections ---------- */
.ss-section { padding-block: var(--wp--preset--spacing--60); }
.ss-section > * + * { margin-block-start: clamp(32px, 4vw, 48px); }

/* "© LEFT ——— RIGHT" header that opens each section */
.is-style-section-header {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 16px;
	gap: 16px;
}
.is-style-label {
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
}
.ss-label-muted { color: var(--wp--preset--color--text-muted); }
.ss-muted { color: var(--wp--preset--color--text-muted); }
.ss-dim { color: var(--wp--preset--color--text-dim); }

/* ---------- Cards (black surface) ---------- */
.is-style-card {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ss-radius);
	padding: 32px;
}
.is-style-card :where(p, li) { color: var(--wp--preset--color--on-surface-muted); }
.is-style-card :where(h1, h2, h3, h4, h5, h6, strong) { color: var(--wp--preset--color--on-surface); }
.is-style-card .wp-block-button__link { color: var(--wp--preset--color--on-surface); }
.is-style-card .is-style-outline .wp-block-button__link { border-color: var(--wp--preset--color--on-surface); }
.is-style-card .wp-block-list { padding-left: 0; list-style: none; }
.is-style-card .wp-block-list li { color: var(--wp--preset--color--on-surface); }
.is-style-card .wp-block-list li::before { content: "— "; }

/* Process step number */
.ss-step-number {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--display-m) !important;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 32px !important;
}

/* Photo / video placeholders (Cover blocks) and logo tiles */
.ss-media { border-radius: var(--ss-radius); overflow: hidden; }
.ss-media .wp-block-cover__inner-container p,
.ss-logo-tile p {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface);
}
.ss-logo-tile {
	background: var(--wp--preset--color--media);
	border-radius: var(--wp--custom--radius--sm, 12px);
	min-height: 120px;
	display: grid !important;
	place-items: center;
}
.ss-logo-tile img { max-height: 64px; width: auto; filter: grayscale(1); }

/* ---------- Hero: logo builds as you scroll (see assets/js/logo-motion.js) ---------- */
.ss-hero { position: relative; }
.ss-stage {
	position: relative;
	min-height: calc(100vh - var(--ss-header-h, 80px));
	min-height: calc(100svh - var(--ss-header-h, 80px));
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	padding-block: 40px;
}
.ss-hero.is-animated { height: 240vh; }
.ss-hero.is-animated .ss-stage { position: sticky; top: var(--ss-header-h, 80px); height: calc(100vh - var(--ss-header-h, 80px)); height: calc(100svh - var(--ss-header-h, 80px)); }
.admin-bar .ss-hero.is-animated .ss-stage { top: calc(var(--ss-header-h, 80px) + var(--wp-admin--admin-bar--height, 32px)); }
.ss-logo-stage { display: grid; place-items: center; flex: 1; }
.ss-logo-stage .ss-logo-full { width: min(100%, 1100px); height: auto; overflow: visible; color: var(--wp--preset--color--contrast); }
.ss-hero-intro { gap: 24px; }
.ss-hero-intro p { max-width: 460px; margin: 0; }
/* "Scroll" pill: pulses while the logo is stacking, fades away once it's built (is-stacked is set in logo-motion.js) */
.ss-hint {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
	font-weight: 700 !important;
	transition: opacity 0.4s ease;
}
.ss-hero.is-animated .ss-hint { opacity: 1; animation: ss-hint-pulse 1.8s ease-in-out infinite; }
.ss-hero.is-animated.is-stacked .ss-hint { opacity: 0; animation: none; }
@keyframes ss-hint-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}
.ss-hero.is-animated .ss-hero-intro { opacity: 0; }
@media (max-width: 781px) {
	.ss-logo-stage { place-items: center start; }
	.ss-hero-intro { flex-direction: column; align-items: flex-start !important; }
}

/* ---------- Scrolling word strip ---------- */
.ss-marquee {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	overflow: hidden;
	padding: 14px 0 !important;
	white-space: nowrap;
}
.ss-marquee p {
	display: inline-block;
	margin: 0;
	padding-left: 100%;
	word-spacing: 0.4em;
	animation: ss-marquee 22s linear infinite;
}
@keyframes ss-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.ss-marquee p { animation: none; padding-left: var(--ss-gutter); }
}

/* ---------- Work grid (Query Loop of Projects) ---------- */
.ss-work-grid .wp-block-post-template { gap: 20px; }
.ss-work-grid .wp-block-post-featured-image { margin: 0 0 16px; }
.ss-work-grid .wp-block-post-featured-image img,
.ss-work-grid .wp-block-post-featured-image a { border-radius: var(--ss-radius); }
.ss-work-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.ss-project-meta { gap: 12px; align-items: baseline !important; }
.ss-project-meta .wp-block-post-title { font-size: var(--wp--preset--font-size--h-4); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.ss-project-meta .wp-block-post-title a { text-decoration: none; }
.ss-project-meta .wp-block-post-excerpt,
.ss-project-meta .wp-block-post-terms {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}
.ss-project-meta .wp-block-post-excerpt__excerpt { margin: 0; }
.ss-project-meta .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* Home page: first project is the big feature tile (2 columns × 2 rows) */
@media (min-width: 782px) {
	.ss-work-grid--feature .wp-block-post-template > li:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
	.ss-work-grid--feature .wp-block-post-template > li:first-child .wp-block-post-featured-image { flex: 1; aspect-ratio: auto !important; }
}

/* Project type filter on /work/ */
.ss-filter .wp-block-categories-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ss-filter .wp-block-categories-list a {
	display: inline-block; padding: 10px 18px; border: 1px solid currentColor; border-radius: 999px;
	font-size: var(--wp--preset--font-size--label); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.ss-filter .wp-block-categories-list .current-cat a,
.ss-filter .wp-block-categories-list a:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ---------- Statement ---------- */
.ss-statement { font-size: var(--wp--preset--font-size--h-2) !important; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }

/* ---------- FAQ ---------- */
.wp-block-details summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-weight: 400; transition: transform 0.2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 16px; color: var(--wp--preset--color--text-muted); }

/* ---------- Footer ---------- */
.ss-footer-links p { font-size: var(--wp--preset--font-size--display-m) !important; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.ss-footer-links a { text-decoration: none; }
.ss-footer-links a:hover { text-decoration: underline; }
.ss-footer-list p { margin: 0 0 8px; }
.ss-footer-list a { text-decoration: none; }
.ss-wordmark { display: grid; place-items: center; color: var(--wp--preset--color--contrast); padding-block: 24px; }
.ss-wordmark .ss-logo-full { width: min(100%, 1100px); height: auto; }
.ss-legal p { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-dim); margin: 0; }

/* ---------- Single project ---------- */
.ss-project-hero img { border-radius: var(--ss-radius); }
.wp-block-gallery img { border-radius: var(--wp--custom--radius--sm, 12px); }

/* About portrait: fills its column like the photo on the live site */
.ss-portrait { margin: 0; }
.ss-portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ss-radius); }
/* Logo tiles stretch to fill the row (6 across on desktop, 2 on phones) */
.ss-logo-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }