@charset "UTF-8";
/* ==========================================================================
   Pomo Games
   Every brand decision lives in the :root block. Change it there, not below.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
	font-family: "Baloo 2";
	src: url("../fonts/baloo2-var-latin.woff2") format("woff2-variations");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Nunito";
	src: url("../fonts/nunito-var-latin.woff2") format("woff2-variations");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Brand tokens ---------- */
:root {
	/* Signature */
	--pomo-coral: #FF6B4A;
	--pomo-coral-deep: #F04E2E;
	/* Ground — warm ink replaces black, never pure #000 */
	--pomo-ink: #33261F;
	--pomo-cream: #FFF8F2;
	--pomo-muted: #8B7A72;
	/* Game-art accents. Illustration only, never UI chrome. */
	--pomo-sun: #FFC24B;
	--pomo-teal: #24C2AE;
	--pomo-sky: #4FA8F0;
	--pomo-plum: #A375E8;
	--pomo-leaf: #57C473;

	/* Derived surfaces */
	--pomo-bg: #FFFFFF;
	--pomo-bg-alt: var(--pomo-cream);
	--pomo-bg-dark: var(--pomo-ink);
	--pomo-border: #EFE3DA;
	--pomo-border-dark: #4A392F;
	--pomo-text: #5C4A41;
	--pomo-text-dark: var(--pomo-ink);
	--pomo-on-dark: #F3E7DF;
	--pomo-on-dark-muted: #9C8A80;

	/* Type */
	--font-display: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid from 390px to 1440px. The mobile floors are deliberately low —
	   the old site set its h1 at 26px on a phone, and anything near 48px turns
	   a headline into three cramped lines. Baloo is wide, so these sit a touch
	   above the old sizes without overwhelming a small screen. */
	--step--1: clamp(0.8rem, 0.78rem + 0.09vw, 0.89rem);
	--step-0: clamp(1rem, 0.956rem + 0.183vw, 1.12rem);
	--step-1: clamp(1.125rem, 1.023rem + 0.419vw, 1.4rem);
	--step-2: clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem);
	--step-3: clamp(1.375rem, 1.073rem + 1.238vw, 2.19rem);
	--step-4: clamp(1.6rem, 1.178rem + 1.733vw, 2.74rem);
	--step-5: clamp(1.75rem, 1.123rem + 2.571vw, 3.43rem);
	--step-6: clamp(2rem, 1.15rem + 3.486vw, 4.29rem);

	/* Rhythm */
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8rem;

	/* Shape — Baloo is round, so the UI is too */
	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 24px;
	--radius-pill: 999px;

	--shadow-soft: 0 2px 8px rgba(51, 38, 31, 0.06), 0 12px 32px rgba(51, 38, 31, 0.08);
	--shadow-lift: 0 4px 12px rgba(51, 38, 31, 0.09), 0 20px 48px rgba(51, 38, 31, 0.12);
	/* Deliberately restrained: a wide bright halo reads as a glow around the
	   button rather than a shadow under it. Deeper coral, tighter, dimmer. */
	--shadow-coral: 0 3px 10px rgba(240, 78, 46, 0.18);

	--wrap: 1200px;
	--wrap-narrow: 760px;
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* One source of truth: the overlay header pulls content up by exactly this,
	   and anchor targets clear it by this plus a little breathing room. */
	--header-h: 78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1.65;
	color: var(--pomo-text);
	background: var(--pomo-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}
input, button, textarea, select { font: inherit; color: inherit; }
p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6, .h-display {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.08;
	color: var(--pomo-text-dark);
	letter-spacing: -0.015em;
	text-wrap: balance;
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

a { color: var(--pomo-coral-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pomo-ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--pomo-coral);
	outline-offset: 3px;
	border-radius: var(--radius-s);
}

::selection { background: var(--pomo-coral); color: #fff; }

/* ---------- Layout ---------- */
.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--pomo-bg-alt); }
.section--dark {
	background: var(--pomo-bg-dark);
	color: var(--pomo-on-dark);
}
.section--dark :where(h1, h2, h3, h4, h5, h6) { color: var(--pomo-cream); }
/* :not(.btn) matters — otherwise this beats .btn--primary on specificity and
   paints coral text onto a coral button. */
.section--dark a:not(.btn) { color: var(--pomo-coral); }
.section--dark a:not(.btn):hover { color: #fff; }

/* A section can close with the same organic wave the footer uses, in the colour
   of whatever follows it — so the next section appears to rise into this one.
   Same source shape as the footer wave, just painted white. */
.section--wave-out {
	position: relative;
	padding-bottom: calc(var(--space-2xl) + clamp(50px, 7vw, 120px));
}
.section--wave-out::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(50px, 7vw, 120px);
	background: url("../img/wave-white.png") no-repeat bottom center / 100% 100%;
	pointer-events: none;
}

.section__head {
	max-width: 44rem;
	margin-bottom: var(--space-l);
}
.section__head--center {
	margin-inline: auto;
	text-align: center;
}

/* Eyebrow — the small tracked label above a heading */
.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--pomo-coral-deep);
	margin-bottom: var(--space-xs);
}
.section--dark .eyebrow { color: var(--pomo-coral); }

.lead {
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--pomo-muted);
}
.section--dark .lead { color: var(--pomo-on-dark-muted); }

/* ==========================================================================
   Wordmark — the two O's are drawn, never typed, so the pupils stay exact
   at any size. Scale the whole mark with a single font-size.
   ========================================================================== */
.pomo-wordmark {
	display: inline-flex;
	align-items: center;
	font: 800 var(--wordmark-size, 34px)/1 var(--font-display);
	color: var(--pomo-ink);
	--pomo-pupil: var(--pomo-coral);
	letter-spacing: 0;
	user-select: none;
	text-decoration: none;
}
.pomo-wordmark--coral { color: var(--pomo-coral); --pomo-pupil: var(--pomo-ink); }
.pomo-wordmark--light { color: var(--pomo-cream); --pomo-pupil: var(--pomo-coral); }

