/* ==========================================================================
   DRAWBORE
   Motion motif: DRAW — everything is pulled along one axis into a stop and
   held there. No overshoot, no bounce, no radius, no shadow.
   ========================================================================== */

/* --------------------------------------------------------------- fonts */
/* Fraunces — SIL OFL 1.1 — https://fonts.google.com/specimen/Fraunces      */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/fraunces-300_700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono — SIL OFL 1.1 — https://fonts.google.com/specimen/IBM+Plex+Mono */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/plex-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/plex-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- tokens */
:root {
	--ink:        #0d0c0a;
	--ink-2:      #141310;
	--ink-3:      #1d1b16;
	--paper:      #f2efe9;
	--paper-dim:  #c9c4b8;
	--grey:       #8c877c;
	--kerf:       rgba(242, 239, 233, .14);
	--kerf-hi:    rgba(242, 239, 233, .34);

	--ff-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--ff-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* four steps, no intermediate rungs */
	--t-hero: clamp(3.1rem, 8.4vw, 8.25rem);
	--t-sec:  clamp(1.75rem, 3.4vw, 2.875rem);
	--t-body: clamp(1rem, .55vw + .88rem, 1.125rem);
	--t-mono: .75rem;

	--wrap:   1240px;
	--narrow: 62ch;
	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--header-h: 68px;

	/* pulled to a stop, never past it */
	--ease-draw: cubic-bezier(.16, 1, .3, 1);
	--dur:   .82s;
	--dur-s: .34s;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--ff-display);
	font-optical-sizing: auto;
	font-variation-settings: 'SOFT' 0, 'WONK' 0;
	font-size: var(--t-body);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.015em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* a default <textarea cols="45"> is wider than a phone viewport */
textarea, input, select, option, optgroup { max-width: 100%; font-family: var(--ff-mono); }
input, textarea { font-size: .875rem; }
textarea { width: 100%; box-sizing: border-box; }
/* never inherit the platform field colour on a dark page */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
textarea, select {
	background: var(--ink-2);
	color: var(--paper);
	border: 1px solid var(--kerf);
	border-radius: 0;
}
input::placeholder, textarea::placeholder { color: var(--grey); }

table { border-collapse: collapse; width: 100%; }

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

/* NOT wrapped in :where() — that gives the rule zero specificity, so any
   plugin's `outline: none` would silently win and the site would lose its
   keyboard focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.contact-item:focus-visible,
.card__link:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 3px;
	outline-style: solid;
}
.wordmark:hover .wordmark__text { color: var(--paper); }
.wordmark__text { transition: color var(--dur-s) var(--ease-draw); }

.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;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--paper); color: var(--ink);
	font-family: var(--ff-mono); font-size: var(--t-mono);
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------- utilities */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }

.mono-label {
	font-family: var(--ff-mono);
	font-size: var(--t-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--grey);
	margin: 0;
}

/* ------------------------------------------------------------- buttons */
.btn {
	--btn-h: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: var(--btn-h);
	padding: 0 1.6rem;
	border: 1px solid var(--paper);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ff-mono);
	font-size: var(--t-mono);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--dur-s) var(--ease-draw),
		color var(--dur-s) var(--ease-draw),
		transform var(--dur-s) var(--ease-draw);
}
.btn:hover { background: transparent; color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--kerf-hi); }
.btn--ghost:hover { border-color: var(--paper); background: transparent; }

.btn--sm { --btn-h: 2.375rem; padding-inline: 1.1rem; }

