/* ==========================================================================
   NAGI — homepage

   Loaded on the front page only. Every selector is prefixed nagi-hp-* or
   nested under .nagi-hp, so nothing here reaches the shop, product, cart,
   account or checkout templates.

   Sizes are taken from the reference at a 1440px viewport. The reference is
   874px wide, so measurements were scaled by 1.647.
   ========================================================================== */

.nagi-hp,
.nagi-hp-announce,
.nagi-hp-header,
.nagi-hp-footer {
	/* Palette, taken from the brand logo. Scoped: the site tokens in tokens.css
	   carry the same colours under their own names.

	   Three reds, not one, because a single red cannot serve both grounds:
	   --hp-red is 6.8:1 on the paper and 2.2:1 on the coal, so anything sitting
	   on a dark band uses --hp-red-lit (4.8:1 there) instead. Picking between
	   them by ground is the rule this file follows throughout. */
	--hp-coal:        #1A1A1A;   /* logo black — footer and dark bands */
	--hp-coal-deep:   #111111;   /* announcement bar */
	--hp-white:       #FFFFFF;   /* header, cards, button text */
	--hp-ivory:       #FDFAF5;   /* the logo's own paper — page ground */
	--hp-cream:       #F2E4D7;   /* the logo's cream knot — alternate band */
	--hp-red:         #AF1A16;   /* brand red — accents and CTAs on light */
	--hp-red-deep:    #8A1411;   /* hover and pressed, on light */
	--hp-red-lit:     #E05B52;   /* the red that survives a black ground */
	--hp-ink:         #1F1F1F;
	--hp-grey:        #6B6560;
	--hp-line:        rgba(31, 31, 31, 0.12);
	--hp-line-light:  rgba(246, 241, 234, 0.16);

	/*
	 * One shell width and one vertical rhythm for the whole page.
	 *
	 * The gutter is added to the max-width rather than eaten out of it, so the
	 * figure below is the width of the content itself — 1280px of usable
	 * column, not a 1280px box holding 1168px of content.
	 */
	--hp-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--hp-shell:  calc(1280px + var(--hp-gutter) * 2);
	--hp-section: clamp(1.6rem, 2.2vw, 2rem);

	--hp-serif: var(--nagi-f-display);
	--hp-sans:  var(--nagi-f-body);
}

.nagi-hp {
	background: var(--hp-ivory);
	color: var(--hp-ink);
}

/*
 * base.css sets `svg { fill: currentColor }`, and a CSS declaration beats the
 * fill="none" presentation attribute on the element — which rendered every one
 * of these line icons as a solid blob. Paths that genuinely want a fill carry
 * fill="currentColor" themselves and are unaffected.
 */
.nagi-hp-icon { fill: none; }

/*
 * The header load choreography in components.css hides .nagi-nav__link until
 * .nagi-header[data-loaded] appears. This header is .nagi-hp-header, so that
 * class never arrives and an assigned menu stayed at opacity 0 — an invisible
 * navigation. The homepage header does not run the choreography.
 */
html[data-motion="ready"] .nagi-hp-nav .nagi-nav__link,
html[data-motion="ready"] .nagi-hp-nav .nagi-hp-nav__link {
	opacity: 1;
	transform: none;
}

/*
 * The site stylesheet gives li a bottom margin; these lists set their own
 * spacing with gap, so it is cleared here rather than fought rule by rule.
 *
 * Wrapped in :where() so the reset carries no specificity. Written plainly,
 * `.nagi-hp ul` is (0,1,1) and out-ranks `.nagi-hp-cats__list` (0,1,0) — which
 * silently zeroed the margin every one of these lists sets for itself.
 */
:where(.nagi-hp, .nagi-hp-header, .nagi-hp-footer) ul,
:where(.nagi-hp, .nagi-hp-header, .nagi-hp-footer) ol { margin: 0; padding: 0; }

:where(.nagi-hp, .nagi-hp-header, .nagi-hp-footer) li { margin: 0; }

.nagi-hp-shell {
	width: 100%;
	max-width: var(--hp-shell);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
}

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

.nagi-hp-eyebrow {
	margin: 0 0 0.875rem;
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp-red);
}

.nagi-hp-eyebrow--ink { color: var(--hp-red); }

.nagi-hp-heading {
	margin: 0;
	font-family: var(--hp-serif);
	font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-ink);
}

.nagi-hp-heading--center { text-align: center; }

/* The small red diamond-on-a-rule under the centred headings. */
.nagi-hp-flourish {
	display: block;
	width: 74px;
	height: 9px;
	margin: 0.6rem auto 0;
	background:
		linear-gradient(to right, transparent 0 6px, var(--hp-red) 6px calc(50% - 7px), transparent calc(50% - 7px)) center/100% 1px no-repeat,
		linear-gradient(to left, transparent 0 6px, var(--hp-red) 6px calc(50% - 7px), transparent calc(50% - 7px)) center/100% 1px no-repeat;
	position: relative;
}

.nagi-hp-flourish::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	background: var(--hp-red);
	transform: translate(-50%, -50%) rotate(45deg);
}

