/* Home */

.home-page {
	--section-y: clamp(84px, 10vw, 148px);
	--section-head-gap: clamp(44px, 6vw, 72px);
	position: relative;
}

/* Light home sections are transparent so the fixed leaf field reads through. */
.home-manifesto,
.home-products,
.home-cats,
.home-ritual,
.home-blog,
.home-about { background: transparent; }

.home-products,
.home-ritual,
.home-blog,
.home-about {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
}

.home-page h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; color: var(--ink); }

/* Hero — flush to the fold. svh, not dvh: the URL bar resizing a dvh hero
   shifted the whole page below it at every scroll stop. vh is the fallback. */
.home-hero {
	position: relative;
	min-height: max(100vh, 600px);
	min-height: max(100svh, 600px);
	overflow: hidden;
	isolation: isolate;
	background: #0c0906;
	color: var(--cream-text);
}
.home-hero__stage { position: absolute; inset: 0; z-index: 0; }
.home-hero__media {
	position: absolute;
	inset: -2.5%;
	width: 105%;
	height: 105%;
	background-position: center 42%;
	background-size: cover;
	object-fit: cover;
	filter: brightness(0.6) saturate(0.86);
	transform-origin: 62% 56%;
	animation: hero-pan 42s ease-in-out infinite alternate;
}
@keyframes hero-pan {
	from { transform: scale(1.05) translate(0, 0); }
	to   { transform: scale(1.13) translate(-1.8%, -1.2%); }
}
.home-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 30%;
	background:
		linear-gradient(102deg, rgba(11, 8, 5, 0.88) 0%, rgba(11, 8, 5, 0.66) 30%, rgba(11, 8, 5, 0.2) 56%, transparent 78%),
		linear-gradient(0deg, rgba(9, 6, 3, 0.74) 0%, transparent 46%),
		linear-gradient(180deg, rgba(11, 8, 5, 0.3) 0%, rgba(11, 8, 5, 0.24) 100%);
}
.home-hero__fx { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.home-hero__rays {
	position: absolute;
	inset: -25%;
	background: repeating-linear-gradient(112deg, transparent 0 26px, rgba(255, 243, 212, 0.17) 42px, transparent 74px);
	-webkit-mask-image: radial-gradient(ellipse 72% 95% at 12% -6%, #000, transparent 60%);
	        mask-image: radial-gradient(ellipse 72% 95% at 12% -6%, #000, transparent 60%);
	mix-blend-mode: screen;
	filter: blur(2px);
	opacity: 0.4;
	animation: hero-rays 15s ease-in-out infinite alternate;
}
@keyframes hero-rays {
	from { opacity: 0.3; transform: translateX(-2%) skewX(-2deg); }
	to   { opacity: 0.58; transform: translateX(2%) skewX(2deg); }
}
.home-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 75% at 8% -4%, rgba(255, 234, 188, 0.3), transparent 58%);
	mix-blend-mode: screen;
}
.home-hero__steam { position: absolute; left: 61.5%; top: 51%; width: 170px; height: 120px; filter: blur(10px); opacity: 0.85; }
.home-hero__steam i {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 64px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 248, 232, 0.5), transparent 70%);
	animation: hero-steam 8s linear infinite;
	animation-delay: var(--steam-d, 0s);
}
@keyframes hero-steam {
	0%   { opacity: 0; transform: translate(-50%, 0) scale(1, 1); }
	18%  { opacity: 0.8; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--steam-x, 0px)), -110px) scale(2.6, 2); }
}
.home-hero__vinyl {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 6;
	height: min(max(420px, 96%), 76vw);
	aspect-ratio: 1;
	transform: translate(38%, calc(-50% + var(--hps-y, 0px)));
	filter: drop-shadow(0 26px 50px rgba(20, 12, 6, 0.55));
	display: none;
}
.home-hero__content {
	--hero-copy-max: 750px;
	--hero-pad-left: var(--rail);
	--hero-pad-right: var(--rail);
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: max(100vh, 600px);
	min-height: max(100svh, 600px);
	max-width: calc(var(--hero-copy-max) + var(--hero-pad-left) + var(--hero-pad-right));
	padding: calc(var(--nav-height) + 36px) var(--hero-pad-right) 40px var(--hero-pad-left);
	gap: 28px;
}
.home-hero__text {
	--hero-text-gap: clamp(18px, 3vw, 28px);
	margin-block: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hero-text-gap);
}
.home-hero__eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold-bright); }
.home-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-landing-title);
	line-height: 1;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: #f5eedd;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 3px 22px rgba(0, 0, 0, 0.5), 0 0 70px rgba(0, 0, 0, 0.4);
}
.home-hero__accent {
	margin: 0;
	margin-left: calc(var(--hero-text-gap) * 0.5);
	font-family: var(--font-slogan);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(18px, 7.4vw, 59.5px);
	line-height: 1.5;
	letter-spacing: 0.005em;
	text-transform: none;
	color: #e9d9ad;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: calc(var(--hero-text-gap) * 1.1);
}

/* Keep the hero's bottom edge on the fold when WordPress's admin bar bumps the page. */
.admin-bar .home-hero,
.admin-bar .home-hero__content {
	min-height: max(calc(100svh - var(--wp-admin--admin-bar--height, 32px)), 600px);
}

/* Cinebreak — layered separator: parallax background, combinable effects, packshot.
   Per-band content (images, effects, light anchor) comes from home settings;
   the knobs below and the parallax depths in home.js stay code-side. */