.pomo-wordmark .o {
	position: relative;
	box-sizing: border-box;
	width: 0.86em;
	height: 0.86em;
	margin: 0.07em 0 0;
	border-radius: 50%;
	border: 0.18em solid currentColor;
}
.pomo-wordmark .o:first-of-type { margin-right: 0.015em; margin-left: 0.015em; }
.pomo-wordmark .o::after {
	content: "";
	position: absolute;
	width: 0.26em;
	height: 0.26em;
	border-radius: 50%;
	background: var(--pomo-pupil);
	top: 0.2em;
	left: 0.26em; /* looking right */
}
.pomo-wordmark .o--right::after { left: 0.16em; }
.pomo-wordmark .o--wink::after {
	width: auto;
	height: 0.14em;
	border-radius: 0.1em;
	left: 0.06em;
	right: 0.06em;
	top: 0.3em;
}

/* Idle blink */
@keyframes pomo-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.pomo-wordmark--alive .o::after { animation: pomo-blink 5.5s infinite; }

/* Bouncy — squash-and-stretch on the whole mark, pupils lag a beat behind.
   Reads as alive without ever distorting the letterforms themselves. */
@keyframes pomo-bounce {
	0%, 68%, 100% { transform: translateY(0) scale(1, 1); }
	74% { transform: translateY(-0.09em) scale(0.98, 1.03); }
	82% { transform: translateY(0.02em) scale(1.03, 0.97); }
	90% { transform: translateY(0) scale(1, 1); }
}
@keyframes pomo-pupil-drop {
	0%, 70%, 100% { transform: translateY(0); }
	78% { transform: translateY(0.05em); }
	88% { transform: translateY(0); }
}
.pomo-wordmark--bouncy {
	animation: pomo-bounce 4.2s var(--ease-bounce) infinite;
	transform-origin: 50% 90%;
	will-change: transform;
}
.pomo-wordmark--bouncy .o::after {
	animation: pomo-pupil-drop 4.2s var(--ease-bounce) infinite, pomo-blink 5.5s infinite;
}
/* A hover re-triggers the bounce so the logo answers the cursor. */
.pomo-wordmark--bouncy:hover { animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
	.pomo-wordmark--alive .o::after,
	.pomo-wordmark--bouncy,
	.pomo-wordmark--bouncy .o::after { animation: none; }
}

