:root {
	--ground:#E8DFD0;
	--surface:#DAD0BF;
	--surface-2:#CABEAB;
	--line:#A79C8A;
	--ink-soft:#534C3F;
	--ink:#2C2821;
	--accent:#B5542B;
	--accent-ink:#FFF;

	--vuka-d2f:'Fraunces', "Fraunces Fallback", Georgia, serif;
	--vuka-d6c:"Crimson Pro", "Crimson Pro Fallback", Garamond, Georgia, serif;
	--vuka-4c1:'JetBrains Mono', "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-3xs:clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
	--fs-2xs:clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
	--fs-xs:clamp(0.88rem, 0.84rem + 0.20vw, 0.98rem);
	--fs-sm:clamp(0.96rem, 0.91rem + 0.25vw, 1.08rem);
	--fs-base:clamp(1.06rem, 1.00rem + 0.32vw, 1.22rem);
	--fs-md:clamp(1.18rem, 1.10rem + 0.44vw, 1.40rem);
	--fs-lg:clamp(1.36rem, 1.24rem + 0.62vw, 1.68rem);
	--fs-xl:clamp(1.60rem, 1.42rem + 0.92vw, 2.06rem);
	--fs-2xl:clamp(1.92rem, 1.65rem + 1.35vw, 2.62rem);
	--fs-3xl:clamp(2.32rem, 1.95rem + 1.90vw, 3.36rem);
	--fs-display:clamp(2.80rem, 2.30rem + 2.70vw, 4.40rem);

	--leading-none:1.02;
	--leading-tight:1.16;
	--leading-snug:1.28;
	--leading-normal:1.52;
	--leading-loose:1.74;

	--tracking-tight:-0.025em;
	--tracking-normal:0em;
	--tracking-wide:0.04em;
	--tracking-wider:0.08em;

	--radius-xs:2px;
	--radius-sm:4px;
	--radius-md:6px;
	--radius-lg:8px;

	--space-4xs:0.125rem;
	--space-3xs:0.25rem;
	--space-2xs:0.375rem;
	--space-xs:0.5rem;
	--space-sm:0.75rem;
	--space-md:1rem;
	--space-lg:1.5rem;
	--space-xl:2rem;
	--space-2xl:2.75rem;
	--space-3xl:4rem;
	--space-4xl:5.5rem;

	--measure-narrow:46ch;
	--measure-prose:62ch;
	--measure-wide:74ch;

	--container-max:1240px;
	--container-pad:clamp(1rem, 3.8vw, 2.75rem);

	--dock-height:68px;

	--ease-standard:cubic-bezier(0.2, 0, 0, 1);
	--ease-out:cubic-bezier(0, 0, 0.2, 1);
	--ease-in:cubic-bezier(0.4, 0, 1, 1);
	--duration-fast:140ms;
	--duration-medium:220ms;
	--duration-slow:380ms;
}

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

html {
	font-size:16px;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
	background-color:var(--ground);
	color:var(--ink);
}

body {
	font-family:var(--vuka-d6c);
	font-size:var(--fs-base);
	line-height:var(--leading-normal);
	color:var(--ink);
	background-color:var(--ground);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	padding-bottom:var(--dock-height);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@media (min-width: 960px) {
	body { padding-bottom:0; }
}

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

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

table {
	border-collapse:collapse;
	border-spacing:0;
}

button {
	cursor:pointer;
	background:none;
	border:none;
}

a {
	color:inherit;
	text-decoration-skip-ink:auto;
}

ul,
ol { list-style:none; }

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:var(--vuka-d2f);
	color:var(--ink);
	line-height:var(--leading-tight);
	text-wrap:balance;
	font-weight:700;
}

h1 {
	font-size:var(--fs-display);
	font-weight:800;
	letter-spacing:var(--tracking-tight);
}

h2 {
	font-size:var(--fs-2xl);
	letter-spacing:var(--tracking-tight);
}

h3 {
	font-size:var(--fs-xl);
	line-height:var(--leading-snug);
}

h4 { font-size:var(--fs-lg); }

h5 { font-size:var(--fs-md); }

h6 { font-size:var(--fs-base); }

p {
	max-width:var(--measure-prose);
	color:var(--ink);
	font-size:var(--fs-base);
	line-height:var(--leading-normal);
}

p + p { margin-top:1.15em; }

.lede,
p.lede {
	font-size:var(--fs-md);
	line-height:var(--leading-snug);
	color:var(--ink-soft);
	max-width:58ch;
}

small,
.caption {
	font-size:var(--fs-xs);
	color:var(--ink-soft);
	line-height:var(--leading-snug);
}

strong,
b {
	font-weight:600;
	color:var(--ink);
}

em,
i { font-style:italic; }

address { font-style:normal; }

code,
pre,
kbd,
samp {
	font-family:var(--vuka-4c1);
	font-size:0.9em;
}

.num,
.tabular {
	font-family:var(--vuka-4c1);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.015em;
}

.container {
	width:100%;
	max-width:var(--container-max);
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.container-wide {
	width:100%;
	max-width:1400px;
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.container-narrow {
	width:100%;
	max-width:820px;
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.flow > * + * { margin-top:var(--space-lg); }

.flow-sm > * + * { margin-top:var(--space-sm); }

.flow-lg > * + * { margin-top:var(--space-2xl); }

.ledger-frame {
	position:relative;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	background-image:linear-gradient(to bottom, var(--line) 1px, transparent 1px);
	background-size:100% 2.2rem;
	background-position:0 0;

}

.ledger-line-top { border-top:1px solid var(--line); }

.ledger-line-bottom { border-bottom:1px solid var(--line); }

.ledger-grid {
	display:grid;
	gap:1px;
	background-color:var(--line);
	border:1px solid var(--line);
}

.ledger-grid > * { background-color:var(--ground); }

.quantity-open {
	padding-block:var(--space-xl) var(--space-md);
	border-top:1px solid var(--line);
}

.quantity-display {
	display:flex;
	align-items:baseline;
	gap:0.35em;
	font-family:var(--vuka-d2f);
	font-size:clamp(3.2rem, 2.5rem + 3.8vw, 6.2rem);
	font-weight:800;
	line-height:0.95;
	letter-spacing:-0.035em;
	color:var(--ink);

}

.quantity-unit {
	font-family:var(--vuka-d6c);
	font-size:clamp(1.1rem, 0.9rem + 0.8vw, 1.8rem);
	font-weight:500;
	color:var(--ink-soft);
	letter-spacing:-0.01em;
}

.quantity-lede {
	margin-top:var(--space-xs);
	font-size:var(--fs-md);
	line-height:var(--leading-snug);
	color:var(--ink-soft);
	max-width:60ch;
}

.icon {
	width:1.25em;
	height:1.25em;
	fill:currentColor;

	display:inline-block;
	flex-shrink:0;
	vertical-align:middle;
}

.skip-link {
	position:absolute;
	top:var(--space-xs);
	left:var(--space-xs);
	z-index:9999;
	padding:var(--space-xs) var(--space-md);
	background-color:var(--ink);
	color:var(--ground);
	font-family:var(--vuka-4c1);
	font-size:var(--fs-xs);
	text-decoration:none;
	border-radius:var(--radius-xs);
	transform:translateY(-200%);
	transition:transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
	transform:translateY(0);
	outline:2px solid var(--accent);
	outline-offset:2px;
}

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

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