/*
 * Spisdigmæt — global token layer + load-bearing brand reset.
 * Ports docs/design/tokens.md verbatim. Every later page issue (LUS-295…301)
 * reads these custom properties. Do not hardcode brand values elsewhere
 * (K-06/N-07). If a mockup and this file disagree, re-extract and update both.
 */

:root {
	/* ---- Core colors ---- */
	--chalk: #F7F4EE;
	--chalk-deep: #EDE8D8;
	--ink: #1A1510;
	--red: #D04020;
	--accent: #D04020;

	/* ---- Category colors + pale background pair ---- */
	--cat-red: #D04020;
	--cat-plum: #7A2870;
	--cat-green: #2A6840;
	--cat-gold: #C08010;
	--cat-teal: #1A7870;
	--cat-blue: #2B5A9A;
	--red-bg: #FFF0EB;
	--plum-bg: #F8EEF8;
	--green-bg: #EBF5EF;
	--gold-bg: #FDF5E0;
	--teal-bg: #E8F6F4;

	/* ---- Emne colors (taxonomy v2.4, LUS-515) + pale tints ----
	   Muted/earthy so nine colours can coexist without fighting the photography.
	   The five --cat-* above are the older five-category set, still used by the
	   archive/single templates. */
	--emne-aftensmad: #C4401E;
	--emne-pizza: #D68A2E;
	--emne-koed-fisk: #8B2E2E;
	--emne-pasta: #B8935A;
	--emne-bagvaerk: #A67C52;
	--emne-salater: #4A7A3E;
	--emne-sundt: #5B8C6E;
	--emne-budget: #2A7870;
	--emne-hverdag: #6B4A7A;
	--emne-aftensmad-bg: #FBEDE8;
	--emne-pizza-bg: #FDF4E6;
	--emne-koed-fisk-bg: #F7EAEA;
	--emne-pasta-bg: #F9F2E8;
	--emne-bagvaerk-bg: #F7F0E8;
	--emne-salater-bg: #EDF4EB;
	--emne-sundt-bg: #EEF5F1;
	--emne-budget-bg: #E8F4F2;
	--emne-hverdag-bg: #F2EDF5;

	/* ---- Semantic aliases (resolved in the DS — verbatim) ---- */
	--surface-page: #F7F4EE;
	--surface-card: #F7F4EE;
	--surface-inset: #EDE8D8;
	--surface-ink: #1A1510;
	--text-body: #1A1510;
	--text-muted: rgba(26, 21, 16, .55);
	--text-faint: rgba(26, 21, 16, .45);
	--text-on-ink: #F7F4EE;
	--text-on-color: #FFFFFF;
	--text-accent: #D04020;
	--border-strong: #1A1510;
	--border-hair: rgba(26, 21, 16, .20);
	--accent-quiet: #FFF0EB;

	/* ---- Type families ---- */
	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Chelsea Market', Georgia, serif;
	--font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;
	--font-hand: 'Caveat', 'Comic Sans MS', cursive;

	/* ---- Weights ---- */
	--fw-body: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-display: 800;
	--fw-black: 900;

	/* ---- Type scale ---- */
	--t-display-xl: 80px;
	--t-display-l: 48px;
	--t-display-m: 32px;
	--t-display-s: 20px;
	--t-hand-xl: 52px;
	--t-hand-m: 26px;
	--t-body-l: 18px;
	--t-body: 15px;
	--t-body-s: 13px;
	--t-mono: 12px;
	--t-mono-s: 10px;

	/* ---- Line-height + letter-spacing ---- */
	--lh-display: 0.95;
	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.65;
	--ls-display: -0.01em;
	--ls-eyebrow: 0.22em;
	--ls-label: 0.16em;
	--ls-button: 0.04em;

	/* ---- Spacing scale ---- */
	--space-0: 0;
	--space-1: 2px;
	--space-2: 4px;
	--space-3: 8px;
	--space-4: 12px;
	--space-5: 16px;
	--space-6: 20px;
	--space-7: 28px;
	--space-8: 36px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 72px;

	/* ---- Form (load-bearing brand rules) ---- */
	--radius: 0;
	--shadow-none: none;
	--border-w: 2px;
	--border-w-strong: 3px;
	--border-w-accent: 6px;
	--tilt-sm: -1.5deg;
	--tilt-md: -2deg;

	/* ---- Layout ---- */
	--container-max: 1100px;
	--gutter: 64px;
	--gutter-mobile: 24px;
}

