/**
 * Narin Bricks Elements — shared stylesheet
 * Loaded via each elements enqueue_scripts() so it applies in the Bricks
 * builder canvas AND on the frontend. Per-instance color/font overrides are
 * injected as inline --nh-* variables on each element root.
 */

.narin-heading{
	--nh-gold:#c9a05c;
	--nh-lead:#f4ede1;
	--nh-muted:#d2c9bb;
	--nh-rule:rgba(201,160,92,.42);
	--nh-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
	--nh-title:clamp(2.4rem,5.5vw,4.25rem);
	--nh-desc-max:62ch;
	display:flex;flex-direction:column;box-sizing:border-box;
}
.narin-heading *{box-sizing:border-box;}
.narin-heading--centered{align-items:center;text-align:center;}
.narin-heading--left{align-items:flex-start;text-align:left;}

/* Eyebrow */
.narin-heading__eyebrow{
	display:flex;align-items:center;gap:1rem;
	color:var(--nh-gold);
	font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
	font-weight:500;line-height:1;
}
.narin-heading--centered .narin-heading__eyebrow{justify-content:center;}
.narin-heading__eyebrow-rule{height:1px;width:46px;background:var(--nh-rule);flex:0 0 auto;}
.narin-heading--left .narin-heading__eyebrow-rule--lead{display:none;}
.narin-heading--left .narin-heading__eyebrow-rule--trail{width:70px;}

