/* -----------------------------------------------------------------------
   YHL — main.css
   First visual prototype of the homepage: design tokens, layout, type
   hierarchy and motion. Authored desktop-first per this pass's brief;
   breakpoints below adapt down to tablet and mobile.
   ----------------------------------------------------------------------- */

/* Design tokens ------------------------------------------------------- */

:root {
	/* Layout */
	--yhl-max-width: 1200px;
	--yhl-gutter: clamp(1.25rem, 1rem + 1vw, 2.5rem);

	/* Type — Basic Sans (Adobe Fonts/Typekit) first, everywhere, including
	   headings; the theme previously paired a serif display face with a
	   sans body, but Basic Sans now carries both. Until a Typekit kit ID
	   is supplied (see YHL_TYPEKIT_ID in functions.php) "basic-sans" is
	   simply absent from the page, so the stack quietly falls through to
	   the self-hosted Inter fallback below it — no visual regression, no
	   unlicensed font files. */
	--font-display: "basic-sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "basic-sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Type scale — one calm, intentional rhythm from eyebrow to h1. Sizes
	   were trimmed down from the first pass (particularly h1/h2) so
	   titles breathe rather than dominate, while staying comfortably
	   readable at every viewport via clamp(). */
	--fs-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
	--fs-small: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
	--fs-nav: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
	--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
	--fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--fs-h1: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

	/* Spacing scale — trimmed at the top end (section padding in
	   particular) for a more comfortable, less oversized editorial
	   rhythm; still generous, just not cavernous. */
	--space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
	--space-xs: clamp(0.75rem, 0.68rem + 0.3vw, 1rem);
	--space-sm: clamp(1rem, 0.9rem + 0.4vw, 1.5rem);
	--space-md: clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);
	--space-lg: clamp(2.25rem, 1.85rem + 1.8vw, 3.75rem);
	--space-xl: clamp(3.25rem, 2.6rem + 3vw, 5.75rem);

	/* Color — warm, editorial, food-focused. Not corporate blue/green. */
	--color-cream: #f7efe1;
	--color-cream-deep: #efe2c8;
	--color-ink: #241a10;
	--color-ink-soft: #4a3826;
	--color-terracotta: #b4432b;
	--color-gold: #c69a44;
	/* YHL's official brand orange (sampled from the brand deck) — reserved
	   for the highlight system: a handful of key words per headline, never
	   whole sentences. */
	--color-accent: #f7931d;
	--color-olive: #5f6b3e;
	--color-sack: #c7a268;
	--color-sack-deep: #a9835a;
	--color-line: rgba(36, 27, 18, 0.14);
	--color-line-on-dark: rgba(247, 239, 225, 0.18);

	/* Motion */
	--ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-base: 0.6s;

	/* Subtle film-grain texture, used on dark sections only. */
	--texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Base type ------------------------------------------------------------ */

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-ink);
	background: var(--color-cream);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	font-weight: 500;
}

p {
	margin: 0 0 var(--space-sm);
	max-width: 62ch;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 var(--space-xs);
	opacity: 0.7;
}

.lead {
	font-size: var(--fs-lead);
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.4;
}

.text-link {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.125em;
}

/* Highlight system — a handful of key words per headline in the brand
   orange, never a whole sentence; everything else stays neutral. */
.highlight {
	color: var(--color-accent);
}

/* Layout shell ----------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.site-main {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--yhl-max-width);
	margin-inline: auto;
	padding-inline: var(--yhl-gutter);
}

.home .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Header ------------------------------------------------------------- */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: var(--yhl-max-width);
	margin-inline: auto;
	padding: var(--space-sm) var(--yhl-gutter);
}

/* On the homepage the header floats transparently over the hero, then
   gains a solid ground once the visitor scrolls past it. */
.home .site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 60;
	max-width: none;
	color: var(--color-cream);
	background: transparent;
	transition: background-color var(--duration-base) var(--ease-editorial),
		color var(--duration-base) var(--ease-editorial),
		border-color var(--duration-base) var(--ease-editorial);
	border-bottom: 1px solid transparent;
}