.pomo-lockup { display: inline-flex; flex-direction: column; gap: 3px; }
.pomo-tagline {
	font: 800 clamp(8px, 0.55rem, 11px)/1 var(--font-body);
	letter-spacing: 0.32em;
	color: var(--pomo-muted);
	padding-left: 0.2em;
}
.pomo-wordmark--light + .pomo-tagline,
.site-footer .pomo-tagline { color: var(--pomo-on-dark-muted); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.9em;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.22s var(--ease-bounce), box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Colour is stated on the element itself so no ancestor link rule can win. */
.btn--primary,
.btn--primary:hover,
.btn--primary:focus {
	background: var(--pomo-coral);
	color: #fff;
	box-shadow: var(--shadow-coral);
}
.btn--primary:hover { background: var(--pomo-coral-deep); }

.btn--ghost {
	background: transparent;
	color: var(--pomo-ink);
	border-color: var(--pomo-border);
}
.btn--ghost:hover { border-color: var(--pomo-ink); color: var(--pomo-ink); }

/* Ghost buttons on any dark surface — sections, the hero and the cookie bar. */
.section--dark .btn--ghost,
.hero .btn--ghost,
.cookie-notice .btn--ghost,
.site-footer .btn--ghost { color: var(--pomo-cream); border-color: var(--pomo-border-dark); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cookie-notice .btn--ghost:hover,
.site-footer .btn--ghost:hover { border-color: var(--pomo-coral); color: #fff; }

/* The hero sits on photography, so its outline needs more contrast than ink. */
.hero .btn--ghost { border-color: rgba(255, 248, 242, 0.5); }

.btn--small { padding: 0.6em 1.3em; font-size: 0.85rem; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
}

/* ---------- Header ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.8em 1.4em;
	background: var(--pomo-ink);
	color: #fff;
	border-radius: 0 0 var(--radius-m) 0;
	font-weight: 800;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	/* The hairline is a shadow, not a border — a border would add 1px to the
	   header's height and leave a white seam above an overlaid hero. */
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header.is-stuck {
	box-shadow: 0 1px 0 var(--pomo-border), 0 2px 20px rgba(51, 38, 31, 0.05);
}

/* ---------- Header over a hero ----------
   On pages that open with full-bleed art the header floats on top of it, so
   the artwork runs to the very top of the viewport. Once scrolled, it takes
   its solid background back. */
.has-hero .site-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* Sits above the hero without taking up layout space. */
	margin-bottom: calc(-1 * var(--header-h));
}
.has-hero .site-header:not(.is-stuck) {
	--nav-ink: #fff;
	/* A soft top-down wash keeps white nav legible over bright art. */
	background-image: linear-gradient(180deg, rgba(51, 38, 31, 0.45) 0%, rgba(51, 38, 31, 0) 100%);
}
.has-hero .site-header.is-stuck {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Nav, wordmark and icons all follow one ink variable. */
.nav-primary a,
.icon-btn,
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { color: var(--nav-ink, var(--pomo-ink)); }

.has-hero .site-header:not(.is-stuck) .pomo-wordmark {
	color: var(--pomo-cream);
	--pomo-pupil: var(--pomo-coral);
	filter: drop-shadow(0 2px 10px rgba(51, 38, 31, 0.4));
}
.has-hero .site-header:not(.is-stuck) .nav-primary a {
	color: #fff;
	text-shadow: 0 1px 8px rgba(51, 38, 31, 0.45);
}
.has-hero .site-header:not(.is-stuck) .nav-primary a:hover,
.has-hero .site-header:not(.is-stuck) .nav-primary .current-menu-item > a,
.has-hero .site-header:not(.is-stuck) .nav-primary .current_page_item > a {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}
/* The dropdown is its own white panel sitting under the transparent header, so
   the overlay's white nav must stop at the top level — inside .sub-menu the
   links go back to ink or they are white on white. Same reason as the
   `:not(.btn)` on `.section--dark a`. */
.has-hero .site-header:not(.is-stuck) .nav-primary .sub-menu a {
	color: var(--pomo-ink);
	text-shadow: none;
}
.has-hero .site-header:not(.is-stuck) .nav-primary .sub-menu a:hover,
.has-hero .site-header:not(.is-stuck) .nav-primary .sub-menu .current-menu-item > a,
.has-hero .site-header:not(.is-stuck) .nav-primary .sub-menu .current_page_item > a {
	background: rgba(255, 107, 74, 0.1);
	color: var(--pomo-coral-deep);
}
.has-hero .site-header:not(.is-stuck) .nav-toggle span,
.has-hero .site-header:not(.is-stuck) .nav-toggle span::before,
.has-hero .site-header:not(.is-stuck) .nav-toggle span::after { background: #fff; }
.has-hero .site-header:not(.is-stuck) .icon-btn { color: #fff; }
.has-hero .site-header:not(.is-stuck) .icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	min-height: var(--header-h);
}
.site-branding { margin-right: auto; display: flex; align-items: center; }
.site-branding a { text-decoration: none; display: inline-flex; align-items: center; }
.custom-logo { max-height: 46px; width: auto; }

/* ---------- Primary nav ---------- */
.nav-primary ul { list-style: none; margin: 0; padding: 0; }
.nav-primary > ul { display: flex; align-items: center; gap: 0.35rem; }
.nav-primary a {
	display: block;
	padding: 0.5rem 0.85rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--pomo-ink);
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a,
.nav-primary .current_page_item > a {
	background: rgba(255, 107, 74, 0.1);
	color: var(--pomo-coral-deep);
}

/* Submenus */
.nav-primary li { position: relative; }
.nav-primary .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 210px;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid var(--pomo-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-primary .sub-menu a { font-size: 0.92rem; }

.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Burger */
.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 22px;
	height: 2.5px;
	background: var(--pomo-ink);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: transform 0.28s var(--ease-bounce), opacity 0.2s ease;
}
.nav-toggle span { top: 50%; margin-top: -1.25px; }
.nav-toggle span::before { top: -7px; left: 0; transform: none; }
.nav-toggle span::after { top: 7px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: block; order: 3; }
	.header-cta { display: none; }
	.nav-primary {
		position: fixed;
		inset: 78px 0 auto;
		max-height: calc(100dvh - 78px);
		overflow-y: auto;
		padding: var(--space-s) 1.25rem var(--space-l);
		background: #fff;
		border-top: 1px solid var(--pomo-border);
		box-shadow: var(--shadow-lift);
		display: none;
	}
	.nav-primary.is-open { display: block; }
	.nav-primary > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-primary a { padding: 0.9rem 0.75rem; font-size: 1.05rem; border-radius: var(--radius-m); }
	.nav-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--pomo-border);
		border-radius: 0;
		margin-left: 0.75rem;
		padding: 0 0 0 0.5rem;
	}
	.menu-item-has-children > a::after { float: right; margin-top: 0.5em; }
	.nav-primary .mobile-cta { display: block; margin-top: var(--space-s); }

	/* Down here the whole nav is a white drop-down panel, not an overlay on the
	   hero, so none of it takes the white treatment — same selectors as the
	   .has-hero block above, later in the file, so they win on source order. */
	.has-hero .site-header:not(.is-stuck) .nav-primary a:not(.btn) {
		color: var(--pomo-ink);
		text-shadow: none;
	}
	.has-hero .site-header:not(.is-stuck) .nav-primary a:not(.btn):hover,
	.has-hero .site-header:not(.is-stuck) .nav-primary .current-menu-item > a:not(.btn),
	.has-hero .site-header:not(.is-stuck) .nav-primary .current-menu-ancestor > a:not(.btn),
	.has-hero .site-header:not(.is-stuck) .nav-primary .current_page_item > a:not(.btn) {
		background: rgba(255, 107, 74, 0.1);
		color: var(--pomo-coral-deep);
	}
}
@media (min-width: 901px) {
	.nav-primary .mobile-cta { display: none; }
}

/* ---------- Icon button + 3x3 grid glyph ---------- */
.icon-btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color 0.2s ease;
	flex: none;
}
.icon-btn:hover { background: rgba(255, 107, 74, 0.12); }

.icon-grid {
	display: grid;
	grid-template-columns: repeat(3, 3px);
	gap: 3px;
}
.icon-grid i {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

/* ---------- Slide-in social panel ---------- */
.panel-backdrop {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(51, 38, 31, 0.45);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.panel-backdrop.is-open { opacity: 1; }

.panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	width: min(100%, 420px);
	display: flex;
	flex-direction: column;
	padding: var(--space-l) var(--space-l) var(--space-m);
	background: var(--pomo-bg-alt);
	box-shadow: -20px 0 60px rgba(51, 38, 31, 0.18);
	transform: translateX(100%);
	transition: transform 0.42s var(--ease-bounce);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.panel.is-open { transform: translateX(0); }

.panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-m);
	margin-bottom: auto;
}
.panel__close {
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	background: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s var(--ease-bounce), background-color 0.2s ease;
}
.panel__close:hover { transform: rotate(90deg); background: var(--pomo-coral); }
.panel__close span[aria-hidden] {
	position: relative;
	width: 17px;
	height: 17px;
}
.panel__close span[aria-hidden]::before,
.panel__close span[aria-hidden]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: var(--pomo-ink);
}
.panel__close:hover span[aria-hidden]::before,
.panel__close:hover span[aria-hidden]::after { background: #fff; }
.panel__close span[aria-hidden]::before { transform: rotate(45deg); }
.panel__close span[aria-hidden]::after { transform: rotate(-45deg); }

.panel__links { margin-block: var(--space-2xl); }
.social-list { list-style: none; margin: 0; padding: 0; }
.social-list li + li { margin-top: var(--space-xs); }
.social-list a {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: 0.7rem 0.9rem;
	margin-inline: -0.9rem;
	border-radius: var(--radius-m);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--step-2);
	color: var(--pomo-ink);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.25s var(--ease-bounce), color 0.2s ease;
}
.social-list a:hover {
	background: #fff;
	color: var(--pomo-coral-deep);
	transform: translateX(6px);
}
.social-list svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

