/* Tnuva homepage replica.
   Values measured on https://tnuva-usa.squarespace.com/ at a 1920px frame and
   converted to vw (px / 19.2) so the page scales like Squarespace's fluid
   engine. House rules: no !important, classes prefixed .tnh-. */

.tnuva-home {
	--tnh-navy: #08163A;
	--tnh-red: #E62A00;
	--tnh-cream: #F2ECD9;
	--tnh-gutter: max(3.5vw,(100vw - 1414px) / 2);
	--tnh-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--tnh-body: Arial, Helvetica, sans-serif;
	--tnh-h1: clamp(30px, min(66.4px,4.7428vw), 74px);
	--tnh-h2: clamp(25px, min(42.88px,3.0628vw), 48px);
	--tnh-h3: clamp(20px, min(29.44px,2.1028vw), 33px);
	--tnh-plg: clamp(16px, min(19.36px,1.3829vw), 21px);
	--tnh-pmd: clamp(15px, min(17.68px,1.2629vw), 20px);
	--tnh-psm: clamp(12px, min(13.7px,0.9783vw), 15px);
	/* Hero scrim. Tweak these two: the colour at the bottom edge and
	   the point up the image where the fade starts. */
	--tnh-hero-fade: rgba(0, 0, 0, 0.3);
	--tnh-hero-fade-start: 40%;
	/* Our Story band. The artwork's sky is a flat #F9EAD8 edge to edge, so
	   this wants to be that colour (or near enough) for the band and the
	   illustration to meet without a seam. */
	--tnh-story-band: #fae9d8;
	/* The artwork's own ratio, so nothing is cropped: 2500x588, the sky
	   already trimmed off the top in the Media Library. Narrowing this
	   further cuts from the top as well - the artwork is anchored to its
	   bottom edge - but there is only a thin band of sky left to take before
	   it starts eating the hills. */
	--tnh-story-art-ratio: 2500 / 588;
	/* The height the band refuses to go below. Above it the artwork keeps
	   its natural ratio and nothing is cropped; below it the band holds this
	   height while the window keeps narrowing, so the illustration is scaled
	   to fill and loses its left and right edges instead of shrinking - the
	   way the hero behaves. 240px is the artwork's natural height at a
	   1020px window, so nothing changes on desktop and the crop comes in
	   over tablet and phone widths. Raise it to crop sooner and harder. */
	--tnh-story-art-min: 240px;
	background: #fff;
	color: var(--tnh-navy);
	font-family: var(--tnh-body);
	overflow-x: clip;
}

.tnuva-home *,
.tnuva-home *::before,
.tnuva-home *::after { box-sizing: border-box; }

.tnh-wrap {
	padding-left: var(--tnh-gutter);
	padding-right: var(--tnh-gutter);
	margin: 0 auto;
	width: 100%;
}

.tnuva-home .tnh-h2 {
	font-family: var(--tnh-head);
	font-size: var(--tnh-h2);
	line-height: 1.3104;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--tnh-navy);
	margin: 0;
	text-transform: none;
}

.tnuva-home .tnh-h3 {
	font-family: var(--tnh-head);
	font-size: var(--tnh-h3);
	line-height: 1.3552;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--tnh-navy);
	margin: 0;
	text-transform: none;
}

.tnuva-home .tnh-center { text-align: center; }

.tnh-cream { background: var(--tnh-cream); }

.tnuva-home .tnh-btn {
	display: inline-block;
	font-family: var(--tnh-head);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--tnh-red);
	border: 0;
	border-radius: 0;
	padding: 11.2px 35.2px;
	transition: opacity .15s ease;
}

.tnuva-home .tnh-btn:hover,
.tnuva-home .tnh-btn:focus { color: #fff; opacity: .88; }

.tnuva-home .tnh-textlink {
	display: inline-block;
	font-family: var(--tnh-head);
	font-size: 16px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: 0.32px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tnh-red);
	border-bottom: 1px solid currentColor;
}

.tnuva-home .tnh-textlink:hover { color: var(--tnh-red); opacity: .8; }

.tnh-hero {
	position: relative;
	min-height: min(867.99px,61.9995vw);
	display: flex;
	align-items: flex-end;
	padding: min(326.4px,23.3143vw) 0 0;
	overflow: hidden;
}

.tnh-hero-bg { position: absolute; inset: 0; z-index: 0; background: #fff; }

.tnh-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 53% 100%;
	display: block;
}

/* Transparent at the top, a touch of black at the bottom, so the white
   headline and sub keep their contrast where the artwork goes pale.
   The image is in flow inside .tnh-hero-bg, so ::after paints over it, and
   .tnh-hero-bg's own z-index 0 keeps the whole layer under .tnh-hero-inner. */