/*
 * Load-bearing brand reset. Radius 0 EVERYWHERE, no box-shadow ANYWHERE.
 * These two rules are the brand's spine and the loop's hard assertions —
 * !important so no parent-theme or plugin style can reintroduce them.
 */
*,
*::before,
*::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ---- Base surfaces + body type ---- */
body {
	background-color: var(--chalk);
	color: var(--text-body);
	font-family: var(--font-body);
	line-height: var(--lh-body);
}

/* ---- Headlines use the condensed display face ---- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--ink);
}

/* ---- Links carry the brand red ---- */
a {
	color: var(--accent);
}

/* ---- Default 2px ink border helper (brand frame) ---- */
.has-ink-border {
	border: var(--border-w) solid var(--ink);
}

/* ============================================================
 * LUS-295 — shared components (delte komponenter)
 * Ported 1:1 from the mockup inline styles (forside + opskrift).
 * Markup lives in parts/*.html (template-parts) + patterns/*.php.
 * ============================================================ */

/* ---- Layout helpers ---- */
.sdm-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.sdm-divider { border-bottom: var(--border-w-strong) solid var(--ink); }
.sdm-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-8); }
.sdm-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-8); }

/* ---- Site header (template-part: header) ---- */
.sdm-site-header { position: sticky; top: 0; z-index: 20; background: var(--chalk); border-bottom: var(--border-w-strong) solid var(--ink); }
.sdm-site-header__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); }
.sdm-logo { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.sdm-logo__name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 30px; text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.9; color: var(--ink); margin: 0; }
.sdm-logo__name a { color: var(--ink); text-decoration: none; }
.sdm-logo__note { font-family: var(--font-hand); font-size: 15px; color: var(--red); transform: rotate(var(--tilt-sm)); transform-origin: left center; margin: 3px 0 0; }
.sdm-nav { display: flex; gap: var(--space-7); align-items: center; list-style: none; margin: 0; padding: 0; }
.sdm-nav a { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 3px solid transparent; }
.sdm-nav a:hover, .sdm-nav a:focus-visible { border-bottom-color: var(--red); color: var(--red); }
.sdm-nav-wrap { display: flex; align-items: center; }
.sdm-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: var(--border-w) solid var(--ink); background: var(--chalk); cursor: pointer; }
.sdm-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); }

/* ---- Site footer (template-part: footer) ---- */
.sdm-site-footer { background: var(--ink); color: var(--chalk); }
.sdm-site-footer__top { max-width: var(--container-max); margin: 0 auto; padding: 44px var(--gutter); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-9); flex-wrap: wrap; }
.sdm-site-footer__brand { max-width: 300px; }
.sdm-site-footer__name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-display-m); text-transform: uppercase; line-height: 0.95; color: var(--chalk); margin: 0; }
.sdm-site-footer__name a { color: var(--chalk); text-decoration: none; }
.sdm-site-footer__note { font-family: var(--font-hand); font-size: var(--t-display-s); color: var(--red); transform: rotate(var(--tilt-sm)); display: inline-block; margin-top: var(--space-3); }
.sdm-site-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.sdm-footer-col { display: flex; flex-direction: column; gap: 9px; }
.sdm-footer-col__head { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: 0.5; }
.sdm-footer-col a { font-family: var(--font-body); font-size: 14px; color: var(--chalk); opacity: 0.85; text-decoration: none; }
.sdm-footer-col a:hover { opacity: 1; }
.sdm-site-footer__bottom { border-top: 1px solid rgba(247, 244, 238, 0.15); }
.sdm-site-footer__bottom-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--gutter); font-family: var(--font-mono); font-size: 11px; opacity: 0.45; }

