/* ==========================================================================
   DORIC · Components
   --------------------------------------------------------------------------
   Hard edges, hairlines, no radius, no shadows on dark. Depth is made from
   value steps and 1px lines, because a shadow on #0B0A09 is either invisible
   or muddy.
   ========================================================================== */

/* ── Media slot ─────────────────────────────────────────────────────────────
   Every future photograph on this site renders through this component, so
   ratio, cropping, scrim, loading and CLS behaviour are decided once. While
   `image` is null it draws the placeholder; when the attachment arrives the
   placeholder simply stops being output and nothing else changes.
   ------------------------------------------------------------------------- */

.d-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--d-r);
	background: var(--d-surface-1);
	container-type: inline-size;
}

@media (max-width: 767px) {
	.d-media { aspect-ratio: var(--d-rm, var(--d-r)); }
}

.d-media--fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* <picture> is inline by default; without this it shrink-wraps and the
   art-directed image stops filling its slot. */
.d-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.d-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Focal point, set per image by doric_media()'s `position` argument. */
	object-position: var(--d-object-position, center);
}

/* The placeholder surface: obsidian ground, fluted architectural texture,
   hairline frame, one small editorial caption. Drawn entirely in CSS. */
.d-media__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: var(--d-surface-2);
	background-image:
		linear-gradient(164deg, rgba(233, 226, 215, .085) 0%, rgba(233, 226, 215, .01) 44%),
		radial-gradient(125% 80% at 50% 114%, rgba(11, 10, 9, .72), rgba(11, 10, 9, 0) 64%);
}

.d-media__ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(233, 226, 215, .075) 0 1px,
		rgba(233, 226, 215, 0) 1px 17px
	);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .18) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .18) 100%);
}

.d-media__ph::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: var(--d-hairline) solid var(--d-border);
}

/*
 * Full-bleed slots (the hero) put their caption in the upper third instead of
 * dead centre, where it would sit on top of the wordmark.
 */
.d-media--fill .d-media__ph {
	align-items: start;
	padding-top: calc(var(--d-chrome-h) + 12vh);
}

.d-media__ph-inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: var(--d-s2);
	padding: var(--d-s3);
	text-align: center;
}

.d-media__ph-rule {
	width: 26px;
	height: 1px;
	background: var(--d-accent);
	opacity: .7;
}

.d-media__ph-label {
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-text-muted);
}

.d-media__ph-meta {
	font-size: 9px;
	letter-spacing: .16em;
	color: var(--d-text-faint);
}

/* Small slots (mobile product rows, tiny detail tiles) shed the caption
   rather than crowd it. */
@container (max-width: 190px) {
	.d-media__ph-meta { display: none; }
	.d-media__ph::after { inset: 6px; }
}

@container (max-width: 120px) {
	.d-media__ph-label { display: none; }
	.d-media__ph-rule { width: 14px; }
}

.d-media__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.d-media--scrim-bottom .d-media__scrim {
	background: linear-gradient(180deg, rgba(11, 10, 9, 0) 38%, rgba(11, 10, 9, .42) 70%, rgba(11, 10, 9, .76) 100%);
}

.d-media--scrim-full .d-media__scrim {
	background: linear-gradient(180deg, rgba(11, 10, 9, .5) 0%, rgba(11, 10, 9, .12) 42%, rgba(11, 10, 9, .82) 100%);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.d-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--d-s3);
	min-height: var(--d-btn-h);
	padding-inline: var(--d-s7);
	border: var(--d-hairline) solid transparent;
	border-radius: var(--d-r-pill);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-btn);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	transition:
		background-color var(--d-dur-fast) var(--d-ease-out),
		border-color var(--d-dur-fast) var(--d-ease-out),
		color var(--d-dur-fast) var(--d-ease-out);
}

.d-btn:active { transform: translateY(1px); }

.d-btn--primary {
	background: var(--d-accent);
	border-color: var(--d-accent);
	color: var(--d-on-accent);
}

.d-btn--primary:hover {
	background: var(--d-accent-hover);
	border-color: var(--d-accent-hover);
}

.d-btn--secondary {
	border-color: var(--d-border-strong);
	color: var(--d-text);
}

.d-btn--secondary:hover {
	border-color: var(--d-ivory);
	background: rgba(233, 226, 215, .06);
}

