/* ==========================================================================
   Header: floats over whatever surface is beneath and takes its tone.
   ========================================================================== */

.qc-site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	height: var(--hd);
	view-transition-name: qc-header;
}

.qc-hd { position: relative; height: var(--hd); color: var(--white); }
.qc-hd[data-tone="dark"] { color: var(--ink); }

.qc-hd::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: rgba(51, 32, 27, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: inset 0 -1px 0 rgba(235, 202, 180, 0.22);
	transition: opacity var(--t-mid) var(--ease-out), background-color var(--t-mid);
}
.qc-hd[data-tone="dark"]::before { background: rgba(244, 234, 227, 0.86); box-shadow: inset 0 -1px 0 var(--paper-line); }
.is-scrolled .qc-hd::before,
.is-sheet-open .qc-hd::before { opacity: 1; }

.qc-hd__bar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.qc-hd__logo { position: relative; display: block; flex: none; width: 138px; height: 48px; }
.qc-hd__logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	transition: opacity var(--t-mid) var(--ease-out);
}
.qc-hd__logo-dark { opacity: 0; }
.qc-hd[data-tone="dark"] .qc-hd__logo-light { opacity: 0; }
.qc-hd[data-tone="dark"] .qc-hd__logo-dark { opacity: 1; }

.qc-hd__nav { margin-left: auto; }
.qc-hd__nav ul { display: flex; gap: 0.2rem; }
.qc-hd__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	padding: 0 0.85rem;
	color: inherit;
	font: 600 0.975rem/1 var(--f-text);
	font-stretch: 92%;
	text-decoration: none;
}
.qc-hd__link .qc-icon { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease-cut); }
.qc-hd__link[aria-expanded="true"] .qc-icon { transform: rotate(180deg); }
/* The underline is cut in from the left, like a laser pass. */
.qc-hd__link::after {
	content: "";
	position: absolute;
	left: 0.85rem; right: 0.85rem; bottom: 8px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t-mid) var(--ease-cut);
}
.qc-hd__link:hover::after,
.qc-hd__link[aria-current="page"]::after,
.qc-hd__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }

.qc-hd__actions { display: flex; align-items: center; gap: 0.5rem; }

/* The quote list is a kraft job ticket. */
.qc-ticket {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0 0.85rem 0 1.55rem;
	border-radius: 3px 999px 999px 3px;
	background: var(--kraft);
	background-image: url("../img/kraft-print.png");
	background-size: 176px;
	color: var(--white);
	font: 600 0.925rem/1 var(--f-text);
	font-stretch: 92%;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(251, 246, 241, 0.3), 2px 3px 8px -4px rgba(0, 0, 0, 0.5);
	transition: transform var(--t-fast) var(--ease-mount);
}
.qc-ticket:hover { transform: translateY(-2px) rotate(-1.5deg); }
.qc-ticket__hole {
	position: absolute;
	left: 0.6rem; top: 50%;
	width: 7px; height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: rgba(51, 32, 27, 0.85);
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.qc-ticket__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--white);
	color: var(--ink);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}
.qc-ticket__count.is-empty { background: rgba(51, 32, 27, 0.42); color: var(--white); }
.qc-ticket.is-bump { animation: qc-ticket-bump 620ms var(--ease-mount); }
@keyframes qc-ticket-bump {
	0% { transform: none; }
	30% { transform: translateY(3px) rotate(3deg) scale(1.06); }
	100% { transform: none; }
}

.qc-hd__menu {
	display: none;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0 0.4rem 0 0.6rem;
	border: 0;
	background: none;
	color: inherit;
	font: 600 0.95rem/1 var(--f-text);
	cursor: pointer;
}
.qc-hd__menu-lines { position: relative; width: 22px; height: 12px; }
.qc-hd__menu-lines span {
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: currentColor;
	transition: transform var(--t-mid) var(--ease-cut), top var(--t-mid) var(--ease-cut);
}
.qc-hd__menu-lines span:first-child { top: 0; }
.qc-hd__menu-lines span:last-child { top: 10px; }
.qc-hd__menu[aria-expanded="true"] .qc-hd__menu-lines span:first-child { top: 5px; transform: rotate(45deg); }
.qc-hd__menu[aria-expanded="true"] .qc-hd__menu-lines span:last-child { top: 5px; transform: rotate(-45deg); }

/* ---------- Products sheet (desktop): an acrylic sheet lowered on its bolts ---------- */