/* ---- Button (accent / outline + sizes) ---- */
.sdm-btn { display: inline-flex; align-items: center; gap: var(--space-3); border-radius: var(--radius); font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-button); line-height: 1; cursor: pointer; text-decoration: none; transition: transform 0.08s, opacity 0.12s; padding: var(--space-4) 22px; font-size: 18px; border: var(--border-w) solid transparent; }
.sdm-btn:hover { transform: translateY(-1px); }
.sdm-btn--accent { background: var(--red); color: #fff; border-color: var(--red); }
.sdm-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.sdm-btn--ink { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.sdm-btn--sm { padding: var(--space-3) var(--space-5); font-size: 14px; }
.sdm-btn--lg { padding: var(--space-5) var(--space-7); font-size: var(--t-display-s); }

/* ---- Tag / badge ---- */
.sdm-tag { display: inline-block; background: var(--ink); color: var(--chalk); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 3px var(--space-3); }
.sdm-tag--accent { background: var(--red); color: #fff; }
.sdm-meta { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Section header ---- */
.sdm-section-head { text-align: left; }
.sdm-section-head__eyebrow { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--t-mono-s); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-6); }
.sdm-section-head__eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border-hair); }
.sdm-section-head__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(36px, 5vw, 56px); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 1; margin: 0 0 10px; }
.sdm-section-head__sub { font-family: var(--font-body); font-size: var(--t-body); color: var(--text-muted); line-height: 1.7; max-width: 560px; margin: 0; }

/* ---- Brush headline (red word + brush underline) ---- */
.sdm-brush { position: relative; display: inline-block; color: var(--red); }
.sdm-brush svg { position: absolute; left: 0; bottom: -0.22em; width: 100%; height: 0.4em; pointer-events: none; overflow: visible; }

/* ---- Category card ---- */
.sdm-cat-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius); color: #fff; overflow: hidden; text-decoration: none; }
.sdm-cat-card__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; background-position: 70% 30%; }
.sdm-cat-card__wash { position: absolute; inset: 0; z-index: 1; }
.sdm-cat-card__torn { position: absolute; top: 0; left: -3px; width: calc(100% + 6px); height: 46px; display: block; z-index: 2; }
.sdm-cat-card__num { position: absolute; top: var(--space-4); right: var(--space-4); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.1em; color: rgba(255,255,255,0.6); z-index: 3; }
.sdm-cat-card__emoji { font-size: 28px; margin-bottom: var(--space-4); position: relative; z-index: 3; }
.sdm-cat-card__eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: var(--space-2); position: relative; z-index: 3; }
.sdm-cat-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--t-display-s); text-transform: uppercase; line-height: 1.1; position: relative; z-index: 3; }

/* ---- Recipe card ---- */
.sdm-recipe-card { display: block; border: var(--border-w) solid var(--ink); border-radius: var(--radius); background: var(--chalk); overflow: hidden; text-decoration: none; color: var(--ink); }
.sdm-recipe-card__media { height: 160px; position: relative; border-bottom: var(--border-w) solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 52px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sdm-recipe-card__badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.sdm-recipe-card__hand { position: absolute; bottom: var(--space-3); right: var(--space-4); font-family: var(--font-hand); font-weight: var(--fw-bold); font-size: var(--t-display-s); color: #fff; transform: rotate(var(--tilt-md)); }
.sdm-recipe-card__body { padding: var(--space-5) 18px 18px; }
.sdm-recipe-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 24px; text-transform: uppercase; line-height: 1.1; margin: var(--space-3) 0; }
.sdm-recipe-card__desc { font-family: var(--font-body); font-size: var(--t-body-s); color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Recipe card driven by the query loop (LUS-296): tame core-block defaults */
.sdm-recipe-grid.wp-block-post-template { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.sdm-recipe-grid.wp-block-post-template > li { margin: 0; }
figure.sdm-recipe-card__media { margin: 0; }
/* The featured-image block wraps the img in an inline <a>, so the image never
   fills the card until the link is a block too. */
.sdm-recipe-card__media a { display: block; width: 100%; }
.sdm-recipe-card__media img { width: 100%; height: 160px; object-fit: cover; display: block; }
.sdm-recipe-card__body .sdm-meta { display: block; margin-bottom: var(--space-3); }
.sdm-recipe-card__body .sdm-recipe-card__title { margin: var(--space-3) 0; }
.sdm-recipe-card__title a { color: var(--ink); text-decoration: none; }
.sdm-recipe-card .wp-block-post-terms a { color: var(--text-muted); text-decoration: none; }

/* ---- Ingredient list (static markup; interactivity = LUS-299) ---- */
.sdm-ingredients__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-display-m); text-transform: uppercase; letter-spacing: var(--ls-display); }
.sdm-ingredients__note { font-family: var(--font-hand); font-weight: var(--fw-medium); font-size: 21px; color: var(--red); transform: rotate(var(--tilt-sm)); display: inline-block; margin: var(--space-2) 0 var(--space-5); }
.sdm-portions { display: flex; align-items: stretch; border: var(--border-w) solid var(--ink); background: var(--chalk); height: 64px; margin-bottom: var(--space-4); }
.sdm-portions__btn { width: 54px; flex-shrink: 0; border: none; background: var(--chalk); cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--t-display-m); color: var(--ink); line-height: 1; }
.sdm-portions__val { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: var(--border-w) solid var(--ink); border-right: var(--border-w) solid var(--ink); }
.sdm-portions__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.sdm-portions__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-hand-m); line-height: 1; text-transform: uppercase; }
.sdm-ingredients__items { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.sdm-ingredient { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); text-align: left; border: var(--border-w) solid var(--ink); border-radius: var(--radius); background: var(--chalk); font-family: var(--font-body); font-size: 14px; color: var(--ink); width: 100%; }
.sdm-ingredient__check { width: 20px; height: 20px; flex-shrink: 0; border: var(--border-w) solid var(--ink); background: transparent; }
.sdm-ingredient__name { flex: 1; font-weight: var(--fw-medium); }
.sdm-ingredient__amount { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--text-muted); }