.d-btn--inverse {
	background: var(--d-obsidian);
	border-color: var(--d-obsidian);
	color: var(--d-ivory);
}

.d-btn--inverse:hover { background: var(--d-charcoal); border-color: var(--d-charcoal); }

.d-btn--outline-dark {
	border-color: var(--d-border-inverse);
	color: var(--d-text-inverse);
}

.d-btn--outline-dark:hover {
	border-color: var(--d-obsidian);
	background: rgba(11, 10, 9, .05);
}

.d-btn--block { display: flex; width: 100%; }

/* ── Arrow link ─────────────────────────────────────────────────────────── */

.d-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--d-s2);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-link-arrow svg { transition: transform var(--d-dur-base) var(--d-ease-out); }
a.d-link-arrow:hover { color: var(--d-accent-hover); }
a.d-link-arrow:hover svg { transform: translateX(4px); }

/*
 * These sit at 19px tall, which is a poor thumb target and below the WCAG 2.2
 * minimum. On touch pointers the hit area is expanded past the text without
 * moving anything: the visual stays exactly as designed.
 */
@media (pointer: coarse) {
	a.d-link-arrow { position: relative; }

	a.d-link-arrow::after {
		content: "";
		position: absolute;
		inset: -13px -10px;
	}
}

/* ── Icon button ────────────────────────────────────────────────────────── */

.d-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--d-tap);
	height: var(--d-tap);
	border-radius: var(--d-r-pill);
	color: var(--d-text);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-iconbtn:hover { color: var(--d-accent); }

/* A disc the size of a full stop, struck in the house accent and ringed in
   the surface behind it so it reads on the icon rather than over it. It is
   only ever printed when the bag has something in it. */
.d-count {
	position: absolute;
	top: 2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--d-obsidian);
	background: var(--d-accent);
	color: var(--d-on-accent);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ── Rail navigation ────────────────────────────────────────────────────── */

.d-railnav { display: none; gap: var(--d-s2); }

.d-railnav__btn {
	border-radius: var(--d-r-pill);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: var(--d-hairline) solid var(--d-border);
	color: var(--d-text-2);
	transition:
		border-color var(--d-dur-fast) var(--d-ease-out),
		color var(--d-dur-fast) var(--d-ease-out),
		opacity var(--d-dur-fast) var(--d-ease-out);
}

.d-railnav__btn:hover:not(:disabled) { border-color: var(--d-ivory); color: var(--d-text); }
.d-railnav__btn:disabled { opacity: .28; cursor: not-allowed; }

@media (min-width: 1024px) {
	.d-railnav { display: flex; }
}

/* ── Badge ──────────────────────────────────────────────────────────────── */

.d-badge {
	display: inline-block;
	padding: 5px var(--d-s2);
	background: rgba(11, 10, 9, .74);
	border: var(--d-hairline) solid var(--d-border-strong);
	color: var(--d-accent);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

/* ── Wordmark ───────────────────────────────────────────────────────────── */

/* The name is drawn from the house artwork, not set in a typeface, so the
   wordmark is an inline SVG sized by height and coloured by `color`. */

.d-wordmark {
	display: inline-flex;
	align-items: center;
	color: var(--d-text);
	line-height: 1;
}

.d-logo {
	display: block;
	width: auto;
	fill: currentColor;
}

.d-wordmark .d-logo--wordmark { height: 15px; }
.d-wordmark--sm .d-logo--wordmark { height: 13px; }
.d-wordmark--footer .d-logo--lockup { height: clamp(44px, 7vw, 58px); }

@media (min-width: 768px) {
	.d-wordmark:not(.d-wordmark--sm) .d-logo--wordmark { height: 17px; }
}

.d-mark { color: var(--d-accent); }

/* ── Form fields ────────────────────────────────────────────────────────── */

.d-field {
	width: 100%;
	min-height: var(--d-tap);
	padding: var(--d-s3) var(--d-s4);
	background: transparent;
	border: var(--d-hairline) solid var(--d-border-strong);
	color: var(--d-text);
	font-size: var(--d-fs-small);
	transition: border-color var(--d-dur-fast) var(--d-ease-out);
}

.d-field::placeholder { color: var(--d-text-muted); }
.d-field:focus { border-color: var(--d-accent); outline: none; }
.d-field:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; }