.btn[disabled], .btn.is-loading { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------- reveal system
   Hidden states exist ONLY after JS confirms an IntersectionObserver.
   If the observer cannot be created the attribute is never set and every
   element stays visible — a script failure can never hide content.        */
html[data-draw-ready] [data-draw='clip']:not(.is-drawn) { clip-path: inset(0 100% 0 0); }
html[data-draw-ready] [data-draw='line']:not(.is-drawn) { clip-path: inset(0 0 0 100%); }
html[data-draw-ready] [data-row]:not(.is-drawn)         { clip-path: inset(0 100% 0 0); }

/* Panels sit in a 1px-gap grid whose container background IS the hairline.
   Clipping the panel itself would expose that pale container as a grey slab
   while the panel is hidden, so clip the panel's CONTENT and let the panel
   keep painting its own background. */
html[data-draw-ready] [data-draw='panel']:not(.is-drawn) > *,
html[data-draw-ready] .step:not(.is-drawn) > * { clip-path: inset(0 100% 0 0); }

[data-draw], [data-row], [data-draw='panel'] > *, .step > * {
	transition: clip-path var(--dur) var(--ease-draw);
	transition-delay: var(--draw-delay, 0ms);
	will-change: clip-path;
}
[data-draw].is-drawn, [data-row].is-drawn,
[data-draw='panel'].is-drawn > *, .step.is-drawn > * { will-change: auto; }

/* ---------------------------------------------------- entrance sequence
   Hidden only once the head boot script has confirmed an IntersectionObserver
   and that the reader has not asked for reduced motion.                    */
html[data-enter-ready] [data-enter='left']:not(.is-entered)  { clip-path: inset(0 100% 0 0); }
html[data-enter-ready] [data-enter='right']:not(.is-entered) { clip-path: inset(0 0 0 100%); }
html[data-enter-ready] [data-enter='fade']:not(.is-entered)  { opacity: 0; }
html[data-enter-ready] .hero__title .line > span             { transform: translateY(102%); }

/* --------------------------------------------------- rail card entrance */
html[data-draw-ready] .rail__item:not(.is-drawn) .card { clip-path: inset(0 100% 0 0); }
.rail__item .card { transition: clip-path var(--dur) var(--ease-draw); transition-delay: var(--draw-delay, 0ms); }
.card__media img { will-change: transform; }

/* ------------------------------------------------------- page transition
   Layer 4. Same-origin navigation crossfades the shell and draws the new
   main in along the signature axis instead of flashing white.             */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }
.site-header { view-transition-name: db-header; }
.site-footer { view-transition-name: db-footer; }
.site-main   { view-transition-name: db-main; }
::view-transition-old(db-main) { animation: db-draw-out .34s var(--ease-draw) both; }
::view-transition-new(db-main) { animation: db-draw-in .46s var(--ease-draw) both; }
@keyframes db-draw-out { to { clip-path: inset(0 0 0 100%); } }
@keyframes db-draw-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------- notice bar */
.notice-bar {
	border-bottom: 1px solid var(--kerf);
	background: var(--ink);
	text-align: center;
	padding: .6rem var(--gutter);
	padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
}
.notice-bar a { text-decoration: none; }
.notice-bar a:hover { color: var(--paper); }

/* -------------------------------------------------------------- header */
.site-header {
	background: var(--ink);
	border-bottom: 1px solid var(--kerf);
}
.site-header.is-sticky { position: sticky; top: 0; z-index: 60; }

.site-header__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.wordmark { text-decoration: none; display: inline-block; }
.wordmark__text {
	font-family: var(--ff-mono);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.custom-logo { max-height: 34px; width: auto; }

.site-nav { margin-right: auto; }
.site-nav__list { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); }
.site-nav__list a {
	position: relative;
	display: inline-block;
	padding: .35rem 0;
	font-family: var(--ff-mono);
	font-size: var(--t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--paper-dim);
	transition: color var(--dur-s) var(--ease-draw);
}
.site-nav__list a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur-s) var(--ease-draw);
}
.site-nav__list a:hover { color: var(--paper); }
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.site-nav__list .sub-menu {
	position: absolute; z-index: 5;
	min-width: 13rem;
	margin-top: .35rem;
	padding: .75rem 1rem;
	background: var(--ink-2);
	border: 1px solid var(--kerf);
	display: grid; gap: .35rem;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--dur-s) var(--ease-draw);
}
.site-nav__list li { position: relative; }
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { clip-path: inset(0 0 0 0); }

.site-header__ctl { display: flex; align-items: center; gap: clamp(.65rem, 1.6vw, 1.35rem); }

.hdr-ctl {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .35rem 0;
	background: none; border: 0; cursor: pointer;
	font-family: var(--ff-mono); font-size: var(--t-mono);
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--paper-dim); text-decoration: none;
	transition: color var(--dur-s) var(--ease-draw);
}
.hdr-ctl:hover { color: var(--paper); }