/* ---- Archive / search (LUS-297) ---- */
.sdm-breadcrumb { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sdm-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.sdm-breadcrumb a:hover { color: var(--red); }
.sdm-filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sdm-pill { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; border: var(--border-w) solid var(--ink); background: var(--chalk); color: var(--ink); padding: 9px var(--space-5); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.sdm-pill.is-active, .sdm-pill:hover { background: var(--ink); color: var(--chalk); }
.sdm-pill__cnt { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); opacity: 0.55; }
.sdm-search { display: flex; align-items: stretch; border: var(--border-w) solid var(--ink); background: var(--chalk); max-width: 340px; margin: 0; }
.sdm-search__ico { display: flex; align-items: center; padding: 0 var(--space-4); font-size: 18px; border-right: var(--border-w) solid var(--ink); color: var(--text-muted); }
.sdm-search input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--font-body); font-size: 15px; color: var(--ink); padding: 11px var(--space-4); min-width: 0; }
.sdm-search input::placeholder { color: var(--text-faint); }
.sdm-filter-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.sdm-pagination { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-9); }
.sdm-pagination .wp-block-query-pagination-previous, .sdm-pagination .wp-block-query-pagination-next, .sdm-pagination .page-numbers { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; border: var(--border-w) solid var(--ink); padding: 10px var(--space-5); color: var(--ink); text-decoration: none; line-height: 1; }
.sdm-pagination .page-numbers.current { background: var(--ink); color: var(--chalk); }

/* ---- Single recipe (LUS-298) ---- */
.sdm-hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
.sdm-hero-split__text { padding: 56px var(--gutter); }
.sdm-hero-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; }
.sdm-hero-tags .wp-block-post-terms a, .sdm-hero-tags .wp-block-post-terms { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; color: var(--cat-red); background: var(--red-bg); padding: 4px 10px; text-decoration: none; line-height: 1.2; }
.sdm-hero-title { font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--ls-display); font-size: clamp(40px, 6vw, 62px); margin: 0; }
.sdm-hero-title a { color: var(--ink); text-decoration: none; }
.sdm-hero-excerpt { font-family: var(--font-body); font-size: var(--t-body-l); line-height: 1.7; color: var(--text-muted); max-width: 460px; margin: 18px 0 0; }
.sdm-hero-media { position: relative; min-height: 340px; overflow: hidden; border-left: var(--border-w-strong) solid var(--ink); }
.sdm-wash { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; background: var(--red-bg); }
.sdm-wash__emoji { font-size: 168px; line-height: 1; }
.sdm-wash__badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--ink); color: var(--chalk); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--t-body-s); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; }
.sdm-wash__hand { position: absolute; bottom: 18px; right: 22px; font-family: var(--font-hand); font-weight: var(--fw-bold); font-size: 27px; color: var(--ink); transform: rotate(var(--tilt-md)); }
.sdm-hero-media figure.wp-block-post-featured-image { position: absolute; inset: 0; z-index: 1; margin: 0; height: 100%; }
.sdm-hero-media figure.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deep-dive (authored via the deep-dive pattern) */
.sdm-deep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: 30px; align-items: stretch; }
.sdm-deep-block { border: var(--border-w) solid var(--ink); background: var(--chalk); padding: 26px 24px; display: flex; flex-direction: column; }
.sdm-deep-block h3 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: var(--t-display-s); margin: 0 0 var(--space-3); }
.sdm-deep-block p { font-family: var(--font-body); font-size: var(--t-body-s); color: var(--text-muted); line-height: 1.6; margin: 0; }