.panel__foot {
	margin-top: auto;
	padding-top: var(--space-m);
	border-top: 1px solid var(--pomo-border);
	font-weight: 700;
}
.panel__foot a { color: var(--pomo-muted); text-decoration: none; }
.panel__foot a:hover { color: var(--pomo-coral-deep); }

@media (max-width: 900px) {
	/* The burger already covers navigation on small screens. */
	.icon-btn { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(88vh, 760px);
	padding-block: var(--space-2xl);
	overflow: hidden;
	background: var(--pomo-ink);
	color: var(--pomo-on-dark);
	text-align: center;
	isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.2s ease, transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* The key art is the point of the hero, so the scrim stays light — just enough
   to hold white text. Contrast comes from the text shadow below, not from
   burying the artwork. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at 50% 48%, rgba(51, 38, 31, 0.34) 0%, rgba(51, 38, 31, 0.1) 65%),
		linear-gradient(180deg, rgba(51, 38, 31, 0.28) 0%, rgba(51, 38, 31, 0) 40%);
}
.hero__inner { position: relative; max-width: 56rem; }

/* The art behind is bright and busy, so the text carries its own contrast
   rather than the scrim doing all the work. */
.hero h1 {
	color: #fff;
	margin-bottom: var(--space-s);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 24px rgba(51, 38, 31, 0.55), 0 1px 3px rgba(51, 38, 31, 0.4);
}
.hero .eyebrow {
	color: #fff;
	font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.95rem);
	letter-spacing: 0.14em;
	text-shadow: 0 1px 12px rgba(51, 38, 31, 0.7);
}
.hero .lead { color: rgba(255, 248, 242, 0.92); margin-inline: auto; max-width: 42rem; }
.hero .btn-row { justify-content: center; margin-top: var(--space-l); }

/* Plain rectangular buttons, as on the old hero. */
.btn--plain {
	background: #fff;
	color: var(--pomo-ink);
	border-radius: var(--radius-s);
	min-width: 11rem;
	box-shadow: 0 6px 20px rgba(51, 38, 31, 0.22);
}
.btn--plain:hover { background: var(--pomo-coral); color: #fff; }

/* Scroll cue */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: calc(var(--hero-edge-h) + 0.75rem);
	transform: translateX(-50%);
	z-index: 3;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	text-decoration: none;
}
.hero__scroll span {
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--pomo-ink);
	border-bottom: 2.5px solid var(--pomo-ink);
	transform: rotate(45deg) translate(-2px, -2px);
	animation: pomo-nudge 2.2s ease-in-out infinite;
}
@keyframes pomo-nudge {
	0%, 60%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
	75% { transform: rotate(45deg) translate(2px, 2px); }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll span { animation: none; } }

/* Torn paper edge sitting over the bottom of the hero. The source art is
   1920x255 and repeats horizontally, so wide screens stay seamless. */
.hero {
	--hero-edge-h: clamp(28px, 4.2vw, 62px);
}
.hero__edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: var(--hero-edge-h);
	/* One copy stretched across the full width, as in the original. Tiling it
	   makes the wave visibly repeat two or three times on a wide screen. */
	background: url("../img/hero-edge.png") no-repeat bottom center / 100% 100%;
	pointer-events: none;
}

.hero__dots {
	position: absolute;
	bottom: var(--space-m);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	z-index: 2;
}
.hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 248, 242, 0.38);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s var(--ease-bounce);
}
.hero__dot[aria-current="true"] { background: var(--pomo-coral); transform: scale(1.35); }

/* A near-full-height hero eats a whole phone screen before any content shows. */
@media (max-width: 700px) {
	.hero { min-height: min(66vh, 520px); padding-block: var(--space-xl); }
	.section { padding-block: var(--space-xl); }
	.section--tight { padding-block: var(--space-l); }
	.game-splits { gap: var(--space-xl); }
}

/* Page header for interior pages */
.page-hero {
	padding-block: var(--space-2xl) var(--space-xl);
	background: var(--pomo-bg-alt);
	border-bottom: 1px solid var(--pomo-border);
	text-align: center;
}
.page-hero .lead { margin-inline: auto; max-width: 44rem; }

/* Anything linked to by fragment must clear the sticky header. */
:target,
[id="wishlist"],
[id="whishlist"] { scroll-margin-top: calc(var(--header-h) + 18px); }
.anchor-alias { display: block; height: 0; }

/* ---------- Cards ---------- */
.grid {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pomo-border);
	border-radius: var(--radius-l);
	overflow: hidden;
	transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lift);
	border-color: transparent;
}
.card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--pomo-bg-alt);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--space-m); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card__title { font-size: var(--step-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--pomo-coral-deep); }
.card__meta { font-size: var(--step--1); color: var(--pomo-muted); font-weight: 700; }
.card__excerpt { font-size: 0.95rem; }
.card__footer { margin-top: auto; padding-top: var(--space-xs); }

.section--dark .card {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--pomo-border-dark);
}
.section--dark .card__meta { color: var(--pomo-on-dark-muted); }

