/*
 * Norah Warm Editorial design-system adapter, version 2.3.0.
 *
 * Inspired by Open Design's Warm Editorial system
 * (Apache-2.0):
 * https://github.com/nexu-io/open-design/tree/main/design-systems/warm-editorial
 *
 * This is an adaptation of the system's semantic roles and recipes. It does
 * not copy its serif fonts or terracotta palette. Norah's approved fonts,
 * colors, content, media, and canonical prototype geometry remain the source
 * of truth.
 */

:root {
	/* Semantic color roles. Primitive values stay in style.css. */
	--norah-system-bg: var(--norah-cream);
	--norah-system-surface: var(--norah-ivory);
	--norah-system-surface-warm: var(--norah-cream);
	--norah-system-surface-strong: var(--norah-white);
	--norah-system-fg: var(--norah-ink);
	--norah-system-fg-2: #3f4441;
	--norah-system-muted: var(--norah-stone);
	--norah-system-meta: var(--norah-stone);
	--norah-system-border: var(--norah-line);
	--norah-system-border-on-accent: rgba(71, 75, 72, 0.25);
	--norah-system-border-on-light: rgba(246, 243, 237, 0.55);
	--norah-system-accent: var(--norah-sky);
	--norah-system-accent-strong: var(--norah-sky-deep);
	--norah-system-accent-on: #3f4441;
	--norah-system-on-dark: var(--norah-ivory);
	--norah-system-muted-on-dark: rgba(246, 243, 237, 0.76);

	/* Brand typography mapped to a small editorial scale. */
	--norah-system-font-display: "Ysabeau", sans-serif;
	--norah-system-font-body: "Barlow Semi Condensed", sans-serif;
	--norah-system-font-brand: "Ysabeau", sans-serif;
	--norah-system-font-signature: "Caveat", cursive;
	--norah-system-type-body: clamp(1.6rem, 1.52rem + 0.2vw, 1.8rem);
	--norah-system-type-h1: clamp(4.64rem, 5vw, 8.4rem);
	--norah-system-type-h2: clamp(3.68rem, 4vw, 6.72rem);
	--norah-system-type-h3: clamp(2.16rem, 2vw, 2.88rem);
	--norah-system-type-h4: clamp(2rem, 1.8vw, 3.2rem);
	--norah-system-type-intro: clamp(1.84rem, 1.6rem + 0.65vw, 2.48rem);
	--norah-system-type-lead: clamp(2.24rem, 2.4vw, 3.6rem);
	--norah-system-type-quote: clamp(2.88rem, 3vw, 4.8rem);
	--norah-system-type-link: clamp(1.84rem, 2vw, 2.56rem);
	--norah-system-type-label: 1.184rem;
	--norah-system-type-nav: 1.376rem;
	--norah-system-type-control: 1.328rem;
	--norah-system-type-control-small: 1.184rem;
	--norah-system-type-micro: 1.248rem;
	--norah-system-leading-tight: 1.05;
	--norah-system-leading-copy: 1.45;
	--norah-system-leading-body: 1.65;
	--norah-system-leading-quote: 1.2;

	/* Compact spacing scale plus fluid editorial intervals. */
	--norah-system-space-1: 0.2rem;
	--norah-system-space-2: 0.4rem;
	--norah-system-space-3: 0.8rem;
	--norah-system-space-4: 1.2rem;
	--norah-system-space-5: 1.6rem;
	--norah-system-space-6: 2rem;
	--norah-system-space-7: 2.4rem;
	--norah-system-space-8: 3.2rem;
	--norah-system-space-9: 4rem;
	--norah-system-space-10: 5rem;
	--norah-system-space-11: 6.4rem;
	--norah-system-space-12: 8rem;
	--norah-system-space-13: 10rem;
	--norah-system-space-14: 12rem;
	--norah-system-space-15: 16rem;
	--norah-system-space-section: clamp(8rem, 9vw, 14.4rem);
	--norah-system-space-grid: clamp(4.8rem, 7vw, 12.8rem);
	--norah-system-space-grid-wide: clamp(4.8rem, 8vw, 12.8rem);
	--norah-system-space-grid-contact: clamp(6.4rem, 10vw, 17.6rem);
	--norah-system-space-belief: clamp(6.4rem, 10vw, 17.6rem);
	--norah-system-space-belief-block: clamp(8rem, 9vw, 14.4rem);
	--norah-system-space-why-row: clamp(4.8rem, 7vw, 11.2rem);
	--norah-system-space-hero-block: clamp(4.8rem, 7vw, 11.2rem);
	--norah-system-space-hero-inline: clamp(8rem, 8vw, 12.8rem);

	/* Shape and interaction foundations. */
	--norah-system-radius-note: 1.6rem;
	--norah-system-radius-control: 999px;
	--norah-system-radius-panel: 3.6rem;
	--norah-system-radius-orb: 50%;
	--norah-system-radius-arch: 24rem 24rem 3.2rem 3.2rem;
	--norah-system-radius-photo: 16rem 16rem 2.4rem 2.4rem;
	--norah-system-control-height: 5.2rem;
	--norah-system-border-width: 1px;
	--norah-system-transition-duration: 180ms;
	--norah-system-transition-ease: ease;
	--norah-system-shadow-orb: 0 1rem 3rem rgba(71, 75, 72, 0.14);
	--norah-system-shadow-note: 0 1rem 3rem rgba(71, 75, 72, 0.12);
	--norah-system-focus-outline: 3px solid var(--norah-system-surface-strong);
	--norah-system-focus-shadow: 0 0 0 6px var(--norah-system-fg);

	/* Intrinsic layout primitives. The root is 10px in Bricks. */
	--norah-system-container-inline: min(calc(100% - 3rem), 134.4rem);
	--norah-system-hero-columns: minmax(0, 7fr) minmax(36.8rem, 5fr);
	--norah-system-belief-columns: 1.15fr 0.85fr;
	--norah-system-why-columns: 1fr 1.45fr;
	--norah-system-measure-hero-intro: 67.2rem;
	--norah-system-measure-why-lead: 49.6rem;
	--norah-system-measure-process-copy: 52.8rem;
	--norah-system-measure-about-copy: 57.6rem;
	--norah-system-size-portrait: 44.8rem;
	--norah-system-size-about-sun: 72%;
}