.nagi-hp-rule {
	display: block;
	width: 52px;
	height: 2px;
	background: var(--hp-red);
}

.nagi-hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: 1px;
	background: var(--hp-red);
	color: var(--hp-white);
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 220ms var(--nagi-ease);
}

.nagi-hp-btn:hover { background: var(--hp-red-deep); }

.nagi-hp-btn:focus-visible {
	outline: 2px solid var(--hp-red-deep);
	outline-offset: 3px;
}

/* Text CTA with the thin red rule under it. */
.nagi-hp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid rgba(175, 26, 22, 0.5);
	color: var(--hp-red);
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: border-color 220ms var(--nagi-ease), color 220ms var(--nagi-ease);
}

.nagi-hp-link .nagi-hp-icon { transition: transform 260ms var(--nagi-ease); }
.nagi-hp-link:hover { border-color: var(--hp-red); color: var(--hp-red-deep); }
.nagi-hp-link:hover .nagi-hp-icon { transform: translateX(3px); }

.nagi-hp-link--ink { color: var(--hp-red); }

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.nagi-hp-announce {
	background: var(--hp-coal-deep);
	color: rgba(246, 241, 234, 0.82);
}

.nagi-hp-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 40px;
	padding-block: 0.4rem;
	font-family: var(--hp-sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
}

.nagi-hp-announce__sep {
	color: var(--hp-red-lit);
	font-size: 0.5rem;
}

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

.nagi-hp-header {
	position: relative;
	z-index: 20;
	background: var(--hp-white);
	border-bottom: 1px solid var(--hp-line);
}

.nagi-hp-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--nagi-space-4);
	min-height: 88px;
}

.nagi-hp-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: -9px;
	border: 0;
	background: none;
	color: var(--hp-ink);
	cursor: pointer;
}

/* ---- Logo lockup ---- */

.nagi-hp-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.28rem;
	color: var(--hp-red);
}

.nagi-hp-logo__row {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.3rem;
}

.nagi-hp-logo__word {
	font-family: var(--hp-serif);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	/* The tracking is on the right of the last glyph too; pull it back so the
	   mark sits tight against the I. */
	margin-right: -0.16em;
}

.nagi-hp-logo__mark { margin-top: 0.1rem; }

.nagi-hp-logo__est {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
}

.nagi-hp-logo__rule {
	flex: 1;
	height: 1px;
	background: rgba(175, 26, 22, 0.55);
}

.nagi-hp-logo__year {
	font-family: var(--hp-sans);
	font-size: 0.4375rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	white-space: nowrap;
}

/* ---- Nav ---- */

.nagi-hp-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.4rem);
}

.nagi-hp-nav__link,
.nagi-hp-nav .nagi-nav__link {
	position: relative;
	padding-block: 0.5rem;
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--hp-ink);
	white-space: nowrap;
	transition: color 220ms var(--nagi-ease);
}

.nagi-hp-nav__link::after,
.nagi-hp-nav .nagi-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--hp-red);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 240ms var(--nagi-ease);
}

.nagi-hp-nav__link:hover,
.nagi-hp-nav .nagi-nav__link:hover { color: var(--hp-red); }

.nagi-hp-nav__link:hover::after,
.nagi-hp-nav__link:focus-visible::after,
.nagi-hp-nav .nagi-nav__link:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.nagi-hp-utils {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.nagi-hp-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	color: var(--hp-ink);
	cursor: pointer;
	transition: color 220ms var(--nagi-ease);
}

.nagi-hp-util:hover { color: var(--hp-red); }

.nagi-hp-util .nagi-util__count {
	top: 2px;
	right: 0;
	background: var(--hp-red);
	color: var(--hp-white);
}

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

.nagi-hp-hero {
	position: relative;
	isolation: isolate;
	min-height: 450px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--hp-coal);
	color: var(--hp-ivory);
}

.nagi-hp-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 68%;
	z-index: -1;
}

.nagi-hp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The image is blended into the navy rather than cropped against it, which is
 * how the reference reads: one dark field the still-life emerges from.
 */
.nagi-hp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--hp-coal) 0%,
		var(--hp-coal) 18%,
		rgba(18, 18, 18, 0.82) 34%,
		rgba(18, 18, 18, 0.35) 52%,
		rgba(18, 18, 18, 0) 72%
	);
}

.nagi-hp-hero__inner { position: relative; }

.nagi-hp-hero__body {
	max-width: 40rem;
	padding-block: clamp(2rem, 2.8vw, 2.5rem);
}

.nagi-hp-hero__title {
	margin: 0;
	font-family: var(--hp-serif);
	font-size: clamp(2.25rem, 4.2vw, 3.875rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: #FDFAF5;
}

.nagi-hp-hero__line { display: block; }

.nagi-hp-hero__lede {
	max-width: 27rem;
	margin: 1.15rem 0 0;
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
	line-height: 1.72;
	color: rgba(246, 241, 234, 0.76);
}

.nagi-hp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	margin-top: 1.65rem;
}