.home-cinebreak-wrap {
	--fx-gain: 1;
	--fx-hue: 0deg;
	--bg-blur: 3px;
	--h-gain: 1.05;
	--pack-scale: 1.35;
	--pack-bias: -80px;
	--pack-inset: 25%;
	--pan-pad: 24px; /* Keep ≈ max(24px, bg depth × 0.55 − 28px). */
	--kb-state: running;

	/* Travel must be a whole number of the fixed 700px/500px tiles or the loop seams;
	   mobile runs one tile per cycle at halved duration to keep the same px/s drift. */
	--mist-travel: 700px;
	--mist-half: -350px;
	--mist-end: -700px;
	--mist3-travel: 500px;
	--mist3-half: -250px;
	--mist3-end: -500px;

	position: relative;
}
.home-cinebreak-wrap--right { --px: calc(100% - var(--pack-inset)); }
.home-cinebreak-wrap--left { --px: var(--pack-inset); }

.home-cinebreak {
	position: relative;
	isolation: isolate;
	height: calc(clamp(190px, 22vw, 300px) * var(--h-gain));
	margin: 0;
	overflow: hidden;
	contain: paint;
	background: #0c0906;
}
.home-cinebreak__pan {
	position: absolute;
	z-index: 0;
	top: calc(-28px - var(--pan-pad));
	bottom: calc(-28px - var(--pan-pad));
	left: 0;
	right: 0;
	transform: translateY(var(--fcb, 0));
}
.home-cinebreak__ken {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: saturate(1.06) contrast(1.04) blur(var(--bg-blur));
	animation: cinebreak-pan 38s ease-in-out infinite alternate;
	animation-play-state: var(--kb-state);
}
@keyframes cinebreak-pan {
	from { transform: translateX(-1.6%) scale(1.05); }
	to   { transform: translateX(1.6%) scale(1.1); }
}

/* Ambient light sweep — godrays replace it; starlight drops it */
.home-cinebreak::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: -28%;
	pointer-events: none;
	background:
		radial-gradient(circle at var(--lx, 76%) 18%, rgba(255, 248, 218, 0.5) 0, rgba(241, 203, 106, 0.2) 2%, rgba(212, 168, 67, 0.08) 7%, transparent 15%),
		conic-gradient(from 205deg at var(--lx, 76%) -8%, transparent 0 42%, rgba(255, 239, 190, 0.12) 45%, transparent 49%, rgba(241, 203, 106, 0.06) 52%, transparent 56%);
	mix-blend-mode: screen;
	filter: blur(2px) hue-rotate(var(--fx-hue));
	animation: cinebreak-light 15s ease-in-out infinite alternate;
}
@keyframes cinebreak-light {
	from { transform: translate3d(-1.5%, 1%, 0) rotate(-0.5deg) scale(1); opacity: calc(0.55 * var(--fx-gain)); }
	to   { transform: translate3d(2%, -1%, 0) rotate(0.5deg) scale(1.05); opacity: calc(0.85 * var(--fx-gain)); }
}
.home-cinebreak--fx-rays::before, .home-cinebreak--fx-star::before { content: none; }

.home-cinebreak__fx { position: absolute; z-index: 1; inset: 0; pointer-events: none; transform: translateY(var(--fcb-fx, 0)); }
.home-cinebreak__grade {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(8, 5, 3, 0.55), transparent 12%),
		linear-gradient(0deg, rgba(8, 5, 3, 0.55), transparent 12%),
		linear-gradient(90deg, rgba(10, 7, 4, 0.2), transparent 32%, transparent 78%, rgba(10, 7, 4, 0.08)),
		linear-gradient(180deg, rgba(10, 7, 4, 0.34), rgba(10, 7, 4, 0.06) 40%, rgba(10, 7, 4, 0.06) 62%, rgba(10, 7, 4, 0.42));
}

/* Edge styles */
.home-cinebreak-wrap--frame .home-cinebreak {
	border-block: 1px solid rgba(146, 106, 52, 0.62);
	box-shadow: 0 1px 0 rgba(255, 252, 242, 0.85), 0 -1px 0 rgba(255, 252, 242, 0.85);
}
.home-cinebreak-wrap--frame .home-cinebreak__grade::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid rgba(236, 205, 140, 0.3);
}
.home-cinebreak-wrap--fade .home-cinebreak {
	height: calc(clamp(190px, 22vw, 300px) * var(--h-gain) * 1.22);
	background: transparent;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.72) 13%, #000 19%, #000 81%, rgba(0, 0, 0, 0.72) 87%, rgba(0, 0, 0, 0.3) 92%, rgba(0, 0, 0, 0.08) 96%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.72) 13%, #000 19%, #000 81%, rgba(0, 0, 0, 0.72) 87%, rgba(0, 0, 0, 0.3) 92%, rgba(0, 0, 0, 0.08) 96%, transparent 100%);
}
.home-cinebreak-wrap--fade .home-cinebreak__grade { background: linear-gradient(180deg, rgba(10, 7, 4, 0.2), rgba(10, 7, 4, 0.05) 45%, rgba(10, 7, 4, 0.26)); }

