/* ==========================================================================
   Celia Noire — base
   Tokens, fonts, reset, typography, buttons, utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted. Drop the .woff2 files into assets/fonts/ (see the
   README in that folder). Until they are there, the fallback stack renders.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/bodoni-moda-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/bodoni-moda-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Palette */
	--cn-noir: #0A0A0A;
	--cn-ivory: #FAF6F1;
	--cn-pink: #E7C6C0;
	--cn-rose: #C99A96;
	--cn-gold: #C6A664;
	--cn-gold-deep: #A8863E;
	--cn-charcoal: #2B2B2B;
	--cn-warm-gray: #8C8579;

	/* Type */
	--cn-font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif;
	--cn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--cn-text-xs: 0.6875rem;   /* 11px — eyebrow */
	--cn-text-sm: 0.8125rem;   /* 13px — nav, buttons */
	--cn-text-base: clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
	--cn-text-h3: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
	--cn-text-h2: clamp(2rem, 2.4vw + 1.2rem, 3rem);
	--cn-text-h1: clamp(2.75rem, 6vw + 1rem, 6rem);

	--cn-tracking-wide: 0.12em;
	--cn-tracking-wider: 0.18em;
	--cn-tracking-hero: 0.28em;

	/* Rhythm */
	--cn-shell: 1320px;
	--cn-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--cn-section-y: clamp(4rem, 9vw, 9rem);
	/* Wider, viewport-edge padding shared by full-bleed content that isn't
	   capped to --cn-shell — the Hero's left/right-aligned content and the
	   desktop header nav both line up against this same edge. */
	--cn-edge-gutter: clamp(40px, 8vw, 140px);

	/* Motion — ranges fixed by the brief */
	--cn-dur-hover: 200ms;   /* 180–250 */
	--cn-dur-reveal: 650ms;  /* 550–750 */
	--cn-dur-bg: 550ms;      /* 450–650 */
	--cn-dur-zoom: 1.1s;     /* slow photo zoom, ~1s max */
	--cn-dur-thumb-reveal: 450ms; /* hover-triggered thumbnail reveal — low end of the 450–650 band */
	--cn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Themed surface — set per section, not per element */
	--cn-bg: var(--cn-ivory);
	--cn-fg: var(--cn-charcoal);
	--cn-fg-strong: var(--cn-noir);
	--cn-accent: var(--cn-gold-deep);
	--cn-rule: rgba(10, 10, 10, 0.14);
}

/* Section surfaces. Applying these sets every colour a child needs. */
.cn-surface--noir {
	--cn-bg: var(--cn-noir);
	--cn-fg: rgba(250, 246, 241, 0.78);
	--cn-fg-strong: var(--cn-ivory);
	--cn-accent: var(--cn-gold);
	--cn-rule: rgba(250, 246, 241, 0.16);
}

.cn-surface--ivory {
	--cn-bg: var(--cn-ivory);
	--cn-fg: var(--cn-charcoal);
	--cn-fg-strong: var(--cn-noir);
	--cn-accent: var(--cn-gold-deep);
	--cn-rule: rgba(10, 10, 10, 0.14);
}

.cn-surface--pink {
	--cn-bg: var(--cn-pink);
	--cn-fg: var(--cn-charcoal);
	--cn-fg-strong: var(--cn-noir);
	--cn-accent: var(--cn-noir);
	--cn-rule: rgba(10, 10, 10, 0.18);
}

.cn-surface--rose {
	--cn-bg: var(--cn-rose);
	--cn-fg: #241E1E;
	--cn-fg-strong: var(--cn-noir);
	--cn-accent: var(--cn-noir);
	--cn-rule: rgba(10, 10, 10, 0.22);
}

.cn-surface--noir,
.cn-surface--ivory,
.cn-surface--pink,
.cn-surface--rose {
	background-color: var(--cn-bg);
	color: var(--cn-fg);
	transition: background-color var(--cn-dur-bg) var(--cn-ease);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--cn-ivory);
	color: var(--cn-charcoal);
	font-family: var(--cn-font-body);
	font-size: var(--cn-text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
	max-width: 100%;
	display: block;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--cn-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.cn-display,
h1, h2, h3 {
	font-family: var(--cn-font-display);
	font-weight: 400;
	line-height: 1.08;
	color: var(--cn-fg-strong);
	text-wrap: balance;
}

h1 { font-size: var(--cn-text-h1); }
h2 { font-size: var(--cn-text-h2); }
h3 { font-size: var(--cn-text-h3); }

.cn-eyebrow {
	font-family: var(--cn-font-body);
	font-size: var(--cn-text-xs);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-accent);
}

