/*
Theme Name:  Dejunel
Theme URI:   https://dejunel.yoda.digital
Author:      YODA Digital
Author URI:  https://yoda.digital
Description: Custom catalogue theme for Dejunel — fulgi de cereale fabricați în Moldova. Classic PHP theme, WooCommerce-aware, bilingual RO/RU. Concept "Lumină de dimineață": an editorial food publication that happens to hold a catalogue.
Version:     0.2.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dejunel
Tags:        e-commerce, translation-ready, custom-menu, featured-images
*/

/* ==========================================================================
   Fonts — self-hosted variable subsets. unicode-range means a Romanian page
   never downloads the Cyrillic files, and vice versa.
   ========================================================================== */

@font-face {
	font-family: "Unbounded";
	src: url("assets/fonts/unbounded-latin.woff2") format("woff2");
	font-weight: 400 800; font-style: normal; font-display: swap;
	unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+00AB, U+00BB;
}
@font-face {
	font-family: "Unbounded";
	src: url("assets/fonts/unbounded-latin-ext.woff2") format("woff2");
	font-weight: 400 800; font-style: normal; font-display: swap;
	unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163;
}
@font-face {
	font-family: "Unbounded";
	src: url("assets/fonts/unbounded-cyrillic.woff2") format("woff2");
	font-weight: 400 800; font-style: normal; font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+2116;
}

@font-face {
	font-family: "Onest";
	src: url("assets/fonts/onest-latin.woff2") format("woff2");
	font-weight: 300 700; font-style: normal; font-display: swap;
	unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+00AB, U+00BB;
}
@font-face {
	font-family: "Onest";
	src: url("assets/fonts/onest-latin-ext.woff2") format("woff2");
	font-weight: 300 700; font-style: normal; font-display: swap;
	unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163;
}
@font-face {
	font-family: "Onest";
	src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
	font-weight: 300 700; font-style: normal; font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+2116;
}

/* ==========================================================================
   Design tokens
   Colours are read from the Dejunel Instagram identity (blue bowl mark, blue
   mascot, Mic Dejun packaging). Replace --dj-brand from the real logo file
   when one exists — everything else is derived from it with color-mix().
   ========================================================================== */

:root {
	--dj-brand:       #1b62d6;
	--dj-brand-deep:  #0e3f92;
	--dj-brand-lift:  #4d8ef0;
	--dj-accent:      #21a3bf;   /* the bowl's cyan */

	--dj-oat:         #efe2c6;
	--dj-corn:        #f5c445;
	--dj-buck:        #c89b6a;

	--dj-ink:         #16202b;
	--dj-ink-soft:    #5a6572;
	--dj-paper:       #ffffff;
	--dj-surface:     #faf7f0;   /* warm, not grey — morning light */
	--dj-line:        #e8e2d6;

	--dj-focus:       var(--dj-brand);

	--dj-font:        "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dj-font-head:   "Unbounded", var(--dj-font);

	--dj-measure:     1220px;
	--dj-gap:         clamp(1rem, 2.5vw, 2rem);
	--dj-radius:      14px;
	--dj-radius-lg:   28px;

	--dj-shadow:      0 1px 2px rgb(22 32 43 / .05), 0 8px 24px -12px rgb(22 32 43 / .18);
	--dj-shadow-lift: 0 2px 4px rgb(22 32 43 / .06), 0 24px 48px -20px rgb(22 32 43 / .28);

	--dj-ease:        cubic-bezier(.2, .7, .2, 1);
}

@supports (color: oklch(50% .1 250)) {
	:root {
		--dj-brand:      oklch(52% .19 260);
		--dj-brand-deep: oklch(38% .16 262);
		--dj-brand-lift: oklch(67% .16 262);
		--dj-accent:     oklch(68% .12 210);
		--dj-ink:        oklch(24% .02 250);
		--dj-ink-soft:   oklch(50% .02 250);
		--dj-surface:    oklch(97.5% .012 85);
		--dj-line:       oklch(91% .015 85);
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--dj-font);
	font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
	line-height: 1.65;
	color: var(--dj-ink);
	background: var(--dj-paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--dj-font-head);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); letter-spacing: -0.02em; }