/* Packshot — mid slot clips behind effects; front slot breaks the frame */
.home-cinebreak__pack { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.home-cinebreak__packout { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.home-cinebreak__packshot {
	position: absolute;
	left: var(--px, 75%);
	bottom: calc(-3% + var(--pack-bias));
	width: auto;
	height: 116%;
	max-width: none;
	transform: translate(-50%, 0) translateY(var(--fcb-pack, 0)) scale(var(--pack-scale));
	transform-origin: 50% 100%;
	filter: drop-shadow(0 22px 26px rgba(16, 9, 4, 0.5)) drop-shadow(0 4px 8px rgba(16, 9, 4, 0.35));
}
.home-cinebreak__pack .home-cinebreak__packshot { height: 96%; bottom: calc(-2% + var(--pack-bias)); filter: drop-shadow(0 14px 20px rgba(16, 9, 4, 0.55)); }
.home-cinebreak.is-live .home-cinebreak__pan,
.home-cinebreak.is-live .home-cinebreak__packshot,
.home-cinebreak.is-live ~ .home-cinebreak__packout .home-cinebreak__packshot { will-change: transform; }

/* Godrays — in the pan so the fan tracks the background; --rtilt angles the sweep */
.home-cinebreak__ray, .home-cinebreak__ray2 {
	position: absolute;
	inset: 0 -14%;
	pointer-events: none;
	mix-blend-mode: screen;
	transform-origin: var(--lx) -12%;
	-webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 18%, #000 78%, transparent 98%);
	mask-image: linear-gradient(180deg, transparent 2%, #000 18%, #000 78%, transparent 98%);
}
.home-cinebreak__ray {
	background: conic-gradient(from calc(138deg + var(--rtilt, 12deg)) at var(--lx) -12%,
		transparent 0deg,
		rgba(255, 244, 206, 0.42) 6deg, transparent 10deg,
		transparent 15deg, rgba(255, 238, 186, 0.28) 18deg, transparent 21deg,
		transparent 28deg, rgba(255, 246, 214, 0.5) 33deg, transparent 38deg,
		transparent 43deg, rgba(255, 238, 186, 0.34) 45deg, transparent 48deg,
		transparent 54deg, rgba(255, 248, 218, 0.56) 58deg, transparent 63deg,
		transparent 69deg, rgba(255, 238, 186, 0.3) 71deg, transparent 74deg,
		transparent 80deg, rgba(255, 244, 206, 0.46) 84deg, transparent 89deg,
		transparent 96deg, rgba(255, 240, 194, 0.26) 99deg, transparent 103deg,
		transparent 360deg);
	filter: blur(6px) hue-rotate(var(--fx-hue));
	animation: cinebreak-rays 13s ease-in-out infinite alternate;
}
.home-cinebreak__ray2 {
	background: conic-gradient(from calc(130deg + var(--rtilt, 12deg)) at var(--lx) -12%,
		transparent 0deg,
		rgba(255, 240, 194, 0.3) 10deg, transparent 20deg,
		transparent 30deg, rgba(255, 246, 214, 0.36) 40deg, transparent 50deg,
		transparent 60deg, rgba(255, 240, 194, 0.3) 72deg, transparent 84deg,
		transparent 94deg, rgba(255, 246, 214, 0.26) 102deg, transparent 112deg,
		transparent 360deg);
	filter: blur(14px) hue-rotate(var(--fx-hue));
	animation: cinebreak-rays2 21s ease-in-out infinite alternate;
}
@keyframes cinebreak-rays {
	from { transform: translate3d(-2.5%, 0, 0) rotate(-3.2deg); opacity: calc(0.5 * var(--fx-gain)); }
	to   { transform: translate3d(2%, 0, 0) rotate(2.8deg); opacity: calc(0.9 * var(--fx-gain)); }
}
@keyframes cinebreak-rays2 {
	from { transform: translate3d(2%, 0, 0) rotate(3.4deg); opacity: calc(0.75 * var(--fx-gain)); }
	to   { transform: translate3d(-2.5%, 0, 0) rotate(-2.6deg); opacity: calc(0.4 * var(--fx-gain)); }
}

/* Glow anchored to the light source: bg images are width-locked 1430×600,
   so displayed height = 42vw and --lyi (% of image height) maps to 0.42vw units */
.home-cinebreak__glow {
	position: absolute;
	left: var(--lx);
	top: calc(0.42vw * var(--lyi));
	width: 46vw;
	height: 46vw;
	pointer-events: none;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255, 248, 218, 0.75) 0 3%, rgba(241, 203, 106, 0.4) 12%, rgba(212, 168, 67, 0.16) 26%, transparent 52%);
	mix-blend-mode: screen;
	filter: blur(3px) hue-rotate(var(--fx-hue));
	animation: cinebreak-glow 9s ease-in-out infinite alternate;
}
@keyframes cinebreak-glow {
	from { opacity: calc(0.55 * var(--fx-gain)); transform: translate(-50%, -50%) scale(1); }
	to   { opacity: calc(0.9 * var(--fx-gain)); transform: translate(-50%, -50%) scale(1.06); }
}

/* Gold dust — three seamless drifts; translate by 2× tile height keeps the loop invisible */
.home-cinebreak__dust, .home-cinebreak__dust2, .home-cinebreak__dust3 { position: absolute; left: -4%; right: -4%; top: 0; pointer-events: none; mix-blend-mode: screen; }
.home-cinebreak__dust {
	height: calc(100% + 480px);
	background-image:
		radial-gradient(circle at center, rgba(255, 246, 218, 1) 0, rgba(255, 246, 218, 0.8) 0.8px, transparent 1.5px),
		radial-gradient(circle at center, rgba(255, 238, 196, 0.9) 0, rgba(255, 238, 196, 0.6) 0.7px, transparent 1.4px),
		radial-gradient(circle at center, rgba(255, 250, 230, 1) 0, transparent 1.3px),
		radial-gradient(circle at center, rgba(241, 203, 106, 0.85) 0, transparent 1.5px),
		radial-gradient(circle at center, rgba(255, 246, 218, 0.7) 0, transparent 1.1px);
	background-size: 240px 240px;
	background-position: 13px 27px, 92px 164px, 152px 62px, 203px 214px, 55px 122px;
	filter: hue-rotate(var(--fx-hue));
	opacity: calc(0.95 * var(--fx-gain));
	animation: cinebreak-dust 22s linear infinite;
}
.home-cinebreak__dust2 {
	height: calc(100% + 600px);
	background-image:
		radial-gradient(circle at center, rgba(255, 242, 204, 0.85) 0, rgba(255, 242, 204, 0.5) 1.4px, transparent 2.6px),
		radial-gradient(circle at center, rgba(241, 203, 106, 0.75) 0, rgba(241, 203, 106, 0.4) 1.2px, transparent 2.4px),
		radial-gradient(circle at center, rgba(255, 248, 222, 0.7) 0, transparent 2.2px);
	background-size: 300px 300px;
	background-position: 40px 70px, 190px 220px, 120px 150px;
	filter: blur(0.5px) hue-rotate(var(--fx-hue));
	opacity: calc(0.85 * var(--fx-gain));
	animation: cinebreak-dust2 34s linear infinite;
}
.home-cinebreak__dust3 {
	height: calc(100% + 840px);
	background-image:
		radial-gradient(circle at center, rgba(241, 203, 106, 0.6) 0 3px, rgba(241, 203, 106, 0.22) 5.5px, transparent 8px),
		radial-gradient(circle at center, rgba(255, 240, 200, 0.5) 0 2.4px, rgba(255, 240, 200, 0.18) 4.4px, transparent 7px),
		radial-gradient(circle at center, rgba(216, 176, 116, 0.5) 0 3.6px, transparent 9px);
	background-size: 420px 420px;
	background-position: 60px 90px, 300px 280px, 180px 380px;
	filter: blur(2.5px) hue-rotate(var(--fx-hue));
	opacity: calc(0.7 * var(--fx-gain));
	animation: cinebreak-dust3 52s linear infinite;
}
@keyframes cinebreak-dust  { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(6px, -240px, 0); } 100% { transform: translate3d(0, -480px, 0); } }
@keyframes cinebreak-dust2 { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-8px, -300px, 0); } 100% { transform: translate3d(0, -600px, 0); } }
@keyframes cinebreak-dust3 { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(10px, -420px, 0); } 100% { transform: translate3d(0, -840px, 0); } }