/* --------------------------------------------------------------------------
   Dark bands and the shared atoms

   .nagi-hp-eyebrow and .nagi-hp-link are authored for paper, where --hp-red
   reads at 6.8:1. The hero and the journal paint themselves coal, and there the
   same red drops to 2.5:1 — so those two re-point the text atoms at the lit red.

   Only the text. Redefining --hp-red for the whole band would look tidier and
   be wrong: .nagi-hp-btn sits inside the hero and fills with that token, and a
   lit-red fill under white text is 3.6:1 where the brand red is 7:1. The fill
   wants the dark red exactly where the text does not.
   -------------------------------------------------------------------------- */

.nagi-hp-hero__body .nagi-hp-eyebrow,
.nagi-hp-journal .nagi-hp-eyebrow { color: var(--hp-red-lit); }

.nagi-hp-hero__actions .nagi-hp-link,
.nagi-hp-journal .nagi-hp-link {
	color: var(--hp-red-lit);
	border-bottom-color: rgba(224, 91, 82, 0.5);
}

.nagi-hp-hero__actions .nagi-hp-link:hover,
.nagi-hp-journal .nagi-hp-link:hover {
	color: var(--hp-red-lit);
	border-color: var(--hp-red-lit);
}

/* --------------------------------------------------------------------------
   Curated categories
   -------------------------------------------------------------------------- */

.nagi-hp-cats {
	padding-block: var(--hp-section);
	background: var(--hp-ivory);
}

.nagi-hp-cats__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.4vw, 1.25rem);
	margin: clamp(2rem, 3.2vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--hp-ink);
}

.nagi-hp-cat__disc {
	display: grid;
	place-items: center;
	width: 97px;
	height: 97px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--hp-cream);
	color: var(--hp-red);
	transition: background-color 260ms var(--nagi-ease), transform 260ms var(--nagi-ease);
}

.nagi-hp-cat:hover .nagi-hp-cat__disc {
	background: #E0CDBB;
	transform: translateY(-3px);
}

.nagi-hp-cat__name {
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hp-ink);
}

.nagi-hp-cat__note {
	margin-top: 0.3rem;
	font-family: var(--hp-sans);
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--hp-grey);
}

/* --------------------------------------------------------------------------
   Our story
   -------------------------------------------------------------------------- */

.nagi-hp-story {
	display: grid;
	grid-template-columns: 43% minmax(0, 1fr);
	align-items: stretch;
	background: var(--hp-ivory);
}

.nagi-hp-story__media {
	position: relative;
	min-height: 400px;
	overflow: hidden;
	background: var(--hp-coal);
}

.nagi-hp-story__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nagi-hp-story__body {
	display: flex;
	align-items: center;
	padding: clamp(1.4rem, 2vw, 1.9rem) var(--hp-gutter);
}

.nagi-hp-story__inner {
	width: 100%;
	max-width: 40rem;
	/* Aligns the column with the page shell rather than the image edge. */
	margin-right: auto;
	padding-left: clamp(0rem, 2.4vw, 2.25rem);
}

.nagi-hp-story__title {
	margin: 0;
	font-family: var(--hp-serif);
	font-size: clamp(1.45rem, 2.2vw, 2.05rem);
	font-weight: 400;
	line-height: 1.26;
	letter-spacing: -0.01em;
	color: var(--hp-ink);
}

.nagi-hp-story__line { display: block; }

.nagi-hp-story .nagi-hp-rule { margin: 0.9rem 0; }

.nagi-hp-story__lede {
	max-width: 34rem;
	margin: 0;
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
	line-height: 1.62;
	color: #4A4744;
}

.nagi-hp-principles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: clamp(1.9rem, 2.8vw, 2.4rem) 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-principles__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nagi-hp-principles__icon {
	color: var(--hp-red);
	margin-bottom: 0.6rem;
}

.nagi-hp-principles__label {
	display: grid;
	gap: 0.1rem;
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--hp-ink);
}

.nagi-hp-story__cta { margin-top: clamp(0.9rem, 1.2vw, 1.15rem); }

/* --------------------------------------------------------------------------
   Featured product
   -------------------------------------------------------------------------- */

.nagi-hp-featured {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 300px;
	overflow: hidden;
	background: var(--hp-coal);
	color: var(--hp-ivory);
}

.nagi-hp-featured__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 72%;
	z-index: -1;
}

.nagi-hp-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.nagi-hp-featured__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--hp-coal) 0%,
		var(--hp-coal) 14%,
		rgba(18, 18, 18, 0.78) 30%,
		rgba(18, 18, 18, 0.28) 50%,
		rgba(18, 18, 18, 0) 68%
	);
}

.nagi-hp-featured__inner { position: relative; }

.nagi-hp-featured__body {
	max-width: 27rem;
	padding-block: clamp(1.1rem, 1.6vw, 1.4rem);
}