p { margin: 0 0 1.2em; text-wrap: pretty; }

a { color: var(--dj-brand); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--dj-brand-deep); }

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

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--dj-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.dj-container {
	width: min(100% - 2 * var(--dj-gap), var(--dj-measure));
	margin-inline: auto;
}

.dj-narrow { width: min(100% - 2 * var(--dj-gap), 68ch); margin-inline: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.skip-link:focus {
	position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem;
	z-index: 999; padding: .7rem 1.1rem; background: var(--dj-paper);
	clip-path: none; width: auto; height: auto;
}

/* ==========================================================================
   Recurring devices — the bowl, the grain, the mascot
   ========================================================================== */

/* Grain: a procedural flake scatter, as an inline SVG tile (~1.4 KB, no request,
   no photography). Rotated ellipses in three tones read as cereal rather than
   as polka dots; two tiles at different sizes break up the repeat. */
.dj-grain {
	background-color: var(--dj-oat);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='210'%3E%3Cg fill='%23a8763f' fill-opacity='.34'%3E%3Cellipse cx='34' cy='30' rx='15' ry='7' transform='rotate(-22 34 30)'/%3E%3Cellipse cx='118' cy='16' rx='12' ry='6' transform='rotate(14 118 16)'/%3E%3Cellipse cx='196' cy='42' rx='16' ry='7' transform='rotate(-8 196 42)'/%3E%3Cellipse cx='72' cy='86' rx='13' ry='6' transform='rotate(37 72 86)'/%3E%3Cellipse cx='152' cy='104' rx='17' ry='8' transform='rotate(-31 152 104)'/%3E%3Cellipse cx='232' cy='120' rx='11' ry='5' transform='rotate(19 232 120)'/%3E%3Cellipse cx='18' cy='142' rx='14' ry='7' transform='rotate(8 18 142)'/%3E%3Cellipse cx='96' cy='168' rx='16' ry='7' transform='rotate(-15 96 168)'/%3E%3Cellipse cx='186' cy='184' rx='12' ry='6' transform='rotate(28 186 184)'/%3E%3C/g%3E%3Cg fill='%237d5322' fill-opacity='.22'%3E%3Cellipse cx='58' cy='56' rx='10' ry='5' transform='rotate(41 58 56)'/%3E%3Cellipse cx='142' cy='62' rx='9' ry='4' transform='rotate(-27 142 62)'/%3E%3Cellipse cx='214' cy='78' rx='11' ry='5' transform='rotate(6 214 78)'/%3E%3Cellipse cx='40' cy='192' rx='10' ry='5' transform='rotate(-36 40 192)'/%3E%3Cellipse cx='128' cy='134' rx='12' ry='5' transform='rotate(22 128 134)'/%3E%3C/g%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='140'%3E%3Cg fill='%23c8a05e' fill-opacity='.3'%3E%3Cellipse cx='24' cy='48' rx='11' ry='5' transform='rotate(33 24 48)'/%3E%3Cellipse cx='104' cy='22' rx='13' ry='6' transform='rotate(-19 104 22)'/%3E%3Cellipse cx='146' cy='96' rx='10' ry='5' transform='rotate(12 146 96)'/%3E%3Cellipse cx='62' cy='118' rx='12' ry='6' transform='rotate(-40 62 118)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 260px 210px, 170px 140px;
}

.dj-bowl-mark { color: var(--dj-brand); width: 2.6rem; flex: none; }

/* ==========================================================================
   Header
   ========================================================================== */

.dj-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--dj-paper) 88%, transparent);
	border-bottom: 1px solid var(--dj-line);
	view-transition-name: dj-header;
}

@supports (backdrop-filter: blur(1px)) {
	/* Note: backdrop-filter creates a containing block — never put position:fixed
	   children inside this element. The mobile menu uses the top layer instead. */
	.dj-header { backdrop-filter: blur(14px) saturate(1.4); }
}

