/*
 * Datum — design tokens & site shell.
 *
 * Flat --paper ground throughout. Readable surfaces are OPAQUE PAPER SHEETS
 * (.sheet), not glass: a real engineering drawing is a printed sheet with a
 * hard edge, not a blurred pane, and that distinction is the whole visual
 * argument of this theme.
 *
 * Palette: --paper (drafting-vellum ground) / --ink (graphite line & text)
 * / --accent (safety-orange callouts). --accent alone is 3.17:1 on paper —
 * decorative and large-text only. Small text and interactive states use
 * --accent-ink (5.81:1). Verified 2026-08-02.
 */

:root {
	--paper: #F3EFE4;
	--paper-deep: #EAE3D0;
	--paper-line: #C7C0AC;
	--ink: #21221D;
	--ink-soft: #5B5C52;
	--accent: #E8560C;
	--accent-ink: #A23A0A;
	--ok: #2F6E4A;

	--font-display: 'Archivo', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Type scale: base 16px x 1.25 (major third). */
	--fs-00: 0.8125rem;  /* 13 */
	--fs-0:  1rem;        /* 16 */
	--fs-1:  1.25rem;     /* 20 */
	--fs-2:  1.5625rem;   /* 25 */
	--fs-3:  1.953rem;    /* 31 */
	--fs-4:  2.441rem;    /* 39 */
	--fs-5:  3.052rem;    /* 49 */
	--fs-6:  3.815rem;    /* 61 */

	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;
	--sp-8: 9rem;

	--measure: 62ch;
	--radius: 2px; /* drawn corners, not soft UI corners */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media ( prefers-reduced-motion: no-preference ) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var( --paper );
	color: var( --ink );
	font-family: var( --font-display );
	font-size: var( --fs-0 );
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var( --accent-ink ); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var( --ink ); }

h1, h2, h3, h4 {
	font-family: var( --font-display );
	font-weight: 800;
	line-height: 1.08;
	margin: 0 0 var( --sp-2 );
	text-wrap: balance;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp( var( --fs-5 ), 5vw + 1rem, var( --fs-6 ) ); }
h2 { font-size: clamp( var( --fs-4 ), 3vw + 1rem, var( --fs-5 ) ); }
h3 { font-size: var( --fs-3 ); }
h4 { font-size: var( --fs-2 ); }
p { margin: 0 0 var( --sp-3 ); max-width: var( --measure ); }
.mono { font-family: var( --font-mono ); font-variant-numeric: tabular-nums; }

.eyebrow {
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --accent-ink );
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var( --sp-2 );
}
.eyebrow::before { content: ''; width: 1.4em; height: 1px; background: currentColor; }

.site { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
 * Sheets — opaque drawing-paper panels. The one readable surface type.
 * ------------------------------------------------------------------- */
.sheet {
	background: var( --paper );
	border: 1px solid var( --ink );
	position: relative;
	padding: var( --sp-4 );
}
.sheet::before,
.sheet::after,
.sheet .corner-a,
.sheet .corner-b {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border: 1px solid var( --ink );
}
.sheet::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sheet::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.sheet--tight { padding: var( --sp-3 ); }
.sheet--deep { background: var( --paper-deep ); }

/* ---------------------------------------------------------------------
 * Layout.
 * ------------------------------------------------------------------- */
.wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var( --sp-4 );
}
section {
	position: relative;
	padding-block: var( --sp-7 );
}
@media ( max-width: 640px ) {
	section { padding-block: var( --sp-5 ); }
	.wrap { padding: 0 var( --sp-3 ); }
}

/*
 * min-width: 0 overrides the grid/flex item default of min-width: auto,
 * which otherwise sizes a track to its content's min-content width no
 * matter what the content itself does about overflow — a .tablewrap's own
 * overflow-x: auto never gets the chance to activate, because the grid
 * column it sits in has already grown to fit the unwrapped table first.
 * That's exactly how a route-sheet table on the front page broke mobile
 * layout the width of the WHOLE PAGE rather than just scrolling inside its
 * own card, until this rule was added.
 */
.grid > * { min-width: 0; }
.grid { display: grid; gap: var( --sp-4 ); }
.grid-2 { grid-template-columns: repeat( 2, 1fr ); }
.grid-3 { grid-template-columns: repeat( 3, 1fr ); }
.grid-4 { grid-template-columns: repeat( 4, 1fr ); }
@media ( max-width: 900px ) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Title block — the drawing-sheet convention that names, dates and
 * revises every real technical drawing. Used as the standard "about this
 * part/page" chrome, not decoration bolted onto a generic card.
 * ------------------------------------------------------------------- */