/* WPRM recipe card — CSS-only presentation override (N-06/N-08: never touches data/JSON-LD) */
.wprm-recipe-container { border: var(--border-w) solid var(--ink) !important; background: var(--chalk) !important; padding: var(--space-8) !important; font-family: var(--font-body); }
.wprm-recipe-container .wprm-recipe-name { font-family: var(--font-display) !important; font-weight: var(--fw-black) !important; text-transform: uppercase; letter-spacing: var(--ls-display); color: var(--ink) !important; }
.wprm-recipe-container .wprm-recipe-header, .wprm-recipe-container .wprm-recipe-ingredients-header, .wprm-recipe-container .wprm-recipe-instructions-header { font-family: var(--font-display) !important; font-weight: var(--fw-display) !important; text-transform: uppercase; letter-spacing: var(--ls-display); color: var(--ink) !important; }
.wprm-recipe-container .wprm-recipe-ingredient, .wprm-recipe-container .wprm-recipe-instruction-text { font-family: var(--font-body); font-size: 15px; color: var(--ink); }
.wprm-recipe-container .wprm-recipe-ingredient { border-bottom: 1px solid var(--border-hair); padding: var(--space-3) 0; }
.wprm-recipe-container .wprm-recipe-ingredient-amount, .wprm-recipe-container .wprm-recipe-ingredient-unit { font-family: var(--font-mono); color: var(--text-muted); }
.wprm-recipe-container .wprm-recipe-details, .wprm-recipe-container .wprm-recipe-details-label, .wprm-recipe-container .wprm-recipe-meta-container-pill { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.08em; }
.wprm-recipe-container .wprm-recipe-meta-container-pill { border: var(--border-w) solid var(--ink); background: var(--chalk); color: var(--ink); }
.wprm-recipe-container a, .wprm-recipe-container .wprm-recipe-link { color: var(--accent); }
.wprm-recipe-container .wprm-recipe-instructions { padding-left: 0; }
.wprm-recipe-container .wprm-layout-column { padding: 0 var(--space-6); }

/* ---- Video slot (LUS-299) — 9:16 placeholder, JS play/pause + faux progress ---- */
.sdm-video-sect { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-9); align-items: center; }
.sdm-vid { position: relative; border: var(--border-w) solid var(--ink); aspect-ratio: 9 / 16; width: 100%; background-size: cover; background-position: center; overflow: hidden; cursor: pointer; display: block; background-color: var(--chalk-deep); }
.sdm-vid__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; background: var(--ink); display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.sdm-vid:hover .sdm-vid__play { transform: scale(1.06); }
.sdm-vid__tri { width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent var(--chalk); margin-left: 5px; }
.sdm-vid.is-playing .sdm-vid__tri { border-width: 0; width: 26px; height: 28px; margin: 0; background: var(--chalk); -webkit-mask: linear-gradient(90deg, var(--chalk) 8px, transparent 8px 18px, var(--chalk) 18px); mask: linear-gradient(90deg, #000 8px, transparent 8px 18px, #000 18px); }
.sdm-vid__badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--ink); color: var(--chalk); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 9px; }
.sdm-vid__dur { position: absolute; bottom: var(--space-4); right: var(--space-4); background: rgba(26,21,16,.85); color: var(--chalk); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; }
.sdm-vid__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(247,244,238,.3); }
.sdm-vid__prog i { display: block; height: 100%; width: 0; background: var(--red); }
.sdm-vid.is-playing .sdm-vid__prog i { animation: sdm-vidprog 48s linear forwards; }
@keyframes sdm-vidprog { from { width: 0; } to { width: 100%; } }
.sdm-vid__steps { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-6); max-width: 420px; }
.sdm-vid__step { display: flex; align-items: center; gap: var(--space-5); border: var(--border-w) solid var(--ink); background: var(--chalk); padding: 11px var(--space-5); }
.sdm-vid__step time { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--red); flex-shrink: 0; }
.sdm-vid__step span { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-display); }
.sdm-vid__eyebrow { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-4); }
.sdm-vid__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-display-m); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 1; }
.sdm-vid__hand { font-family: var(--font-hand); font-weight: var(--fw-medium); font-size: 22px; color: var(--red); transform: rotate(var(--tilt-sm)); display: inline-block; margin: var(--space-3) 0 var(--space-2); }

