/*
Theme Name: Taylor Hulyksmith
Theme URI: https://www.taylorhulyksmith.com
Description: Child theme of GeneratePress for taylorhulyksmith.com.
Author: Adam
Template: generatepress
Version: 1.0.0
Text Domain: taylor-child
*/

/* ==========================================================================
   Tokens
   Taylor's palette (2026-09): orchid = personality, soft orchid = breathing
   room, yellow = playful wildcard, orange = energy / CTA, cream = foundation.
   Orchid, yellow, and orange are too light for text on cream, so they're
   used as backgrounds with ink text on top, never as text colors.
   ========================================================================== */

:root {
	--th-orchid: #F757FA;
	--th-orchid-soft: #ECC1E8;
	--th-yellow: #FFFF77;
	--th-orange: #FFAC2A;
	--th-cream: #FAF6E3;
	--th-cream-deep: #F1EACB;
	--th-white: #FFFFFF;
	--th-ink: #1E1A1D;
	--th-ink-soft: #4A4348;

	--th-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
	--th-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--th-radius: 28px;
	--th-radius-sm: 16px;
	--th-gutter: clamp(16px, 3vw, 32px);
	--th-max: 1280px;
	--th-measure: 68ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--th-cream);
	color: var(--th-ink);
	font-family: var(--th-sans);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Keep the footer pinned to the bottom of the viewport on short pages
   (like 404s) instead of floating right under sparse content. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-footer {
	margin-top: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--th-sans);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--th-ink);
}

h1 { font-size: clamp(44px, 7.2vw, 108px); }
h2 { font-size: clamp(32px, 4.4vw, 60px); }
h3,
.th-h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }

/* Scroll clearance for the sticky header (~80px), so anchor jumps and
   keyboard focus never land underneath it (WCAG 2.4.11). :root outranks
   the admin bar's own html rule; its height is added when present. */
:root {
	scroll-padding-top: calc(100px + var(--wp-admin--admin-bar--height, 0px));
}

a {
	color: var(--th-ink);
	text-decoration: underline;
	text-decoration-color: var(--th-orchid);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 0.15s ease, background-color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--th-ink);
	text-decoration-thickness: 4px;
}

:focus-visible {
	outline: 3px solid var(--th-ink);
	outline-offset: 3px;
}

/* Dark surfaces need a light ring. */
.th-footer :focus-visible,
.th-lightbox :focus-visible {
	outline-color: var(--th-cream);
}

mark,
.th-mark {
	background: var(--th-yellow);
	color: inherit;
	padding: 0 0.15em;
	border-radius: 4px;
}

/* ==========================================================================
   Header + navigation (Rhode: lowercase wordmark, tiny tracked uppercase nav)
   ========================================================================== */

.site-header,
.main-navigation,
.main-navigation ul ul {
	background: var(--th-cream);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.inside-header {
	max-width: var(--th-max);
	padding: 18px var(--th-gutter);
}

.main-title {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	text-transform: lowercase;
}

.main-title a,
.main-title a:hover {
	color: var(--th-ink);
	text-decoration: none;
}

/* Orchid full stop after the wordmark, header and footer. */
.main-title a::after,
.th-footer__mark::after {
	content: ".";
	color: var(--th-orchid);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	font-family: var(--th-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--th-ink);
	padding-left: 14px;
	padding-right: 14px;
	line-height: 44px;
}

.main-navigation .main-nav ul li a {
	text-decoration: none;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--th-ink);
	background: transparent;
	text-decoration: underline;
	text-decoration-color: var(--th-orchid);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.main-navigation .menu-bar-items {
	align-items: center;
}

/* Desktop only: a short hairline between top-level items so the tracked
   uppercase labels don't run together. GP collapses to the toggle at 768px. */
@media (min-width: 769px) {
	.main-navigation .main-nav > ul > li {
		position: relative;
	}

	.main-navigation .main-nav > ul > li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 12px;
		transform: translateY(-50%);
		background: rgba(30, 26, 29, 0.25);
		pointer-events: none;
	}
}