.home .site-header.is-scrolled {
	color: var(--color-ink);
	background: rgb(247 239 225 / 92%);
	border-bottom-color: var(--color-line);
	backdrop-filter: blur(6px);
}

/* Keep the fixed home header clear of the admin bar (WP core breakpoint
   for the admin bar is 782px, matched below). */
.admin-bar.home .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.home .site-header {
		top: 46px;
	}
}

.site-branding {
	display: flex;
	align-items: center;
}

/* Two logo images are stacked exactly on top of each other (both sized
   off the same box) and crossfaded with opacity — never swapped or
   resized — so the lockup can never jump or reposition as the header's
   background changes. */
.site-logo {
	position: relative;
	display: inline-flex;
	width: clamp(150px, 26vw, 210px);
	height: clamp(34px, 4.5vw, 48px);
}

.site-logo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	filter: drop-shadow(0 1px 3px rgb(0 0 0 / 25%));
	transition: opacity var(--duration-base) var(--ease-editorial);
}

/* Default (and every non-home template, where the header is never
   transparent): original brand colours, white hidden. */
.site-logo__img--white {
	opacity: 0;
}

.site-logo__img--color {
	opacity: 1;
}

/* Homepage header floating over the dark hero: swap to the light/white
   lockup for contrast. Once .is-scrolled lands (solid, light header
   ground) it crossfades back to the original-colour version above. */
.home .site-header:not(.is-scrolled) .site-logo__img--white {
	opacity: 1;
}

.home .site-header:not(.is-scrolled) .site-logo__img--color {
	opacity: 0;
}

/* Mobile nav toggle */
.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 18px;
	height: 1px;
	background: currentColor;
}

.main-navigation {
	flex-basis: 100%;
	display: none;
}

.main-navigation.is-open {
	display: block;
	background: rgb(247 239 225 / 96%);
	color: var(--color-ink);
	margin-top: var(--space-sm);
	padding: var(--space-sm);
	border-radius: 2px;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.main-navigation a {
	display: block;
	padding: 0.5rem 0;
	font-size: var(--fs-nav);
	text-decoration: none;
	color: inherit;
	font-weight: 500;
}

@media (min-width: 768px) {
	.menu-toggle {
		display: none;
	}

	.main-navigation {
		display: block;
		flex-basis: auto;
		background: none !important;
		margin: 0;
		padding: 0;
	}

	.main-navigation ul {
		flex-direction: row;
		gap: var(--space-md);
	}
}

/* Sections ------------------------------------------------------------ */

.homepage {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.section {
	position: relative;
	width: 100%;
	padding-block: var(--space-xl);
	padding-inline: var(--yhl-gutter);
	overflow: hidden;
}

.section-inner {
	position: relative;
	max-width: var(--yhl-max-width);
	margin-inline: auto;
}

.section--dark {
	background: var(--color-ink);
	color: var(--color-cream);
}

/* Progressive-enhancement reveal hook: visible by default (no-JS / reduced
   motion safe). main.js sets the hidden starting state only when it is
   actually about to animate an element in. */
.js-reveal {
	will-change: transform, opacity;
}

/* Hero ------------------------------------------------------------------ */

.section--hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #180f08;
	color: var(--color-cream);
	padding-top: calc(var(--space-xl) + 3rem);
}

.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #17100a;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s var(--ease-editorial);
}

.hero__video.is-playing {
	opacity: 0.6;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 20%, rgb(58 42 23 / 55%) 0%, rgb(24 15 8 / 88%) 60%, #180f08 100%);
}