/* ---- Front page: Emne cards, Emne blocks, spotlight, newsletter (LUS-579) ----
   Hard edges, 2px ink borders, no radius, no shadows. The nine Emne blocks
   alternate chalk / chalk-deep so the scroll reads as separate sections. */

/* Torn paper top edge, shared by the Emne cards and the feature cards. */
.sdm-torn { position: absolute; top: 0; left: -3px; width: calc(100% + 6px); display: block; z-index: 3; }

/* Nine Emne cards under the hero */
.sdm-emne-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-8); }
.sdm-emne-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 22px 18px 18px; border: var(--border-w) solid var(--ink); border-top: none; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
/* Photo sits under an Emne-coloured wash so the title keeps its contrast.
   Both layers are absent when the Emne has no recipes — the flat colour shows. */
.sdm-emne-card__photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 60% 35%; transition: transform .5s ease; }
.sdm-emne-card__wash { position: absolute; inset: 0; z-index: 1; }
.sdm-emne-card:hover .sdm-emne-card__photo { transform: scale(1.04); }
.sdm-emne-card__num { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.1em; opacity: 0.75; z-index: 4; }
.sdm-emne-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 25px; text-transform: uppercase; line-height: 1.02; letter-spacing: var(--ls-display); position: relative; z-index: 4; transition: opacity 0.12s ease; }
.sdm-emne-card__sub { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; margin-top: 7px; position: relative; z-index: 4; }
.sdm-emne-card:hover .sdm-emne-card__title { opacity: 0.82; }

/* One block per Emne: heading in the Emne colour, feature card, six text links */
.sdm-eb { border-bottom: var(--border-w-strong) solid var(--ink); }
.sdm-eb .sdm-wrap { padding-top: var(--space-10); padding-bottom: 68px; }
.sdm-eb__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-7); flex-wrap: wrap; margin-bottom: 26px; }
.sdm-eb__num { display: block; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.sdm-eb__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(38px, 4.6vw, 60px); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.94; margin: 0; }
.sdm-eb__all { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); text-decoration: none; border: var(--border-w) solid var(--ink); padding: 10px var(--space-5); white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.sdm-eb__all:hover { background: var(--sdm-ec); border-color: var(--sdm-ec); color: var(--sdm-ec-fg); }

.sdm-fc { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; border: var(--border-w) solid var(--ink); border-top: none; border-radius: var(--radius); text-decoration: none; overflow: hidden; }
.sdm-fc__media { position: relative; min-height: 340px; border-right: var(--border-w) solid var(--ink); overflow: hidden; background: var(--chalk-deep); }
.sdm-fc__photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.sdm-fc:hover .sdm-fc__photo { transform: scale(1.03); }
.sdm-fc__body { display: flex; flex-direction: column; justify-content: center; padding: 52px 34px 34px; color: var(--sdm-fg); }
.sdm-fc__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-4); }
.sdm-fc__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(30px, 3vw, 44px); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.98; }
.sdm-fc__desc { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; margin-top: 14px; max-width: 44ch; }
.sdm-fc__cta { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 22px; border-bottom: 2px solid currentColor; align-self: flex-start; padding-bottom: 2px; }