.th-resume-pill {
	display: inline-block;
	margin-left: 10px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--th-orange);
	font-family: var(--th-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--th-ink);
}

.th-resume-pill:hover,
.th-resume-pill:focus {
	background: var(--th-orchid);
	text-decoration: none;
}

/* GP colors .menu-bar-items links white (1.9:1 on orange); keep ink. */
.main-navigation .menu-bar-items a.th-resume-pill,
.main-navigation .menu-bar-items a.th-resume-pill:hover,
.main-navigation .menu-bar-items a.th-resume-pill:focus {
	color: var(--th-ink);
}

/* ==========================================================================
   Page shell: pages run edge-to-edge; each section constrains itself.
   ========================================================================== */

.full-width-content .site-content,
.full-width-content .inside-article {
	padding: 0;
}

.full-width-content .site-main,
.one-container.full-width-content .site-main {
	margin: 0;
}

.separate-containers .inside-article,
.one-container .container,
.inside-article {
	background: transparent;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Classic themes wrap every Group block's contents in an inner container,
   and GeneratePress gives that wrapper 40px padding + a max-width. Our
   components set their own spacing, so neutralize it. */
.site-main .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
}

/* Let the inner wrapper carry flex layouts set on the Group itself. */
.th-tile > .wp-block-group__inner-container,
.th-card > .wp-block-group__inner-container,
.th-photo > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* GP centers this wrapper with auto margins, which stops it stretching. */
	margin-left: 0;
	margin-right: 0;
}

.th-tile > .wp-block-group__inner-container { justify-content: space-between; }
.th-card > .wp-block-group__inner-container { gap: 10px; }
.th-card > .wp-block-group__inner-container > * { margin: 0; }
.th-photo > .wp-block-group__inner-container { justify-content: flex-end; align-items: flex-start; }

/* The grid lives on the inner wrapper (the Group's only child), not the
   Group itself; see .th-cards below. */
.th-cards {
	display: block;
}

/* Header content lines up with the page's content width. */
.inside-header {
	margin-left: auto;
	margin-right: auto;
}

.th-section {
	max-width: var(--th-max);
	margin: 0 auto;
	padding: clamp(48px, 8vw, 112px) var(--th-gutter);
}

.th-section--tight {
	padding-top: clamp(24px, 4vw, 48px);
}

.th-prose {
	max-width: var(--th-measure);
}

.th-prose p,
.th-prose ul {
	margin-bottom: 1.1em;
}