.hero__texture {
	position: absolute;
	inset: 0;
	background-image: var(--texture-noise);
	opacity: 0.5;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.hero__grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Wide enough that .hero__title (below) can hold its one-liner without
   fighting this container; .hero__lead still self-limits to 38ch on top
   of this, so the paragraph's own line length is unaffected. */
.hero__inner {
	max-width: 60rem;
}

/* Sized on its own clamp (decoupled from --fs-h1, which other, shorter
   headings still use) and allowed to sit outside .hero__inner's narrower
   reading width — tuned so "Because Every Meal Matters" fits on one line
   from the nowrap breakpoint below up through wide desktops, without
   ever going tiny to force it. Below that breakpoint it wraps normally. */
.hero__title {
	max-width: none;
	font-size: clamp(2.25rem, 1.65rem + 2.6vw, 3.75rem);
	margin-bottom: var(--space-md);
}

@media (min-width: 900px) {
	.hero__title {
		white-space: nowrap;
	}
}

.hero__lead {
	font-size: var(--fs-lead);
	font-family: var(--font-body);
	color: rgb(247 239 225 / 82%);
	max-width: 38ch;
}

.hero__scroll-cue {
	position: absolute;
	left: var(--yhl-gutter);
	bottom: var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.75;
}

.hero__scroll-line {
	display: block;
	width: 1px;
	height: 28px;
	background: currentColor;
	animation: yhl-scroll-cue 2.2s ease-in-out infinite;
}

@keyframes yhl-scroll-cue {
	0%, 100% {
		transform: scaleY(1);
		transform-origin: top;
	}
	50% {
		transform: scaleY(0.4);
		transform-origin: top;
	}
}

/* Floating rice-grain motif, pure CSS. */
.grain {
	position: absolute;
	width: 5px;
	height: 9px;
	border-radius: 60% 60% 60% 60% / 70% 70% 40% 40%;
	background: var(--color-gold);
	opacity: 0.35;
	animation: yhl-grain-drift 14s ease-in-out infinite;
}

.grain:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.grain:nth-child(2) { top: 62%; left: 22%; animation-delay: -3s; transform: rotate(20deg); }
.grain:nth-child(3) { top: 32%; left: 78%; animation-delay: -6s; }
.grain:nth-child(4) { top: 74%; left: 68%; animation-delay: -9s; transform: rotate(-15deg); }
.grain:nth-child(5) { top: 12%; left: 55%; animation-delay: -2s; }
.grain:nth-child(6) { top: 50%; left: 40%; animation-delay: -11s; transform: rotate(35deg); }

@keyframes yhl-grain-drift {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.25;
	}
	50% {
		transform: translate(6px, -14px) rotate(12deg);
		opacity: 0.45;
	}
}

/* Introduction ---------------------------------------------------------- */

/* One full-width statement, sized on its own clamp so "We Plant · We
   Mill · We Pack · WE CARE" reads as a single confident line from the
   nowrap breakpoint up, rather than fighting a narrow column for space. */
.intro__statement {
	max-width: none;
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

@media (min-width: 960px) {
	.intro__statement {
		white-space: nowrap;
	}
}

.intro__dot {
	color: var(--color-accent);
	opacity: 0.6;
	padding-inline: 0.15em;
}

.intro__split {
	margin-top: var(--space-lg);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.intro__copy .lead {
	margin-bottom: var(--space-sm);
}

/* The collage keeps its own natural photo-grid shape (see the source
   asset) rather than sitting in a card — no border, radius or shadow —
   and fades softly into the section on the edge that still carries a
   sliver of the original slide's background, so it reads as art bleeding
   into the page rather than a dropped-in rectangle. */
.intro__collage {
	justify-self: center;
	width: 100%;
	max-width: 30rem;
}

.intro__collage img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 5%, #000 22%);
	mask-image: linear-gradient(115deg, transparent 0%, transparent 5%, #000 22%);
}

/* Brands ------------------------------------------------------------- */

.section--brands {
	background: var(--color-cream-deep);
}

/* Long, sentence-length statement — its own clamp, more restrained than
   a short section title (--fs-h2 would run too large for 76 characters
   worth of copy), tuned to hold one line from the nowrap breakpoint up. */
.brands__statement {
	max-width: none;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.3;
	font-size: clamp(1.375rem, 0.6875rem + 1.25vw, 1.625rem);
}

@media (min-width: 960px) {
	.brands__statement {
		white-space: nowrap;
	}
}

.brand-grid {
	margin-top: var(--space-lg);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.brand-card {
	padding: var(--space-md);
	background: var(--color-cream);
	border: 1px solid var(--color-line);
	border-radius: 4px;
}

/* Standardised brand-logo presentation — reusable anywhere on the site a
   partner/brand mark needs to sit at equal visual weight regardless of
   its own native proportions. The box (dimensions, padding, alignment)
   is identical for every logo; object-fit: contain scales each mark to
   fit inside it without ever stretching, cropping or redrawing the
   source artwork — the box height is effectively the shared "maximum
   visual height" every logo is held to. */
.brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-sm);
	padding: var(--space-md);
	border-radius: 3px;
	background: #fff;
	border: 1px solid var(--color-line);
}

.brand-logo__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brand-card h3 {
	margin-bottom: var(--space-2xs);
}

.brand-card p {
	margin: 0;
	font-size: var(--fs-small);
	opacity: 0.75;
}

/* Stories --------------------------------------------------------------- */

.card-grid {
	margin-top: var(--space-lg);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.story-card__image {
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-sm);
	border-radius: 4px;
	background: linear-gradient(150deg, var(--color-sack) 0%, var(--color-terracotta) 100%);
}

.story-card h3 {
	font-size: 1.25rem;
	margin-bottom: var(--space-2xs);
}

.story-card p {
	font-size: var(--fs-small);
	opacity: 0.8;
}

/* Say Hi footer -------------------------------------------------------- */

.site-footer {
	margin-top: auto;
	width: 100%;
}

.home .site-footer {
	background: var(--color-ink);
	color: var(--color-cream);
	padding-block: var(--space-xl) var(--space-lg);
}

.say-hi__inner {
	padding-inline: var(--yhl-gutter);
}

.say-hi__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--space-sm);
}