/* Petalfall — gilded petal tiles sinking with a sway */
.home-cinebreak__pet, .home-cinebreak__pet2 { position: absolute; left: -6%; right: -6%; pointer-events: none; mix-blend-mode: screen; }
.home-cinebreak__pet {
	top: -520px;
	bottom: -40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M0 -9 Q6.5 0 0 9 Q-6.5 0 0 -9' fill='%23f1cb6a' fill-opacity='.6' transform='translate(30 40) rotate(40)'/%3E%3Cpath d='M0 -7 Q5 0 0 7 Q-5 0 0 -7' fill='%23ffe9b8' fill-opacity='.55' transform='translate(150 90) rotate(-25)'/%3E%3Cpath d='M0 -10 Q7 0 0 10 Q-7 0 0 -10' fill='%23e8b95a' fill-opacity='.55' transform='translate(90 170) rotate(70)'/%3E%3Cpath d='M0 -6 Q4.5 0 0 6 Q-4.5 0 0 -6' fill='%23fff3d2' fill-opacity='.5' transform='translate(200 200) rotate(15)'/%3E%3Cpath d='M0 -8 Q6 0 0 8 Q-6 0 0 -8' fill='%23f1cb6a' fill-opacity='.45' transform='translate(210 20) rotate(-60)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	filter: hue-rotate(var(--fx-hue));
	opacity: min(1, calc(1.05 * var(--fx-gain)));
	animation: cinebreak-pet 18s linear infinite;
}
.home-cinebreak__pet2 {
	top: -700px;
	bottom: -40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M0 -13 Q9 0 0 13 Q-9 0 0 -13' fill='%23f1cb6a' fill-opacity='.5' transform='translate(60 80) rotate(55)'/%3E%3Cpath d='M0 -11 Q8 0 0 11 Q-8 0 0 -11' fill='%23ffe9b8' fill-opacity='.45' transform='translate(220 180) rotate(-40)'/%3E%3Cpath d='M0 -14 Q10 0 0 14 Q-10 0 0 -14' fill='%23e8b95a' fill-opacity='.4' transform='translate(140 280) rotate(20)'/%3E%3C/svg%3E");
	background-size: 320px 320px;
	filter: blur(1px) hue-rotate(var(--fx-hue));
	opacity: min(0.95, calc(1 * var(--fx-gain)));
	animation: cinebreak-pet2 28s linear infinite;
}
@keyframes cinebreak-pet  { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14px, 240px, 0); } 100% { transform: translate3d(0, 480px, 0); } }
@keyframes cinebreak-pet2 { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(12px, 320px, 0); } 100% { transform: translate3d(0, 640px, 0); } }