.nagi-hp-featured__title {
	margin: 0;
	font-family: var(--hp-serif);
	font-size: clamp(1.75rem, 3vw, 2.65rem);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.nagi-hp-featured__title a {
	color: #FDFAF5;
	transition: color 220ms var(--nagi-ease);
}

.nagi-hp-featured__title a:hover { color: var(--hp-red-lit); }

.nagi-hp-featured__lede {
	margin: 0.8rem 0 0;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(246, 241, 234, 0.74);
}

.nagi-hp-featured__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.1rem;
}

/* Price sits between two hairlines, as in the reference. */
.nagi-hp-price {
	margin: 0;
	padding-block: 0.45rem;
	border-top: 1px solid rgba(175, 26, 22, 0.75);
	border-bottom: 1px solid rgba(175, 26, 22, 0.75);
	font-family: var(--hp-serif);
	font-size: 1.25rem;
	color: #FDFAF5;
}

.nagi-hp-price .woocommerce-Price-amount { font-weight: 400; }
.nagi-hp-price del { display: none; }
.nagi-hp-price ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   Category editorial strip — full bleed, ignores the shell
   -------------------------------------------------------------------------- */

.nagi-hp-strip__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--hp-ivory);
}

.nagi-hp-tile {
	position: relative;
	display: block;
	height: 220px;
	overflow: hidden;
	color: #FDFAF5;
}

.nagi-hp-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--nagi-ease);
}

.nagi-hp-tile:hover .nagi-hp-tile__img { transform: scale(1.04); }

.nagi-hp-tile__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(12, 12, 12, 0.62) 0%,
		rgba(12, 12, 12, 0.28) 45%,
		rgba(12, 12, 12, 0.55) 100%
	);
}

.nagi-hp-tile__body {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: 1.5rem;
	display: grid;
	gap: 0.1rem;
	font-family: var(--hp-serif);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 400;
	line-height: 1.28;
}

.nagi-hp-tile__cta {
	position: absolute;
	left: 1.5rem;
	bottom: 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--hp-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp-red-lit);
}

.nagi-hp-tile__cta .nagi-hp-icon { transition: transform 260ms var(--nagi-ease); }
.nagi-hp-tile:hover .nagi-hp-tile__cta .nagi-hp-icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Curated for you
   -------------------------------------------------------------------------- */

.nagi-hp-products {
	padding-block: var(--hp-section);
	background: var(--hp-ivory);
}

.nagi-hp-products__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nagi-hp-products__all {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-bottom-color: transparent;
	padding-bottom: 0;
}

.nagi-hp-products__all:hover { border-bottom-color: transparent; }

.nagi-hp-products__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 13px;
	margin: clamp(1.75rem, 2.8vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--hp-line);
	background: #FFFFFF;
	transition: border-color 260ms var(--nagi-ease), transform 260ms var(--nagi-ease);
}

.nagi-hp-card:hover {
	border-color: rgba(175, 26, 22, 0.55);
	transform: translateY(-3px);
}

.nagi-hp-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
}

/*
 * Always visible, never a hover reveal: on touch there is no hover, and a
 * buy button that only appears on a device that cannot hover is no button.
 * Outlined rather than filled so it supports the card instead of competing
 * with the hero and featured CTAs.
 */
.nagi-hp-card__atc {
	display: block;
	width: calc(100% - 1.2rem);
	margin: 0 0.6rem 0.7rem;
	padding: 0.6rem 0.5rem;
	border: 1px solid rgba(175, 26, 22, 0.55);
	border-radius: 1px;
	background: transparent;
	color: var(--hp-red);
	font-family: var(--hp-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 200ms var(--nagi-ease), color 200ms var(--nagi-ease);
}

.nagi-hp-card__atc:hover {
	background: var(--hp-red);
	border-color: var(--hp-red);
	color: var(--hp-white);
}

.nagi-hp-card__atc:focus-visible {
	outline: 2px solid var(--hp-red-deep);
	outline-offset: 2px;
}

.nagi-hp-card__atc--out {
	border-color: var(--hp-line);
	color: var(--hp-grey);
	cursor: default;
}

.nagi-hp-card__atc--out:hover {
	background: transparent;
	border-color: var(--hp-line);
	color: var(--hp-grey);
}

.nagi-hp-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hp-cream);
}

.nagi-hp-card__img,
.nagi-hp-card__media img,
.nagi-hp-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nagi-hp-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.22rem;
	padding: 0.55rem 0.5rem 0.6rem;
	text-align: center;
}

.nagi-hp-card__name {
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.32;
	color: var(--hp-ink);
	overflow-wrap: anywhere;
}

.nagi-hp-card__price {
	font-family: var(--hp-serif);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--hp-ink);
}

.nagi-hp-card__price del { opacity: 0.55; margin-right: 0.3rem; }
.nagi-hp-card__price ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */

.nagi-hp-journal {
	padding-block: clamp(1.4rem, 2vw, 1.9rem);
	background: var(--hp-coal);
	color: var(--hp-ivory);
}

