/* ==========================================================================
   Quick & Crafted: Made clear
   Base layer. Tokens, surfaces, type, buttons.
   Motion vocabulary: ETCH, CUT, PEEL, MOUNT, LAYER (see material.css).
   ========================================================================== */

@property --cut {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 130%;
}

:root {
	/* Palette, from the brand's own photography: chocolate falling to mocha, blush and cream. */
	--espresso: #33201b;      /* deepest: type on light, footer, chapters */
	--chocolate: #4a2e27;     /* the workshop */
	--chocolate-2: #5c3a32;   /* raised dark */
	--kraft: #835f54;         /* backing paper: the brand's mocha (logo colour) */
	--kraft-lite: #9b6f65;    /* rose-mocha */
	--kraft-deep: #664038;
	--sand: #e8d6cb;          /* secondary light surface */
	--paper: #f4eae3;         /* cream */
	--ivory: #fbf6f1;         /* type on dark */

	/* Roles */
	--ink: var(--espresso);
	--white: var(--ivory);
	--mist: rgba(251, 246, 241, 0.76);
	--ink-line: rgba(251, 246, 241, 0.16);
	--paper-line: rgba(51, 32, 27, 0.14);
	--graphite: #6e5048;      /* secondary type on cream (6:1) */
	--error: #a3261b;

	/* Light: warm champagne on cut edges, laser marks and focus. Never a UI colour on its own. */
	--edge: #ebcab4;
	--edge-soft: rgba(235, 202, 180, 0.36);

	/* Type */
	--f-display: "Young Serif", Georgia, serif;
	--f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Space */
	--max: 1440px;
	--gutter: clamp(18px, 4.2vw, 64px);
	--section: clamp(5rem, 11vw, 10rem);
	--hd: 80px;

	/* Motion */
	--ease-cut: cubic-bezier(0.77, 0, 0.18, 1);   /* a laser head: decisive */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* settling into place */
	--ease-mount: cubic-bezier(0.34, 1.45, 0.64, 1); /* a panel seated on its bolts */
	--t-fast: 180ms;
	--t-mid: 460ms;
	--t-slow: 950ms;
}

@media (max-width: 900px) {
	:root { --hd: 64px; }
}

/* ---------- Reset and base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--hd) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--espresso);
	color: var(--espresso);
	font-family: var(--f-text);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
body.qc-lock { overflow: hidden; }

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

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

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); letter-spacing: -0.012em; }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }

:focus-visible {
	outline: 2px solid var(--edge);
	outline-offset: 3px;
	border-radius: 3px;
}
[data-surface="paper"] :focus-visible,
[data-surface="sand"] :focus-visible,
[data-surface="kraft"] :focus-visible { outline-color: var(--espresso); }

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

/* WordPress layout resets: every section owns its own rhythm. */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + *,
.qc-main > *,
.qc-main .wp-block-post-content > * { margin-block: 0; }
.qc-main .wp-block-post-content > :first-child { --top: calc(var(--hd) + clamp(1.5rem, 4vw, 3rem)); }

/* The header floats over the first surface; the first section makes room for it. */
.qc-main { margin-top: calc(var(--hd) * -1); }
.qc-main > :first-child { --top: calc(var(--hd) + clamp(1.5rem, 4vw, 3rem)); }

/* ---------- Surfaces ---------- */

[data-surface="workshop"],
[data-surface="photo"] {
	--fg: var(--ivory);
	--fg-2: var(--mist);
	--line: var(--ink-line);
	--stroke: rgba(251, 246, 241, 0.34);
	--stroke-hi: rgba(251, 246, 241, 0.8);
	--frost: rgba(51, 32, 27, 0.8);
	color: var(--fg);
}
[data-surface="workshop"] {
	background-color: var(--chocolate);
	/* A laser bed: a faint dot grid, warm. */
	background-image: radial-gradient(rgba(232, 200, 186, 0.13) 1px, transparent 1.3px);
	background-size: 24px 24px;
}
[data-surface="paper"],
[data-surface="sand"] {
	--fg: var(--espresso);
	--fg-2: var(--graphite);
	--line: var(--paper-line);
	--stroke: rgba(51, 32, 27, 0.32);
	--stroke-hi: rgba(51, 32, 27, 0.85);
	--frost: rgba(244, 234, 227, 0.86);
	background-color: var(--paper);
	color: var(--fg);
}
[data-surface="sand"] {
	--fg-2: #5e423a;          /* 5:1 on sand */
	--frost: rgba(232, 214, 203, 0.9);
	background-color: var(--sand);
}
[data-surface="kraft"] {
	--fg: var(--ivory);
	--fg-2: rgba(251, 246, 241, 0.88);
	--line: rgba(251, 246, 241, 0.2);
	background-color: var(--kraft);
	background-image:
		url("../img/kraft-print.png"),
		repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(8deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 5px);
	background-size: 176px 176px, auto, auto;
	color: var(--white);
}

/* ---------- Type voices ---------- */