/* Status pill on a game card */
.badge {
	display: inline-block;
	padding: 0.3em 0.85em;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	background: rgba(255, 107, 74, 0.12);
	color: var(--pomo-coral-deep);
}
.badge--released { background: rgba(87, 196, 115, 0.16); color: #2E7D45; }
.badge--development { background: rgba(79, 168, 240, 0.16); color: #1F6FB2; }
.badge--soon { background: rgba(255, 194, 75, 0.2); color: #94670A; }

/* ---------- Split feature (image beside copy) ---------- */
.split {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
/* Only flip once the two columns actually sit side by side. Stacked, the image
   should always lead, otherwise alternating blocks read inconsistently. */
@media (min-width: 860px) {
	.split--reverse .split__media { order: 2; }
}
.split__media img { border-radius: var(--radius-l); box-shadow: var(--shadow-soft); width: 100%; }
.split__body > * + * { margin-top: var(--space-s); }

/* Studio intro — centred where there is room, left-aligned on a phone where
   centred body copy is noticeably harder to read (and where the old site was
   left-aligned too). */
.intro-block__inner { text-align: center; }
@media (max-width: 700px) {
	.intro-block__inner { text-align: left; }
	.intro-block__inner .lead { margin-inline: 0; }
}

/* Alternating game feature blocks */
.game-splits { display: flex; flex-direction: column; gap: var(--space-2xl); }

/* ---------- About page ----------
   The portrait is a phone photo, so on its own in a split it runs the block
   past 700px tall. Pinned to 4:5 — near enough its own 3:4 that the crop only
   takes a sliver off the top and bottom, and the face stays clear of it. */
.about-split { align-items: start; }
.about-split .split__media { max-width: 420px; margin-inline: auto; }
.about-split .split__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
}
.about-split .prose { max-width: none; }

/* The hobby chips. The dot carries the accent and the label stays ink, so a
   chip reads the same on cream or white however the palette is retuned. */
.hobby-strip {
	list-style: none;
	margin: var(--space-l) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.hobby {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--pomo-ink);
	background: rgba(51, 38, 31, 0.06);
	background: color-mix(in srgb, var(--hobby, var(--pomo-coral)) 18%, transparent);
}
.hobby::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--hobby, var(--pomo-coral));
}
.hobby--0 { --hobby: var(--pomo-coral); }
.hobby--1 { --hobby: var(--pomo-teal); }
.hobby--2 { --hobby: var(--pomo-sun); }
.hobby--3 { --hobby: var(--pomo-sky); }
.hobby--4 { --hobby: var(--pomo-leaf); }
.hobby--5 { --hobby: var(--pomo-plum); }

/* Same reason as the community pet — the bounce lifts it out of its own box,
   so tightening this runs the feet through the eyebrow below. */
.pomo-pet--about { margin-bottom: var(--space-s); }
.game-split .split__body > * + * { margin-top: var(--space-s); }
.game-split .split__body .badge { align-self: flex-start; }
.game-split h3 { font-size: var(--step-4); }
.game-split .split__media a { display: block; border-radius: var(--radius-l); overflow: hidden; }
/* Pin the ratio so portrait screenshots cannot stretch the block, and so the
   space is reserved correctly before a lazy image arrives. */
.game-split .split__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.game-split .split__media a:hover img { transform: scale(1.03); }

/* Arrow link — the old site's "Read More" affordance */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 800;
	text-decoration: none;
	color: var(--pomo-coral-deep);
}
.link-arrow::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2.5px solid currentColor;
	border-top: 2.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s var(--ease-bounce);
}
.link-arrow:hover { color: var(--pomo-ink); }
.link-arrow:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* ---------- Screenshot gallery ----------
   A free-scrolling row that bleeds off both edges. Images keep their natural
   aspect ratio — several are portrait phone captures and cropping them all to
   one ratio is what made this read as a plain thumbnail strip. Heights vary in
   a repeating pattern to give the staggered rhythm of the original. */
.shot-section { overflow: hidden; }

.shot-strip {
	--row-h: clamp(240px, 34vw, 460px);

	display: flex;
	align-items: center;
	gap: clamp(var(--space-s), 2vw, var(--space-l));
	height: var(--row-h);
	overflow-x: auto;
	overflow-y: hidden;
	/* Starts near the left edge and runs off the right — aligning it to the
	   wrap would leave a 120px gap and stop it reading as a carousel. */
	padding-inline: clamp(1rem, 2vw, 2rem);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	/* Without this the browser's own image drag fires and you end up dragging
	   a ghost of the picture instead of scrolling the row. */
	user-select: none;
	-webkit-user-select: none;
}
.shot-strip::-webkit-scrollbar { display: none; }
.shot-strip.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.shot-strip.is-dragging * { pointer-events: none; }

.shot-strip__item {
	flex: none;
	margin: 0;
	height: 100%;
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s ease;
}
/* Width follows the image, so portrait and landscape stills sit side by side
   at their true proportions. */
.shot-strip__item img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}
.shot-strip__item--tall { height: 100%; }
.shot-strip__item--mid { height: 82%; }
.shot-strip__item--short { height: 64%; }

.shot-strip__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.shot-strip__item:hover img { transform: scale(1.04); }

/* Touch already scrolls natively — no grab cursor to offer. */
@media (pointer: coarse) {
	.shot-strip { cursor: auto; }
}

/* Centre the newsletter form and socials where a section is centred */
.newsletter-center .newsletter__form { justify-content: center; max-width: 30rem; margin-inline: auto; }
.socials-center .socials { justify-content: center; }

/* ---------- Full-bleed game banner ----------
   The artwork carries its own scalloped top and bottom edges, cut against
   white. So: never crop it, and give it a white backdrop — any object-fit
   crop would slice those edges straight off. Image and copy share one grid
   cell, so the image sets the height and the text rides on top. */
.game-banner {
	position: relative;
	display: grid;
	/* The artwork is cut out with a transparent surround, so the section can
	   fade from the white section above into the cream one below and leave no
	   seam on either side. */
	background: linear-gradient(180deg, var(--pomo-bg) 0%, var(--pomo-bg) 18%, var(--pomo-bg-alt) 62%);
	text-align: center;
	color: #fff;
}
.game-banner__media,
.game-banner__inner { grid-area: 1 / 1; }