/*
 * Grid lines drawn as the GAP, not per-cell borders: a cell that spans two
 * columns (--wide) breaks any nth-child border bookkeeping, because
 * nth-child counts DOM position, not the grid column a variable-span cell
 * actually lands on — the ink border silently misaligned. Filling the gap
 * with ink and each cell with paper draws every line correctly regardless
 * of span, with no positional arithmetic at all.
 */
.titleblock {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1px;
	background: var( --ink );
	border: 1px solid var( --ink );
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
}
.titleblock__cell {
	background: var( --paper );
	padding: 0.5em 0.7em;
}
.titleblock__cell--wide { grid-column: span 2; }
.titleblock__cell--full { grid-column: 1 / -1; }
.titleblock__label {
	display: block;
	color: var( --ink-soft );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.72em;
	margin-bottom: 0.2em;
}
.titleblock__value { color: var( --ink ); font-weight: 500; }

/* ---------------------------------------------------------------------
 * Dimension lines — extension lines, a leader, an arrowhead, a number.
 * ------------------------------------------------------------------- */
.dim {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
	color: var( --ink-soft );
	margin: var( --sp-2 ) 0;
}
.dim__line {
	flex: 1;
	position: relative;
	height: 1px;
	background: var( --ink-soft );
}
.dim__line::before, .dim__line::after {
	content: '';
	position: absolute;
	top: -5px;
	width: 1px;
	height: 11px;
	background: var( --ink-soft );
}
.dim__line::before { left: 0; }
.dim__line::after { right: 0; }
.dim__value { color: var( --ink ); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------------
 * GD&T feature-control frame: symbol | tolerance | datum(s), boxed cells.
 * ------------------------------------------------------------------- */
.fcf {
	display: inline-flex;
	border: 1.5px solid var( --ink );
	font-family: var( --font-mono );
	font-size: var( --fs-1 );
	font-weight: 600;
}
.fcf__cell { padding: 0.35em 0.6em; border-right: 1.5px solid var( --ink ); }
.fcf__cell:last-child { border-right: 0; }
.fcf__sym { font-size: 1.1em; }

/* ---------------------------------------------------------------------
 * Revision table. A route sheet has five columns of machine/tool names
 * that do not fit a phone viewport at any font size worth reading — rather
 * than truncate or wrap them into illegibility, the table scrolls
 * horizontally inside its own frame and the rest of the page does not.
 * ------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; max-width: 100%; }
.revtable { width: 100%; border-collapse: collapse; font-family: var( --font-mono ); font-size: var( --fs-00 ); }
.revtable th, .revtable td { border: 1px solid var( --paper-line ); padding: 0.55em 0.7em; text-align: left; white-space: nowrap; }
.revtable th { background: var( --paper-deep ); color: var( --ink-soft ); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
@media ( max-width: 640px ) {
	.revtable { width: max-content; min-width: 100%; }
}

/* Section-view hatching — a diagonal fill for a "cut through" area. */
.hatch {
	background-image: repeating-linear-gradient( 45deg, var( --ink ) 0, var( --ink ) 1px, transparent 1px, transparent 8px );
	opacity: 0.5;
}

/* ---------------------------------------------------------------------
 * Buttons.
 * ------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.85em 1.4em;
	border: 1.5px solid var( --ink );
	background: var( --ink );
	color: var( --paper );
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var( --accent-ink ); border-color: var( --accent-ink ); color: var( --paper ); transform: translateY( -1px ); }
.btn--ghost { background: var( --paper ); color: var( --ink ); }
.btn--ghost:hover { background: var( --ink ); color: var( --paper ); }

/* ---------------------------------------------------------------------
 * Cards.
 * ------------------------------------------------------------------- */
.card {
	background: var( --paper );
	border: 1px solid var( --ink );
	display: flex;
	flex-direction: column;
}
.card__media { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var( --ink ); background: var( --paper-deep ); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var( --sp-3 ); }
.card__title { font-size: var( --fs-2 ); margin-bottom: 0.4em; }
.card__meta { font-family: var( --font-mono ); font-size: var( --fs-00 ); color: var( --ink-soft ); }

/* ---------------------------------------------------------------------
 * Header / nav.
 * ------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var( --paper );
	border-bottom: 1px solid var( --ink );
}
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --sp-2 ) var( --sp-4 );
}
.brand { display: flex; align-items: baseline; gap: 0.5em; text-decoration: none; color: var( --ink ); }
.brand__mark { font-family: var( --font-mono ); font-weight: 700; font-size: var( --fs-2 ); letter-spacing: -0.02em; }
.brand__tag { font-family: var( --font-mono ); font-size: var( --fs-00 ); color: var( --ink-soft ); text-transform: uppercase; letter-spacing: 0.08em; }

/*
 * wp_nav_menu() wraps its <li> items in a <ul> nested INSIDE <nav class="nav">
 * — the container arg only suppresses nav's own outer wrapper, not that
 * inner list. Flex/list-style reset belongs on the ul the menu actually
 * renders, not on <nav> itself (list-style on a non-list-item element is a
 * no-op); without it the ul kept its UA defaults — block, disc bullets,
 * 40px indent — and "Parts / Capabilities / Process / Quality / About"
 * rendered as a bulleted list stacked under the logo instead of a row of
 * links beside it.
 */
.nav { display: flex; align-items: center; gap: var( --sp-4 ); }
.nav ul { display: flex; align-items: center; gap: var( --sp-4 ); list-style: none; margin: 0; padding: 0; }
.nav li { list-style: none; }
.nav a {
	color: var( --ink );
	text-decoration: none;
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.4em 0;
	border-bottom: 2px solid transparent;
}
.nav a:hover, .nav .current-menu-item a { border-color: var( --accent ); }

.nav-toggle { display: none; }
@media ( max-width: 860px ) {
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var( --paper ); border-bottom: 1px solid var( --ink ); flex-direction: column; align-items: stretch; padding: var( --sp-3 ) var( --sp-4 ); gap: var( --sp-2 ); }
	.nav.is-open { display: flex; }
	.nav ul { flex-direction: column; align-items: stretch; gap: var( --sp-2 ); }
	.nav-toggle { display: inline-flex; background: none; border: 1.5px solid var( --ink ); padding: 0.5em 0.7em; font-family: var( --font-mono ); cursor: pointer; }
}