.nagi-hp-journal__inner {
	display: grid;
	grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.nagi-hp-journal__title {
	margin: 0 0 1.1rem;
	font-family: var(--hp-serif);
	font-size: clamp(1.4rem, 2.1vw, 1.9rem);
	font-weight: 400;
	line-height: 1.26;
	color: #FDFAF5;
}

.nagi-hp-journal__line { display: block; }

.nagi-hp-journal__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-post {
	display: flex;
	flex-direction: column;
	color: var(--hp-ivory);
}

.nagi-hp-post__media {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	margin-bottom: 0.7rem;
	background: var(--hp-coal-deep);
}

.nagi-hp-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--nagi-ease);
}

.nagi-hp-post:hover .nagi-hp-post__img { transform: scale(1.04); }

.nagi-hp-post__title {
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: #FDFAF5;
	transition: color 220ms var(--nagi-ease);
}

.nagi-hp-post:hover .nagi-hp-post__title { color: var(--hp-red-lit); }

.nagi-hp-post__lede {
	margin-top: 0.4rem;
	font-family: var(--hp-sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba(246, 241, 234, 0.62);
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */

.nagi-hp-trust {
	padding-block: 1.65rem;
	background: var(--hp-ivory);
	border-bottom: 1px solid var(--hp-line);
}

.nagi-hp-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
}

.nagi-hp-trust__item + .nagi-hp-trust__item { border-left: 1px solid var(--hp-line); }

.nagi-hp-trust__icon { flex: none; color: var(--hp-red); }

.nagi-hp-trust__body { display: grid; gap: 0.15rem; }

.nagi-hp-trust__title {
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hp-ink);
}

.nagi-hp-trust__note {
	font-family: var(--hp-sans);
	font-size: 0.75rem;
	color: var(--hp-grey);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.nagi-hp-news {
	position: relative;
	display: grid;
	grid-template-columns: 46% minmax(0, 1fr);
	align-items: stretch;
	background: var(--hp-cream);
}

.nagi-hp-news__media {
	position: relative;
	min-height: 185px;
	overflow: hidden;
}

.nagi-hp-news__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center left;
}

/* Fades the photograph into the cream instead of ending on a hard edge. */
.nagi-hp-news__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(242, 228, 215, 0) 62%, var(--hp-cream) 100%);
}

.nagi-hp-news__body {
	display: flex;
	align-items: center;
	padding: clamp(1.1rem, 1.6vw, 1.4rem) var(--hp-gutter);
}

.nagi-hp-news__inner {
	width: 100%;
	max-width: 34rem;
}

.nagi-hp-news__title {
	margin: 0;
	font-family: var(--hp-serif);
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 500;
	line-height: 1.24;
	color: var(--hp-ink);
}

.nagi-hp-news__lede {
	margin: 0.5rem 0 0;
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
	color: #4A4744;
}

.nagi-hp-news__form { margin-top: 0.9rem; }

.nagi-hp-news__row {
	display: flex;
	max-width: 30rem;
}

.nagi-hp-news__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: 0;
	background: #FDFAF5;
	color: var(--hp-ink);
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
}