.tnh-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent var(--tnh-hero-fade-start),
		var(--tnh-hero-fade) 100%
	);
	pointer-events: none;
}

.tnh-hero-inner { position: relative; z-index: 1; padding-bottom: min(103.68px,7.4057vw); }

.tnuva-home .tnh-hero-title {
	font-family: var(--tnh-head);
	font-size: var(--tnh-h1);
	line-height: 1.232;
	font-weight: 500;
	letter-spacing: normal;
	color: #fff;
	margin: 0;
	max-width: min(811.97px,57.9977vw);
	text-transform: none;
}

.tnuva-home .tnh-hero-sub {
	font-family: var(--tnh-body);
	font-size: var(--tnh-plg);
	line-height: 1.8;
	font-weight: 400;
	color: #fff;
	margin: 14px 0 0;
	max-width: min(811.97px,57.9977vw);
}

.tnuva-home .tnh-hero-cta { margin: 15px 0 0; }

.tnh-band {
	min-height: min(198px,14.1429vw);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.92px 0;
}

.tnuva-home .tnh-band-copy {
	font-family: var(--tnh-body);
	font-size: var(--tnh-pmd);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tnh-navy);
	text-align: center;
	max-width: 694px;
	margin: 8px auto 0;
}

.tnuva-home .tnh-band-eyebrow {
	font-family: var(--tnh-body);
	font-size: var(--tnh-pmd);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tnh-navy);
	text-align: center;
	margin: 0 0 11px;
}

.tnh-carousel-sec { padding: min(63.36px,4.5257vw) 0; }

.tnh-carousel { position: relative; }

.tnh-carousel-controls {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 14px;
}

.tnuva-home .tnh-car-btn {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tnh-navy);
	cursor: pointer;
	line-height: 0;
}

.tnh-car-btn svg { width: 100%; height: 100%; }
.tnh-car-btn[disabled] { opacity: .25; cursor: default; }

.tnh-carousel-track {
	display: flex;
	margin: 0 -14.125px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tnh-carousel-track::-webkit-scrollbar { display: none; }

.tnh-slide {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 14.125px;
	scroll-snap-align: start;
}

.tnuva-home .tnh-card {
	display: block;
	text-decoration: none;
	color: var(--tnh-navy);
	background: none;
}

.tnh-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 329 / 247;
	overflow: hidden;
}

.tnh-carousel--recipe .tnh-card-media { aspect-ratio: 329 / 219; }

.tnh-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.tnuva-home .tnh-card:hover .tnh-card-media img { transform: scale(1.03); }

.tnuva-home .tnh-card-title {
	display: block;
	font-family: var(--tnh-body);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--tnh-navy);
	text-align: center;
	margin-top: 12px;
}

.tnh-story {
	position: relative;
	/* No min-height. It existed because the illustration was an absolutely
	   positioned backdrop and contributed no height, so the band needed a
	   floor of its own. The artwork is in flow now and sets the height
	   itself; a floor on top of that is just cream under the picture. */
	/* No bottom padding: the artwork is the bottom of the band now, and any
	   padding under it would show as a strip of cream against the white
	   section below. */
	padding: min(57.6px,4.1143vw) 0 0;
	background: var(--tnh-story-band);
	overflow: hidden;
}

/* The landscape illustration, full width under the copy. It was a
   cover-cropped backdrop (.tnh-story-bg) with the copy sitting on top of it;
   the band's flat background now carries the copy and the artwork continues
   it, since both are the same cream. */
.tnh-story-art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--tnh-story-art-ratio);
	/* The floor. aspect-ratio sets the height from the width, then this
	   clamps it back up once the window is narrow enough, which is what
	   finally gives object-fit something to crop: the box stops matching the
	   artwork's ratio, cover scales to the height, and the sides go. Without
	   it the box and the artwork shrink together and cover never crops. */
	min-height: var(--tnh-story-art-min);
	object-fit: cover;
	/* 50% horizontally, so the crop comes off both sides evenly and the
	   middle of the scene holds. Bottom-anchored vertically, so narrowing
	   --tnh-story-art-ratio takes sky off the top and leaves the hills and
	   the figures whole. */
	object-position: 50% 100%;
}

.tnh-story-inner { position: relative; z-index: 1; }

.tnuva-home .tnh-story-copy {
	font-family: var(--tnh-body);
	font-size: var(--tnh-plg);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tnh-navy);
	text-align: center;
	max-width: 1047px;
	margin: 26px auto 0;
}

.tnh-story .tnh-hero-cta { margin-top: 28px; }