/* Mist — three clumped fog banks, counter-drifting with a slow bob */
.home-cinebreak__mist, .home-cinebreak__mist2, .home-cinebreak__mist3 {
	position: absolute;
	left: 0;
	top: -8%;
	height: 116%;
	pointer-events: none;
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(0deg, #000 34%, transparent 88%);
	mask-image: linear-gradient(0deg, #000 34%, transparent 88%);
}
.home-cinebreak__mist, .home-cinebreak__mist2 { width: calc(100% + var(--mist-travel)); }
.home-cinebreak__mist {
	background-image:
		radial-gradient(ellipse 300px 84px at 170px 76%, rgba(236, 241, 246, 0.7) 0 30%, rgba(232, 238, 244, 0.34) 55%, transparent 76%),
		radial-gradient(ellipse 220px 62px at 330px 92%, rgba(244, 247, 249, 0.6) 0 32%, transparent 72%),
		radial-gradient(ellipse 360px 100px at 540px 86%, rgba(240, 244, 246, 0.55) 0 30%, rgba(236, 241, 246, 0.26) 56%, transparent 78%),
		radial-gradient(ellipse 200px 56px at 650px 64%, rgba(230, 237, 244, 0.5) 0 34%, transparent 72%);
	background-size: 700px 100%;
	filter: blur(10px) hue-rotate(var(--fx-hue));
	opacity: calc(0.85 * var(--fx-gain));
	animation: cinebreak-mist 26s linear infinite;
}
.home-cinebreak__mist2 {
	background-image:
		radial-gradient(ellipse 320px 110px at 220px 92%, rgba(248, 246, 236, 0.58) 0 32%, rgba(248, 244, 230, 0.26) 58%, transparent 80%),
		radial-gradient(ellipse 400px 92px at 560px 72%, rgba(238, 241, 242, 0.48) 0 34%, transparent 74%);
	background-size: 700px 100%;
	filter: blur(14px) hue-rotate(var(--fx-hue));
	opacity: calc(0.68 * var(--fx-gain));
	animation: cinebreak-mist 40s linear infinite reverse;
}
.home-cinebreak__mist3 {
	width: calc(100% + var(--mist3-travel));
	background-image:
		radial-gradient(ellipse 190px 46px at 120px 86%, rgba(246, 248, 250, 0.6) 0 32%, transparent 70%),
		radial-gradient(ellipse 240px 56px at 370px 96%, rgba(240, 244, 248, 0.5) 0 34%, transparent 72%);
	background-size: 500px 100%;
	filter: blur(6px) hue-rotate(var(--fx-hue));
	opacity: calc(0.55 * var(--fx-gain));
	animation: cinebreak-mist3 16s linear infinite;
}
@keyframes cinebreak-mist  { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(var(--mist-half), -7px, 0); } 100% { transform: translate3d(var(--mist-end), 0, 0); } }
@keyframes cinebreak-mist3 { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(var(--mist3-half), 5px, 0); } 100% { transform: translate3d(var(--mist3-end), 0, 0); } }

/* Starlight — warm haloed stars, three twinkle phases */
.home-cinebreak__star, .home-cinebreak__star2, .home-cinebreak__star3 { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; filter: hue-rotate(var(--fx-hue)); }
.home-cinebreak__star {
	background-image:
		radial-gradient(circle at center, rgba(255, 240, 180, 1) 0 1.6px, rgba(255, 232, 160, 0.5) 3.6px, rgba(255, 228, 150, 0.18) 7px, transparent 11px),
		radial-gradient(circle at center, rgba(255, 236, 170, 0.95) 0 1.2px, rgba(255, 232, 160, 0.4) 3px, rgba(255, 228, 150, 0.14) 6px, transparent 9px),
		radial-gradient(ellipse 1.5px 11px at center, rgba(255, 244, 196, 1) 0 45%, transparent 100%),
		radial-gradient(ellipse 11px 1.5px at center, rgba(255, 244, 196, 1) 0 45%, transparent 100%),
		radial-gradient(circle at center, rgba(255, 238, 176, 0.9) 0 1px, rgba(255, 232, 160, 0.32) 2.6px, rgba(255, 228, 150, 0.12) 5px, transparent 8px);
	background-size: 260px 260px;
	background-position: 40px 50px, 150px 140px, 210px 80px, 210px 80px, 100px 200px;
	animation: cinebreak-star 4.2s ease-in-out infinite alternate;
}
.home-cinebreak__star2 {
	background-image:
		radial-gradient(circle at center, rgba(255, 238, 176, 0.95) 0 1.4px, rgba(255, 232, 160, 0.45) 3.2px, rgba(255, 228, 150, 0.16) 6.4px, transparent 10px),
		radial-gradient(ellipse 1.4px 10px at center, rgba(255, 244, 196, 0.95) 0 45%, transparent 100%),
		radial-gradient(ellipse 10px 1.4px at center, rgba(255, 244, 196, 0.95) 0 45%, transparent 100%),
		radial-gradient(circle at center, rgba(255, 234, 165, 0.85) 0 1.1px, rgba(255, 232, 160, 0.32) 2.8px, rgba(255, 228, 150, 0.12) 5.4px, transparent 8.6px);
	background-size: 320px 320px;
	background-position: 250px 190px, 60px 260px, 60px 260px, 170px 30px;
	animation: cinebreak-star 6s ease-in-out -2.1s infinite alternate;
}
.home-cinebreak__star3 {
	background-image:
		radial-gradient(circle at center, rgba(255, 236, 168, 0.8) 0 2.8px, rgba(255, 232, 160, 0.35) 6.5px, rgba(255, 228, 150, 0.14) 11px, transparent 16px),
		radial-gradient(circle at center, rgba(255, 240, 180, 0.7) 0 2.4px, rgba(255, 232, 160, 0.28) 5.6px, rgba(255, 228, 150, 0.12) 9.5px, transparent 14px);
	background-size: 380px 380px;
	background-position: 120px 90px, 300px 240px;
	filter: blur(1.6px) hue-rotate(var(--fx-hue));
	animation: cinebreak-star 7.5s ease-in-out -3.6s infinite alternate;
}
@keyframes cinebreak-star { from { opacity: calc(0.15 * var(--fx-gain)); } to { opacity: calc(1 * var(--fx-gain)); } }

/* Offscreen bands pause all their animation (home.js toggles is-live) */
.home-cinebreak:not(.is-live) *, .home-cinebreak:not(.is-live)::before { animation-play-state: paused; }
.is-motion-observed:not(.is-live) *,
.is-motion-observed:not(.is-live)::before,
.is-motion-observed:not(.is-live)::after { animation-play-state: paused !important; }