.th-lede {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.th-eyebrow {
	font-family: var(--th-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

/* A small orchid dot on every label: a steady dose of the brand color
   without making anything loud. */
.th-eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.8em;
	border-radius: 50%;
	background: var(--th-orchid);
	vertical-align: -0.05em;
}

/* ==========================================================================
   Hero: Rhode-style inset rounded card
   ========================================================================== */

.th-hero {
	max-width: var(--th-max);
	margin: 8px auto 0;
	padding: 0 var(--th-gutter);
}

/* Text only: header photos moved into the page body (Taylor, 2026-09-25),
   so the card is only as tall as its text. */
.th-hero__card {
	position: relative;
	border-radius: var(--th-radius);
	background: var(--th-orchid-soft);
	padding: clamp(36px, 6vw, 88px);
	overflow: hidden;
}

.th-hero__card > .wp-block-group__inner-container > * {
	margin-top: 0;
}

/* With a photo (homepage headshot): text left, photo right. */
.th-hero__card.wp-block-columns {
	gap: clamp(24px, 4vw, 64px);
	align-items: stretch;
	margin-bottom: 0;
}

.th-hero__card h1 {
	max-width: 18ch;
	margin-bottom: 0.35em;
}

.th-hero__card .th-lede,
.th-hero__card p:not(.th-eyebrow):not(.th-sticker) {
	max-width: 44ch;
}

.th-hero__card .th-quote {
	max-width: 30ch;
	margin-top: 0.5em;
}

.th-hero__card > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

.th-hero--orchid .th-hero__card { background: var(--th-orchid); }
.th-hero--yellow .th-hero__card { background: var(--th-yellow); }
.th-hero--orange .th-hero__card { background: var(--th-orange); }
.th-hero--white  .th-hero__card { background: var(--th-white); }

/* The eyebrow dot disappears on an orchid card, so switch it to ink. */
.th-hero--orchid .th-eyebrow::before { background: var(--th-ink); }


/* Sticker: a small rotated label, Kosas-style, for one-liners. */
.th-sticker {
	display: inline-block;
	background: var(--th-yellow);
	border-radius: 999px;
	padding: 10px 18px;
	font-family: var(--th-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.3;
	transform: rotate(-3deg);
	box-shadow: 0 2px 0 var(--th-ink);
	border: 1.5px solid var(--th-ink);
}

/* ==========================================================================
   Photo placeholder: swap for an Image block when photos are ready.
   ========================================================================== */

.th-photo {
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	height: 100%;
	border-radius: var(--th-radius-sm);
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%),
		var(--th-orchid);
	padding: 20px;
}

.th-photo p {
	margin: 0;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--th-cream);
	border-radius: 999px;
	padding: 6px 12px;
}

.th-photo--soft   { background-color: var(--th-orchid-soft); }
.th-photo--yellow { background-color: var(--th-yellow); }
.th-photo--orange { background-color: var(--th-orange); }
.th-photo--tall   { min-height: 520px; }

.wp-block-image.th-img {
	height: 100%;
	margin: 0;
}

.wp-block-image.th-img img {
	display: block;
	border-radius: var(--th-radius-sm);
	width: 100%;
	height: 100%;
	min-height: 520px;
	object-fit: cover;
}

.wp-block-image.th-img--headshot img { object-position: 50% 30%; }

/* Full photo, no crop (How I Lead team shot: people stand right at the
   edges). Sticks beside the prose on desktop while it scrolls. */
.wp-block-image.th-img--natural {
	height: auto;
}

.wp-block-image.th-img--natural img {
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
}

@media (min-width: 782px) {
	.wp-block-image.th-img--natural {
		position: sticky;
		top: 110px;
	}
}

@media (max-width: 768px) {
	.wp-block-image.th-img img {
		min-height: 0;
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

/* ==========================================================================
   Tiles: Kosas-style category row, used on the homepage as page links
   ========================================================================== */

.th-tiles.wp-block-columns {
	gap: 16px;
	flex-wrap: wrap !important;
	margin-bottom: 0;
}

.th-tiles > .wp-block-column {
	flex: 1 1 200px !important;
}

.th-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 260px;
	height: 100%;
	border-radius: var(--th-radius-sm);
	padding: 22px;
	background: var(--th-white);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.th-tile:hover,
.th-tile:focus-within {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: 6px 6px 0 var(--th-orchid);
}

.th-tile :is(h2, h3) {
	margin: 0;
	font-size: clamp(22px, 2vw, 28px);
}

.th-tile :is(h2, h3) a {
	text-decoration: none;
}

/* Whole tile clickable via the heading link. */
.th-tile :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.th-tile .th-eyebrow {
	margin: 0;
}

.th-tile--orchid { background: var(--th-orchid); }
.th-tile--soft   { background: var(--th-orchid-soft); }
.th-tile--yellow { background: var(--th-yellow); }
.th-tile--orange { background: var(--th-orange); }
.th-tile--white  { background: var(--th-white); }

/* ==========================================================================
   Cards grid (speaking, clients, writing)
   ========================================================================== */

.th-cards > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.th-cards--wide > .wp-block-group__inner-container {
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.th-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: var(--th-radius-sm);
	padding: 24px;
	background: var(--th-white);
}

.th-card > * {
	margin: 0;
}

.th-card :is(h2, h3) {
	font-size: 22px;
}

.th-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-card li {
	padding: 6px 0;
	border-top: 1px solid rgba(30, 26, 29, 0.12);
}

.th-card li:first-child {
	border-top: 0;
}

/* Rotate card colors so a long grid doesn't read as a wall. */
.th-cards--rotate > .wp-block-group__inner-container > .th-card:nth-child(5n+1) { background: var(--th-white); }
.th-cards--rotate > .wp-block-group__inner-container > .th-card:nth-child(5n+2) { background: var(--th-orchid-soft); }
.th-cards--rotate > .wp-block-group__inner-container > .th-card:nth-child(5n+3) { background: var(--th-yellow); }
.th-cards--rotate > .wp-block-group__inner-container > .th-card:nth-child(5n+4) { background: var(--th-white); }
.th-cards--rotate > .wp-block-group__inner-container > .th-card:nth-child(5n+5) { background: var(--th-orange); }

/* Speaking cards: date up top, talk title as the headline, event below. */
.th-talk .th-talk__date {
	font-family: var(--th-mono);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

.th-talk .th-talk__event {
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--th-ink-soft);
	margin-top: auto;
	padding-top: 8px;
}

.th-talk .th-talk__link a {
	font-weight: 600;
}

/* Same lift-and-tilt as the homepage tiles. */
.th-talk {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.th-talk:hover,
.th-talk:focus-within {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: 6px 6px 0 var(--th-orchid);
}

/* Speaking Up grid: rows alternate white / yellow (Taylor). Row striping
   needs a known column count, so the columns are fixed per breakpoint
   instead of auto-fill, and each breakpoint restates its own stripe. */
.th-cards--talks > .wp-block-group__inner-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(8n+5),
.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(8n+6),
.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(8n+7),
.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(8n+8) {
	background: var(--th-yellow);
}

@media (max-width: 1024px) {
	.th-cards--talks > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(n) {
		background: var(--th-white);
	}

	.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(4n+3),
	.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(4n+4) {
		background: var(--th-yellow);
	}
}

@media (max-width: 600px) {
	.th-cards--talks > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(n) {
		background: var(--th-white);
	}

	.th-cards--talks > .wp-block-group__inner-container > .th-talk:nth-child(2n) {
		background: var(--th-yellow);
	}
}


/* ==========================================================================
   Chips + stat (homepage skills)
   ========================================================================== */

.th-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-chips li {
	margin: 0;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--th-ink);
	font-size: 15px;
	line-height: 1.2;
}

/* All outlined, no fills (Taylor, 2026-11-06). */

.th-stat {
	font-size: clamp(120px, 18vw, 240px);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 0.85;
	margin: 0;
}

.th-stat sup {
	font-size: 0.4em;
	vertical-align: 0.9em;
	color: var(--th-ink);
	background: var(--th-orchid);
	border-radius: 999px;
	padding: 0 0.18em;
	margin-left: 0.04em;
}

/* ==========================================================================
   Quote + note
   ========================================================================== */

.th-quote {
	font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}

.th-quote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--th-mono);
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sticky-note callout (the writing page's fine print). */
.th-note {
	max-width: 760px;
	background: var(--th-yellow);
	border-radius: var(--th-radius-sm);
	padding: clamp(24px, 4vw, 40px);
	transform: rotate(-0.8deg);
	box-shadow: 6px 6px 0 var(--th-ink);
}

.th-note > *:last-child {
	margin-bottom: 0;
}

/* Full-width variant (the writing page's preface). A smaller tilt, since
   the same angle across a wide box skews it a lot. */
.th-note--wide {
	max-width: none;
	transform: rotate(-0.3deg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* GeneratePress styles a.wp-block-button__link:not(.has-background), so
   match that specificity (plus .entry-content) to win. */
.th-button,
.entry-content a.wp-block-button__link:not(.has-background) {
	display: inline-block;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--th-orange);
	color: var(--th-ink);
	padding: 16px 26px;
	font-family: var(--th-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.entry-content a.wp-block-button__link:not(.has-background):hover,
.entry-content a.wp-block-button__link:not(.has-background):focus {
	background: var(--th-orchid);
	color: var(--th-ink);
}

.entry-content .is-style-outline a.wp-block-button__link:not(.has-background) {
	background: transparent;
	border-color: var(--th-ink);
}

.entry-content .is-style-outline a.wp-block-button__link:not(.has-background):hover,
.entry-content .is-style-outline a.wp-block-button__link:not(.has-background):focus {
	background: var(--th-ink);
	color: var(--th-cream);
}

.wp-block-buttons {
	gap: 10px;
}

/* ==========================================================================
   Split section (text + photo)
   ========================================================================== */

.th-split.wp-block-columns {
	gap: clamp(32px, 6vw, 96px);
	margin-bottom: 0;
}

/* Stacked splits in one section (homepage About Me / About the name). */
.th-split.wp-block-columns + .th-split.wp-block-columns {
	margin-top: clamp(32px, 5vw, 64px);
}

/* ==========================================================================
   Photo band: a wide photo lower on the page (these used to be header photos)
   ========================================================================== */

.th-band .wp-block-image {
	margin: 0;
}

.th-band__img img {
	display: block;
}

.th-band__img img,
.th-band .th-photo {
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--th-radius);
}

/* Portrait photo cropped to a band: keep her face and the podium sign. */
.th-band__img--stage img { object-position: 50% 18%; }

@media (max-width: 768px) {
	.th-band__img img,
	.th-band .th-photo {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Collage: Why I Work's scattered, overlapping snapshots
   ========================================================================== */

.th-collage > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	padding: 12px 8px 24px;
}

.th-collage .wp-block-image.th-collage__img {
	position: relative;
	grid-column: 1 / span 8;
	margin: calc(-1 * clamp(36px, 5vw, 80px)) 0 0;
	transform: rotate(-3deg);
}

.th-collage .th-collage__img:first-child { margin-top: 0; }
.th-collage .th-collage__img:nth-child(even) { grid-column: 5 / span 8; transform: rotate(2.5deg); }
.th-collage .th-collage__img:nth-child(3) { transform: rotate(-1.5deg); }
.th-collage .th-collage__img:nth-child(4) { transform: rotate(3.5deg); }

.th-collage__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: clamp(6px, 0.7vw, 10px) solid var(--th-white);
	border-radius: 6px;
	box-shadow: 0 14px 30px -16px rgba(30, 26, 29, 0.55);
}

/* ==========================================================================
   Portfolio ([th_portfolio], inc/portfolio.php)
   ========================================================================== */

.th-portfolio__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.th-portfolio__jump a {
	padding: 10px 16px;
	border: 1.5px solid var(--th-ink);
	border-radius: 999px;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.th-portfolio__jump a:hover,
.th-portfolio__jump a:focus {
	background: var(--th-orchid);
	border-color: var(--th-orchid);
}

.th-portfolio__group + .th-portfolio__group {
	margin-top: clamp(48px, 8vw, 96px);
}

.th-portfolio__group {
	scroll-margin-top: 100px;
}

.th-portfolio__type {
	margin: 0 0 24px;
}

.th-project {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	background: var(--th-white);
	border-radius: var(--th-radius);
	padding: clamp(24px, 4vw, 48px);
}

.th-project + .th-project {
	margin-top: 16px;
}

.th-project--text {
	grid-template-columns: minmax(0, 1fr);
}

.th-project--text .th-project__text {
	max-width: var(--th-measure);
}

.th-project__title {
	font-size: clamp(26px, 3vw, 40px);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 8px;
}

.th-project__label {
	margin: 1.6em 0 0.5em;
	font-family: var(--th-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--th-ink-soft);
}

.th-project__copy p {
	margin: 0 0 0.9em;
}

.th-project__copy p:last-child {
	margin-bottom: 0;
}

.th-project__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 36px;
	margin: 0 0 1em;
}

.th-project__stats dt {
	display: inline-block;
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	/* Orchid highlighter under the number. */
	box-shadow: inset 0 -0.2em 0 var(--th-orchid);
}

.th-project__stats dd {
	margin: 8px 0 0;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Uncropped: campaign creative (wide email headers, square SMS graphics,
   tall flyers) has to be seen whole. The lead image spans the full width;
   the rest pack into two columns at their natural shapes. */
.th-project__gallery {
	columns: 2;
	column-gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-project__gallery li {
	break-inside: avoid;
	margin: 0 0 10px;
}

.th-project__gallery:not([data-count="2"]) li:first-child {
	column-span: all;
}

.th-project__gallery[data-count="1"] {
	columns: 1;
}

.th-project__gallery a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--th-cream);
}

.th-project__gallery img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.25s ease;
}

.th-project__gallery a:hover img,
.th-project__gallery a:focus-visible img {
	transform: scale(1.03);
}

@media (max-width: 900px) {
	.th-project {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Lightbox (js/portfolio.js) */
.th-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 56px 72px 40px;
	border: 0;
	background: transparent;
	color: var(--th-cream);
}

.th-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.th-lightbox::backdrop {
	background: rgba(30, 26, 29, 0.92);
}

.th-lightbox__figure {
	margin: 0;
	text-align: center;
}

.th-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	margin: 0 auto;
	border-radius: 8px;
	object-fit: contain;
}

.th-lightbox__figure figcaption {
	margin-top: 12px;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
}

.th-lightbox button {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--th-cream);
	color: var(--th-ink);
	font-size: 22px;
	line-height: 48px;
	cursor: pointer;
}

.th-lightbox button:hover,
.th-lightbox button:focus-visible {
	background: var(--th-orchid);
}

.th-lightbox__close { top: 16px; right: 16px; }
.th-lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.th-lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }
.th-lightbox.is-single .th-lightbox__nav { display: none; }

@media (max-width: 600px) {
	.th-lightbox {
		padding: 64px 12px 72px;
	}

	.th-lightbox__nav--prev,
	.th-lightbox__nav--next {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.th-lightbox__nav--prev { left: calc(50% - 60px); }
	.th-lightbox__nav--next { right: calc(50% - 60px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer .site-info {
	background: var(--th-cream);
	color: var(--th-ink);
	padding: 0 var(--th-gutter) var(--th-gutter);
}

.site-footer .inside-site-info {
	max-width: var(--th-max);
	padding: 0;
	display: block;
}

.th-footer {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px 40px;
	align-items: end;
	background: var(--th-ink);
	color: var(--th-cream);
	border-radius: var(--th-radius);
	padding: clamp(32px, 5vw, 56px);
	text-align: left;
}

.th-footer a {
	color: var(--th-cream);
}

.th-footer__mark {
	font-size: clamp(36px, 6vw, 80px);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1;
	text-decoration: none;
}

.th-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.th-footer__copy {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--th-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

/* ==========================================================================
   404 (no sidebar/search handled in inc/no-sidebar-404.php)
   ========================================================================== */

.error404 .inside-article {
	max-width: var(--th-max);
	margin: 0 auto;
	padding: clamp(48px, 8vw, 112px) var(--th-gutter);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 768px) {
	body {
		font-size: 17px;
	}

	.main-navigation .main-nav ul li a {
		line-height: 48px;
	}

	.th-photo {
		min-height: 280px;
	}

	.th-photo--tall {
		min-height: 360px;
	}

	.th-footer {
		grid-template-columns: 1fr;
	}

	.th-cards--wide > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

/* Keep last so it overrides every hover transform above. */
@media (prefers-reduced-motion: reduce) {
	.th-tile,
	.th-talk,
	.th-project__gallery img {
		transition: none;
	}
	.th-tile:hover,
	.th-tile:focus-within,
	.th-talk:hover,
	.th-talk:focus-within,
	.th-project__gallery a:hover img,
	.th-project__gallery a:focus-visible img {
		transform: none;
	}
}