.home .site-footer .lead {
	color: rgb(247 239 225 / 78%);
	font-family: var(--font-body);
}

.footer-widgets,
.footer-meta {
	padding-inline: var(--yhl-gutter);
}

.footer-meta {
	margin-top: var(--space-lg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-line-on-dark);
}

:not(.home) .footer-meta {
	border-top-color: var(--color-line);
}

.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.footer-navigation a {
	text-decoration: none;
}

.site-info {
	font-size: var(--fs-small);
	opacity: 0.75;
}

.site-info p {
	margin: 0;
}

/* Opening reveal — metallic YHL logo, then a silk lift ------------------
   A single autoplaying cinematic sequence (not scroll-driven — see the
   technique note at the top of silk-reveal.js for why, informed by
   studying the interaction reference). This CSS lays out the fixed
   overlay, the silk material, the metallic logo, and the safety nets
   that guarantee a visitor can never get stuck. */

.silk-reveal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	background-color: #241a10;
}

.silk-reveal__defs {
	position: absolute;
	width: 0;
	height: 0;
}

.silk-reveal__sheet-wrap {
	position: absolute;
	inset: -6% -6%;
	perspective: 1400px;
	transform-style: preserve-3d;
}

/* Soft, smooth silk — layered gradients standing in for draped fabric:
   two soft highlight pools, a handful of blurred diagonal "fold" bands,
   and a warm, muted base tone (close to the reference's own cloth
   colour). Deliberately smooth, not woven. */