.cart-count {
	display: inline-grid; place-items: center;
	min-width: 1.35rem; height: 1.35rem;
	border: 1px solid var(--kerf-hi);
	font-size: .6875rem; letter-spacing: 0;
}
.cart-count.is-empty { opacity: .45; }

.nav-toggle {
	display: none;
	width: 2.5rem; height: 2.5rem;
	border: 1px solid var(--kerf);
	background: none; cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar { display: block; width: 16px; height: 1px; background: var(--paper); }

/* -------------------------------------------------------------- search */
.site-search { border-bottom: 1px solid var(--kerf); background: var(--ink-2); }
.site-search__inner {
	max-width: var(--wrap); margin-inline: auto;
	padding: 1.1rem var(--gutter);
	display: flex; align-items: center; gap: 1rem;
}
.site-search__close {
	background: none; border: 0; cursor: pointer;
	font-size: 1.6rem; line-height: 1; color: var(--paper-dim);
}
.search-form { display: flex; gap: .75rem; flex: 1 1 auto; flex-wrap: wrap; }
.search-form__field {
	flex: 1 1 14rem; min-width: 0;
	height: 3rem; padding: 0 1rem;
	background: var(--ink); color: var(--paper);
	border: 1px solid var(--kerf); border-radius: 0;
	font-family: var(--ff-mono); font-size: .8125rem;
}
.search-form__field::placeholder { color: var(--grey); }

/* ---------------------------------------------------------- mobile nav */
.mobile-nav { position: fixed; inset: 0; z-index: 90; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 4, .72); }
.mobile-nav__panel {
	position: absolute; inset-block: 0; right: 0;
	width: min(88vw, 24rem);
	background: var(--ink-2);
	border-left: 1px solid var(--kerf);
	padding: calc(1.75rem + env(safe-area-inset-top, 0px)) var(--gutter)
		calc(1.75rem + env(safe-area-inset-bottom, 0px));
	display: flex; flex-direction: column; gap: 1.5rem;
	overflow-y: auto;
}
.mobile-nav__close {
	align-self: flex-end;
	background: none; border: 0; cursor: pointer;
	font-size: 1.8rem; line-height: 1; color: var(--paper-dim);
	min-width: 44px; min-height: 44px;
}
.mobile-nav__list { display: grid; gap: .25rem; }
.mobile-nav__list a {
	display: block; padding: .8rem 0;
	min-height: 44px;
	font-size: 1.5rem; text-decoration: none;
	border-bottom: 1px solid var(--kerf);
	clip-path: inset(0 100% 0 0);
	transition: clip-path .5s var(--ease-draw);
}
.mobile-nav.is-open .mobile-nav__list a { clip-path: inset(0 0 0 0); }
.mobile-nav__foot a { text-decoration: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; border-bottom: 1px solid var(--kerf); }
.hero__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title {
	font-size: var(--t-hero);
	line-height: .94;
	letter-spacing: -.03em;
	font-variation-settings: 'SOFT' 20, 'WONK' 1;
	margin-bottom: 1.6rem;
}
.hero__title .line { display: block; overflow: hidden; }
/* The offset is gated on the boot attribute, exactly like every other hidden
   state. An earlier ungated copy of this rule pushed the headline 231px down
   behind its own mask whenever JavaScript was off. */
.hero__title .line > span {
	display: block;
	transition: transform .92s var(--ease-draw);
}
.hero__title .line:nth-child(2) > span { transition-delay: .09s; }

.hero__lede {
	max-width: 40ch;
	color: var(--paper-dim);
	margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__stage { position: relative; }

.seq {
	position: relative;
	margin: 0;
	aspect-ratio: 1280 / 800;
	background: var(--ink-2);
	border: 1px solid var(--kerf);
	overflow: hidden;
}
.seq__still, .seq__canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.seq__canvas { opacity: 0; transition: opacity .25s linear; }
.seq.is-live .seq__canvas { opacity: 1; }

.seq__readout {
	position: absolute;
	left: 1.1rem; bottom: 1.1rem;
	display: flex; align-items: baseline; gap: .4rem;
	padding: .55rem .8rem;
	background: rgba(13, 12, 10, .72);
	border: 1px solid var(--kerf);
	backdrop-filter: blur(2px);
}
.seq__num {
	font-family: var(--ff-mono);
	font-size: 1.35rem; font-weight: 500;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--paper);
}
.seq__unit { color: var(--paper-dim); }
.seq__cap { margin-left: .5rem; padding-left: .6rem; border-left: 1px solid var(--kerf); }