/*
 * Adapter map. Existing Bricks recipes consume the stable Norah names below,
 * so the system can evolve without editing the native element graph.
 */
:root {
	--norah-color-page: var(--norah-system-bg);
	--norah-color-surface: var(--norah-system-surface);
	--norah-color-surface-strong: var(--norah-system-surface-strong);
	--norah-color-accent: var(--norah-system-accent);
	--norah-color-accent-strong: var(--norah-system-accent-strong);
	--norah-color-text: var(--norah-system-fg);
	--norah-color-text-muted: var(--norah-system-muted);
	--norah-color-on-accent: var(--norah-system-accent-on);
	--norah-color-on-dark: var(--norah-system-on-dark);
	--norah-color-border: var(--norah-system-border);
	--norah-color-border-on-accent: var(--norah-system-border-on-accent);
	--norah-color-border-on-light: var(--norah-system-border-on-light);
	--norah-color-muted-on-dark: var(--norah-system-muted-on-dark);

	--norah-space-1: var(--norah-system-space-1);
	--norah-space-2: var(--norah-system-space-2);
	--norah-space-3: var(--norah-system-space-3);
	--norah-space-4: var(--norah-system-space-4);
	--norah-space-5: var(--norah-system-space-5);
	--norah-space-6: var(--norah-system-space-6);
	--norah-space-7: var(--norah-system-space-7);
	--norah-space-8: var(--norah-system-space-8);
	--norah-space-9: var(--norah-system-space-9);
	--norah-space-10: var(--norah-system-space-10);
	--norah-space-11: var(--norah-system-space-11);
	--norah-space-12: var(--norah-system-space-12);
	--norah-space-13: var(--norah-system-space-13);
	--norah-space-14: var(--norah-system-space-14);
	--norah-space-15: var(--norah-system-space-15);
	--norah-space-nav: clamp(1.92rem, 3vw, 4.8rem);
	--norah-space-button-inline: 1.4rem;
	--norah-space-note-inline: 2.24rem;

	--norah-type-body-size: var(--norah-system-type-body);
	--norah-type-body-leading: var(--norah-system-leading-body);
	--norah-type-h1: var(--norah-system-type-h1);
	--norah-type-h2: var(--norah-system-type-h2);
	--norah-type-h3: var(--norah-system-type-h3);
	--norah-type-h4: var(--norah-system-type-h4);
	--norah-type-intro: var(--norah-system-type-intro);
	--norah-type-lead: var(--norah-system-type-lead);
	--norah-type-quote: var(--norah-system-type-quote);
	--norah-type-label: var(--norah-system-type-label);
	--norah-type-nav: var(--norah-system-type-nav);
	--norah-type-control: var(--norah-system-type-control);
	--norah-type-control-small: var(--norah-system-type-control-small);
	--norah-type-micro: var(--norah-system-type-micro);
	--norah-leading-tight: var(--norah-system-leading-tight);
	--norah-leading-copy: var(--norah-system-leading-copy);
	--norah-leading-quote: var(--norah-system-leading-quote);
	--norah-font-display: var(--norah-system-font-display);
	--norah-font-body: var(--norah-system-font-body);
	--norah-font-brand: var(--norah-system-font-brand);
	--norah-font-signature: var(--norah-system-font-signature);

	--norah-radius-sm: var(--norah-system-radius-note);
	--norah-radius-lg: var(--norah-system-radius-panel);
	--norah-radius-pill: var(--norah-system-radius-control);
	--norah-radius-orb: var(--norah-system-radius-orb);
	--norah-radius-arch: var(--norah-system-radius-arch);
	--norah-radius-photo: var(--norah-system-radius-photo);
	--norah-radius: var(--norah-system-radius-panel);
	--norah-shadow-orb: var(--norah-system-shadow-orb);
	--norah-shadow-note: var(--norah-system-shadow-note);
	--norah-motion-duration: var(--norah-system-transition-duration);
	--norah-motion-ease: var(--norah-system-transition-ease);
	--norah-icon-line: var(--norah-system-border-width);

	--norah-page: var(--norah-system-container-inline);
	--norah-section: var(--norah-system-space-section);
	--norah-grid-gap: var(--norah-system-space-grid);
	--norah-grid-gap-wide: var(--norah-system-space-grid-wide);
	--norah-grid-gap-contact: var(--norah-system-space-grid-contact);
	--norah-belief-gap: var(--norah-system-space-belief);
	--norah-belief-padding: var(--norah-system-space-belief-block);
	--norah-why-row-gap: var(--norah-system-space-why-row);
	--norah-hero-columns: var(--norah-system-hero-columns);
	--norah-belief-columns: var(--norah-system-belief-columns);
	--norah-measure-hero-intro: var(--norah-system-measure-hero-intro);
	--norah-measure-why-lead: var(--norah-system-measure-why-lead);
	--norah-measure-process-copy: var(--norah-system-measure-process-copy);
	--norah-measure-about-copy: var(--norah-system-measure-about-copy);
	--norah-size-portrait: var(--norah-system-size-portrait);
	--norah-hero-padding: var(--norah-system-space-hero-block) var(--norah-system-space-hero-inline);
	--norah-size-about-sun: var(--norah-system-size-about-sun);
	--norah-about-portrait-radius: var(--norah-system-radius-photo);
	--norah-control-height: var(--norah-system-control-height);
}

