/* ==========================================================================
   DORIC · Layout primitives
   --------------------------------------------------------------------------
   Section rhythm on this site comes from alternating value — obsidian, image,
   ivory — not from uniform vertical padding. Sections that butt directly
   against each other (the hero, the category strip, the brand inversion)
   deliberately carry no padding at all.
   ========================================================================== */

.d-main { display: block; }

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

.d-section {
	position: relative;
	padding-block: var(--d-section-y);
}

/* Pages that are not the homepage clear the fixed chrome. */
body:not(.has-transparent-header) .d-main { padding-top: var(--d-chrome-h); }

/* ── Horizontal rail ────────────────────────────────────────────────────── */

/*
 * Native scroll-snap. No carousel library anywhere on this site: the browser
 * already does momentum, touch, keyboard and accessibility better than any
 * 45KB dependency would.
 */
.d-rail {
	display: flex;
	gap: var(--d-s4);
	overflow-x: auto;
	/* A rail moves sideways only: left alone, overflow-y would compute to auto
	   and a vertical gesture would drift the cards up and down. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.d-rail::-webkit-scrollbar { display: none; }

.d-rail > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Bleeds a rail that sits inside .d-container out to the viewport edges. */
.d-rail--bleed {
	margin-inline: calc(var(--d-gutter) * -1);
	padding-inline: var(--d-gutter);
	scroll-padding-inline: var(--d-gutter);
}

@media (prefers-reduced-motion: reduce) {
	.d-rail { scroll-behavior: auto; }
}

/* ── Section header ─────────────────────────────────────────────────────── */

.d-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--d-s6);
	margin-bottom: var(--d-s8);
}

.d-sechead--stack {
	flex-direction: column;
	align-items: flex-start;
}

.d-sechead__label { margin-bottom: var(--d-s4); }

.d-sechead__title {
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h2);
	font-weight: 400;
	line-height: var(--d-lh-heading);
	letter-spacing: var(--d-ls-display);
	color: var(--d-text);
	/* No cap and no balancing: a heading that fits on one line keeps it, and
	   one that does not wraps where the line ends. */
	text-wrap: pretty;
}

.d-sechead__aside {
	display: flex;
	align-items: center;
	gap: var(--d-s7);
	flex: none;
}

@media (min-width: 1024px) {
	.d-sechead { margin-bottom: var(--d-s9); }
}

@media (max-width: 639px) {
	.d-sechead {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--d-s4);
	}

	.d-sechead__aside { width: 100%; justify-content: space-between; }
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

.d-on-ivory {
	background: var(--d-bg-inverse);
	color: var(--d-text-inverse);
}

/* ── Simple inner pages (index/search fallback) ─────────────────────────── */

.d-page { padding-block: var(--d-s12) var(--d-s13); }
.d-page__head { margin-bottom: var(--d-s10); }

.d-page__title {
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h1);
	font-weight: 400;
	letter-spacing: var(--d-ls-display);
	margin-top: var(--d-s4);
}

.d-page__list { display: grid; gap: var(--d-s9); max-width: var(--d-measure); }
.d-page__listitem { border-top: var(--d-hairline) solid var(--d-border); padding-top: var(--d-s5); }

.d-page__listtitle {
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h3);
	font-weight: 400;
	margin-block: var(--d-s2) var(--d-s3);
}

.d-page__listtitle a { transition: color var(--d-dur-fast) var(--d-ease-out); }
.d-page__listtitle a:hover { color: var(--d-accent); }