@media (max-width: 780px) {
	html.is-mobile-scrolling .home-page *,
	html.is-mobile-scrolling .leaf__sprite { animation-play-state: paused !important; }

	.home-cinebreak__mist { animation-duration: 13s; }

	.home-cinebreak__ray2,
	.home-cinebreak__dust2,
	.home-cinebreak__dust3,
	.home-cinebreak__pet2,
	.home-cinebreak__mist2,
	.home-cinebreak__mist3,
	.home-cinebreak__star2,
	.home-cinebreak__star3 { display: none; }
}

/* Manifesto */
.home-manifesto { position: relative; overflow: hidden; padding: var(--section-y) var(--rail); text-align: center; }
.home-manifesto__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.home-manifesto__rings span {
	grid-area: 1 / 1;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border: 1px solid rgba(168, 126, 48, 0.36);
	opacity: 0;
	animation: manifesto-ripple 6.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
	animation-delay: calc(var(--i, 0) * 2.2s);
}
@keyframes manifesto-ripple {
	0%   { transform: scale(0.18); opacity: 0.8; }
	70%  { opacity: 0.25; }
	100% { transform: scale(4.6); opacity: 0; }
}
.home-manifesto__inner { position: relative; z-index: 1; }
.home-manifesto__orn { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); margin-bottom: 28px; }
.home-manifesto__orn::before,
.home-manifesto__orn::after { content: ""; height: 1px; width: clamp(50px, 10vw, 100px); background: currentColor; opacity: 0.7; }
.home-manifesto__diamond { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.home-manifesto__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(34px, 7vw, 56px);
	letter-spacing: 0.04em;
	line-height: 1.1;
	max-width: 22ch;
	margin: 0 auto;
	color: var(--ink);
}
.home-manifesto__title em { display: inline-block; }
.home-manifesto__body {
	color: var(--ink-soft);
	max-width: 56ch;
	margin: 28px auto 0;
	line-height: 1.55;
}
.home-manifesto__signoff {
	margin: 30px 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(22px, 5vw, 26px);
	letter-spacing: 0.06em;
	color: var(--bronze);
}
.home-manifesto__signoff::before,
.home-manifesto__signoff::after { content: "—"; margin: 0 0.5em; color: rgba(181, 137, 79, 0.5); }

/* Products */
.home-products { padding: var(--section-y) var(--rail); }
.home-products__head { text-align: center; margin-bottom: var(--section-head-gap); }
.home-products__title { font-size: clamp(32px, 7vw, 44px); }
.home-frame {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: var(--section-head-gap);
	border: 1px solid rgba(168, 126, 48, 0.28);
	background: var(--surface-paper);
	box-shadow: var(--shadow-card);
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}
.home-frame__photo { position: relative; overflow: hidden; min-height: 280px; background: var(--ink); }
.home-frame__ken {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	object-fit: cover;
	animation: frame-pan 38s ease-in-out infinite alternate;
}
@keyframes frame-pan { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.home-frame__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 7, 4, 0.34), transparent 40%); }
.home-frame__info {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 13px;
	padding: 30px 22px 34px;
}
.home-frame__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 6vw, 40px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); line-height: 1; margin: 0; }
.home-frame__desc { margin: 4px 0 0; max-width: 42ch; font-family: var(--font-body); font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-mute); }
.home-frame__go {
	margin-top: 6px;
	align-self: flex-start;
}
.home-frame__pack { display: none; }
.home-frame:last-of-type { margin-bottom: 0; }
.home-products__cta { text-align: center; padding-top: var(--section-head-gap); }
.home-products__cta .btn { margin: 0 auto; }