/*
 * Recipes. These are intentionally small and map to the existing native
 * Bricks classes. They describe composition, rather than adding markup or
 * making the prototype's artwork look like a generic card.
 */
.norah-home .norah-shell {
	inline-size: var(--norah-system-container-inline);
	max-inline-size: 100%;
	margin-inline: auto;
}

.norah-home .norah-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--norah-system-space-7);
}

.norah-home .norah-button {
	border-radius: var(--norah-system-radius-control);
	transition: background-color var(--norah-system-transition-duration) var(--norah-system-transition-ease), border-color var(--norah-system-transition-duration) var(--norah-system-transition-ease), color var(--norah-system-transition-duration) var(--norah-system-transition-ease), opacity var(--norah-system-transition-duration) var(--norah-system-transition-ease), transform var(--norah-system-transition-duration) var(--norah-system-transition-ease);
}

.norah-home .norah-hero__arch {
	border-radius: var(--norah-system-radius-arch);
}

.norah-home .norah-hero__orb,
.norah-home .norah-hero__arch::before,
.norah-home .norah-hero__arch::after,
.norah-home .norah-about__visual::before {
	border-radius: var(--norah-system-radius-orb);
}

.norah-home .norah-hero__note {
	border-radius: var(--norah-system-radius-note);
}

.norah-home .norah-process,
.norah-home .norah-offer__intro,
.norah-home .norah-offer__card {
	border-radius: var(--norah-system-radius-panel);
}

.norah-home .norah-about__image {
	border-radius: var(--norah-system-radius-photo);
}

.norah-home .norah-contact__action .norah-email-link {
	font-family: var(--norah-system-font-display);
	font-size: var(--norah-system-type-link);
}

.norah-home :focus-visible {
	outline: var(--norah-system-focus-outline);
	box-shadow: var(--norah-system-focus-shadow);
}

/* Keep the system map aligned with the canonical responsive exceptions. */
@media (max-width: 70rem) {
	:root {
		--norah-system-container-inline: min(calc(100% - 2.5rem), 70rem);
	}
}

@media (max-width: 36rem) {
	:root {
		--norah-system-container-inline: min(calc(100% - 2rem), 54.4rem);
		--norah-system-space-section: 7.2rem;
		--norah-system-radius-panel: 2.4rem;
	}

	.norah-home .norah-process {
		border-radius: 0;
	}

	.norah-home .norah-offer__card {
		border-radius: 2.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.norah-home *,
	.norah-home *::before,
	.norah-home *::after {
		transition-duration: 0.01ms !important;
	}
}