.sdm-eb__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-8); margin-top: var(--space-2); }
.sdm-eb__link { display: flex; flex-direction: column; gap: 5px; padding: 15px 0 14px; border-bottom: 1px solid var(--border-hair); text-decoration: none; }
.sdm-eb__link-t { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 19px; text-transform: uppercase; line-height: 1.08; color: var(--ink); transition: color 0.12s ease; }
.sdm-eb__link:hover .sdm-eb__link-t { color: var(--sdm-ec); }
.sdm-eb__link-m { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* Seasonal ingredient spotlight — editorial, edited in the site editor */
.sdm-spot { background: var(--chalk-deep); border-bottom: var(--border-w-strong) solid var(--ink); }
.sdm-spot .sdm-wrap { padding-top: var(--space-10); padding-bottom: 68px; }
.sdm-spot__eyebrow { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 22px; }
.sdm-spot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.sdm-spot__media { position: relative; aspect-ratio: 4 / 3; border: var(--border-w) solid var(--ink); background: var(--chalk) center / cover no-repeat; }
.sdm-spot__hand { position: absolute; right: -14px; bottom: -26px; font-family: var(--font-hand); font-weight: var(--fw-medium); font-size: var(--t-hand-m); color: var(--red); transform: rotate(var(--tilt-sm)); white-space: nowrap; }
.sdm-spot__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(46px, 5.4vw, 76px); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.92; margin: 0 0 18px; }
.sdm-spot__lead { font-family: var(--font-body); font-size: var(--t-body-l); line-height: 1.55; color: var(--ink); margin: 0 0 var(--space-5); }
.sdm-spot__text { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; color: var(--text-muted); margin: 0 0 26px; }
.sdm-spot__facts { display: flex; flex-direction: column; border-top: var(--border-w) solid var(--ink); }
.sdm-spot__fact { display: flex; justify-content: space-between; gap: var(--space-5); padding: 11px 0; border-bottom: 1px solid var(--border-hair); }
.sdm-spot__k { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.sdm-spot__v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px; text-transform: uppercase; }

/* Newsletter */
.sdm-nb { background: var(--ink); color: var(--chalk); }
.sdm-nb .sdm-wrap { padding-top: 62px; padding-bottom: 66px; }
.sdm-nb__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-9); align-items: start; }
.sdm-nb__eyebrow { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(247, 244, 238, .5); margin-bottom: var(--space-5); }
.sdm-nb__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(40px, 4.8vw, 66px); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: 0.92; margin: 0; color: var(--chalk); }
.sdm-nb__text { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: rgba(247, 244, 238, .8); margin: 0 0 22px; max-width: 52ch; }
.sdm-nb__form { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: stretch; }
.sdm-nb__form input[type="email"] { flex: 1; min-width: 220px; font-family: var(--font-body); font-size: 16px; padding: 13px var(--space-5); border: var(--border-w) solid var(--chalk); border-radius: var(--radius); background: var(--chalk); color: var(--ink); }
.sdm-nb__hand { display: inline-block; font-family: var(--font-hand); font-weight: var(--fw-medium); font-size: 22px; color: var(--red); transform: rotate(var(--tilt-sm)); margin-top: 18px; }

/* ---- Recipe overview facet filter (LUS-580) ----
   Sidebar left, results right. State lives in the query string; sdm.js only
   auto-submits on change, so the whole thing works with JavaScript off. */