/* Categories */
.home-cats { padding: var(--section-y) 0; }
.home-cats__head { text-align: center; margin-bottom: var(--section-head-gap); padding-inline: var(--rail); }
.home-cats__title { font-size: clamp(30px, 8vw, 56px); }
.home-cats__strap { color: var(--ink-soft); margin: 18px auto 0; max-width: 52ch; }
.home-cats__grid { display: grid; grid-template-columns: 1fr; gap: 28px; width: 100%; max-width: calc(1376px + (var(--rail) * 2)); margin-inline: auto; padding-inline: var(--rail); }
.home-cat {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-self: center;
	width: 100%;
	max-width: 440px;
	height: 100%;
	background: var(--card-bg);
	border: 1px solid var(--card-line);
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: transform 0.35s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.home-cat:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--card-shadow-hover); color: inherit; }
.home-cat__stage {
	display: grid;
	place-items: center;
	height: clamp(232px, 64vw, 284px);
	overflow: hidden;
	border-bottom: 1px solid var(--card-line);
	background: radial-gradient(circle at 50% 50%, rgba(212, 168, 67, 0.12), transparent 68%);
}
.home-cat--black .home-cat__stage { background: radial-gradient(circle at 50% 50%, rgba(181, 137, 79, 0.18), transparent 68%); }
.home-cat--green .home-cat__stage { background: radial-gradient(circle at 50% 50%, rgba(124, 146, 80, 0.15), transparent 68%); }
.home-cat--herbal .home-cat__stage { background: radial-gradient(circle at 50% 50%, rgba(199, 146, 58, 0.16), transparent 68%); }
.home-cat__disc {
	position: relative;
	width: 56%;
	max-width: 220px;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 8px rgba(20, 16, 11, 0.08), 0 3px 12px rgba(20, 16, 11, 0.08);
	transition: transform 0.6s var(--ease-out);
}
.home-cat:hover .home-cat__disc { transform: scale(1.02); }
.home-cat--black .home-cat__disc { background: linear-gradient(180deg, #f8f0e0, #ecdbb8); }
.home-cat--green .home-cat__disc { background: linear-gradient(180deg, #f2f4e2, #dde8c4); }
.home-cat--herbal .home-cat__disc { background: linear-gradient(180deg, #f9f1de, #f0ddae); }
.home-cat__grooves, .home-cat__sheen, .home-cat__ring, .home-cat__label { grid-area: 1 / 1; border-radius: 50%; }
.home-cat__grooves {
	width: 100%;
	height: 100%;
	background:
		repeating-radial-gradient(circle, transparent 0 7px, rgba(168, 126, 48, 0.1) 7px 8px),
		repeating-radial-gradient(circle, transparent 0 24px, rgba(138, 106, 36, 0.14) 24px 27px);
}

.home-cat__sheen {
	width: 100%;
	height: 100%;
	background: conic-gradient(from 208deg, transparent 0deg, rgba(255, 255, 255, 0.55) 16deg, rgba(255, 255, 255, 0.1) 34deg, transparent 52deg, transparent 178deg, rgba(255, 255, 255, 0.4) 198deg, rgba(255, 255, 255, 0.08) 214deg, transparent 232deg);
	-webkit-mask-image: radial-gradient(circle, transparent 34%, #000 36%);
	mask-image: radial-gradient(circle, transparent 34%, #000 36%);
	pointer-events: none;
}
.home-cat__ring { width: 90%; height: 90%; margin: 5%; box-shadow: inset 0 0 0 1px rgba(168, 126, 48, 0.4); }
.home-cat--green .home-cat__ring { box-shadow: inset 0 0 0 1px rgba(113, 134, 72, 0.45); }
.home-cat--herbal .home-cat__ring { box-shadow: inset 0 0 0 1px rgba(184, 130, 42, 0.5); }
.home-cat__label {
	width: 70%;
	height: 70%;
	margin: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform 1.6s var(--ease-out);
}

.home-cat:hover .home-cat__label { transform: rotate(720deg); transition: transform 36s linear; }
.home-cat__photo { width: 84%; height: 84%; object-fit: contain; }
.home-cat__initial { font-family: var(--font-display); font-size: 40px; color: var(--gold-deep); }
.home-cat__body { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 24px 24px; text-align: left; }
.home-cat__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 5.4vw, 32px); letter-spacing: 0.03em; line-height: 1.1; color: var(--ink); }
.home-cat__desc { max-width: 32ch; margin: 8px 0 0; color: var(--ink-soft); }
.home-cat__cta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 14px 24px 16px;
	border-top: 1px solid var(--card-line);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	transition: background 0.25s, color 0.25s;
}
.home-cat__arrow { color: var(--gold-deep); transition: transform 0.25s; }
.home-cat__diamond { width: 6px; height: 6px; margin-left: auto; background: var(--gold); transform: rotate(45deg); opacity: 0.55; }
.home-cat:hover .home-cat__cta { background: rgba(168, 126, 48, 0.06); color: var(--gold-deep); }
.home-cat:hover .home-cat__arrow { transform: translateX(4px); }

/* Brewing steps */
.home-ritual { position: relative; overflow: hidden; padding: var(--section-y) var(--rail); }
.home-ritual::before {
	content: "";
	position: absolute;
	right: -300px;
	top: -200px;
	width: 900px;
	height: 900px;
	background: repeating-radial-gradient(circle, transparent 0 22px, rgba(20, 16, 11, 0.06) 22px 23px);
	opacity: 0.7;
	pointer-events: none;
}

.home-ritual__head { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: var(--section-head-gap); align-items: start; }
.home-ritual__title { margin-bottom: 0; font-size: clamp(34px, 8vw, 56px); line-height: 1.05; }
.home-ritual__intro { margin-bottom: 0; color: var(--ink-soft); max-width: 44ch; }
.home-ritual__steps { position: relative; display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(20, 16, 11, 0.18); }
.home-step { padding: 28px 0; border-bottom: 1px solid rgba(20, 16, 11, 0.14); }
.home-step:last-child { border-bottom: 0; }
.home-step__icon { display: block; color: var(--gold); margin-bottom: 16px; }
.home-step__ring { opacity: 0.38; }
.home-step__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 5vw, 24px); letter-spacing: 0.04em; color: var(--ink); margin: 0 0 10px; }
.home-step__text { font-family: var(--font-body); font-size: var(--fs-copy); color: var(--ink-soft); line-height: 1.55; max-width: 32ch; margin: 0; }

/* Blog */
.home-blog { padding: var(--section-y) var(--rail); background-color: transparent; }
.home-blog__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: var(--section-head-gap); }
.home-blog__title { font-size: clamp(32px, 7vw, 56px); }
.home-blog__title em { color: var(--gold); }
.home-blog__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.home-post { display: flex; flex-direction: column; transition: transform 0.35s var(--ease-out); }
.home-post__link { display: flex; flex-direction: column; gap: 16px; color: inherit; }
.home-post:hover { transform: translateY(-4px); }
.home-post__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #2a1e14, #5a4226); }
.home-post--feat .home-post__img { aspect-ratio: 4 / 3.2; }
.home-post__ken { width: 100%; height: 100%; object-fit: cover; }
.home-post__img--placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle, transparent 0 14px, rgba(255, 255, 255, 0.04) 14px 15px);
}
.home-post__meta { display: flex; gap: 18px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.home-post__meta b { color: var(--gold-deep); font-weight: 600; }
.home-post__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 5vw, 26px); letter-spacing: 0.04em; line-height: 1.15; color: var(--ink); margin: 0; }
.home-post--feat .home-post__name { font-size: clamp(26px, 6vw, 38px); }
.home-post__excerpt { font-family: var(--font-body); font-size: var(--fs-copy); color: var(--ink-soft); line-height: 1.55; max-width: 42ch; margin: 0; }

/* About */
.home-about { padding: var(--section-y) var(--rail); overflow: hidden; }
.home-about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 7vw, 80px); align-items: center; }
.home-about__visual { position: relative; aspect-ratio: 4 / 4.4; display: flex; align-items: center; justify-content: center; }