.hero__hint {
	position: absolute;
	left: 50%; bottom: 1rem; transform: translateX(-50%);
	transition: opacity var(--dur-s) linear;
}
.hero__hint.is-gone { opacity: 0; }

/* -------------------------------------------------------------- claims */
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head__eyebrow { margin-bottom: .9rem; }
.sec-head__title { font-size: var(--t-sec); max-width: 22ch; }

.claims { padding-block: clamp(4rem, 9vw, 8rem); background: var(--ink-2); }
.claims__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1px;
	background: var(--kerf);
	border: 1px solid var(--kerf);
}
.claim { background: var(--ink-2); padding: clamp(1.6rem, 3vw, 2.4rem); }
.claim__n { margin-bottom: 1.1rem; }
.claim__t { font-size: 1.3rem; line-height: 1.2; margin-bottom: .8rem; }
.claim__b { color: var(--paper-dim); font-size: 1rem; }

/* -------------------------------------------- catalogue rail (viewport-bound)
   The card height is derived from the viewport, never from the content, so a
   pinned rail can never push a card below the fold.                        */
.rail-section { position: relative; overflow: hidden; border-block: 1px solid var(--kerf); }
.rail-section__inner {
	min-height: 100svh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}
.rail-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.rail-section__head .sec-head { margin-bottom: 0; }
.rail-section__hint { transition: opacity var(--dur-s) linear; }
.rail-section__hint.is-gone { opacity: 0; }

.rail-viewport { min-height: 0; overflow: hidden; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.rail {
	display: flex;
	height: 100%;
	align-items: stretch;
	gap: 1px;
	padding-inline: var(--gutter);
	width: max-content;
}
.rail__item { flex: 0 0 clamp(15rem, 25vw, 21rem); height: 100%; }

.card { display: block; height: 100%; background: var(--ink-2); border: 1px solid var(--kerf); }
.card__link {
	height: 100%;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	text-decoration: none;
	color: inherit;
}
.card__media { min-height: 0; overflow: hidden; position: relative; background: var(--ink-3); }
/* The rail parallax writes an inline transform on the image every frame, so a
   CSS hover transform on the same element would never win. Hover is a DRAW
   instead, which is the motif anyway: a rule pulled across the card's foot. */
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__flag {
	position: absolute; top: .7rem; left: .7rem;
	padding: .25rem .5rem; background: var(--paper); color: var(--ink);
}
.card__foot {
	position: relative;
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.1rem;
	border-top: 1px solid var(--kerf);
}
.card__foot::after {
	content: '';
	position: absolute; left: 0; right: 0; top: -1px; height: 1px;
	background: var(--paper);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur) var(--ease-draw);
}
.card__link:hover .card__foot::after,
.card__link:focus-visible .card__foot::after { transform: scaleX(1); }
.card__link:hover .card__title { color: var(--paper); }
.card { transition: border-color var(--dur-s) var(--ease-draw); }
.card__link:hover { color: inherit; }
.rail__item:hover .card { border-color: var(--kerf-hi); }
.card__title { font-size: 1.125rem; line-height: 1.25; }
.card__price { font-family: var(--ff-mono); font-size: .8125rem; color: var(--paper-dim); white-space: nowrap; }
.card__price del { opacity: .5; margin-right: .35rem; }
.card__price ins { text-decoration: none; }

/* ------------------------------------------------------------ assembly */
.assembly { padding-block: clamp(4rem, 9vw, 8rem); }
.assembly__grid {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.assembly__media { position: sticky; top: calc(var(--header-h) + 2rem); }

.v-figure { margin: 0; border: 1px solid var(--kerf); background: var(--ink-2); }
.v-figure__media { width: 100%; height: auto; aspect-ratio: 1344 / 768; object-fit: cover; }
.v-figure__cap { padding: .75rem 1rem; border-top: 1px solid var(--kerf); }

.assembly__steps { display: grid; gap: 1px; background: var(--kerf); border: 1px solid var(--kerf); }
.step {
	background: var(--ink);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	clip-path: inset(0 0 0 0);
}
.step__n { margin-bottom: .9rem; }
.step__t { font-size: 1.35rem; margin-bottom: .7rem; }
.step__b { color: var(--paper-dim); font-size: 1rem; }

/* ------------------------------------------------------------- figures */
.figures { padding-block: clamp(3rem, 6vw, 5.5rem); border-block: 1px solid var(--kerf); background: var(--ink-2); }
.figures__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
}
.fig { display: grid; gap: .6rem; }
.fig__v {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	display: flex; align-items: baseline; gap: .2rem;
}
.fig__u { font-family: var(--ff-mono); font-size: 1rem; color: var(--grey); letter-spacing: 0; }
.fig__k { margin: 0; max-width: 18ch; }