.game-banner__media { width: 100%; }
.game-banner__media img { width: 100%; height: auto; }

.game-banner__inner {
	align-self: center;
	justify-self: center;
	z-index: 1;
	max-width: 52rem;
	padding-inline: 1.25rem;
}
.game-banner .eyebrow {
	color: #fff;
	letter-spacing: 0.3em;
	text-shadow: 0 1px 10px rgba(51, 38, 31, 0.6);
}
.game-banner h2 {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 2px 22px rgba(51, 38, 31, 0.5);
	margin-bottom: var(--space-l);
}

/* Boxed variant of the arrow link, for use on artwork. */
.link-arrow--boxed {
	padding: 0.85em 1.9em;
	background: #fff;
	color: var(--pomo-ink);
	border-radius: var(--radius-s);
	box-shadow: 0 6px 20px rgba(51, 38, 31, 0.22);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-bounce);
}
.link-arrow--boxed:hover {
	background: var(--pomo-coral);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Pomo the pet ----------
   Idle squash-and-stretch plus a blink. The pupil is moved by JS when the
   pointer is nearby; everything here still works if that never runs. */
.pomo-pet {
	width: var(--pet-size, 180px);
	max-width: 100%;
	margin-inline: auto;
	line-height: 0;
}
.pomo-pet svg { width: 100%; height: auto; overflow: visible; }

.pomo-pet__body {
	transform-origin: 150px 206px; /* the feet, so it squashes onto the ground */
	animation: pet-bounce 2.3s ease-in-out infinite;
}
@keyframes pet-bounce {
	0%, 100% { transform: translateY(0) scale(1, 1); }
	38%      { transform: translateY(-7px) scale(0.985, 1.02); }
	62%      { transform: translateY(1px) scale(1.02, 0.978); }
	80%      { transform: translateY(0) scale(1, 1); }
}

/* One big eye, so the blink is a vertical squash of the whole eye group. */
.pomo-pet__eye {
	transform-origin: 150px 130px;
	animation: pet-blink 5.4s ease-in-out infinite;
}
@keyframes pet-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95%           { transform: scaleY(0.06); }
}

/* Smoothed so the eye glides to the cursor rather than snapping. */
.pomo-pet__pupil { transition: transform 0.18s ease-out; }

/* ---------- Click reactions ----------
   The reaction animates the wrapper, not the body, so the idle bounce keeps
   running underneath and the two transforms compose instead of fighting. */
.pomo-pet[data-pet-poke] { cursor: pointer; transform-origin: 50% 92%; }
.pomo-pet[data-pet-poke] svg { pointer-events: none; }

.pomo-pet.is-squish { animation: pet-squish 0.55s var(--ease-bounce); }
.pomo-pet.is-hop    { animation: pet-hop 0.62s var(--ease-bounce); }
.pomo-pet.is-spin   { animation: pet-spin 0.72s ease-in-out; }

@keyframes pet-squish {
	0%   { transform: scale(1, 1); }
	28%  { transform: scale(1.16, 0.8) translateY(6px); }
	55%  { transform: scale(0.93, 1.1) translateY(-5px); }
	78%  { transform: scale(1.04, 0.97); }
	100% { transform: scale(1, 1); }
}
@keyframes pet-hop {
	0%   { transform: translateY(0) scale(1, 1); }
	20%  { transform: translateY(4px) scale(1.1, 0.88); }
	52%  { transform: translateY(-34px) scale(0.94, 1.08) rotate(-6deg); }
	78%  { transform: translateY(2px) scale(1.08, 0.93) rotate(2deg); }
	100% { transform: translateY(0) scale(1, 1) rotate(0); }
}
@keyframes pet-spin {
	0%   { transform: rotate(0) scale(1); }
	22%  { transform: rotate(-14deg) scale(1.06, 0.92); }
	70%  { transform: rotate(374deg) scale(1, 1); }
	100% { transform: rotate(360deg) scale(1); }
}

/* The sprout is light, so it lags and whips on every reaction. */
.pomo-pet__sprout { transform-origin: 150px 58px; }
.pomo-pet.is-squish .pomo-pet__sprout,
.pomo-pet.is-hop .pomo-pet__sprout,
.pomo-pet.is-spin .pomo-pet__sprout { animation: pet-sprout 0.62s var(--ease-bounce); }
@keyframes pet-sprout {
	0%   { transform: rotate(0); }
	25%  { transform: rotate(15deg); }
	55%  { transform: rotate(-11deg); }
	80%  { transform: rotate(5deg); }
	100% { transform: rotate(0); }
}

/* A quick squint on impact — reads as a reaction rather than a stray blink. */
.pomo-pet.is-squish .pomo-pet__eye,
.pomo-pet.is-hop .pomo-pet__eye { animation: pet-squint 0.4s ease-out; }
@keyframes pet-squint {
	0%, 100% { transform: scaleY(1); }
	30%      { transform: scaleY(0.35); }
}

@media (prefers-reduced-motion: reduce) {
	.pomo-pet.is-squish,
	.pomo-pet.is-hop,
	.pomo-pet.is-spin,
	.pomo-pet.is-squish .pomo-pet__sprout,
	.pomo-pet.is-hop .pomo-pet__sprout,
	.pomo-pet.is-spin .pomo-pet__sprout,
	.pomo-pet.is-squish .pomo-pet__eye,
	.pomo-pet.is-hop .pomo-pet__eye { animation: none; }
}

/* Sits above the community heading. The bounce lifts it out of its box, so it
   needs real clearance — pulling it tighter runs the feet through the eyebrow. */
.pomo-pet--community { margin-bottom: var(--space-s); }

@media (prefers-reduced-motion: reduce) {
	.pomo-pet__body,
	.pomo-pet__eye { animation: none; }
	.pomo-pet__pupil { transition: none; }
}

/* ---------- Stat counters ---------- */
.stats {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	text-align: center;
}
/* Counter icon — coral glyph in a soft tinted disc, echoing the mascot's
   round, chunky construction. */