.cn-lede {
	max-width: 46ch;
	color: var(--cn-fg);
}

/* Eyebrow + title + short text + one CTA — the shape every content section
   from Services down opens with (see cn_section_head() in inc/helpers.php). */
.cn-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 44rem;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.cn-section-head h2 {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.cn-main {
	display: block;
}

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

.cn-section {
	padding-block: var(--cn-section-y);
	/* The front-page header is position:fixed at every width, so a same-page
	   anchor jump (e.g. the footer's Studio links) would otherwise land with
	   the section title hidden underneath it. 85px covers the header's own
	   height at any breakpoint (measured 76-85px); the rest is breathing room. */
	scroll-margin-top: calc(85px + 1.5rem);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	padding: 1.05em 2.4em;
	border: 1px solid currentColor;
	font-size: var(--cn-text-sm);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: color var(--cn-dur-hover) var(--cn-ease),
	            border-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-btn > span {
	position: relative;
	z-index: 1;
}

/* Fill sweeps in from the left rather than snapping colour. */
.cn-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: currentColor;
	transform: translateX(-101%);
	transition: transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-btn:hover::before,
.cn-btn:focus-visible::before {
	transform: translateX(0);
}

.cn-btn--outline-light {
	color: var(--cn-ivory);
}

.cn-btn--outline-light:hover > span,
.cn-btn--outline-light:focus-visible > span {
	color: var(--cn-noir);
}

.cn-btn--outline-dark {
	color: var(--cn-noir);
}

.cn-btn--outline-dark:hover > span,
.cn-btn--outline-dark:focus-visible > span {
	color: var(--cn-ivory);
}

.cn-btn--gold {
	color: var(--cn-gold);
	border-color: var(--cn-gold);
}

.cn-btn--gold:hover > span,
.cn-btn--gold:focus-visible > span {
	color: var(--cn-noir);
}

/* Text link with an unrolling gold rule. */
.cn-link {
	position: relative;
	display: inline-block;
	padding-bottom: 0.35em;
	font-size: var(--cn-text-sm);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
}

.cn-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--cn-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-link:hover::after,
.cn-link:focus-visible::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Reveal — used by every section from The Edit down
   -------------------------------------------------------------------------- */

.cn-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--cn-dur-reveal) var(--cn-ease),
	            transform var(--cn-dur-reveal) var(--cn-ease);
}

.cn-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cn-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--cn-noir);
	color: var(--cn-ivory);
	font-size: var(--cn-text-sm);
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
}

.cn-skip-link:focus {
	top: 1rem;
}

.cn-affiliate-disclosure {
	max-width: 60ch;
	margin-block: 2rem 0;
	font-size: 0.85rem;
	color: var(--cn-warm-gray);
}

/* Locks the page while the mobile menu is open. */
body.cn-no-scroll {
	overflow: hidden;
}

/* Interaction-to-play preview surfaces (Services, Selected Work, Lookbook,
   About) — hover/focus on desktop, tap on touch; see initInteractionVideos()
   in main.js. The cursor is the only hint needed; the surfaces already sit
   next to a still image until played. */
[data-cn-video-surface] {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Form validation — no native browser bubbles; see initFormValidation() in
   main.js. [aria-invalid] is used as the styling hook (not a class) so this
   still works on markup this theme doesn't own, like a pasted newsletter
   embed.
   -------------------------------------------------------------------------- */

[aria-invalid="true"] {
	border-color: rgba(168, 134, 62, 0.75); /* --cn-gold-deep, kept subtle rather than a hard red/orange warning */
}

.cn-field-error {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--cn-text-xs);
	letter-spacing: 0.01em;
	/* --cn-gold-deep, not --cn-rose — the newsletter section's own
	   background is dusty rose, which would make a rose error message
	   nearly invisible against it; gold-deep is this palette's documented
	   accent for light surfaces and reads clearly on both ivory and rose. */
	color: var(--cn-gold-deep);
}

/* --------------------------------------------------------------------------
   Scrollbar — desktop/trackpad input only, so touch devices keep whatever
   native overlay scrollbar they already use rather than this being forced
   on top of it.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	html {
		scrollbar-width: thin; /* Firefox */
		scrollbar-color: rgba(198, 166, 100, 0.55) transparent; /* Firefox: thumb, track */
	}

	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-color: rgba(198, 166, 100, 0.55);
		border-radius: 4px;
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: rgba(198, 166, 100, 0.8);
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — nothing moves, everything stays visible
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cn-reveal {
		opacity: 1;
		transform: none;
	}
}