/* -------------------------------------------------------------- timber */
.timber { position: relative; padding-block: clamp(4rem, 9vw, 8rem); overflow: hidden; }
.timber__media { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.v-figure.is-parallax { will-change: transform; }
.timber__media .v-figure { border-inline: 0; }
.timber__b { max-width: var(--narrow); color: var(--paper-dim); }

/* ---------------------------------------------------------------- spec */
.spec { padding-block: clamp(4rem, 9vw, 8rem); background: var(--ink-2); border-block: 1px solid var(--kerf); }
.spec-table { font-size: 1rem; }
.spec-table th, .spec-table td {
	text-align: left;
	padding: .95rem 0;
	border-bottom: 1px solid var(--kerf);
	vertical-align: baseline;
}
.spec-table th { width: 42%; font-weight: 500; padding-right: 1.5rem; }
.spec-table td { color: var(--paper-dim); }
.spec-table--lg th, .spec-table--lg td { padding-block: 1.15rem; }
.spec-table tr { transition: clip-path var(--dur) var(--ease-draw); }

/* -------------------------------------------------------------- voices */
.voices { padding-block: clamp(4rem, 9vw, 8rem); }
.voices__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1px; background: var(--kerf); border: 1px solid var(--kerf);
}
.voice { margin: 0; background: var(--ink); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.2rem; align-content: start; }
.voice p { font-size: 1.1rem; line-height: 1.45; }
.voice cite { font-style: normal; }

/* -------------------------------------------------------- post / prose */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head__title { font-size: var(--t-sec); max-width: 26ch; }
.page-head__desc, .page-head__search { margin-top: 1.25rem; }
.page-hero { margin: 0 0 clamp(2rem, 4vw, 3rem); border: 1px solid var(--kerf); }

.prose { padding-bottom: clamp(3rem, 7vw, 6rem); }
.prose > * { margin-bottom: 1.15em; }
.prose h2 { font-size: 1.75rem; margin-top: 2.4em; }
.prose h3 { font-size: 1.3rem; margin-top: 2em; }
.prose a { text-underline-offset: .18em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.4em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .45em; }
.prose img, .prose figure { margin-block: 2rem; }
.prose blockquote {
	margin: 2rem 0; padding-left: 1.4rem;
	border-left: 1px solid var(--kerf-hi); color: var(--paper-dim);
}
.prose table { margin-block: 2rem; }
.prose th, .prose td { padding: .75rem 0; border-bottom: 1px solid var(--kerf); text-align: left; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.post-card__link { display: grid; gap: 1rem; text-decoration: none; color: inherit; }
.post-card__media { display: block; border: 1px solid var(--kerf); overflow: hidden; aspect-ratio: 4 / 5; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-draw); }
.post-card__link:hover .post-card__media img { transform: scale(1.035); }
.post-card__body { display: grid; gap: .5rem; }
.post-card__title { font-size: 1.25rem; line-height: 1.22; }
.post-card__excerpt { color: var(--paper-dim); font-size: .95rem; }
.post-meta { margin: 0; }