.stat__icon {
	display: grid;
	place-items: center;
	width: clamp(52px, 6vw, 66px);
	height: clamp(52px, 6vw, 66px);
	margin: 0 auto var(--space-s);
	border-radius: 50%;
	background: rgba(255, 107, 74, 0.12);
	color: var(--pomo-coral-deep);
	transition: transform 0.35s var(--ease-bounce), background-color 0.3s ease;
}
.stat__icon svg { width: 55%; height: 55%; }
.stat:hover .stat__icon {
	transform: translateY(-4px) rotate(-4deg);
	background: rgba(255, 107, 74, 0.2);
}
.section--dark .stat__icon { background: rgba(255, 107, 74, 0.18); color: var(--pomo-coral); }

.stat__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--step-5);
	line-height: 1;
	color: var(--pomo-coral);
	font-variant-numeric: tabular-nums;
}
.stat__label {
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pomo-muted);
	margin-top: 0.4rem;
}

/* ---------- Logo strip ---------- */
.logo-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-l);
}
.logo-strip img {
	max-height: 44px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(1);
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.logo-strip img:hover { opacity: 1; filter: none; }

/* ---------- Gallery ---------- */
.gallery-grid {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.gallery-grid a { display: block; border-radius: var(--radius-m); overflow: hidden; }
.gallery-grid img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	transition: transform 0.4s ease;
}
.gallery-grid a:hover img { transform: scale(1.06); }

/* ---------- Video embeds ---------- */
.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--pomo-ink);
}
.video-embed iframe,
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Click-to-load facade — keeps YouTube's ~700KB off the page until asked for */
.video-facade { cursor: pointer; border: 0; padding: 0; width: 100%; display: block; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(51, 38, 31, 0.28);
	transition: background-color 0.25s ease;
}
.video-facade:hover::after { background: rgba(51, 38, 31, 0.12); }
.video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--pomo-coral);
	box-shadow: var(--shadow-coral);
	display: grid;
	place-items: center;
	transition: transform 0.28s var(--ease-bounce);
}
.video-facade:hover .video-facade__play { transform: translate(-50%, -50%) scale(1.12); }
/* A playlist with no poster still needs something behind the play button. */
.video-facade__blank {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--pomo-ink);
}
.video-facade__play::before {
	content: "";
	border-left: 20px solid #fff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 5px;
}

/* Lead image on a standard page */
.page-figure { margin: 0 0 var(--space-xl); }
.page-figure img { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-soft); }
/* A portrait photo gets its own narrower column rather than filling the
   measure and running a thousand pixels tall. */
.page-figure--portrait { max-width: 24rem; margin-inline: auto; }

/* Socials dropped into page content via [pomo_socials] */
.socials-inline { margin-top: var(--space-l); }
.socials-inline .socials { justify-content: flex-start; }
.socials-inline .socials a { background: var(--pomo-bg-alt); color: var(--pomo-ink); }
.socials-inline .socials a:hover { background: var(--pomo-coral); color: #fff; }

/* ---------- Prose (post + page body) ---------- */
.prose { max-width: var(--wrap-narrow); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: var(--step-3); margin-top: 1.8em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose img, .prose figure img { border-radius: var(--radius-m); }
.prose figure { margin: 1.8em 0; }
.prose figcaption {
	font-size: var(--step--1);
	color: var(--pomo-muted);
	text-align: center;
	margin-top: 0.6em;
}
.prose blockquote {
	margin: 1.8em 0;
	padding: var(--space-m) var(--space-l);
	background: var(--pomo-bg-alt);
	border-left: 4px solid var(--pomo-coral);
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
	font-size: var(--step-1);
	font-style: italic;
}
.prose blockquote p + p { margin-top: 0.8em; }
.prose code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 0.88em;
	padding: 0.15em 0.4em;
	background: var(--pomo-bg-alt);
	border-radius: var(--radius-s);
}
.prose pre {
	padding: var(--space-m);
	background: var(--pomo-ink);
	color: var(--pomo-on-dark);
	border-radius: var(--radius-m);
	overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--pomo-border); margin: 2.5em 0; }
.prose table { width: 100%; border-collapse: collapse; }
.prose :is(th, td) { padding: 0.7em; border-bottom: 1px solid var(--pomo-border); text-align: left; }
.prose .alignwide { width: min(100vw - 2.5rem, var(--wrap)); margin-inline: calc(50% - min(50vw - 1.25rem, var(--wrap) / 2)); max-width: none; }
.prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.prose .alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.prose .alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.prose .aligncenter { margin-inline: auto; }

/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-s); }
.form-field label { font-weight: 800; font-size: 0.9rem; color: var(--pomo-ink); }
.form-field :is(input, textarea, select) {
	padding: 0.8em 1em;
	background: #fff;
	border: 2px solid var(--pomo-border);
	border-radius: var(--radius-m);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}