.dj-header__inner {
	display: flex;
	align-items: center;
	gap: var(--dj-gap);
	padding-block: clamp(.65rem, 1.4vw, 1rem);
}

.dj-brand {
	display: flex; align-items: center; gap: .7rem;
	text-decoration: none; color: var(--dj-ink);
	font-family: var(--dj-font-head);
	font-weight: 700; font-size: 1.3rem; letter-spacing: -0.04em;
	line-height: 1;
}

.dj-brand__tagline {
	display: block; margin-top: .25rem;
	font-family: var(--dj-font); font-size: .72rem; font-weight: 400;
	letter-spacing: 0; color: var(--dj-ink-soft);
}

.dj-nav { margin-inline-start: auto; }

.dj-nav ul {
	display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem);
	margin: 0; padding: 0; list-style: none;
}

.dj-nav a {
	color: var(--dj-ink); text-decoration: none; font-weight: 500;
	font-size: .97rem; position: relative; padding-block: .35rem;
}

.dj-nav a::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
	height: 2px; background: var(--dj-brand);
	scale: 0 1; transform-origin: left; transition: scale .28s var(--dj-ease);
}

.dj-nav a:hover::after,
.dj-nav .current-menu-item > a::after { scale: 1 1; }

/* Polylang switcher */
.dj-nav .lang-item { font-size: .88rem; }
.dj-nav .lang-item a { display: inline-flex; align-items: center; gap: .35rem; text-transform: uppercase; letter-spacing: .04em; }
.dj-nav .lang-item img { width: 16px; border-radius: 2px; }
.dj-nav .lang-item.current-lang > a { color: var(--dj-ink-soft); }
.dj-nav .lang-item.current-lang > a::after { display: none; }

/* Mobile menu — native popover, so it lives in the top layer and is unaffected
   by the header's backdrop-filter containing block. */
.dj-menu-toggle {
	display: none;
	margin-inline-start: auto;
	align-items: center; gap: .5rem;
	font: inherit; font-weight: 600; font-size: .95rem;
	background: none; border: 1px solid var(--dj-line);
	border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
	color: var(--dj-ink);
	min-height: 44px;
}

.dj-menu-toggle svg { width: 1.1rem; }

#dj-mobile-menu {
	border: 0; padding: 0; margin: 0;
	inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	background: var(--dj-paper);
	color: var(--dj-ink);
}

#dj-mobile-menu::backdrop { background: rgb(22 32 43 / .4); }

.dj-mobile-menu__inner { padding: var(--dj-gap); padding-top: clamp(1.5rem, 5vw, 3rem); }

.dj-mobile-menu__close {
	position: absolute; top: 1rem; right: 1rem;
	min-width: 44px; min-height: 44px;
	font: inherit; font-size: 1.5rem; line-height: 1;
	background: none; border: 1px solid var(--dj-line); border-radius: 999px;
	cursor: pointer; color: var(--dj-ink);
}

#dj-mobile-menu ul { list-style: none; margin: 3rem 0 0; padding: 0; }
#dj-mobile-menu li { border-bottom: 1px solid var(--dj-line); }
#dj-mobile-menu a {
	display: block; padding: 1rem 0; text-decoration: none; color: var(--dj-ink);
	font-family: var(--dj-font-head); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em;
}
#dj-mobile-menu .lang-item a { font-family: var(--dj-font); font-size: 1rem; text-transform: uppercase; }

@media (max-width: 860px) {
	.dj-nav { display: none; }
	.dj-menu-toggle { display: inline-flex; }
}

/* ==========================================================================
   Hero — the bowl motif
   ========================================================================== */

.dj-hero {
	position: relative;
	padding-block: clamp(3rem, 9vw, 7.5rem);
	background: var(--dj-surface);
	overflow: hidden;
}

.dj-hero::before {
	/* the bowl: an oversized arc the content sits inside */
	content: "";
	position: absolute;
	inset-block-start: 12%;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: min(150vw, 1500px);
	aspect-ratio: 2 / 1;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--dj-oat) 70%, transparent), transparent 70%);
	pointer-events: none;
}

