:root {
	--piko-orange-100: #fbe4cc;
	--piko-orange-200: #f6c99a;
	--piko-orange-500: #e8843c;
	--piko-orange-600: #d06e28;
	--piko-orange-700: #a85822;

	--ink-950: #1a1714;
	--ink-900: #23201d;
	--ink-700: #433f3b;
	--ink-600: #5c5853;
	--ink-500: #79746e;
	--ink-400: #98938c;
	--ink-200: #d5d0c8;
	--ink-50: #f4efe6;

	--parchment: var(--ink-50);
	--ink: var(--ink-950);
	--amber: var(--piko-orange-500);
	--rule: #d8cfbf;
	--paper-deep: #ece3d2;
	--ink-soft: var(--ink-600);
	--ink-a63: #1a1714a0;

	--glass-bar: #f4efe666;
	--glass-dialog-light: #ffffff80;
	--glass-blur: 12px;

	--shadow-bar: 0 1px 2px rgb(0 0 0 / 0.02), 0 4px 8px rgb(0 0 0 / 0.02);
	--shadow-dialog: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06), 0 24px 48px rgb(0 0 0 / 0.12);

	--font-serif: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;

	--text-display: clamp(2rem, 4.6vw, 4rem);
	--text-heading: clamp(1.7rem, calc(0.3rem + 2.5vw), 2.4rem);
	--text-lede: clamp(1.35rem, calc(0.4rem + 1.5vw), 1.7rem);
	--text-body: clamp(1.2rem, calc(0.6rem + 1vw), 1.4rem);
	--text-body-mobile: 1.2rem;
	--text-cta: clamp(1.7rem, 3.5vw, 2.1rem);
	--text-control: 1.2rem;
	--text-sheet-link: 1.7rem;

	--space-025: 0.25rem;
	--space-05: 0.5rem;
	--space-075: 0.75rem;
	--space-1: 1rem;
	--space-15: 1.5rem;
	--space-2: 2rem;
	--space-3: 3rem;
	--space-4: 4rem;
	--space-6: 6rem;
	--space-8: 8rem;
	--space-12: 12rem;

	--content-width: 68rem;
	--gutter: max(clamp(var(--space-15), calc(12vw - 5.4rem), var(--space-8)), calc((100% - var(--content-width)) / 2));
	--gutter-mobile: min(var(--space-15), 6vw);
	--piko-gutter: clamp(var(--space-4), 12.6vw, var(--space-12));
	--piko-gutter-mobile: var(--space-15);
	--nav-height: var(--space-6);
	--logo-cap: var(--space-4);
	--stroke-band: clamp(var(--space-3), calc(16vw - 6rem), var(--space-6));
	--stroke-cta: var(--space-4);
	--stroke-hero: clamp(var(--space-2), calc(7vw - 2rem), var(--space-6));
	--stroke-mobile: var(--space-3);
	--gap-spread: clamp(var(--space-2), 5vw, var(--space-4));
	--gap-copy: var(--space-1);
	--gap-step: var(--space-075);
	--measure: 32rem;

	--hairline: 1px;
	--emphasis: 2px;
	--radius: var(--space-025);
	--radius-dialog: var(--space-1);
	--duration-ui: 0.25s;
	--duration-dialog: 0.5s;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 900px) {
	:root {
		--nav-height: var(--space-4);
		--logo-cap: var(--space-3);
		--stroke-cta: var(--space-2);
	}
}