.sdm-filter-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-9); align-items: start; }
.sdm-filter-side { position: sticky; top: 90px; border: var(--border-w) solid var(--ink); background: var(--chalk); }
.sdm-filter-side__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-5); border-bottom: var(--border-w) solid var(--ink); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--t-display-s); text-transform: uppercase; letter-spacing: var(--ls-display); }
.sdm-filter-reset { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; }
.sdm-facet__search { display: block; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-hair); }
.sdm-facet__search input { width: 100%; font-family: var(--font-body); font-size: 14px; padding: 9px 11px; border: var(--border-w) solid var(--ink); border-radius: var(--radius); background: var(--chalk); color: var(--ink); }
.sdm-facet { border-bottom: 1px solid var(--border-hair); }
.sdm-facet__head { list-style: none; cursor: pointer; padding: 13px var(--space-5); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; display: flex; justify-content: space-between; align-items: center; }
.sdm-facet__head::-webkit-details-marker { display: none; }
.sdm-facet__head::after { content: "+"; font-family: var(--font-mono); font-size: 15px; color: var(--text-muted); }
.sdm-facet[open] .sdm-facet__head::after { content: "–"; }
.sdm-facet__body { padding: 0 var(--space-5) var(--space-4); max-height: 280px; overflow-y: auto; }
.sdm-facet__row { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; cursor: pointer; }
.sdm-facet__row input { position: absolute; opacity: 0; width: 0; height: 0; }
.sdm-facet__box { width: 15px; height: 15px; flex: 0 0 auto; border: var(--border-w) solid var(--ink); background: var(--chalk); }
.sdm-facet__row input:checked + .sdm-facet__box { background: var(--red); border-color: var(--red); }
.sdm-facet__row input:focus-visible + .sdm-facet__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.sdm-facet__label { font-family: var(--font-body); font-size: 14px; line-height: 1.3; flex: 1; }
.sdm-facet__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.sdm-filter-submit { display: block; width: calc(100% - var(--space-5) * 2); margin: var(--space-5); text-align: center; }
.sdm-filter-count { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); }
.sdm-filter-empty { font-family: var(--font-body); font-size: var(--t-body-l); color: var(--text-muted); border: var(--border-w) solid var(--border-hair); padding: var(--space-8); }
/* No-JS: the submit button is the only way to apply, so always show it.
   sdm.js hides it once auto-submit is wired up. */
.sdm-filter-side.is-live .sdm-filter-submit { display: none; }

/* ---- Responsive (mockup breakpoints) ---- */
@media (max-width: 1000px) {
	.sdm-filter-layout { grid-template-columns: 1fr; }
	.sdm-filter-side { position: static; }
	.sdm-fc { grid-template-columns: 1fr; }
	.sdm-fc__media { border-right: none; border-bottom: var(--border-w) solid var(--ink); min-height: 260px; }
	.sdm-fc__body { padding: 34px 26px 30px; }
	.sdm-eb__links { grid-template-columns: repeat(2, 1fr); }
	.sdm-spot__grid, .sdm-nb__grid { grid-template-columns: 1fr; }
	.sdm-spot__hand { right: auto; left: 6px; }
}
@media (max-width: 900px) {
	.sdm-emne-grid { grid-template-columns: repeat(2, 1fr); }
	.sdm-wrap, .sdm-site-header__inner, .sdm-site-footer__top, .sdm-site-footer__bottom-inner { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
	.sdm-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.sdm-recipe-grid { grid-template-columns: 1fr; }
	.sdm-hero-split { grid-template-columns: 1fr; }
	.sdm-hero-split__text { padding: 40px var(--gutter-mobile); }
	.sdm-hero-media { min-height: 240px; border-left: none; border-top: var(--border-w-strong) solid var(--ink); }
	.sdm-deep-grid { grid-template-columns: 1fr; }
	.wprm-recipe-container .wprm-layout-column { padding: 0; }
	.sdm-video-sect { grid-template-columns: 1fr; gap: var(--space-7); }
	.sdm-vid { max-width: 300px; }
}
@media (max-width: 700px) {
	/* Mobile nav (LUS-301): hamburger toggles a full-width drawer below the header. */
	.sdm-nav-toggle { display: flex; }
	.sdm-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--chalk); border-bottom: var(--border-w-strong) solid var(--ink); padding: var(--space-4) var(--gutter-mobile) var(--space-6); display: none; }
	.sdm-nav-wrap.is-open .sdm-nav { display: flex; }
	.sdm-nav li { width: 100%; }
	.sdm-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border-hair); font-size: 20px; }
	.sdm-nav a:hover, .sdm-nav a:focus-visible { border-bottom-color: var(--border-hair); }
}
@media (max-width: 620px) {
	.sdm-eb__links { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.sdm-emne-grid { grid-template-columns: 1fr; }
	.sdm-cat-grid { grid-template-columns: 1fr; }
}