.home-about__corners::before,
.home-about__corners::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid rgba(212, 168, 67, 0.6); z-index: 5; }
.home-about__corners::before { top: -16px; left: -16px; border-right: 0; border-bottom: 0; }
.home-about__corners::after { bottom: -16px; right: -16px; border-left: 0; border-top: 0; }
.home-about__vinyl { position: relative; width: 78%; max-width: 360px; aspect-ratio: 1; z-index: 3; }
.home-about__title { font-size: clamp(32px, 8vw, 56px); line-height: 1.05; }
.home-about__body { margin-top: 28px; font-family: var(--font-body); font-size: 16px; color: #2e2a22; line-height: 1.7; max-width: 50ch; }
.home-about__more { margin-top: 32px; }

/* Closing links */
.home-finale { position: relative; overflow: hidden; background: var(--cream-wash-alt); color: #2a2118; padding: var(--section-y) var(--rail); }
.home-finale::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(168, 126, 48, 0.07), transparent 60%); pointer-events: none; }
.home-finale::after { content: ""; position: absolute; left: var(--rail); right: var(--rail); top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 126, 48, 0.5) 22%, rgba(168, 126, 48, 0.5) 78%, transparent); }
.home-finale__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(48px, 8vw, 64px); align-items: center; justify-items: center; text-align: center; }
.home-finale__panel { display: flex; flex-direction: column; align-items: center; max-width: 34ch; }
.home-finale__heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 8vw, 46px); letter-spacing: 0.02em; line-height: 1.05; color: var(--ink); margin: 0 0 20px; }
.home-finale__lead { color: #5a503f; max-width: 34ch; margin: 0 0 28px; }
.home-finale__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }

.home-finale__crest { width: min(300px, 66vw); }
.home-finale__crest img {
	width: 100%;
	height: auto;

	filter: brightness(0.58) saturate(1.15) drop-shadow(0 10px 22px rgba(60, 40, 15, 0.16));
}

/* Tablet */
@media (min-width: 781px) {
	.home-cinebreak-wrap {
		--mist-travel: 1400px;
		--mist-half: -700px;
		--mist-end: -1400px;
		--mist3-travel: 1000px;
		--mist3-half: -500px;
		--mist3-end: -1000px;
	}
	.home-products__title { font-size: clamp(40px, 5vw, 44px); }

	.home-cats__grid { grid-template-columns: repeat(3, 1fr); }

	.home-ritual__head { grid-template-columns: 1fr 1fr; gap: 60px; align-items: baseline; }
	.home-ritual__steps { grid-template-columns: repeat(2, 1fr); }
	.home-step { padding: 32px 28px 28px 0; border-bottom: 0; border-right: 1px solid rgba(20, 16, 11, 0.14); }
	.home-step:nth-child(2n) { border-right: 0; padding-left: 28px; }
	.home-step:nth-child(1), .home-step:nth-child(2) { padding-bottom: 36px; }

	.home-blog__grid { grid-template-columns: repeat(2, 1fr); }
	.home-about__grid { grid-template-columns: 1fr 1fr; }

	/* Shared rows align headings, leads and CTAs across the closing panels. */
	.home-finale__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto 1fr;
		row-gap: 0;
		align-items: stretch;
		text-align: left;
	}
	.home-finale__crest { grid-area: 1 / 1 / 2 / -1; margin-bottom: clamp(48px, 8vw, 64px); }
	.home-finale__panel {
		display: grid;
		grid-row: 2 / -1;
		grid-template-rows: subgrid;
		align-items: start;
		justify-items: start;
	}
	.home-finale__panel--contact { justify-items: end; text-align: right; }
	.home-finale__actions { align-self: end; }
	.home-finale__stores { justify-content: flex-start; }
	.home-finale__panel--contact .home-finale__stores { justify-content: flex-end; }
}

/* Desktop */
@media (min-width: 1101px) {
	.home-hero__vinyl { display: block; }
	.home-hero__content {
		--hero-copy-max: clamp(540px, 45vw, 700px);
		--hero-pad-left: max(var(--rail), 7vw);
	}

	.home-frame { grid-template-columns: 7fr 5fr; }
	.home-frame__photo { min-height: 380px; }
	.home-frame__info { padding: 48px 48px 48px 150px; }
	.home-frame--flip .home-frame__photo { order: 2; }
	.home-frame--flip { grid-template-columns: 5fr 7fr; }
	.home-frame--flip .home-frame__info { padding: 48px 150px 48px 52px; }
	.home-frame__pack {
		display: block;
		position: absolute;
		bottom: 16px;
		left: 58.333%;
		transform: translateX(-50%);
		width: auto;
		height: 320px;
		max-width: none;
		z-index: 3;
		filter: drop-shadow(0 26px 36px rgba(20, 12, 6, 0.45));
	}
	.home-frame--flip .home-frame__pack { left: 41.666%; }

	.home-blog__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
	.home-ritual__steps { grid-template-columns: repeat(4, 1fr); }
	.home-step { border-right: 1px solid rgba(20, 16, 11, 0.14); border-bottom: 0; padding: 32px 28px 28px 0; }
	.home-step:nth-child(2n) { padding-left: 0; }
	.home-step:last-child { border-right: 0; }
	.home-step + .home-step { padding-left: 28px; }
	.home-step:nth-child(1), .home-step:nth-child(2), .home-step:nth-child(3) { padding-bottom: 28px; }

	/* The crest moves between the two sides once the columns can carry it. */
	.home-finale__grid { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto 1fr; }
	.home-finale__crest { grid-area: 1 / 2 / -1 / 3; align-self: center; margin-bottom: 0; }
	.home-finale__panel { grid-row: 1 / -1; }
}