.dj-hero__inner { position: relative; }

.dj-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: .84rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--dj-brand-deep);
	background: color-mix(in srgb, var(--dj-brand) 10%, transparent);
	padding: .45rem 1rem; border-radius: 999px;
	margin-bottom: 1.5rem;
}

.dj-hero h1 { max-width: 16ch; }

.dj-hero__lead {
	max-width: 52ch;
	font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem);
	color: var(--dj-ink-soft);
}

.dj-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.dj-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .95rem 1.6rem; min-height: 48px;
	border-radius: 999px; border: 1px solid transparent;
	font-weight: 600; font-size: 1rem; text-decoration: none;
	transition: translate .2s var(--dj-ease), background-color .2s var(--dj-ease), box-shadow .2s var(--dj-ease);
}

.dj-btn--primary { background: var(--dj-brand); color: #fff; box-shadow: var(--dj-shadow); }
.dj-btn--primary:hover { background: var(--dj-brand-deep); color: #fff; translate: 0 -2px; box-shadow: var(--dj-shadow-lift); }
.dj-btn--ghost { border-color: var(--dj-line); color: var(--dj-ink); background: var(--dj-paper); }
.dj-btn--ghost:hover { border-color: var(--dj-brand); color: var(--dj-brand); translate: 0 -2px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.dj-main { display: block; }

.dj-section { padding-block: clamp(3rem, 7vw, 6rem); }
.dj-section--surface { background: var(--dj-surface); }

.dj-section__head { margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.dj-section__head p { color: var(--dj-ink-soft); max-width: 56ch; margin: 0; }

.dj-band {
	height: clamp(120px, 18vw, 220px);
	border-block: 1px solid var(--dj-line);
}

/* Category marks — bold type, not thumbnails */
.dj-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1px;
	background: var(--dj-line);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-lg);
	overflow: hidden;
}

.dj-cat {
	position: relative;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 2.5rem;
	min-height: clamp(150px, 20vw, 210px);
	padding: 1.4rem;
	background: var(--dj-paper);
	text-decoration: none; color: var(--dj-ink);
	transition: background-color .3s var(--dj-ease), color .3s var(--dj-ease);
	overflow: hidden;
}

.dj-cat__index {
	font-family: var(--dj-font-head); font-size: .8rem; font-weight: 500;
	color: var(--dj-ink-soft); letter-spacing: .05em;
}

.dj-cat__name {
	font-family: var(--dj-font-head);
	font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
	font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
	text-wrap: balance;
}

.dj-cat::after {
	content: "";
	position: absolute; inset-block-end: -55%; inset-inline-end: -20%;
	width: 70%; aspect-ratio: 1; border-radius: 50%;
	background: var(--dj-oat);
	transition: translate .45s var(--dj-ease);
	z-index: 0;
}

.dj-cat > * { position: relative; z-index: 1; }
.dj-cat:hover { background: var(--dj-brand); color: #fff; }
.dj-cat:hover .dj-cat__index { color: color-mix(in srgb, #fff 70%, transparent); }
.dj-cat:hover::after { translate: 0 -25%; background: color-mix(in srgb, #fff 14%, transparent); }

/* Provenance strip */
.dj-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--dj-gap);
}

.dj-fact p { color: var(--dj-ink-soft); margin: 0; }

/* Note the p. prefix: `.dj-fact p` above is (0,1,1) and would otherwise beat a
   bare `.dj-fact__n` class, painting the numerals grey. */
p.dj-fact__n {
	font-family: var(--dj-font-head);
	font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
	font-weight: 800; line-height: 1; letter-spacing: -0.05em;
	color: var(--dj-brand);
	margin-bottom: .4rem;
}

/* ==========================================================================
   WooCommerce — catalogue only. No purchase UI exists anywhere.
   ========================================================================== */

.woocommerce-products-header { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.woocommerce-products-header__title { margin-bottom: .3rem; }
.woocommerce-products-header .term-description { color: var(--dj-ink-soft); max-width: 60ch; }

.woocommerce-result-count { color: var(--dj-ink-soft); font-size: .92rem; }

.woocommerce-ordering select,
.dj-select {
	font: inherit; font-size: .95rem;
	padding: .6rem 1rem; min-height: 44px;
	border: 1px solid var(--dj-line); border-radius: 999px;
	background: var(--dj-paper); color: var(--dj-ink);
}

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0; padding: 0; list-style: none;
	container-type: inline-size;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: var(--dj-paper);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius);
	overflow: hidden;
	transition: translate .3s var(--dj-ease), box-shadow .3s var(--dj-ease), border-color .3s var(--dj-ease);
}

.woocommerce ul.products li.product:hover {
	translate: 0 -4px;
	border-color: color-mix(in srgb, var(--dj-brand) 35%, var(--dj-line));
	box-shadow: var(--dj-shadow-lift);
}

.woocommerce ul.products li.product a { text-decoration: none; color: inherit; display: block; }

.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
	background: var(--dj-surface);
	margin: 0;
}

/* No photo yet? Then the card shows a grain field, not a broken box. */
.woocommerce ul.products li.product a:not(:has(img))::before,
li.product.dj-no-image .dj-card__ph {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--dj-oat);
	background-image:
		radial-gradient(ellipse 14px 7px at 20% 30%, color-mix(in srgb, var(--dj-buck) 55%, transparent) 40%, transparent 42%),
		radial-gradient(ellipse 11px 6px at 68% 18%, color-mix(in srgb, var(--dj-buck) 40%, transparent) 40%, transparent 42%),
		radial-gradient(ellipse 16px 8px at 44% 72%, color-mix(in srgb, var(--dj-buck) 48%, transparent) 40%, transparent 42%);
	background-size: 150px 120px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--dj-font-head);
	font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
	padding: 1rem 1rem .25rem;
	margin: 0;
	text-wrap: balance;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	display: block;
	padding: 0 1rem 1.1rem;
	color: var(--dj-ink); font-weight: 600; font-size: 1rem;
}

/* Wider cards get a roomier treatment — container query, not viewport. */
@container (min-width: 900px) {
	ul.products li.product .woocommerce-loop-product__title { font-size: 1.12rem; }
}

/* Single product */
.woocommerce div.product { padding-block: clamp(2rem, 5vw, 3.5rem); }

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--dj-radius); }

