/* =========================================================================
   Zazza — tokens, reset, typography
   ========================================================================= */

:root {
	/* Surfaces. The page is bone; white is reserved for product frames. */
	--bone: #f4f1ec;
	--bone-2: #eae5dd;
	--paper: #ffffff;
	--ink-surface: #1c1814;

	/* Ink — warm near-black, never pure #000. */
	--ink: #1c1814;
	--ink-2: #443c33;
	/* Both meet WCAG AA against the bone canvas: 4.6:1 and 3.2:1. */
	--muted: #756b61;
	--muted-2: #938678;

	/* Hairlines carry most of the structure here. */
	--line: #ddd6cb;
	--line-2: #c9bfb1;

	/* One restrained accent. Photography supplies the colour. */
	--accent: #7a5c3c;

	/* Motion */
	--ease: cubic-bezier(.22, .61, .25, 1);
	--t-fast: .2s var(--ease);
	--t: .4s var(--ease);
	--t-slow: .9s var(--ease);

	/* Layout */
	--wrap: 1680px;
	--gut: 20px;
	--header-h: 64px;
	--section: clamp(72px, 10vw, 150px);

	--font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--serif: "Cormorant", Georgia, "Times New Roman", serif;
}

@media (min-width: 768px) { :root { --gut: 36px; --header-h: 76px; } }
@media (min-width: 1280px) { :root { --gut: 52px; } }

/* ---------- reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
	/* `clip` keeps sticky positioning working, unlike `hidden`, which turns the
	   root into a scroll container. Declared on both elements because iOS
	   propagates the body's overflow to the viewport and then ignores it. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bone);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-x: clip;
	max-width: 100%;
}

/* iOS keeps scrolling a body that is only overflow:hidden, so the open-panel
   lock pins the body and app.js carries the offset in `top`. */
body.zz-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* Weight stays light; scale and space do the emphasis. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
/* WooCommerce wraps sale prices in <ins>, which browsers underline. */
ins { text-decoration: none; background: none; color: inherit; }
dl, dd { margin: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
del { text-decoration: none; }

::selection { background: var(--ink); color: var(--bone); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- type ---------- */

.zz-eyebrow {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 18px;
}
.zz-eyebrow--light { color: rgba(255, 255, 255, .78); }

.zz-underline {
	position: relative;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-bottom: 3px;
	white-space: nowrap;
}
.zz-underline::after {
	content: "";
	position: absolute;
	/* Letter-spacing leaves a trailing gap after the last glyph; pull the
	   rule in by the same amount so it ends with the word. */
	left: 0; right: .14em; bottom: 0;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transition: transform var(--t);
}
.zz-underline:hover::after { transform: scaleX(0); transform-origin: left; }
.zz-underline--light { color: #fff; }

/*
 * Hidden from sight, read by screen readers. `left: 0` matters: without an
 * offset the box keeps its static position, and inside a horizontal scroller
 * that position can sit past the viewport and stretch the page.
 */
.screen-reader-text {
	position: absolute !important;
	left: 0; top: 0;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.zz-skip {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 200;
	background: var(--ink);
	color: var(--bone);
	padding: 12px 20px;
}
.zz-skip:focus { left: 0; }

/* ---------- prose ---------- */

.zz-prose { font-size: 15.5px; line-height: 1.8; color: var(--ink-2); max-width: 68ch; }
.zz-prose > * + * { margin-top: 1.1em; }
.zz-prose h2 { font-size: clamp(20px, 2.6vw, 26px); color: var(--ink); margin-top: 2em; }
.zz-prose h3 { font-size: 17px; color: var(--ink); margin-top: 1.7em; }
.zz-prose a { border-bottom: 1px solid var(--line-2); }
.zz-prose a:hover { border-color: var(--ink); }
.zz-prose ul { padding-left: 1.1em; }
.zz-prose ul li { position: relative; }
.zz-prose ul li::before {
	content: "";
	position: absolute;
	left: -14px; top: .8em;
	width: 4px; height: 1px;
	background: var(--line-2);
}
.zz-prose ol { list-style: decimal; padding-left: 1.3em; }
.zz-prose li + li { margin-top: .4em; }

/* ---------- utility ---------- */

.zz-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.zz-section { padding-block: var(--section); }
.zz-icon { flex: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}