.form-field :is(input, textarea):focus {
	border-color: var(--pomo-coral);
	box-shadow: 0 0 0 4px rgba(255, 107, 74, 0.14);
	outline: none;
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field .required { color: var(--pomo-coral-deep); }
.form-error { color: #C0392B; font-size: 0.86rem; font-weight: 700; }

/* Honeypot — kept out of the layout and away from assistive tech */
.pomo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	margin-bottom: var(--space-m);
	font-weight: 700;
}
.form-notice--ok { background: rgba(87, 196, 115, 0.14); color: #256B38; }
.form-notice--err { background: rgba(255, 107, 74, 0.14); color: #B03A1E; }

/* Newsletter */
.newsletter__form { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.newsletter__form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.85em 1.2em;
	border: 2px solid var(--pomo-border);
	border-radius: var(--radius-pill);
	background: #fff;
}
.section--dark .newsletter__form input[type="email"] {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--pomo-border-dark);
	color: #fff;
}
.section--dark .newsletter__form input::placeholder { color: var(--pomo-on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	background: var(--pomo-ink);
	color: var(--pomo-on-dark);
	padding-block: var(--space-2xl) var(--space-m);
	/* Room for the wave, which sits above the footer proper. */
	margin-top: var(--footer-wave-h);
	--footer-wave-h: clamp(60px, 9vw, 150px);
}

/* The original footer wave, retinted from the old site's asset to Pomo ink.
   Stretched to full width — it is one hand-drawn 1920px shape, so tiling it
   would show the repeat. */
.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--footer-wave-h);
	background: url("../img/footer-wave.png") no-repeat bottom center / 100% 100%;
	pointer-events: none;
}
.site-footer :where(h2, h3) { color: var(--pomo-cream); }
.footer__top {
	display: grid;
	gap: var(--space-xl);
	/* Brand column takes more room; the other three share what is left. */
	grid-template-columns: 1.4fr repeat(3, 1fr);
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--pomo-border-dark);
}
@media (max-width: 1000px) {
	.footer__top { grid-template-columns: repeat(2, 1fr); }
	.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.footer__top { grid-template-columns: 1fr; gap: var(--space-l); }
}
.footer__newsletter p { color: var(--pomo-on-dark-muted); font-size: 0.92rem; }
.footer__newsletter .newsletter__form { flex-direction: column; align-items: stretch; }
.footer__newsletter .newsletter__form input[type="email"] { flex: 1 1 auto; }
.footer__newsletter .form-notice { font-size: 0.85rem; padding: var(--space-2xs) var(--space-xs); }
.footer__brand p { color: var(--pomo-on-dark-muted); margin-top: var(--space-s); max-width: 30ch; }
.footer__title {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.74rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pomo-on-dark-muted);
	margin-bottom: var(--space-s);
}
/* Widget titles must not inherit full display-heading scale in a footer column. */
.site-footer .widget__title {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.74rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pomo-on-dark-muted);
	margin-bottom: var(--space-s);
}
.site-footer .widget + .widget { margin-top: var(--space-m); }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 0.55rem; }
.site-footer a { color: var(--pomo-on-dark); text-decoration: none; font-weight: 700; }
.site-footer a:hover { color: var(--pomo-coral); }

.socials { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--space-m); }
.socials a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	transition: background-color 0.25s ease, transform 0.25s var(--ease-bounce);
}
.socials a:hover { background: var(--pomo-coral); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-m);
	font-size: 0.86rem;
	color: var(--pomo-on-dark-muted);
}
.footer__bottom a { font-weight: 700; }

/* ---------- Pagination ---------- */
.pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--space-xl);
	flex-wrap: wrap;
}
.pagination :is(a, span) {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.6rem;
	border-radius: var(--radius-pill);
	font-weight: 800;
	text-decoration: none;
	color: var(--pomo-ink);
	border: 2px solid var(--pomo-border);
}
.pagination a:hover { border-color: var(--pomo-ink); }
.pagination .current { background: var(--pomo-coral); border-color: var(--pomo-coral); color: #fff; }

/* ---------- Cookie notice ---------- */
.cookie-notice {
	position: fixed;
	bottom: var(--space-s);
	left: 50%;
	transform: translateX(-50%) translateY(150%);
	z-index: 200;
	width: min(100% - 2rem, 640px);
	display: flex;
	align-items: center;
	gap: var(--space-m);
	flex-wrap: wrap;
	padding: var(--space-s) var(--space-m);
	background: var(--pomo-ink);
	color: var(--pomo-on-dark);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-lift);
	transition: transform 0.5s var(--ease-bounce);
	font-size: 0.9rem;
}
.cookie-notice.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-notice p { flex: 1 1 16rem; margin: 0; }
.cookie-notice a { color: var(--pomo-coral); }

/* ---------- Dot cursor ----------
   A small coral dot replaces the pointer, with a ring that lags behind it.
   Only ever enabled by JS on a device with a real mouse, so touch and keyboard
   users are unaffected and the native cursor is never hidden without a
   replacement being drawn. */
.has-dot-cursor,
.has-dot-cursor a,
.has-dot-cursor button,
.has-dot-cursor [role="button"],
.has-dot-cursor label,
.has-dot-cursor summary { cursor: none; }

/* Text entry keeps its I-beam — losing it makes fields feel broken. */
.has-dot-cursor :is(input, textarea, select, [contenteditable]) { cursor: auto; }

.cursor-dot,
.cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.25s ease;
	will-change: transform;
}
.cursor-dot {
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	background: var(--pomo-coral);
}
.cursor-ring {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid rgba(255, 107, 74, 0.55);
	transition: opacity 0.25s ease, width 0.25s var(--ease-bounce),
	            height 0.25s var(--ease-bounce), margin 0.25s var(--ease-bounce),
	            background-color 0.25s ease, border-color 0.25s ease;
}
.cursor-active .cursor-dot,
.cursor-active .cursor-ring { opacity: 1; }

/* Over something clickable the ring swells and fills faintly. */
.cursor-hover .cursor-ring {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	background: rgba(255, 107, 74, 0.14);
	border-color: var(--pomo-coral);
}
/* Over dark sections the dot needs to read against ink, not against cream. */
.cursor-on-dark .cursor-dot { background: var(--pomo-cream); }
.cursor-on-dark .cursor-ring { border-color: rgba(255, 248, 242, 0.6); }

@media (prefers-reduced-motion: reduce) {
	.cursor-ring { display: none; }
}

/* ---------- Utilities ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.text-center { text-align: center; }
.mt-l { margin-top: var(--space-l); }
.mt-m { margin-top: var(--space-m); }

/* Reveal on scroll.
   Content is visible by default and only hidden once JS has set .js-reveal on
   <html>, so a failed or blocked script can never leave the page blank — the
   failure mode that made the old site render as an empty page. */
.js-reveal .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s var(--ease-bounce);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Print ---------- */
@media print {
	.site-header, .site-footer, .cookie-notice, .hero__dots, .btn { display: none !important; }
	body { color: #000; background: #fff; }
	.prose { max-width: none; }
}