.woocommerce div.product .product_title { margin-bottom: .4rem; }

.woocommerce div.product p.price {
	font-family: var(--dj-font-head);
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
	font-weight: 700; color: var(--dj-ink); letter-spacing: -0.03em;
}

.woocommerce div.product .product_meta {
	margin-top: 1.5rem; padding-top: 1.5rem;
	border-top: 1px solid var(--dj-line);
	font-size: .92rem; color: var(--dj-ink-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; }
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { padding: .7rem 1rem; border-bottom: 1px solid var(--dj-line); text-align: start; }

/* Any wide table scrolls in its own container instead of widening the page. */
.woocommerce-tabs .panel { overflow-x: auto; }

/* Belt and braces: nothing purchasable can render. */
.add_to_cart_button,
.single_add_to_cart_button,
.quantity,
.woocommerce-cart-form,
.cart { display: none !important; }

/* ==========================================================================
   Empty state — the mascot's moment
   ========================================================================== */

.dj-empty {
	text-align: center;
	padding-block: clamp(3rem, 8vw, 6rem);
	max-width: 46ch; margin-inline: auto;
}

.dj-empty svg { width: clamp(110px, 18vw, 170px); margin: 0 auto 1.5rem; }
.dj-empty h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); }
.dj-empty p { color: var(--dj-ink-soft); }

/* ==========================================================================
   Editorial content
   ========================================================================== */

.dj-page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.dj-page-head__lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--dj-ink-soft); max-width: 58ch; }

.dj-entry { padding-bottom: clamp(2rem, 5vw, 4rem); }