.qc-drop {
	position: absolute;
	left: 0; right: 0;
	top: calc(var(--hd) - 6px);
	z-index: 2;
	padding: 0 var(--gutter);
	perspective: 1200px;
}
.qc-drop[hidden] { display: none; }
.qc-drop__sheet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.5fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	max-width: calc(var(--max) - var(--gutter) * 2);
	margin-inline: auto;
	container-type: inline-size;
	padding: 2.5rem 3rem 2.75rem;
	border-radius: 4px;
	background: rgba(74, 46, 39, 0.94);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	color: var(--white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset -2px -2px 0 rgba(235, 202, 180, 0.3), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
	transform-origin: top center;
}
.qc-drop__sheet .qc-bolts { --o: 14px; }
.qc-drop .qc-micro { margin-bottom: 1rem; }
.qc-drop__occasions a,
.qc-drop__cats a { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; color: inherit; text-decoration: none; }
.qc-drop__occasions a { font: 400 1.5rem/1.2 var(--f-display); }
.qc-drop__cats { columns: 2; column-gap: 2rem; }
.qc-drop__cats li { break-inside: avoid; }
.qc-drop__cats a { font-weight: 600; }
.qc-drop a span { font: 600 0.75rem/1 var(--f-text); opacity: 0.6; font-variant-numeric: tabular-nums; }
.qc-drop a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qc-drop__all { align-self: end; font: 400 1.3rem/1.2 var(--f-display); color: var(--edge); }

.qc-motion .qc-drop.is-opening .qc-drop__sheet { animation: qc-lower 560ms var(--ease-mount) both; }
.qc-motion .qc-drop.is-opening .qc-bolts i { animation: qc-bolt 480ms var(--ease-out) 260ms both; }
.qc-motion .qc-drop.is-closing .qc-drop__sheet { animation: qc-raise 240ms var(--ease-cut) both; }
@keyframes qc-lower {
	from { opacity: 0; transform: translateY(-18px) rotateX(8deg); }
	to { opacity: 1; transform: none; }
}
@keyframes qc-raise { to { opacity: 0; transform: translateY(-12px); } }

/* ---------- Mobile menu ---------- */

.qc-menu { display: none; }