/* Micro-type: a fabricator's annotation. Sentence case, never shouted. */
.qc-micro {
	display: block;
	font: 600 0.8rem/1.35 var(--f-text);
	letter-spacing: 0.02em;
	/* Secondary colour of the surface it sits on, never faded with opacity (keeps AA contrast). */
	color: var(--fg-2, currentColor);
}

/* Structure type: oversized condensed words. */
.qc-big {
	display: block;
	font-family: var(--f-text);
	font-stretch: 75%;
	font-weight: 640;
	line-height: 0.84;
	letter-spacing: -0.035em;
}
.qc-big__line { display: block; position: relative; padding-bottom: 0.04em; }
.qc-big__line > span { display: inline-block; }

/* Headings that will be cut in stay uncut until their moment (they appear anyway if the script never runs). */
@media (prefers-reduced-motion: no-preference) {
	.qc-js [data-cut-words]:not(.qc-cutting) .qc-big__line > span { clip-path: inset(-0.2em 100% -0.2em 0); }
	.qc-js:not(.qc-armed) [data-cut-words]:not(.qc-cutting) .qc-big__line > span { animation: qc-cut-in 1ms linear 3.5s forwards; }
}

/* CUT, on words: a laser line crosses each line and the letters are there behind it. */
.qc-motion .qc-cutting .qc-big__line > span {
	clip-path: inset(-0.2em 100% -0.2em 0);
	animation: qc-cut-in var(--t-slow) var(--ease-cut) calc(var(--d, 0ms) + var(--l, 0) * 110ms) forwards;
}
.qc-motion .qc-cutting .qc-big__line::after {
	content: "";
	position: absolute;
	top: 0.08em; bottom: 0.02em;
	left: 0;
	width: 2px;
	background: var(--white);
	box-shadow: 0 0 10px 2px var(--edge);
	opacity: 0;
	animation: qc-laser-x var(--t-slow) var(--ease-cut) calc(var(--d, 0ms) + var(--l, 0) * 110ms) forwards;
}
@keyframes qc-cut-in { to { clip-path: inset(-0.2em -0.1em -0.2em 0); } }
@keyframes qc-laser-x {
	0% { left: 0; opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* ---------- Buttons ----------
   On hover a button gains thickness: an acrylic slab lifting off the surface. On press it seats flush. */

.qc-btn {
	--bg: var(--ink);
	--fg: var(--white);
	--slab: var(--edge-soft);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 52px;
	padding: 0 1.5em;
	border: 0;
	border-radius: 3px;
	background: var(--bg);
	color: var(--fg);
	font: 600 1rem/1.1 var(--f-text);
	font-stretch: 92%;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0 0 0 var(--slab);
	transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-mid);
}
.qc-btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--slab); }
.qc-btn:active { transform: none; box-shadow: 0 0 0 0 var(--slab); transition-duration: 60ms; }
.qc-btn--light { --bg: var(--white); --fg: var(--ink); --slab: var(--edge); }
.qc-btn--ink { --bg: var(--ink); --fg: var(--white); --slab: var(--kraft-lite); }
[data-surface="kraft"] .qc-btn--ink { --slab: rgba(51, 32, 27, 0.45); }
.qc-btn--line { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.qc-btn--line:hover { box-shadow: inset 0 0 0 1.5px currentColor, 3px 3px 0 0 var(--slab); }
.qc-btn--small { min-height: 42px; padding: 0 1.1em; font-size: 0.925rem; }

.qc-link {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-decoration-thickness var(--t-fast), text-underline-offset var(--t-fast);
}
.qc-link:hover { text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.qc-link--light { color: var(--white); }

.qc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	min-height: 40px;
	padding: 0 0.95rem;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	font: 600 0.9rem/1 var(--f-text);
	font-stretch: 94%;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.86;
	transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.qc-chip:hover { opacity: 1; }
.qc-chip[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: none; opacity: 1; }
[data-surface="paper"] .qc-chip[aria-pressed="true"],
[data-surface="sand"] .qc-chip[aria-pressed="true"] { background: var(--espresso); color: var(--ivory); }

.qc-icon { flex: none; }

.qc-skip {
	position: absolute;
	left: 12px; top: -100px;
	z-index: 200;
	padding: 0.75rem 1rem;
	background: var(--white);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.qc-skip:focus { top: 12px; }

/* ---------- Page transitions ---------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 220ms var(--ease-out) both qc-vt-out; }
	::view-transition-new(root) { animation: 420ms var(--ease-out) 40ms both qc-vt-in; }
	::view-transition-group(qc-product) { animation-duration: 620ms; animation-timing-function: var(--ease-cut); }
	::view-transition-group(qc-header) { animation: none; }
}
@keyframes qc-vt-out { to { opacity: 0; } }
@keyframes qc-vt-in { from { opacity: 0; } }

/* ---------- Reduced motion: final states, immediately. ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		/* 0s, not 1ms: a tiny duration would switch transitions on for every property. */
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}