/* ==========================================================================
   DORIC · Editorial pages
   --------------------------------------------------------------------------
   The House, The DORIC Standard, Craft, The DORIC Experience. The same
   value sequence the homepage uses — obsidian, elevated, ivory — so these
   pages read as chapters of it.
   ========================================================================== */

.d-edsection {
	position: relative;
	padding-block: var(--d-section-y);
	border-top: var(--d-hairline) solid var(--d-border);
}

.d-edtitle {
	margin-top: var(--d-s4);
	max-width: 18ch;
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h1);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.d-edcopy {
	display: grid;
	gap: var(--d-s5);
	max-width: 58ch;
	font-size: var(--d-fs-body-l);
	line-height: 1.85;
	color: var(--d-text-2);
}

.d-edsplit { display: grid; gap: var(--d-s7); }

@media (min-width: 900px) {
	.d-edsplit {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: clamp(48px, 7vw, 128px);
	}

	.d-edsplit__body { padding-top: var(--d-s8); }
}

/* ── Statement ──────────────────────────────────────────────────────────── */

.d-edstatement { background: var(--d-bg-elevated); text-align: center; }

.d-edstatement__inner { display: grid; justify-items: center; max-width: 900px; }

.d-edstatement__title {
	margin-top: var(--d-s5);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-display-l);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.012em;
	text-wrap: balance;
}

.d-edstatement__copy { margin-top: var(--d-s7); justify-items: center; }

/* ── Ivory inversion (after the homepage brand section) ─────────────────── */

.d-edinverse {
	display: grid;
	background: var(--d-bg-inverse);
	color: var(--d-text-inverse);
}

.d-edinverse :focus-visible { outline-color: var(--d-brown); }

.d-edinverse__panel {
	display: grid;
	place-items: center;
	padding: var(--d-s11) var(--d-gutter);
}

.d-edinverse__inner { max-width: 46ch; }
.d-edinverse__label { color: var(--d-text-inverse-2); }

.d-edinverse__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.012em;
	color: var(--d-obsidian);
}

.d-edinverse__copy {
	display: grid;
	gap: var(--d-s4);
	margin-top: var(--d-s6);
	font-size: var(--d-fs-body);
	line-height: 1.8;
	color: var(--d-text-inverse-2);
}

@media (min-width: 900px) {
	.d-edinverse { grid-template-columns: 1fr 1fr; }
	.d-edinverse__media { position: relative; min-height: 640px; }

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

/* ── Numbered pillars ───────────────────────────────────────────────────── */

.d-pillars {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--d-s8) var(--d-s6);
}

@media (min-width: 600px) {
	.d-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.d-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.d-pillars__item { padding-top: var(--d-s6); border-top: var(--d-hairline) solid var(--d-border-strong); }

.d-pillars__index {
	display: block;
	font-family: var(--d-font-display);
	font-size: var(--d-fs-small);
	letter-spacing: .22em;
	color: var(--d-accent);
}

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

.d-pillars__title {
	margin-top: var(--d-s5);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-text);
}

.d-pillars__sub { margin-top: var(--d-s2); }

.d-pillars__text {
	margin-top: var(--d-s3);
	font-size: var(--d-fs-small);
	line-height: 1.8;
	color: var(--d-text-muted);
}

/* ── Alternating media rows ─────────────────────────────────────────────── */

.d-principles-list { list-style: none; }

.d-edrow { display: grid; gap: var(--d-s8); }

@media (min-width: 900px) {
	.d-edrow {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(48px, 7vw, 128px);
	}

	.d-edrow--reverse .d-edrow__media { order: 2; }
	.d-edrow__media { max-width: 600px; }
	.d-edrow--reverse .d-edrow__media { justify-self: end; width: 100%; }
}

.d-edrow__index {
	display: block;
	font-family: var(--d-font-display);
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: .04em;
	color: var(--d-accent);
}

.d-edrow__title {
	margin-top: var(--d-s5);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h1);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: .06em;
}

.d-edrow__sub { margin-top: var(--d-s4); }

.d-edrow__text {
	margin-top: var(--d-s6);
	max-width: 46ch;
	font-size: var(--d-fs-body-l);
	line-height: 1.85;
	color: var(--d-text-2);
}

.d-edrow__link { margin-top: var(--d-s7); }

.d-ednote {
	max-width: 62ch;
	padding-block: var(--d-s8);
	font-size: var(--d-fs-small);
	line-height: 1.8;
	color: var(--d-text-muted);
}

/* ── Statements ─────────────────────────────────────────────────────────── */

.d-statements { margin-top: var(--d-s8); border-top: var(--d-hairline) solid var(--d-border-strong); }

.d-statements__item {
	padding-block: var(--d-s6);
	border-bottom: var(--d-hairline) solid var(--d-border);
	font-family: var(--d-font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

/* ── Tiles, details, link tiles ─────────────────────────────────────────── */

.d-tiles { display: grid; gap: var(--d-s4); }
@media (min-width: 768px) { .d-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Same on the Craft page: the frames touch, the captions keep their inset. */
.d-details { display: grid; gap: var(--d-s8) 0; margin-inline: calc(var(--d-gutter) * -1); }
.d-details__title,
.d-details__text { padding-inline: var(--d-s3); }
@media (min-width: 768px) { .d-details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-details__title {
	margin-top: var(--d-s4);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	color: var(--d-text);
}

.d-details__text { margin-top: var(--d-s1); font-size: var(--d-fs-small); color: var(--d-text-muted); }

.d-linktiles { display: grid; gap: var(--d-s4); }
@media (min-width: 768px) { .d-linktiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-linktile {
	display: grid;
	align-content: start;
	gap: var(--d-s3);
	min-height: 190px;
	padding: var(--d-s7) var(--d-s6);
	background: var(--d-surface-1);
	border: var(--d-hairline) solid var(--d-border);
	transition: border-color var(--d-dur-base) var(--d-ease-out);
}

.d-linktile:hover { border-color: var(--d-border-strong); }

.d-linktile__title {
	font-family: var(--d-font-display);
	font-size: 1.125rem;
	letter-spacing: .14em;
	color: var(--d-text);
}

.d-linktile__text { font-size: var(--d-fs-small); color: var(--d-text-muted); }
.d-linktile__icon { margin-top: var(--d-s4); color: var(--d-accent); transition: transform var(--d-dur-base) var(--d-ease-out); }
.d-linktile:hover .d-linktile__icon { transform: translateX(4px); }