.silk-reveal__sheet {
	position: absolute;
	inset: 0;
	transform-origin: top center;
	background-color: #a8916a;
	background-image:
		radial-gradient(ellipse 90% 70% at 25% 15%, rgb(255 250 238 / 42%) 0%, transparent 55%),
		radial-gradient(ellipse 80% 90% at 80% 78%, rgb(230 210 175 / 28%) 0%, transparent 60%),
		linear-gradient(
			112deg,
			transparent 0%,
			rgb(255 255 255 / 15%) 12%,
			transparent 26%,
			rgb(40 28 14 / 16%) 42%,
			transparent 58%,
			rgb(255 255 255 / 11%) 74%,
			transparent 92%
		),
		linear-gradient(155deg, #dbc5a4 0%, #cdb083 30%, #a8916a 58%, #7d6a4a 82%, #5c4f39 100%);
}

/* A slow, softly blurred highlight that drifts across the silk — the
   sheen real fabric catches as it moves. Independent of the reveal
   timeline; pauses under reduced motion. */
.silk-reveal__sheen {
	position: absolute;
	inset: -25%;
	background: radial-gradient(ellipse 55% 28% at 50% 50%, rgb(255 250 235 / 50%) 0%, transparent 70%);
	filter: blur(50px);
	mix-blend-mode: soft-light;
	animation: silk-drift 18s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes silk-drift {
	0% {
		transform: translate(-18%, -12%) scale(1);
	}
	50% {
		transform: translate(12%, 10%) scale(1.16);
	}
	100% {
		transform: translate(-8%, 14%) scale(0.92);
	}
}

.silk-reveal__logo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

/* Metallic YHL mark: the logo's own PNG is used purely as a mask (its
   shape/proportions untouched) over a brushed-metal gradient, with an
   SVG lighting filter (#yhl-logo-metal, defined in front-page.php)
   adding one controlled highlight for embossed depth — not a glossy
   bevel, not chrome. */
.silk-reveal__logo-mark {
	width: clamp(160px, 20vw, 280px);
	aspect-ratio: 1;
	background: linear-gradient(135deg, #2b2620 0%, #5c4f39 22%, #a8916a 45%, #e7d9bd 58%, #8a7452 72%, #2f281e 100%);
	-webkit-mask-image: var(--yhl-logo-src);
	mask-image: var(--yhl-logo-src);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	filter: url(#yhl-logo-metal) drop-shadow(0 10px 26px rgb(0 0 0 / 40%));
}

/* Locks background scroll for the brief autoplay duration so a visitor
   can't scroll past the fixed layer into content still hidden beneath
   it. Always cleared on completion or by the fallback. */
.reveal-active,
.reveal-active body {
	overflow: hidden;
	height: 100%;
}

/* No-JS / load-failure safety nets: never let the reveal trap a visitor. */
.no-js .silk-reveal {
	display: none;
}

.yhl-reveal-fallback .silk-reveal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* Responsive — desktop-first, adapting down ------------------------------ */

@media (max-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.intro__split {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.intro__collage {
		max-width: 24rem;
	}

	.intro__collage img {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 640px) {
	.brand-grid {
		grid-template-columns: 1fr;
	}

	.card-grid {
		grid-template-columns: 1fr;
	}

	.hero__scroll-cue {
		bottom: var(--space-md);
	}

	.silk-reveal__logo-mark {
		width: clamp(120px, 34vw, 200px);
	}
}

/* Motion & accessibility -------------------------------------------------- */
/* .screen-reader-text base rules live in style.css, loaded before this file. */

@media (prefers-reduced-motion: reduce) {
	.grain,
	.hero__scroll-line,
	.silk-reveal__sheen {
		animation: none !important;
	}

	.hero__video {
		display: none;
	}

	/* Belt-and-suspenders: cursor.js already skips init entirely under
	   reduced motion, so .yhl-custom-cursor/.yhl-cursor never appear in
	   that case — this just guarantees the native cursor stays available
	   if that class ever ended up on the page regardless. */
	.yhl-custom-cursor,
	.yhl-custom-cursor * {
		cursor: auto !important;
	}

	.yhl-cursor {
		display: none !important;
	}
}

/* Custom cursor — rice grain ---------------------------------------------
   Desktop-with-precise-pointer only; see assets/js/cursor.js. The class
   below is added to <html> only after that feature/motion check passes,
   so touch and reduced-motion visitors never lose their native cursor. */

.yhl-custom-cursor,
.yhl-custom-cursor * {
	cursor: none;
}

.yhl-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.25s var(--ease-editorial);
	will-change: transform;
}

.yhl-cursor.is-visible {
	opacity: 1;
}

.yhl-cursor__grain {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%) rotate(-18deg) scale(1);
	transform-origin: center;
	transition: transform 0.35s var(--ease-editorial);
	filter: drop-shadow(0 1px 2px rgb(36 26 16 / 30%));
}

.yhl-cursor.is-hover .yhl-cursor__grain {
	transform: translate(-50%, -50%) rotate(-6deg) scale(1.45);
}

.yhl-cursor__body {
	fill: var(--color-cream);
	stroke: var(--color-ink);
	stroke-width: 0.6;
	stroke-opacity: 0.22;
}

.yhl-cursor__seam {
	fill: none;
	stroke: var(--color-ink);
	stroke-width: 0.5;
	stroke-opacity: 0.32;
	stroke-linecap: round;
}