/* Title */
.narin-heading__title{
	font-family:var(--nh-serif);
	font-weight:500;line-height:1.04;letter-spacing:.004em;
	font-size:var(--nh-title);
	margin:.7rem 0 0;
}
.narin-heading__title-lead{color:var(--nh-lead);}
.narin-heading__title-accent{
	background-image:linear-gradient(176deg,
		color-mix(in srgb,var(--nh-gold) 62%,#fff) 0%,
		var(--nh-gold) 52%,
		color-mix(in srgb,var(--nh-gold) 78%,#000) 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}

/* Diamond divider */
.narin-heading__divider{display:flex;align-items:center;margin-top:1.35rem;}
.narin-heading--left .narin-heading__divider{justify-content:flex-start;}
.narin-heading__divider-rule{height:1px;width:120px;max-width:24vw;
	background:linear-gradient(90deg,transparent,var(--nh-rule));}
.narin-heading__divider-rule--trail{background:linear-gradient(90deg,var(--nh-rule),transparent);}
.narin-heading__divider-gem{
	width:9px;height:9px;margin:0 15px;transform:rotate(45deg);
	background:var(--nh-gold);
	box-shadow:0 0 20px 5px color-mix(in srgb,var(--nh-gold) 55%,transparent);
}

/* Italic quote */
.narin-heading__quote{
	font-family:var(--nh-serif);font-style:italic;
	color:color-mix(in srgb,var(--nh-gold) 88%,#fff);
	font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;
	margin:1.6rem 0 0;max-width:56ch;
}
.narin-heading--centered .narin-heading__quote{max-width:52ch;}

/* Description */
.narin-heading__desc{
	color:var(--nh-muted);
	font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.9;
	font-weight:300;letter-spacing:.002em;
	margin-top:1.4rem;max-width:var(--nh-desc-max);
}
.narin-heading--centered .narin-heading__desc{margin-left:auto;margin-right:auto;max-width:min(var(--nh-desc-max),60ch);}
.narin-heading__desc p{margin:0 0 .75em;}
.narin-heading__desc p:last-child{margin-bottom:0;}

@media (prefers-reduced-motion: no-preference){
	.narin-heading__divider-gem{transition:box-shadow .4s ease;}
}

.narin-hero{
	--nh-gold:#c9a05c;
	--nh-lead:#f4ede1;
	--nh-muted:#d2c9bb;
	--nh-rule:rgba(201,160,92,.42);
	--nh-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
	--nh-title:clamp(2.8rem,6vw,5rem);
	--nh-minh:58vh;
	--nh-overlay:rgba(12,9,7,.72);
	--nh-base:#0d0a08;
	position:relative;display:flex;align-items:center;
	min-height:var(--nh-minh);
	padding:clamp(3rem,7vw,6rem) clamp(1.25rem,6vw,5rem);
	background:var(--nh-base) center/cover no-repeat;
	box-sizing:border-box;overflow:hidden;
}
.narin-hero *{box-sizing:border-box;}
.narin-hero__overlay{position:absolute;inset:0;background:var(--nh-overlay);pointer-events:none;}
.narin-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-width:1180px;margin:0 auto;}
.narin-hero--left  .narin-hero__inner{align-items:flex-start;text-align:left;}
.narin-hero--center .narin-hero__inner{align-items:center;text-align:center;}

.narin-hero__eyebrow{
	display:flex;align-items:center;gap:1rem;color:var(--nh-gold);
	font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;line-height:1;
}
.narin-hero--center .narin-hero__eyebrow{justify-content:center;}
.narin-hero__eyebrow-rule{height:1px;width:64px;background:var(--nh-rule);flex:0 0 auto;}

.narin-hero__title{
	font-family:var(--nh-serif);font-weight:500;line-height:1.02;letter-spacing:.004em;
	font-size:var(--nh-title);margin:.85rem 0 0;
}
.narin-hero__title-lead{color:var(--nh-lead);}
.narin-hero__title-accent{
	background-image:linear-gradient(176deg,
		color-mix(in srgb,var(--nh-gold) 62%,#fff) 0%,
		var(--nh-gold) 52%,
		color-mix(in srgb,var(--nh-gold) 78%,#000) 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}

.narin-hero__divider{display:flex;align-items:center;margin-top:1.35rem;}
.narin-hero__divider-rule{height:1px;width:120px;max-width:24vw;background:linear-gradient(90deg,transparent,var(--nh-rule));}
.narin-hero__divider-rule--trail{background:linear-gradient(90deg,var(--nh-rule),transparent);}
.narin-hero__divider-gem{width:9px;height:9px;margin:0 15px;transform:rotate(45deg);background:var(--nh-gold);box-shadow:0 0 20px 5px color-mix(in srgb,var(--nh-gold) 55%,transparent);}

.narin-hero__desc{
	color:var(--nh-muted);
	font-size:clamp(1.08rem,1.55vw,1.3rem);line-height:1.9;
	font-weight:300;letter-spacing:.002em;
	margin-top:1.5rem;max-width:60ch;
}
.narin-hero__desc p{margin:0 0 .75em;}
.narin-hero__desc p:last-child{margin-bottom:0;}

.narin-hero__btn{
	display:inline-block;margin-top:1.9rem;
	font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
	color:var(--nh-lead);text-decoration:none;
	padding:.85rem 1.9rem;border:1px solid var(--nh-rule);border-radius:2px;
	transition:color .3s ease,border-color .3s ease,background-color .3s ease;
}
.narin-hero__btn:hover,.narin-hero__btn:focus-visible{
	color:#0d0a08;background:var(--nh-gold);border-color:var(--nh-gold);
}

/* =====================================================================
 * Entrance animation — SEO / a11y safe.
 * Content is fully visible by DEFAULT. The hidden→reveal states only apply
 * when <html> carries the `narin-js` flag, which the head script adds ONLY
 * when JS is available AND the user hasn't asked for reduced motion.
 * So: no JS, JS error, reduced-motion, or a crawler  ->  content just shows.
 * ===================================================================== */
html.narin-js .narin-anim .narin-anim__item{
	opacity:0;
	will-change:opacity, transform, filter;
}
html.narin-js .narin-anim[data-anim="rise"]      .narin-anim__item{ transform:translateY(1.4rem); }
html.narin-js .narin-anim[data-anim="rise-blur"] .narin-anim__item{ transform:translateY(1.4rem); filter:blur(7px); }
html.narin-js .narin-anim[data-anim="fade"]      .narin-anim__item{ transform:none; }

/* Revealed state (added by IntersectionObserver when the block scrolls in) */
html.narin-js .narin-anim.is-visible .narin-anim__item{
	opacity:1;
	transform:none;
	filter:none;
	transition:opacity .7s cubic-bezier(.22,.61,.36,1),
	           transform .75s cubic-bezier(.22,.61,.36,1),
	           filter .75s ease;
	transition-delay:calc(var(--nh-i, 0) * 90ms);
	/* Release the compositing layer once revealed. Leaving will-change on keeps
	 * the element on its own GPU layer, where text is rasterized without
	 * subpixel antialiasing and stays permanently slightly soft. */
	will-change:auto;
}

/* Once the reveal has finished the JS adds `is-done`, which drops every
 * transition/transform/filter so the text renders on the normal layer at full
 * sharpness — no residual softness from GPU rasterization. */
html.narin-js .narin-anim.is-done .narin-anim__item{
	opacity:1;
	transform:none;
	filter:none;
	transition:none;
	will-change:auto;
}

/* Belt-and-braces: never keep content hidden for reduced-motion users. */
@media (prefers-reduced-motion: reduce){
	html.narin-js .narin-anim .narin-anim__item{
		opacity:1 !important;
		transform:none !important;
		filter:none !important;
		transition:none !important;
	}
}

/* =====================================================================
 * Divider — left-aligned redesign
 * The centred version is symmetric (rule → gem → rule). Left-aligned that
 * reads badly: the leading rule fades in from transparent, leaving a dead
 * gap before the gem. Left layout instead anchors the gem hard to the text
 * edge and runs a single rule that starts solid and fades out rightward.
 * ===================================================================== */
.narin-heading--left .narin-heading__divider,
.narin-hero--left   .narin-hero__divider{
	margin-top:1.15rem;
}

/* Kill the leading rule entirely when left-aligned */
.narin-heading--left .narin-heading__divider-rule--lead,
.narin-hero--left   .narin-hero__divider-rule--lead{
	display:none;
}

/* Gem sits flush with the text's left edge, smaller and tighter glow */
.narin-heading--left .narin-heading__divider-gem,
.narin-hero--left   .narin-hero__divider-gem{
	width:6px;height:6px;
	margin:0 12px 0 0;
	box-shadow:0 0 10px 2px color-mix(in srgb,var(--nh-gold) 40%,transparent);
}

/* Single rule: solid at the gem, fading out to the right */
.narin-heading--left .narin-heading__divider-rule--trail,
.narin-hero--left   .narin-hero__divider-rule--trail{
	width:180px;max-width:38vw;
	background:linear-gradient(90deg,
		var(--nh-gold) 0%,
		color-mix(in srgb,var(--nh-gold) 45%,transparent) 38%,
		transparent 100%);
}

/* ---- Divider style: "rule" (no gem at all) ---- */
.narin-heading__divider--rule .narin-heading__divider-gem,
.narin-hero__divider--rule   .narin-hero__divider-gem{
	display:none;
}
.narin-heading__divider--rule .narin-heading__divider-rule--lead,
.narin-hero__divider--rule   .narin-hero__divider-rule--lead{
	display:none;
}
.narin-heading--left .narin-heading__divider--rule .narin-heading__divider-rule--trail,
.narin-hero--left   .narin-hero__divider--rule   .narin-hero__divider-rule--trail{
	width:64px;max-width:none;
	background:var(--nh-gold);
	opacity:.9;
}
/* Centred + rule style: short symmetric hairline */
.narin-heading--centered .narin-heading__divider--rule .narin-heading__divider-rule--trail,
.narin-hero--center      .narin-hero__divider--rule   .narin-hero__divider-rule--trail{
	width:64px;max-width:none;
	background:var(--nh-gold);
	opacity:.9;
}

/* =====================================================================
 * Widths + vertical rhythm (overrides earlier defaults — keep last)
 * ===================================================================== */

/* ---- 1. Mobile overflow ----------------------------------------------
 * ch-based max-widths are wider than a phone viewport once the type scales
 * up, so every text block is clamped against 100% as well. Long words and
 * URLs are allowed to break rather than push the layout wide.            */
.narin-heading,
.narin-hero__inner{
	max-width:100%;
	min-width:0;
}
.narin-heading__title,.narin-heading__quote,.narin-heading__desc,
.narin-hero__title,.narin-hero__desc{
	overflow-wrap:break-word;
	word-wrap:break-word;
	min-width:0;
}
.narin-heading__desc,
.narin-heading--centered .narin-heading__desc{
	max-width:min(var(--nh-desc-max),100%);
}
.narin-heading--centered .narin-heading__desc{
	margin-left:auto;margin-right:auto;
}
.narin-heading__quote,
.narin-heading--centered .narin-heading__quote{
	max-width:min(56ch,100%);
}
.narin-hero__desc{
	max-width:min(60ch,100%);
}

/* ---- 2. Title width ---------------------------------------------------
 * Long display type set to the full container reads as a banner, not a
 * heading. Clamping it forces an earlier, more deliberate line break.    */
.narin-heading{ --nh-title-max:20ch; }
.narin-hero{ --nh-title-max:22ch; }
.narin-heading__title,
.narin-hero__title{
	max-width:min(var(--nh-title-max),100%);
	text-wrap:balance;
}
.narin-heading--centered .narin-heading__title{
	margin-left:auto;margin-right:auto;
}

/* ---- 3. Vertical rhythm ----------------------------------------------
 * Previously every gap was ~1.4rem, so the eyebrow, title and body all
 * floated at equal distance and read as three unrelated items. The eyebrow
 * belongs TO the title, so that pair is tight; everything below gets a
 * clearly larger gap. Sibling selectors mean the rhythm holds no matter
 * which optional parts are present.                                      */
.narin-heading > *,
.narin-hero__inner > *{ margin-top:0; }

.narin-heading > * + *,
.narin-hero__inner > * + *{ margin-top:1.75rem; }

/* Eyebrow + title = one unit */
.narin-heading__eyebrow + *,
.narin-hero__eyebrow + *{ margin-top:.45rem; }

/* Divider sits closer to what it underlines */
.narin-heading__title + .narin-heading__divider,
.narin-hero__title + .narin-hero__divider{ margin-top:1.5rem; }

.narin-heading__divider + *,
.narin-hero__divider + *{ margin-top:1.5rem; }

/* ---- 4. Mobile tightening -------------------------------------------- */
@media (max-width:640px){
	.narin-heading{ --nh-title:clamp(2rem,8.5vw,2.6rem); --nh-title-max:16ch; }
	.narin-hero{ --nh-title:clamp(2.1rem,9vw,2.9rem); --nh-title-max:16ch;max-width:"100%" }

	.narin-heading__desc,.narin-hero__desc{
		font-size:1.02rem;line-height:1.8;
	}
	.narin-heading__eyebrow,.narin-hero__eyebrow{
		font-size:.66rem;letter-spacing:.26em;
	}
	.narin-heading > * + *,
	.narin-hero__inner > * + *{ margin-top:1.35rem; }
	.narin-heading__eyebrow + *,
	.narin-hero__eyebrow + *{ margin-top:.35rem; }

	/* Centred eyebrow rules eat the line on narrow screens */
	.narin-heading--centered .narin-heading__eyebrow{ gap:.7rem; }
	.narin-heading--centered .narin-heading__eyebrow-rule{ width:26px; }
	.narin-heading__divider-rule{ width:80px; }
}

/* =====================================================================
 * Eyebrow wrapping + hero body size (keep last)
 * ===================================================================== */

/* ---- Eyebrow: wrap gracefully -----------------------------------------
 * The rule was `flex:0 0 auto` at a fixed width, so long subtitle text had
 * nowhere to go and broke mid-phrase — with line-height:1 clipping the
 * descenders. Now the text is allowed to wrap as a unit, the rule absorbs
 * whatever space is left, and the line-height gives wrapped lines room.  */
.narin-heading__eyebrow,
.narin-hero__eyebrow{
	flex-wrap:wrap;
	row-gap:.5rem;
	line-height:1.5;
}
.narin-heading__eyebrow-text,
.narin-hero__eyebrow-text{
	flex:0 1 auto;
	min-width:0;
}
.narin-hero__eyebrow-rule{
	flex:1 1 40px;
	min-width:32px;
	max-width:120px;
}
.narin-heading__eyebrow-rule{
	flex:0 1 46px;
	min-width:22px;
}

/* ---- Hero body copy: larger --------------------------------------- */
.narin-hero__desc{
	font-size:clamp(1.15rem,1.75vw,1.42rem);
	line-height:1.85;
}

@media (max-width:640px){
	.narin-hero__desc{ font-size:1.1rem;line-height:1.78; }
}

/* =====================================================================
 * Hero: nested children + independent padding (keep last)
 * ===================================================================== */

/* Split padding so top and bottom can be tuned separately. The old shorthand
 * used one clamp for both, which is why the space under the content felt
 * heavy — especially combined with min-height centring the content. */
.narin-hero{
	--nh-pad-top:clamp(3rem,7vw,6rem);
	--nh-pad-bottom:clamp(2rem,4.5vw,3.75rem);
	--nh-pad-x:clamp(1.25rem,6vw,5rem);
	padding:var(--nh-pad-top) var(--nh-pad-x) var(--nh-pad-bottom);
}

/* Nested Bricks elements (buttons etc.) sit inside the aligned inner column */
.narin-hero__children{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--nh-children-gap,1rem);
	width:100%;
}
.narin-hero--left   .narin-hero__children{ justify-content:flex-start; }
.narin-hero--center .narin-hero__children{ justify-content:center; }

/* Nothing inside the hero should add trailing margin — that stacks on top of
 * the section padding and reads as dead space. */
.narin-hero__inner > *:last-child{ margin-bottom:0; }
.narin-hero__desc > p:last-child{ margin-bottom:0; }

@media (max-width:640px){
	.narin-hero{
		--nh-pad-top:clamp(2.5rem,9vw,3.5rem);
		--nh-pad-bottom:clamp(1.75rem,6vw,2.5rem);
	}
	.narin-hero__children{ gap:.75rem; }
}

/* =====================================================================
 * Heading line-height (keep last)
 * H1 = 1.2, H2–H6 = 1.3. Unitless rather than em: the titles contain
 * <span> wrappers for the gold accent, and an em line-height would pass a
 * fixed computed leading down to them instead of letting each element
 * derive its own. Same result on the element, safer on the children.
 * ===================================================================== */
.narin-hero{ --nh-lh-h1:1.2; }
.narin-heading{ --nh-lh-h1:1.2; --nh-lh-hn:1.3; }

/* Hero title is always an H1 */
.narin-hero__title,
h1.narin-hero__title{
	line-height:var(--nh-lh-h1,1.2);
}

/* Section heading renders whichever tag you pick in the panel */
h1.narin-heading__title{
	line-height:var(--nh-lh-h1,1.2);
}
h2.narin-heading__title,
h3.narin-heading__title,
h4.narin-heading__title,
h5.narin-heading__title,
h6.narin-heading__title,
div.narin-heading__title{
	line-height:var(--nh-lh-hn,1.3);
}

/* The quote is display-serif too, but it's body-length — keep it looser */
.narin-heading__quote{ line-height:1.55; }

/* =====================================================================
 * Eyebrow: rules shrink, never wrap (keep last)
 * A flex rule with a fixed basis drops to its own line when space runs out,
 * which reads as a stray dash under the subtitle. Switching the row back to
 * nowrap and letting the rules flex down to nothing keeps them on the same
 * line as the text; the text itself still wraps internally via min-width:0.
 * ===================================================================== */
.narin-heading__eyebrow,
.narin-hero__eyebrow{
	flex-wrap:nowrap;
	row-gap:0;
	align-items:center;
}
.narin-heading__eyebrow-text,
.narin-hero__eyebrow-text{
	flex:0 1 auto;
	min-width:0;
}
.narin-heading__eyebrow-rule,
.narin-hero__eyebrow-rule{
	flex:1 1 0;
	min-width:0;
	max-width:70px;
}

/* Below 520px the rules have no useful room left — drop them entirely and
 * let the subtitle stand on its own rather than showing 8px stubs. */
@media (max-width:520px){
	.narin-heading__eyebrow-rule,
	.narin-hero__eyebrow-rule{
		display:none;
	}
	.narin-heading__eyebrow,
	.narin-hero__eyebrow{
		gap:0;
	}
	.narin-heading--centered .narin-heading__eyebrow{
		justify-content:center;
	}
}

/* =====================================================================
 * Mobile type scale — hero (keep last)
 * The hero is the page's opening statement; at phone widths it was sitting
 * only marginally above the section headings and losing its hierarchy.
 * ===================================================================== */
@media (max-width:640px){
	.narin-hero{
		--nh-title:clamp(2.6rem,11vw,3.6rem);
		--nh-title-max:100%;
	}
	.narin-hero__desc{
		font-size:1.22rem;
		line-height:1.72;
	}
	.narin-hero__eyebrow{
		font-size:.72rem;
		letter-spacing:.28em;
	}
}
@media (max-width:380px){
	.narin-hero{ --nh-title:clamp(2.3rem,10.5vw,2.9rem); }
	.narin-hero__desc{ font-size:1.14rem; }
}

/* =====================================================================
 * Legibility over background imagery
 * A flat overlay alone fails on light or busy photos: it lifts the whole
 * frame uniformly, so pale areas stay pale exactly where the text sits.
 * These add (a) a bottom-weighted scrim that darkens behind the copy while
 * leaving the top of the image open, and (b) a soft text-shadow that holds
 * the letterforms together against high-frequency detail.
 * ===================================================================== */

/* Scrim — sits above the flat overlay, below the content */
.narin-hero--protect-scrim .narin-hero__overlay::after,
.narin-hero--protect-both  .narin-hero__overlay::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		to top,
		rgba(8,6,5,.88) 0%,
		rgba(8,6,5,.62) 34%,
		rgba(8,6,5,.28) 62%,
		rgba(8,6,5,0) 100%);
	pointer-events:none;
}
.narin-hero--center.narin-hero--protect-scrim .narin-hero__overlay::after,
.narin-hero--center.narin-hero--protect-both  .narin-hero__overlay::after{
	background:radial-gradient(
		ellipse at center,
		rgba(8,6,5,.82) 0%,
		rgba(8,6,5,.55) 45%,
		rgba(8,6,5,.15) 80%,
		rgba(8,6,5,0) 100%);
}

/* Text shadow + slightly heavier stroke when sitting on an image */
.narin-hero--protect-shadow .narin-hero__title,
.narin-hero--protect-both   .narin-hero__title{
	font-weight:600;
	text-shadow:0 1px 2px rgba(0,0,0,.55), 0 6px 26px rgba(0,0,0,.42);
}
.narin-hero--protect-shadow .narin-hero__desc,
.narin-hero--protect-both   .narin-hero__desc{
	font-weight:400;
	text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.35);
}
.narin-hero--protect-shadow .narin-hero__eyebrow,
.narin-hero--protect-both   .narin-hero__eyebrow{
	text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* The gold gradient is background-clipped, so text-shadow can't apply to it.
 * A drop-shadow filter on the span achieves the same separation. */
.narin-hero--protect-shadow .narin-hero__title-accent,
.narin-hero--protect-both   .narin-hero__title-accent{
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}