.nagi-hp-news__input::placeholder { color: #8A837C; }

.nagi-hp-news__input:focus-visible {
	outline: none;
	border-color: var(--hp-red);
}

.nagi-hp-news__submit {
	flex: none;
	min-height: 48px;
	border-radius: 0;
}

.nagi-hp-news__msg {
	margin: 0.6rem 0 0;
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	min-height: 0;
}

.nagi-hp-news__msg[data-state="error"] { color: #A33A2E; }
.nagi-hp-news__msg[data-state="ok"] { color: #2E6B4F; }

/* Honeypot — off-screen, not display:none, so bots still fill it. Carried
   over from home.css, which the homepage no longer loads. */
.nagi-hp-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nagi-hp-footer {
	padding-block: clamp(1.6rem, 2.2vw, 2rem) 0.9rem;
	background: var(--hp-coal-deep);
	color: rgba(246, 241, 234, 0.78);
}

.nagi-hp-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

.nagi-hp-footer__word {
	margin: 0 0 0.7rem;
	font-family: var(--hp-serif);
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--hp-red-lit);
}

.nagi-hp-footer__about {
	max-width: 20rem;
	margin: 0;
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(246, 241, 234, 0.62);
}

.nagi-hp-footer__social {
	display: flex;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: rgba(246, 241, 234, 0.8);
	transition: color 220ms var(--nagi-ease);
}

.nagi-hp-footer__social a:hover { color: var(--hp-red-lit); }

.nagi-hp-footer__title {
	margin: 0 0 0.85rem;
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hp-red-lit);
}

.nagi-hp-footer__list {
	display: grid;
	gap: 0.16rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-footer__list a {
	display: block;
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: rgba(246, 241, 234, 0.72);
	transition: color 220ms var(--nagi-ease);
}

/* --hp-red-lit, not --hp-red: the brand red is 2.2:1 on this ground. */
.nagi-hp-footer__list a:hover { color: var(--hp-red-lit); }

/* The reversed mark. Sized by height so the ™ and wordmark stay legible. */
.nagi-hp-footer__logo {
	display: inline-block;
	margin: 0 0 1rem;
	line-height: 0;
	border-radius: var(--nagi-radius);
}

.nagi-hp-footer__logo-img {
	display: block;
	width: auto;
	height: 88px;
}

.nagi-hp-footer__logo:focus-visible {
	outline: 2px solid var(--hp-red-lit);
	outline-offset: 6px;
}

.nagi-hp-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	margin-top: clamp(1rem, 1.5vw, 1.3rem);
	padding-top: 0.8rem;
	border-top: 1px solid var(--hp-line-light);
	font-family: var(--hp-sans);
	font-size: 0.75rem;
	color: rgba(246, 241, 234, 0.55);
}

.nagi-hp-footer__base p { margin: 0; }
.nagi-hp-footer__pipe { color: rgba(246, 241, 234, 0.3); }

.nagi-hp-footer__made {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.nagi-hp-footer__heart {
	display: inline-flex;
	color: var(--hp-red);
}

/* ==========================================================================
   Responsive — intentional layouts, not a shrunken desktop
   ========================================================================== */

@media (max-width: 1180px) {
	.nagi-hp-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.25rem; }
	.nagi-hp-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nagi-hp-header__inner { gap: var(--nagi-space-3); }
	.nagi-hp-nav { gap: 1rem; }
	.nagi-hp-nav__link { font-size: 0.8125rem; }
}

@media (max-width: 1024px) {
	.nagi-hp-header__inner { grid-template-columns: auto 1fr auto; min-height: 76px; }
	.nagi-hp-header__burger { display: inline-flex; }
	.nagi-hp-nav { display: none; }
	.nagi-hp-logo { align-items: flex-start; }

	.nagi-hp-journal__inner { grid-template-columns: minmax(0, 1fr); }
	.nagi-hp-journal__title { margin-bottom: 1.25rem; }
}

@media (max-width: 900px) {
	/* Split sections stack: image first, then the words. */
	.nagi-hp-story,
	.nagi-hp-news { grid-template-columns: minmax(0, 1fr); }

	.nagi-hp-story__media { min-height: 300px; }
	.nagi-hp-story__inner { max-width: none; padding-left: 0; }
	.nagi-hp-story__body { padding-block: clamp(2rem, 5vw, 2.75rem); }

	.nagi-hp-news__media { min-height: 220px; }

	.nagi-hp-news__media::after {
		background: linear-gradient(180deg, rgba(242, 228, 215, 0) 60%, var(--hp-cream) 100%);
	}

	.nagi-hp-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nagi-hp-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
	.nagi-hp-trust__item:nth-child(3) { border-left: 0; }
	.nagi-hp-trust__item { justify-content: flex-start; }

	.nagi-hp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nagi-hp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.nagi-hp-hero { min-height: 0; }

	/* Vertically composed hero: the image reads as its own band above the
	   words rather than sitting behind them at unreadable contrast. */
	.nagi-hp-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: 260px;
		z-index: 0;
	}

	.nagi-hp-hero__media::after {
		background: linear-gradient(180deg, rgba(18, 18, 18, 0.15) 0%, rgba(18, 18, 18, 0.55) 70%, var(--hp-coal) 100%);
	}

	.nagi-hp-hero { display: block; }
	.nagi-hp-hero__body { padding-block: 2rem 2.75rem; max-width: none; }
	.nagi-hp-hero__lede { max-width: none; }

	.nagi-hp-featured { display: block; }

	.nagi-hp-featured__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: 240px;
	}

	.nagi-hp-featured__media::after {
		background: linear-gradient(180deg, rgba(18, 18, 18, 0.1) 0%, rgba(18, 18, 18, 0.5) 72%, var(--hp-coal) 100%);
	}

	.nagi-hp-featured__body { max-width: none; padding-block: 1.75rem 2.5rem; }

	.nagi-hp-products__head { justify-content: space-between; }
	.nagi-hp-products__all { position: static; transform: none; }
	.nagi-hp-heading--center { text-align: left; }
	.nagi-hp-flourish { margin-inline: 0; }

	.nagi-hp-journal__list { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.nagi-hp-post { flex-direction: row; gap: 1rem; align-items: flex-start; }
	.nagi-hp-post__media { flex: 0 0 40%; margin-bottom: 0; }
}

@media (max-width: 620px) {
	.nagi-hp-cats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nagi-hp-cat__disc { width: 76px; height: 76px; margin-bottom: 0.85rem; }
	.nagi-hp-cat__disc .nagi-hp-icon { width: 32px; height: 32px; }

	.nagi-hp-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nagi-hp-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
	.nagi-hp-strip__list { grid-template-columns: minmax(0, 1fr); }
	.nagi-hp-tile { height: 180px; }

	.nagi-hp-news__row { flex-direction: column; gap: 0.6rem; }
	.nagi-hp-news__submit { width: 100%; }

	.nagi-hp-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 400px) {
	.nagi-hp-cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nagi-hp-hero__actions { gap: 1.1rem; }
	.nagi-hp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.nagi-hp-tile__img,
	.nagi-hp-post__img,
	.nagi-hp-card,
	.nagi-hp-cat__disc,
	.nagi-hp-link .nagi-hp-icon { transition: none; }

	.nagi-hp-tile:hover .nagi-hp-tile__img,
	.nagi-hp-post:hover .nagi-hp-post__img { transform: none; }
}

