/* ==========================================================================
   CONTROL. — fonts, reset, typography rhythm, layout primitives.
   ========================================================================== */

/* ---- Self-hosted brand fonts (Erode serif + Montserrat sans) ---- */
@font-face {
	font-family: "Erode";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/erode-400.woff2") format("woff2");
}
@font-face {
	font-family: "Erode";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/erode-500.woff2") format("woff2");
}
@font-face {
	font-family: "Erode";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/erode-600.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Reset (rhythm-preserving) ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* NO SMOOTH HERE, and that is the fix rather than an omission. This used to
	   be scroll-behavior: smooth, stood down by html.cp-lenis below. But that
	   class is added by main.js, which is deferred, so smooth was live on the
	   root for the whole of early load. Anything the browser scrolled in that
	   window, its own scroll restoration on a reload above all, was animated
	   instead of instant: the page appeared where you left it and then slid
	   back up, which reads as the site scrolling itself. Lenis also documents
	   CSS smooth as something that fights it.

	   Nothing loses smoothness that had it for a real reason. With JS the
	   anchor path is explicit, lenis.scrollTo or scrollIntoView with behavior
	   smooth in main.js. Without JS anchors now jump instantly, which is the
	   ordinary behaviour of a link and is what a cold load of /#waitlist did
	   anyway. scroll-margin-top still supplies the header clearance in both. */
	scroll-behavior: auto;
}

html.cp-lenis body {
	min-height: 100vh;
}

body {
	margin: 0;
	/* Bourgogne, not the creme of the beige era: every section is dark since
	   round 11, and the only time this colour shows is the rubber band past
	   either end of the page, where a creme flash on a burgundy site read as
	   a glitch (caught in a capture, 2026-09-23). */
	background: var(--cp-bourgogne);
	color: var(--cp-text);
	font-family: var(--cp-font-sans);
	font-size: var(--cp-fs-body);
	line-height: 1.7;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* Scrollbar hidden by design; the carriage dot reads scroll progress. */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--cp-font-display);
	font-weight: 400;
	line-height: 1.16;
	margin: 0 0 var(--cp-s3);
	overflow-wrap: break-word;
}

h1 em,
h2 em,
h3 em {
	font-style: italic;
	color: var(--cp-accent);
}

p {
	margin: 0 0 var(--cp-s2);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--cp-accent);
	color: var(--cp-text-light);
}

:focus-visible {
	outline: 2px solid var(--cp-accent);
	outline-offset: 3px;
	border-radius: var(--cp-radius);
}

/* Anchor targets land below the fixed header. */
[id] {
	scroll-margin-top: calc(var(--cp-header-h) + 1rem);
}

/* ---- Layout primitives ---- */
.cp-container {
	width: 100%;
	max-width: var(--cp-container-max);
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-section {
	padding-block: var(--cp-section-pad);
}

/* Round 6: the dark sections carry the charte's deep Bourgogne rather than near
   black, so the page alternates beige and wine the whole way down. See the note
   beside --cp-section-deep for why the client's lighter red was built, looked at
   and set aside.

   THE TOKENS ARE REDEFINED HERE RATHER THAN GLOBALLY, and that is the whole
   trick: every rule downstream keeps saying var(--cp-text-light), so about forty
   call sites move to the new ground without being touched, and nothing outside a
   dark section changes. The hero is deliberately not caught by this: it carries
   data-tone="dark" but not this class, because its ground is a video.

   THE LIGHT GROUND TOKENS ARE REDIRECTED TOO, and that is not belt and braces.
   Several rules inside these sections reach for --cp-text-muted directly, because
   until now the sections were light. The concept body copy is one, and it
   measured 1.56 against the new ground before this block existed. Redirecting the
   token fixes every such rule at once, including any written later by someone who
   does not know the section changed ground. */
.cp-section--dark {
	background: var(--cp-section-deep);
	color: var(--cp-text-light);

	--cp-text-light: #ffffff;
	/* SOLID, NOT TRANSLUCENT WHITE, and the difference is visible rather than
	   academic. White at 74 percent over this wine composites to rgb(221,197,200),
	   a dusty pink: it passes at 6.07 and still looks dead, because a translucent
	   neutral takes on whatever is behind it and what is behind it here is red.
	   The page's own beige is a solid colour, so it stays itself, reads warm
	   rather than washed, and ties the wine sections to the beige ones between
	   them. Measured 6.39 against 9.87 for the primary tier, which is the step
	   down in emphasis a muted tone is supposed to be. */
	--cp-text-light-muted: var(--cp-creme);
	/* Non-text, so 3:1 applies rather than 4.5. */
	--cp-accent-light: rgba(255, 255, 255, 0.8);

	--cp-text: #ffffff;
	--cp-text-muted: var(--cp-text-light-muted);
	--cp-accent: var(--cp-accent-light);
	--cp-border: rgba(255, 255, 255, 0.24);
	--cp-border-dark: rgba(255, 255, 255, 0.24);
}

/* The default pill is an ink fill, which was invisible while these sections were
   ink themselves: it read as plain text and nobody noticed there was a button
   shape at all. On the wine it turns into a black hole punched in the page. It
   takes the light treatment here, the same one the header CTA already uses over
   dark sections. Ghost keeps its own outline, and --light is already this. */
.cp-section--dark .cp-btn:not(.cp-btn--ghost):not(.cp-btn--light),
.cp-footer .cp-btn:not(.cp-btn--ghost):not(.cp-btn--light) {
	background: var(--cp-creme);
	color: var(--cp-ink);
}

@media (hover: hover) {
	.cp-section--dark .cp-btn:not(.cp-btn--ghost):not(.cp-btn--light):hover,
	.cp-footer .cp-btn:not(.cp-btn--ghost):not(.cp-btn--light):hover {
		background: #ffffff;
	}
}

.cp-section--dark h1 em,
.cp-section--dark h2 em,
.cp-section--dark h3 em {
	color: var(--cp-text-light);
}

/* ---- Accessibility utilities ---- */
.cp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cp-skip-link {
	position: absolute;
	top: -100%;
	left: var(--cp-s2);
	z-index: 200;
	padding: var(--cp-s1) var(--cp-s2);
	background: var(--cp-ink);
	color: var(--cp-text-light);
	border-radius: var(--cp-radius-pill);
	text-decoration: none;
}

.cp-skip-link:focus-visible {
	top: var(--cp-s2);
}

/* Honeypot — visually removed, still in the accessibility tree for bots. */
.cp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* ---- Reduced motion: everything settles instantly ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.16s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.16s !important;
	}
}