/* ------------------------------------------------------------ comments */
.comments-area { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--kerf); }
.comments-title, .comment-reply-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.comment-list { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.comment-body { border: 1px solid var(--kerf); padding: 1.25rem; }
.comment-meta { margin-bottom: .75rem; }
.comment-author .fn { font-style: normal; font-weight: 500; }
.comment-metadata a, .comment-author a { text-decoration: none; color: var(--grey); font-family: var(--ff-mono); font-size: var(--t-mono); }
.comment-respond label { display: block; margin-bottom: .35rem; font-family: var(--ff-mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.comment-form p { margin-bottom: 1rem; }
.comment-form input[type='text'], .comment-form input[type='email'],
.comment-form input[type='url'], .comment-form textarea {
	width: 100%; padding: .7rem 1rem; min-height: 3rem;
	background: var(--ink-2); color: var(--paper);
	border: 1px solid var(--kerf); border-radius: 0;
	font-family: var(--ff-mono); font-size: .875rem;
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form .submit {
	min-height: 3rem; padding: 0 1.6rem; cursor: pointer;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--paper); border-radius: 0;
	font-family: var(--ff-mono); font-size: var(--t-mono);
	letter-spacing: .1em; text-transform: uppercase;
}
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .6rem; }
.comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: .9rem; color: var(--paper-dim); margin: 0; }

/* --------------------------------------------------- empty / pagination */
.empty-state {
	display: grid; gap: 1rem; justify-items: start;
	max-width: 46ch;
	padding-block: clamp(3rem, 7vw, 6rem);
}
.empty-state--tall { padding-block: clamp(5rem, 12vw, 10rem); }
.empty-state h1, .empty-state h2 { font-size: var(--t-sec); }
.empty-state p:not(.mono-label) { color: var(--paper-dim); }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.empty-state__search { width: min(100%, 26rem); margin-top: 1rem; }

.pager { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--kerf); }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pager .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.75rem; min-height: 2.75rem;
	padding-inline: .6rem;
	border: 1px solid var(--kerf);
	font-family: var(--ff-mono); font-size: var(--t-mono);
	letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	transition: border-color var(--dur-s) var(--ease-draw);
}
.pager .page-numbers:hover { border-color: var(--paper); }
.pager .page-numbers.current { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* -------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--kerf); background: var(--ink-2); padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }

.foot-news {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--kerf);
}
.foot-news__title { font-size: var(--t-sec); margin-bottom: .75rem; }
.foot-news__copy p { color: var(--paper-dim); max-width: 42ch; }
.foot-news__form input[type='email'], .foot-news__form input[type='text'] {
	width: 100%; height: 3rem; padding: 0 1rem;
	background: var(--ink); color: var(--paper);
	border: 1px solid var(--kerf); border-radius: 0;
	font-family: var(--ff-mono); font-size: .8125rem;
}
.foot-news__form button, .foot-news__form input[type='submit'] {
	min-height: 3rem; padding: 0 1.6rem; margin-top: .6rem;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--paper); border-radius: 0; cursor: pointer;
	font-family: var(--ff-mono); font-size: var(--t-mono);
	letter-spacing: .1em; text-transform: uppercase;
}
.foot-news__pending { color: var(--grey); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-about { color: var(--paper-dim); font-size: .95rem; max-width: 40ch; margin-top: 1.1rem; }
.footer-line { margin-top: .75rem; }
.footer-col-title { margin-bottom: 1.1rem; }
.footer-menu { display: grid; gap: .1rem; }
.footer-menu a {
	display: flex; align-items: center;
	min-height: 44px;
	text-decoration: none; font-size: .95rem; color: var(--paper-dim);
	transition: color var(--dur-s) var(--ease-draw);
}
.footer-menu a:hover { color: var(--paper); }

.footer-contacts { display: grid; gap: .1rem; }
.footer-contacts .contact-item {
	display: flex; align-items: center; gap: .6rem;
	min-height: 44px; padding: 0;
	background: none; border: 0; cursor: pointer;
	text-decoration: none; color: var(--paper-dim);
	font-family: inherit; font-size: .95rem;
	transition: color var(--dur-s) var(--ease-draw);
}
.footer-contacts .contact-item:hover { color: var(--paper); }
.footer-contacts .icon { width: 18px; height: 18px; flex: none; }

.footer-extra { padding-block: 1.5rem; border-top: 1px solid var(--kerf); }
.footer-base { padding-top: 1.5rem; border-top: 1px solid var(--kerf); }

/* ------------------------------------------------------- contact rail */
.contact-rail {
	position: fixed; z-index: 70;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	display: grid; gap: 1px;
	background: var(--kerf);
	border: 1px solid var(--kerf);
}
.contact-rail--right { right: 1.25rem; }
.contact-rail--left { left: 1.25rem; }
.contact-rail .contact-item {
	display: grid; place-items: center;
	width: 3rem; height: 3rem;
	background: var(--ink-2); color: var(--paper-dim);
	border: 0; cursor: pointer; text-decoration: none;
	transition: background var(--dur-s) var(--ease-draw), color var(--dur-s) var(--ease-draw);
}
.contact-rail .contact-item:hover { background: var(--paper); color: var(--ink); }
.contact-rail .contact-item__label { display: none; }
.contact-rail .icon { width: 20px; height: 20px; }

/* --------------------------------------------------------- qr dialog */
.qr-dialog { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.qr-dialog__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 4, .78); }
.qr-dialog__panel {
	position: relative;
	width: min(92vw, 22rem);
	padding: 2rem;
	background: var(--ink-2); border: 1px solid var(--kerf-hi);
	display: grid; gap: 1rem; justify-items: center; text-align: center;
}
.qr-dialog__close {
	position: absolute; top: .35rem; right: .35rem;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--paper-dim);
}
.qr-dialog__text { color: var(--paper-dim); font-size: .95rem; margin: 0; }
.qr-dialog__code img { width: 100%; max-width: 13rem; height: auto; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------ responsive
   One real breakpoint; everything else is clamp()-driven.                */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.assembly__grid { grid-template-columns: minmax(0, 1fr); }
	.assembly__media { position: static; }
	.foot-news { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	:root { --header-h: 58px; }

	.site-nav { display: none; }
	.nav-toggle { display: flex; }
	/* same row, same height — and 44px is the tap target minimum */
	.site-header__ctl .hdr-ctl,
	.site-header__ctl .nav-toggle { min-height: 44px; }
	.site-header__ctl .hdr-ctl { display: inline-flex; align-items: center; }
	.hdr-cta { display: none; }
	.hdr-ctl--search .hdr-ctl__text { display: none; }

	/* A pinned section must fit the screen: the reader cannot scroll to reveal
	   the bottom of it, because the pin is consuming the scroll. The figure is
	   the minmax(0,1fr) track, so it shrinks instead of pushing past the fold. */
	.hero__inner {
		min-height: calc(100svh - var(--header-h));
		grid-template-rows: auto minmax(0, 1fr);
		gap: 1.25rem;
		padding-block: 1.25rem 1.75rem;
		align-content: start;
	}
	.hero__stage { min-height: 0; }
	.hero__hint { display: none; }
	/* portrait sequence on phones — not the desktop crop scaled down */
	.seq { aspect-ratio: auto; height: 100%; min-height: 200px; }
	.seq__num { font-size: 1.6rem; }
	.hero__title { margin-bottom: 1rem; }
	.hero__lede { margin-bottom: 1.25rem; }

	.rail-section__inner { min-height: auto; padding-block: 3rem; }
	.rail-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	.rail { width: max-content; height: auto; }
	.rail__item { flex-basis: 74vw; height: auto; scroll-snap-align: start; }
	.card__link { grid-template-rows: auto auto; }
	.card__media { aspect-ratio: 4 / 5; }

	.claims__list, .voices__grid { grid-template-columns: minmax(0, 1fr); }

	/* the mobile footer must not become one tall column of single links */
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid__brand { grid-column: 1 / -1; }

	/* smaller, tucked into the corner, and clear of the consent banner */
	.contact-rail { grid-auto-flow: column; }
	.contact-rail--right, .contact-rail--left { right: .75rem; left: auto; }
	.contact-rail { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
	.contact-rail .contact-item { width: 2.5rem; height: 2.5rem; }
	.contact-rail .icon { width: 17px; height: 17px; }
}

@media (max-width: 420px) {
	.rail__item { flex-basis: 82vw; }
	.empty-state__actions .btn { width: 100%; }
}

/* ------------------------------------------------- reduced motion
   Content is identical; only the movement is removed.               */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	html[data-draw-ready] [data-draw]:not(.is-drawn),
	html[data-draw-ready] [data-row]:not(.is-drawn),
	html[data-draw-ready] [data-draw='panel']:not(.is-drawn) > *,
	html[data-draw-ready] .rail__item:not(.is-drawn) .card,
	html[data-draw-ready] .step:not(.is-drawn) > * { clip-path: none; }
	html[data-enter-ready] [data-enter]:not(.is-entered) { clip-path: none; opacity: 1; }
	@view-transition { navigation: none; }
	.hero__title .line > span { transform: none; }
	.card__link:hover .card__media img,
	.post-card__link:hover .post-card__media img { transform: none; }
}

/* Motion switched off in the Customizer behaves the same way. */
html[data-motion='none'] [data-draw]:not(.is-drawn),
html[data-motion='none'] [data-row]:not(.is-drawn),
html[data-motion='none'] [data-draw='panel']:not(.is-drawn) > *,
html[data-motion='none'] .rail__item:not(.is-drawn) .card,
html[data-motion='none'] .step:not(.is-drawn) > * { clip-path: none; }
html[data-motion='none'] [data-enter]:not(.is-entered) { clip-path: none; opacity: 1; }

/* --------------------------------------------------- consent banner
   The theme never ships its own cookie notice; this only restyles the
   consent plugin's banner so it reads as part of the site. The banner is
   absent while the site declares no statistics, no ads and no third-party
   embeds — that is the plugin deciding there is nothing to consent to. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	background: var(--ink-2);
	border: 0;
	border-top: 1px solid var(--kerf-hi);
	border-radius: 0;
	box-shadow: none;
	color: var(--paper);
	font-family: var(--ff-display);
	padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
	padding-bottom: calc(clamp(1rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
	max-width: none;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { max-width: var(--wrap); margin-inline: auto; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-family: var(--ff-display); font-size: 1.25rem; color: var(--paper); margin-bottom: .4rem; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { align-items: baseline; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { color: var(--paper-dim); font-size: 1rem; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { gap: .6rem; flex-wrap: wrap; }
/* accept and deny must read as equally weighted */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	border-radius: 0;
	min-height: 3rem;
	padding: 0 1.4rem;
	font-family: var(--ff-mono);
	font-size: var(--t-mono);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: none;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--paper);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny { background: transparent; color: var(--paper); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
	background: transparent;
	color: var(--paper-dim);
	border: 1px solid var(--kerf-hi);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner a { color: var(--paper); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category { background: var(--ink-3); border-radius: 0; }
/* the floating rail must sit above the banner, never on its buttons */
body.cmplz-banner-visible .contact-rail { bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 769px) { body.cmplz-banner-visible .contact-rail { bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); } }

/* ------------------------------------------- classes that had no rule
   drift-check flagged these as used-but-undefined. Most carried a second
   styled class so they rendered, but the three grid children genuinely
   needed `min-width: 0` or a long word could push the track wide. */
.site-header__brand { flex: none; min-width: 0; }
.hero__copy { min-width: 0; }
.timber__copy { position: relative; z-index: 1; }
.footer-grid__menu { min-width: 0; }
.notice-bar__link { text-decoration: none; transition: color var(--dur-s) var(--ease-draw); }
.notice-bar__link:hover { color: var(--paper); }
.contact-item__icon { display: grid; place-items: center; }
.contact-rail .contact-item--top { border-top: 1px solid var(--kerf); }
.qr-dialog__title { margin: 0; }
.widget__title { margin-bottom: .75rem; }
.search-form__submit { flex: none; }
.pager--inline { display: flex; gap: .5rem; padding-block: 1.5rem; border-top: 0; }

/* ------------------------------------------------------- newsletter form */
.news-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .6rem; align-items: stretch; }
.news-form input[type='email'], .news-form input[type='text'] {
	min-width: 0; height: 3rem; padding: 0 1rem;
	background: var(--ink); color: var(--paper);
	border: 1px solid var(--kerf); border-radius: 0;
	font-family: var(--ff-mono); font-size: .8125rem;
}
.news-form input::placeholder { color: var(--grey); }
.news-form .btn { grid-column: auto; background: transparent; color: var(--paper); border-color: var(--kerf-hi); }
.news-form .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.news-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news-form__note { grid-column: 1 / -1; margin: .35rem 0 0; font-size: .9rem; color: var(--grey); }
.news-form__note.is-good { color: var(--paper); }
@media (max-width: 640px) {
	.news-form { grid-template-columns: minmax(0, 1fr); }
	.news-form .btn { width: 100%; }
}