/* ---- Harmony subline (multi-faith tier) ------------------------------ */

.nagi-hp-footer__word { display: flex; flex-direction: column; align-items: flex-start; }

.nagi-hp-footer__sub {
	font-family: var(--hp-mono, var(--nagi-f-mono));
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	margin-top: 0.75em;
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Shared atoms added for the new bands
   -------------------------------------------------------------------------- */

.nagi-hp-surface-ink {
	background: var(--hp-coal);
	color: var(--hp-ivory);
}

.nagi-hp-heading--light { color: var(--hp-ivory); }

.nagi-hp-link--light {
	color: var(--hp-red-lit);
	border-bottom-color: rgba(224, 91, 82, 0.45);
}

.nagi-hp-link--light:hover { border-bottom-color: var(--hp-red-lit); }

/* --------------------------------------------------------------------------
   Product rail — ink variant
   The card itself stays light. Light cards on an ink band is the contrast the
   section is for; re-skinning them dark would flatten it.
   -------------------------------------------------------------------------- */

.nagi-hp-products--ink { background: var(--hp-coal); }
.nagi-hp-products--ink .nagi-hp-heading { color: var(--hp-ivory); }
.nagi-hp-products--ink .nagi-hp-eyebrow { color: var(--hp-red-lit); }
.nagi-hp-products--ink .nagi-hp-link { color: var(--hp-red-lit); border-bottom-color: rgba(224, 91, 82, 0.45); }
.nagi-hp-products--ink .nagi-hp-flourish { opacity: 0.7; }

.nagi-hp-products__eyebrow { text-align: center; margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   Shop by tradition
   -------------------------------------------------------------------------- */

.nagi-hp-trad {
	padding-block: var(--hp-section);
	background: var(--hp-cream);
}

.nagi-hp-trad__head { text-align: center; }

.nagi-hp-trad__lede {
	max-width: 62ch;
	margin: 1rem auto 0;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--hp-grey);
}

.nagi-hp-trad__list {
	display: grid;
	/* Five sub-lines, one row. The 1024 and 720 breakpoints below fall to 3
	   and 2. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	margin: clamp(1.75rem, 2.8vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-trad__card {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--hp-line);
	background: var(--hp-coal);
	text-decoration: none;
}

.nagi-hp-trad__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.nagi-hp-trad__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 700ms var(--nagi-ease);
}

.nagi-hp-trad__card:hover .nagi-hp-trad__img { transform: scale(1.045); }

/* The stills are dark at the top and light across the objects, so the veil
   runs the other way to the usual — heaviest at the foot where the type sits. */
.nagi-hp-trad__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(18, 18, 18, 0.10) 0%,
		rgba(18, 18, 18, 0.42) 52%,
		rgba(18, 18, 18, 0.88) 100%
	);
}

.nagi-hp-trad__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	padding: clamp(0.85rem, 1.4vw, 1.15rem);
}

.nagi-hp-trad__title {
	font-family: var(--hp-serif);
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.18;
	color: var(--hp-ivory);
}

.nagi-hp-trad__sub {
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: rgba(246, 241, 234, 0.74);
}

/* --------------------------------------------------------------------------
   The trade line
   -------------------------------------------------------------------------- */

.nagi-hp-tradeline { padding-block: var(--hp-section); }

.nagi-hp-tradeline__head { text-align: center; }
.nagi-hp-tradeline__eyebrow { color: var(--hp-red-lit); }

.nagi-hp-tradeline__lede {
	max-width: 66ch;
	margin: 1rem auto 0;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(246, 241, 234, 0.72);
}

.nagi-hp-tradeline__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.4rem);
	margin: clamp(1.75rem, 2.8vw, 2.5rem) auto 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-tradeline__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: clamp(0.9rem, 1.4vw, 1.2rem) 0.5rem;
	border: 1px solid var(--hp-line-light);
	text-align: center;
}

.nagi-hp-tradeline__pin {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hp-red-lit);
	box-shadow: 0 0 0 4px rgba(224, 91, 82, 0.16);
}

.nagi-hp-tradeline__place {
	font-family: var(--nagi-f-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--hp-ivory);
}

