/**
 * Dakhli — reset, elements, layout primitives and the Atelier texture set.
 */

/* ===============================================================
 * Reset
 * ============================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Fixed header must not cover anchored headings. */
	scroll-padding-top: calc(var(--dk-header-h) + var(--dk-s5));
}

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

body {
	margin: 0;
	background: var(--dk-bg);
	color: var(--dk-text);
	font-family: var(--dk-font-sans);
	font-size: var(--dk-t-base);
	line-height: var(--dk-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1, 'liga' 1;
	overflow-x: hidden;
}

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

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

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

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

hr {
	border: 0;
	border-top: var(--dk-border);
	margin: var(--dk-s6) 0;
}

/* ===============================================================
 * Typography
 * ============================================================= */

h1, h2, h3, h4, h5 {
	font-family: var(--dk-font-display);
	font-weight: 700;
	line-height: var(--dk-lh-snug);
	letter-spacing: var(--dk-ls-display);
	text-transform: uppercase;
	margin: 0 0 var(--dk-s4);
	text-wrap: balance;
}

h1 { font-size: var(--dk-d-xl); line-height: var(--dk-lh-tight); }
h2 { font-size: var(--dk-d-lg); line-height: var(--dk-lh-tight); }
h3 { font-size: var(--dk-d-md); }
h4 { font-size: var(--dk-d-sm); }
h5 { font-size: var(--dk-d-xs); }

p { margin: 0 0 var(--dk-s4); }
p:last-child { margin-bottom: 0; }

/* Long-form copy reads better a touch larger and narrower. */
.dk-prose { max-width: 68ch; }
.dk-prose p,
.dk-prose li { font-size: var(--dk-t-md); line-height: var(--dk-lh-relaxed); }
.dk-prose h2 { margin-top: var(--dk-s8); }
.dk-prose h3 { margin-top: var(--dk-s6); }
.dk-prose > :first-child { margin-top: 0; }

.dk-lead {
	font-size: var(--dk-t-md);
	line-height: var(--dk-lh-relaxed);
	color: var(--dk-ink-600);
	max-width: 58ch;
}

a {
	color: inherit;
	text-decoration-color: var(--dk-line-strong);
	text-underline-offset: 0.18em;
	transition: color var(--dk-dur) var(--dk-ease),
		text-decoration-color var(--dk-dur) var(--dk-ease);
}
a:hover { text-decoration-color: var(--dk-yellow-600); }

strong, b { font-weight: 600; }

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

/* Focus. Visible, high contrast, and never removed — cash-on-delivery
   checkout has to be completable from a keyboard. */
:focus-visible {
	outline: 2px solid var(--dk-ink);
	outline-offset: 2px;
	border-radius: var(--dk-radius);
}
.dk-on-ink :focus-visible { outline-color: var(--dk-yellow); }

.dk-skip-link {
	position: absolute;
	left: var(--dk-s4);
	top: -100px;
	z-index: var(--dk-z-modal);
	background: var(--dk-ink);
	color: var(--dk-white);
	padding: var(--dk-s3) var(--dk-s5);
	font-weight: 600;
	transition: top var(--dk-dur) var(--dk-ease);
}
.dk-skip-link:focus { top: var(--dk-s4); }

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

/* ===============================================================
 * Layout primitives
 * ============================================================= */

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

.dk-section { padding-block: var(--dk-section); }
.dk-section--lg { padding-block: var(--dk-section-lg); }
.dk-section--tight { padding-block: var(--dk-s7); }

.dk-stack > * + * { margin-top: var(--dk-s4); }
.dk-stack-lg > * + * { margin-top: var(--dk-s6); }

.dk-grid { display: grid; gap: var(--dk-s5); }
.dk-cluster { display: flex; flex-wrap: wrap; gap: var(--dk-s3); align-items: center; }

/* ===============================================================
 * Atelier texture
 * ============================================================= */

/* Engineering-paper grid. */
.dk-gridpaper {
	background-image:
		linear-gradient(to right, var(--dk-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--dk-grid-line) 1px, transparent 1px);
	background-size: var(--dk-grid-size) var(--dk-grid-size);
}
.dk-on-ink.dk-gridpaper,
.dk-gridpaper.dk-on-ink {
	background-image:
		linear-gradient(to right, var(--dk-grid-line-ink) 1px, transparent 1px),
		linear-gradient(to bottom, var(--dk-grid-line-ink) 1px, transparent 1px);
}

/* Dark plane. Sets the inverted palette for everything inside it. */
.dk-on-ink {
	background-color: var(--dk-ink);
	color: var(--dk-white);
	--dk-text: var(--dk-white);
	--dk-text-muted: var(--dk-ink-300);
	--dk-text-faint: var(--dk-ink-400);
	--dk-line: var(--dk-line-ink);
	--dk-line-strong: rgba(255, 255, 255, 0.24);
	--dk-bg-raised: var(--dk-ink-800);
	--dk-bg-sunken: var(--dk-ink-800);
}

/*
 * Eyebrow label. Mono, widely tracked, with a short yellow rule leading it.
 * Used above section headings throughout — the single most recognisable
 * repeating device in the system.
 */
.dk-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--dk-s3);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 500;
	letter-spacing: var(--dk-ls-label);
	text-transform: uppercase;
	color: var(--dk-text-muted);
	margin: 0 0 var(--dk-s3);
}
.dk-eyebrow::before {
	content: '';
	width: 26px;
	height: 3px;
	background: var(--dk-yellow);
	flex: none;
}
.dk-eyebrow--plain::before { display: none; }

/* Mono micro-label, e.g. product reference codes. */
.dk-ref {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--dk-text-faint);
	text-transform: uppercase;
}

/*
 * Measurement rule. A hairline with ruler ticks rising from it, as on a
 * steel rule. Used to close sections.
 */
.dk-rule {
	position: relative;
	height: 9px;
	border-bottom: 1px solid var(--dk-line-strong);
	background-image: linear-gradient(to right, var(--dk-line-strong) 1px, transparent 1px);
	background-size: 13px 100%;
	background-position: bottom left;
	background-repeat: repeat-x;
	opacity: 0.85;
}

/*
 * Corner brackets — the crop marks of a technical drawing. Applied to
 * feature panels and imagery to signal "measured", not decorative.
 */
.dk-brackets { position: relative; }
.dk-brackets::before,
.dk-brackets::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid var(--dk-yellow);
	pointer-events: none;
}
.dk-brackets::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dk-brackets::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Diagonal hazard stripe. Used once or twice per page, never as a fill. */
.dk-hazard {
	height: 5px;
	background: repeating-linear-gradient(
		-45deg,
		var(--dk-ink) 0 9px,
		var(--dk-yellow) 9px 18px
	);
}

/* Section heading block: eyebrow + title + optional link. */
.dk-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dk-s5);
	margin-bottom: var(--dk-s6);
	flex-wrap: wrap;
}
.dk-head h2 { margin: 0; }
.dk-head__more {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--dk-s2);
	color: var(--dk-text-muted);
	white-space: nowrap;
	border-bottom: 1px solid var(--dk-line-strong);
	padding-bottom: 2px;
}
.dk-head__more:hover { color: var(--dk-ink); border-bottom-color: var(--dk-yellow); }
.dk-on-ink .dk-head__more:hover { color: var(--dk-yellow); }