@media (max-width: 960px) {
	.qc-hd__nav, .qc-drop { display: none !important; }
	.qc-hd__menu { display: inline-flex; }
	.qc-hd__actions { margin-left: auto; }
	.qc-hd__logo { width: 112px; height: 40px; }

	.qc-menu {
		position: fixed;
		inset: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: calc(var(--hd) + 1rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
		background-color: var(--ink);
		background-image: radial-gradient(rgba(232, 200, 186, 0.13) 1px, transparent 1.3px);
		background-size: 24px 24px;
		color: var(--white);
	}
	.qc-menu[hidden] { display: none; }
	.qc-hd:has(.qc-menu:not([hidden])) { color: var(--white); }
	.qc-hd:has(.qc-menu:not([hidden])) .qc-hd__logo-light { opacity: 1; }
	.qc-hd:has(.qc-menu:not([hidden])) .qc-hd__logo-dark { opacity: 0; }
	.qc-menu__item { border-bottom: 1px solid var(--ink-line); }
	.qc-menu__item a {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		min-height: 68px;
		padding-top: 0.7rem;
		font-family: var(--f-text);
		font-stretch: 75%;
		font-weight: 640;
		font-size: clamp(2.6rem, 12vw, 3.6rem);
		line-height: 1;
		letter-spacing: -0.03em;
		color: inherit;
		text-decoration: none;
	}
	.qc-menu__item a span { font: 600 0.85rem/1 var(--f-text); opacity: 0.6; letter-spacing: 0; }
	.qc-menu__label { margin: 2rem 0 0.75rem; }
	.qc-menu__cats { columns: 2; column-gap: 1rem; }
	.qc-menu__cats a { display: block; padding: 0.5rem 0; font-weight: 600; text-decoration: none; break-inside: avoid; }
	.qc-menu__foot { display: grid; gap: 1.25rem; margin-top: auto; padding-top: 2.5rem; color: var(--mist); }
	.qc-menu__foot .qc-btn { width: 100%; }
	.qc-menu__foot a:not(.qc-btn) { color: var(--white); }

	.qc-motion .qc-menu.is-opening { animation: qc-menu-in 560ms var(--ease-cut) both; }
	.qc-motion .qc-menu.is-opening .qc-menu__item a { animation: qc-slide-in 700ms var(--ease-cut) calc(120ms + var(--i, 0) * 60ms) both; }
	.qc-motion .qc-menu.is-closing { animation: qc-menu-in 280ms var(--ease-cut) reverse both; }
}
@media (max-width: 400px) {
	.qc-ticket__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.qc-ticket { padding-left: 1.4rem; }
}
@keyframes qc-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qc-slide-in {
	from { clip-path: inset(0 100% 0 0); transform: translateX(-12px); }
	to { clip-path: inset(0 -10% 0 0); transform: none; }
}

/* ---------- Quote tray: a kraft sheet slid in from the side ---------- */

.qc-tray { position: fixed; inset: 0; z-index: 120; }
.qc-tray[hidden] { display: none; }
.qc-tray__scrim { position: absolute; inset: 0; background: rgba(33, 20, 16, 0.6); }
.qc-tray__sheet {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	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);
	background-size: 176px, auto;
	color: var(--white);
	box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.6);
}
.qc-tray__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem 1rem; }
.qc-tray__title { font-size: 1.8rem; }
.qc-tray__close {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
	cursor: pointer;
}
.qc-tray__close:hover { background: rgba(255, 255, 255, 0.26); }
.qc-tray__body { flex: 1; overflow-y: auto; padding: 0.5rem 1.5rem 1.5rem; }
.qc-tray__items { display: grid; gap: 0.75rem; }
.qc-tray__item {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: center;
	padding: 0.6rem;
	border-radius: 3px;
	background: rgba(51, 32, 27, 0.28);
}
.qc-tray__item a { color: inherit; font-weight: 600; text-decoration: none; }
.qc-tray__item a:hover { text-decoration: underline; }
.qc-tray__item button {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.qc-tray__item button:hover { background: rgba(255, 255, 255, 0.16); }
.qc-tray__empty { color: rgba(255, 255, 255, 0.86); }
.qc-tray__empty[hidden] { display: none; }
.qc-tray__foot { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.qc-tray__note { font-size: 0.85rem; opacity: 0.78; }

.qc-motion .qc-tray.is-opening .qc-tray__sheet { animation: qc-tray-in 560ms var(--ease-mount) both; }
.qc-motion .qc-tray.is-opening .qc-tray__scrim { animation: qc-fade 300ms var(--ease-out) both; }
.qc-motion .qc-tray.is-closing .qc-tray__sheet { animation: qc-tray-in 260ms var(--ease-cut) reverse both; }
.qc-motion .qc-tray.is-closing .qc-tray__scrim { animation: qc-fade 260ms reverse both; }
.qc-motion .qc-tray__item.is-new { animation: qc-mount 640ms var(--ease-mount) both; }
@keyframes qc-tray-in { from { transform: translateX(104%) rotate(1.5deg); } to { transform: none; } }

@media (max-width: 600px) {
	.qc-tray__sheet { top: auto; left: 0; width: 100%; max-height: 86svh; border-radius: 10px 10px 0 0; }
	@keyframes qc-tray-in { from { transform: translateY(104%); } to { transform: none; } }
}

/* A sketch from the maker, as a small etched plate */
.qc-sketch-card {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: center;
	margin-bottom: 0.75rem;
	padding: 0.6rem;
	border-radius: 3px;
	background: rgba(51, 32, 27, 0.28);
}
.qc-sketch-card__plate {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	padding: 0.35rem;
	border-radius: 3px;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.12));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset -2px -2px 0 rgba(235, 202, 180, 0.4), 4px 6px 10px -6px rgba(0, 0, 0, 0.6);
	font: 400 0.8rem/1.05 var(--f-display);
	text-align: center;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.qc-sketch-card__plate[data-shape="round"] { aspect-ratio: 1; border-radius: 50%; width: 64px; justify-self: center; }
.qc-sketch-card__plate[data-shape="arch"] { aspect-ratio: 4 / 5; width: 60px; justify-self: center; border-radius: 30px 30px 3px 3px; }
.qc-sketch-card__plate[data-shape="panel"] { aspect-ratio: 3 / 4; width: 58px; justify-self: center; }
.qc-sketch-card__plate[data-shape="box"] { aspect-ratio: 1; width: 64px; justify-self: center; }
.qc-sketch-card__plate[data-finish="frosted"] { background: rgba(250, 241, 234, 0.74); color: var(--ink); }
.qc-sketch-card__meta { display: grid; gap: 0.1rem; font-size: 0.85rem; }
.qc-sketch-card__meta b { font-size: 0.95rem; }
.qc-sketch-card button {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.qc-sketch-card button:hover { background: rgba(255, 255, 255, 0.16); }