.nagi-hp-tradeline__lat {
	font-family: var(--nagi-f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: rgba(246, 241, 234, 0.55);
}

.nagi-hp-tradeline__cta {
	display: inline-flex;
	margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
}

.nagi-hp-tradeline .nagi-hp-shell { display: flex; flex-direction: column; align-items: center; }
.nagi-hp-tradeline__list { width: 100%; }

/* --------------------------------------------------------------------------
   Breakpoints for the new bands
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.nagi-hp-trad__list      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nagi-hp-tradeline__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.nagi-hp-trad__list      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nagi-hp-tradeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nagi-hp-trad__lede,
	.nagi-hp-tradeline__lede { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   Brand logo in the shared header

   The logo now ships as a transparent PNG keyed off the supplied artwork, so
   the header no longer needs the tan band that used to hide the JPEG's baked-in
   background. The header is plain white — the logo's own paper is #FDFAF5, a
   whisper warmer, and the mark carries no ground of its own to give the
   difference away.

   The mark used here is the knot over NAGI with the trademark. The two tagline
   lines are cropped out on purpose: at a 66px header the smaller of them would
   render under a pixel tall and read as dirt on the glass. The full lockup
   lives in the media library for print and og:image use.
   -------------------------------------------------------------------------- */

.nagi-hp-header {
	background: var(--hp-white);
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
}

.nagi-hp-logo__img,
.nagi-logo__img {
	display: block;
	width: auto;
	height: 66px;
	max-width: none;
}

/* The mark is close to square, so it sets the height of the row. */
.nagi-hp-header__inner { min-height: 88px; }

@media (max-width: 900px) {
	.nagi-hp-logo__img,
	.nagi-logo__img { height: 54px; }
	.nagi-hp-header__inner { min-height: 74px; }
}

@media (max-width: 600px) {
	.nagi-hp-logo__img,
	.nagi-logo__img { height: 44px; }
	.nagi-hp-header__inner { min-height: 62px; }
}

/* --------------------------------------------------------------------------
   Gifting & festivals
   -------------------------------------------------------------------------- */

.nagi-hp-gift {
	padding-block: var(--hp-section);
	background: var(--hp-cream);
}

.nagi-hp-gift__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.nagi-hp-gift__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--hp-coal);
}

.nagi-hp-gift__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.nagi-hp-gift__title {
	margin: 0 0 1rem;
	font-family: var(--hp-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 500;
	line-height: 1.16;
	color: var(--hp-ink);
	max-width: 18ch;
}

.nagi-hp-gift__lede {
	margin: 0 0 1.75rem;
	max-width: 46ch;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--hp-grey);
}

.nagi-hp-gift__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.4vw, 2rem);
}

/* --------------------------------------------------------------------------
   Trade desks
   -------------------------------------------------------------------------- */

.nagi-hp-trade {
	padding-block: var(--hp-section);
	background: var(--hp-ivory);
}

.nagi-hp-trade__head { text-align: center; }

.nagi-hp-trade__lede {
	max-width: 60ch;
	margin: 1rem auto 0;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--hp-grey);
}

.nagi-hp-trade__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.8vw, 1.25rem);
	margin: clamp(1.75rem, 2.8vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.nagi-hp-trade__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	height: 100%;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 1px solid var(--hp-line);
	background: #FFFFFF;
	text-decoration: none;
	transition: border-color 260ms var(--nagi-ease), transform 260ms var(--nagi-ease);
}

.nagi-hp-trade__card:hover {
	border-color: rgba(175, 26, 22, 0.55);
	transform: translateY(-2px);
}

.nagi-hp-trade__icon { color: var(--hp-red); }

.nagi-hp-trade__label {
	font-family: var(--hp-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--hp-ink);
}

.nagi-hp-trade__sub {
	font-family: var(--hp-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--hp-grey);
}

/* Pushed to the foot so the three cards line their CTAs up whatever the
   copy length. */
.nagi-hp-trade__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.9rem;
	color: var(--hp-red);
	font-family: var(--hp-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.nagi-hp-faq {
	padding-block: var(--hp-section);
	background: var(--hp-cream);
}

.nagi-hp-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.nagi-hp-faq__title {
	margin: 0 0 1.25rem;
	font-family: var(--hp-serif);
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 500;
	line-height: 1.18;
	color: var(--hp-ink);
	max-width: 16ch;
}

.nagi-hp-faq__item {
	border-top: 1px solid var(--hp-line);
	padding-block: 1rem;
}

.nagi-hp-faq__item:last-child { border-bottom: 1px solid var(--hp-line); }

.nagi-hp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--hp-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--hp-ink);
}

.nagi-hp-faq__q::-webkit-details-marker { display: none; }

/* Own marker: a plus that becomes a minus, so the control reads the same in
   every browser rather than inheriting the default triangle. */
.nagi-hp-faq__mark {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.nagi-hp-faq__mark::before,
.nagi-hp-faq__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--hp-red);
	transition: transform 220ms var(--nagi-ease);
}

.nagi-hp-faq__mark::after { transform: rotate(90deg); }
.nagi-hp-faq__item[open] .nagi-hp-faq__mark::after { transform: rotate(0deg); }

.nagi-hp-faq__a {
	margin: 0.7rem 0 0;
	max-width: 62ch;
	font-family: var(--hp-sans);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--hp-grey);
}

@media (max-width: 860px) {
	.nagi-hp-gift__inner,
	.nagi-hp-faq__inner { grid-template-columns: minmax(0, 1fr); }
	.nagi-hp-trade__list { grid-template-columns: minmax(0, 1fr); }
	.nagi-hp-gift__media { aspect-ratio: 16 / 10; }
}