.tnh-features { padding: min(84.48px,6.0343vw) 0; }

.tnh-features-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.tnh-feature-media {
	display: block;
	width: 100%;
	aspect-ratio: 694 / 400;
	overflow: hidden;
}

.tnh-feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tnh-feature-body {
	margin-left: min(57.98px,4.1417vw);
	max-width: min(458.88px,32.7771vw);
	padding-top: 22px;
}

.tnuva-home .tnh-eyebrow {
	font-family: var(--tnh-body);
	font-size: var(--tnh-psm);
	line-height: 1.8;
	font-weight: 400;
	color: var(--tnh-navy);
	margin: 0 0 4px;
}

.tnh-feature-body .tnh-textlink { margin-top: 8px; }

.tnh-follow { padding: min(63.36px,4.5257vw) 0; }

.tnh-follow-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: min(42.24px,3.0171vw);
}

.tnuva-home .tnh-follow-handle a { color: var(--tnh-navy); text-decoration: none; }
.tnuva-home .tnh-follow-handle a:hover { color: var(--tnh-red); }

.tnh-ig {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.tnh-ig-item { display: block; overflow: hidden; aspect-ratio: 335 / 596; }

.tnh-ig-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.tnh-ig-item:hover img { transform: scale(1.04); }

.tnh-ig-2,
.tnh-ig-3 { aspect-ratio: 335 / 447; margin-top: 74px; }

body.home { background: #fff; }

body.home #content,
body.home #primary,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .entry-content {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}


/* --- Round 2: corrections measured against the live Squarespace page ----- */

/* The fixed, overlaying header is now set once in site.css for every page.
   It was never homepage-specific - the hero starts at y0 and runs under the
   bar on every template - and keeping a copy here, complete with its own
   `min-height: 84px !important`, is what made the bar height a four-file
   argument. */

/* Copy bands: content is top-anchored at 43px (82px when it has an eyebrow).
   The bottom padding is a floor, not part of the design - the band's height
   comes from min-height, so this is invisible until the copy grows past it,
   at which point it is the difference between a readable band and a
   paragraph resting on the section below. */
.tnh-band { justify-content: flex-start; padding: 43px 0 var(--tnuva-space-s); }
.tnh-band.tnh-cream { padding-top: 82px; }
.tnuva-home .tnh-band-copy { margin-top: 26px; }
.tnuva-home .tnh-band-eyebrow { margin-bottom: 11px; }

/* Promo cards: eyebrow + title sit ON the artwork, 288px down / 58px in.
   The title itself is the red link, so the duplicate h3 is hidden. */
.tnh-feature { position: relative; }

/* Anchored from the bottom of the artwork, not the top.
   `top: min(288px,20.5714vw)` on a card whose height is width/1.735 put the
   label below the image between about 1025 and 1250px wide: at 1100 the
   artwork is ~290px tall and the label started at 226px, so its two lines
   ran ~30px past the picture onto the white page. Measuring the same gap
   from the bottom edge reproduces the reference at 1414 and above and
   cannot overflow at any width. */
.tnh-feature-body {
	position: absolute;
	left: min(57.98px,4.1417vw);
	top: auto;
	bottom: clamp(12px, 2.2vw, 31px);
	width: min(459px,32.7854vw);
	max-width: none;
	margin-left: 0;
	padding-top: 0;
}
.tnuva-home .tnh-eyebrow { margin: 0 0 16px; }
.tnh-feature-body .tnh-h3 { display: none; }
.tnuva-home .tnh-feature-body .tnh-textlink {
	font-family: var(--tnh-head);
	font-size: var(--tnh-h3);
	line-height: 40px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tnh-red);
	border-bottom: 0;
	margin-top: 0;
}

/* Follow Along: 50px under the tall columns, no gap under the heading row. */
.tnh-follow { padding: min(63.36px,4.5257vw) 0 min(49.92px,3.5657vw); }
.tnh-follow-head { margin-bottom: 0; }


/* --- Round 3: carousel geometry + the fixed header ---------------------- */

/* Squarespace: controls row 32px, arrows 22px in a 50px cluster flush with
   the content edge; item margin-bottom 24px; title 15px under the image. */
.tnh-carousel-controls { height: 32px; align-items: flex-start; gap: 6px; margin: 0; }
.tnuva-home .tnh-car-btn { width: 22px; height: 22px; }
.tnh-slide { padding-bottom: 24px; }
.tnuva-home .tnh-card-title { margin-top: 15px; line-height: 1.2; }
.tnuva-home .tnh-carousel--recipe .tnh-card-title { margin-bottom: 19px; }


/* --- Round 4: the promo-card overlay text is white on the artwork ------- */
.tnuva-home .tnh-feature-body .tnh-eyebrow { color: #fff; }
.tnuva-home .tnh-feature-body .tnh-textlink,
.tnuva-home .tnh-feature-body .tnh-textlink:hover,
.tnuva-home .tnh-feature-body .tnh-textlink:focus { color: #fff; }


/* --- Round 5: audited element-by-element against the live page ---------- */

/* Recipe cards carry a category label under the title. */
.tnuva-home .tnh-card-cat {
	display: block;
	font-family: var(--tnh-body);
	font-size: 13px;
	line-height: 1.15;
	font-weight: 400;
	color: var(--tnh-navy);
	text-align: center;
	margin-top: 4px;
}
.tnuva-home .tnh-carousel--recipe .tnh-card-title { margin-bottom: 0; }

/* Our Story: the block sits 99px below the section top, CTA 32px under the copy. */
.tnh-story { padding-top: min(99px,7.0711vw); }
.tnh-story .tnh-hero-cta { margin-top: 32px; }

/* Buttons are 44px tall, not 43. */
.tnuva-home .tnh-btn { line-height: 1.35; }

/* The @tnuvausa link is red. */
.tnuva-home .tnh-follow-handle a { color: var(--tnh-red); }


/* --- Round 6: Follow Along is four equal 335x447 tiles, not staggered --- */
.tnh-ig-item,
.tnh-ig-2,
.tnh-ig-3 { aspect-ratio: 335 / 447; margin-top: 0; }
.tnh-follow { padding: min(63.36px,4.5257vw) 0 var(--tnuva-space-3xl); }
.tnh-follow-head { margin-bottom: clamp(24px, 4.7vw, 68px); }
.tnuva-home .tnh-follow-handle a { text-decoration: underline; text-underline-offset: 4px; }
.tnuva-home .tnh-follow-handle a::after { content: ' \\2192'; }

@media (max-width: 1024px) {
	.tnuva-home { --tnh-gutter: 6vw; }
	.tnh-slide { flex-basis: 50%; max-width: 50%; }
	.tnuva-home .tnh-hero-title,
	.tnuva-home .tnh-hero-sub { max-width: 70vw; }
	.tnh-feature-body { position: static; top: auto; left: auto; width: auto; margin-left: 0; max-width: none; padding-top: var(--tnuva-space-s); }
}

@media (max-width: 767px) {
	.tnuva-home { --tnh-gutter: 5vw; }
	.tnh-hero { min-height: 520px; padding-top: calc(var(--tnuva-header-h) + var(--tnuva-space-2xl)); }
	.tnuva-home .tnh-hero-title { font-size: 34px; max-width: none; }
	.tnuva-home .tnh-hero-sub { font-size: 16px; max-width: none; }
	.tnh-slide { flex-basis: 70%; max-width: 70%; }
	.tnh-features-grid { grid-template-columns: minmax(0, 1fr); gap: var(--tnuva-space-l); }
	.tnh-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tnuva-space-2xs); }
	.tnh-ig-item, .tnh-ig-2, .tnh-ig-3 { aspect-ratio: 1 / 1; margin-top: 0; }
	.tnh-follow-head { flex-direction: column; align-items: flex-start; gap: var(--tnuva-space-3xs); }
	/* The promo cards drop out of their overlay at 1024 and become a stacked
	   image + caption; the caption needs its own gap from the artwork.

	   Round 4 painted the eyebrow and the link white for the overlay, and
	   nothing took that back once the label left the artwork - so on a phone
	   "STORE LOCATOR / Find Tnuva Near You" and "RECIPES / Browse Tnuva
	   Recipes" were white on the white page. The text was always there and
	   always in the right place; it was simply invisible, and the gap it left
	   behind is why the cards read as mis-spaced.

	   Off the image the caption takes the page colours back, and the 16px
	   eyebrow gap - overlay spacing - closes to 4px so the eyebrow and the
	   title read as one caption sitting under the picture. */
	.tnh-feature-body {
		padding-top: var(--tnuva-space-s);
		padding-left: 0;
		padding-right: 0;
	}
	.tnuva-home .tnh-feature-body .tnh-eyebrow {
		color: var(--tnh-navy);
		margin: 0 0 4px;
	}
	.tnuva-home .tnh-feature-body .tnh-textlink,
	.tnuva-home .tnh-feature-body .tnh-textlink:hover,
	.tnuva-home .tnh-feature-body .tnh-textlink:focus { color: var(--tnh-red); }
	.tnuva-home .tnh-story-copy { margin-top: var(--tnuva-space-s); }
	.tnh-story .tnh-hero-cta { margin-top: var(--tnuva-space-m); }
}