.dj-entry :is(h2, h3) { margin-top: 2em; }
.dj-entry ul, .dj-entry ol { padding-inline-start: 1.3em; }
.dj-entry li { margin-bottom: .4em; }

.dj-entry blockquote {
	margin: 2rem 0; padding: 1.4rem 1.6rem;
	border-inline-start: 3px solid var(--dj-brand);
	background: var(--dj-surface);
	border-radius: 0 var(--dj-radius) var(--dj-radius) 0;
	font-size: 1.1rem;
}

.dj-entry table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.dj-entry :is(th, td) { padding: .7rem .9rem; border-bottom: 1px solid var(--dj-line); text-align: start; }
.dj-entry figure { margin: 2rem 0; }
.dj-entry figcaption { font-size: .88rem; color: var(--dj-ink-soft); margin-top: .5rem; }
.dj-entry img { border-radius: var(--dj-radius); }

.dj-entry__meta { color: var(--dj-ink-soft); font-size: .9rem; margin-bottom: 1rem; }

.dj-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	list-style: none; margin: 0; padding: 0;
}

.dj-card {
	border: 1px solid var(--dj-line); border-radius: var(--dj-radius);
	overflow: hidden; background: var(--dj-paper);
	transition: translate .3s var(--dj-ease), box-shadow .3s var(--dj-ease);
}
.dj-card:hover { translate: 0 -4px; box-shadow: var(--dj-shadow-lift); }
.dj-card a { text-decoration: none; color: inherit; display: block; }
.dj-card__body { padding: 1.1rem; }
.dj-card__title { font-family: var(--dj-font-head); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 .35rem; }
.dj-card__excerpt { color: var(--dj-ink-soft); font-size: .95rem; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

.dj-footer {
	margin-top: clamp(3rem, 7vw, 5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--dj-ink);
	color: color-mix(in srgb, #fff 78%, transparent);
	font-size: .95rem;
}

.dj-footer a { color: #fff; text-decoration: none; }
.dj-footer a:hover { text-decoration: underline; }

.dj-footer__grid {
	display: grid; gap: var(--dj-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	margin-bottom: 2.5rem;
}

.dj-footer h3 {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
	color: color-mix(in srgb, #fff 55%, transparent);
	font-family: var(--dj-font); font-weight: 600;
}

.dj-footer ul { list-style: none; margin: 0; padding: 0; }
.dj-footer li { margin-bottom: .5rem; }

.dj-footer__brand { font-family: var(--dj-font-head); font-size: 1.5rem; color: #fff; letter-spacing: -0.04em; }

.dj-footer__note {
	border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
	padding-top: 1.5rem;
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	font-size: .85rem;
	color: color-mix(in srgb, #fff 58%, transparent);
}

/* ==========================================================================
   Motion layer — every effect below is an enhancement. The page is complete,
   correct and readable with all of it removed.
   ========================================================================== */

/* Cross-document view transitions: Chrome 126+, Safari 18.2+, Firefox in
   progress. Unsupported browsers simply navigate normally. */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-duration: .28s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

@keyframes dj-fade-up {
	from { opacity: 0; translate: 0 18px; }
	to   { opacity: 1; translate: 0 0; }
}

/* Scroll-driven reveals. animation-timeline is NOT Baseline (Firefox still
   ships it behind a flag), so the finished state above is the default and this
   only applies where the feature is actually supported.

   Note the fill mode: `forwards`, not `both`. With `both`, anything below the
   fold is held at the 0% keyframe — opacity 0 — whenever the page is rendered
   without scrolling. That is not just a screenshot artefact: print, PDF export
   and reader modes all render a blank page. `forwards` leaves the element at
   its authored, visible state until its range is entered. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.dj-reveal {
			animation: dj-fade-up linear forwards;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}

@media print {
	.dj-reveal { animation: none !important; opacity: 1 !important; translate: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.dj-header, .dj-footer, .dj-menu-toggle { display: none; }
	body { font-size: 11pt; }
}