/* ---------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var( --ink );
	background: var( --paper );
	padding: var( --sp-6 ) 0 var( --sp-4 );
	position: relative;
	z-index: 1;
}
.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var( --sp-4 ); }
.site-footer h4 { font-size: var( --fs-1 ); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5em; }
.site-footer a { color: var( --ink-soft ); text-decoration: none; }
.site-footer a:hover { color: var( --accent-ink ); }
.site-footer__legal {
	grid-column: 1 / -1;
	margin-top: var( --sp-5 );
	padding-top: var( --sp-3 );
	border-top: 1px solid var( --paper-line );
	display: flex;
	justify-content: space-between;
	font-family: var( --font-mono );
	font-size: var( --fs-00 );
	color: var( --ink-soft );
	flex-wrap: wrap;
	gap: var( --sp-2 );
}
@media ( max-width: 900px ) {
	.site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

/* Screen-reader only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }

/* Focus visibility — never removed. */
:focus-visible { outline: 2px solid var( --accent-ink ); outline-offset: 2px; }

/* Scroll-driven reveal. Present in the DOM regardless of JS/animation
 * support — see SEO note in inc/setup.php enqueue comment. */
[ data-reveal ] { opacity: 1; transform: none; }
@supports ( animation-timeline: view() ) {
	@media ( prefers-reduced-motion: no-preference ) {
		[ data-reveal ] {
			animation: dtm-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
		[ data-reveal='up' ] { animation-name: dtm-reveal-up; }
		[ data-reveal='left' ] { animation-name: dtm-reveal-left; }
		[ data-reveal='right' ] { animation-name: dtm-reveal-right; }
	}
}
@keyframes dtm-reveal-up { from { opacity: 0; transform: translateY( 24px ); } to { opacity: 1; transform: none; } }
@keyframes dtm-reveal-left { from { opacity: 0; transform: translateX( -24px ); } to { opacity: 1; transform: none; } }
@keyframes dtm-reveal-right { from { opacity: 0; transform: translateX( 24px ); } to { opacity: 1; transform: none; } }