/**
 * Noms Magazine design tokens (Phase 1 of the site redesign).
 *
 * Source of truth: Paper file "Motivated yonder" > page "Site Redesign - Directions",
 * artboards "Listicle - Ranked List Layout" (1440) and "Listicle - Mobile" (390).
 * Every value below was read from Paper computed styles on 2026-08-24, not eyeballed.
 *
 * This token block defines CUSTOM PROPERTIES ONLY, so shipping it changes nothing
 * visually. Components start consuming these tokens in Phase 2. The pre-existing
 * migrated-template styles are preserved unchanged below the block.
 *
 * Fonts: the design uses Outfit (800/900) for display and DM Sans (400/500/700)
 * for body/UI. They are NOT loaded here; enqueue them when the first component
 * ships in Phase 2, then retire Playfair Display / Lato / Poppins in Phase 3.
 *
 * Deploy note: after uploading, clear WP Rocket "Used CSS" (a plain cache clear
 * does not regenerate it).
 */

:root {
	/* ---- Color ----
	 * Normalization: Paper uses #1A1A1A and #2A241C in two spots; both are
	 * folded into --noms-ink / --noms-text to keep one ink family.
	 */
	--noms-cream: #FAF4EA;      /* page ground */
	--noms-surface: #FFFFFF;    /* cards, shortlist table */
	--noms-ink: #1C1814;        /* headings, strong borders */
	--noms-ink-deep: #171310;   /* filled dark: kicker chips, sticky bar, coverage strip */
	--noms-text: #2E2A26;       /* body copy */
	--noms-text-deck: #463D31;  /* intro deck */
	--noms-text-muted: #6B6560; /* captions, photo credits, meta */
	--noms-hairline: #E4DACA;   /* row dividers inside cards/tables */
	--noms-yellow: #FFC400;     /* brand accent: underline bar, What to Order card, badges */
	--noms-red: #FA5745;        /* live accent: kicker text on dark chips */

	/* ---- Type families ---- */
	--noms-font-display: "Outfit", system-ui, sans-serif; /* weights 800, 900 */
	--noms-font-body: "DM Sans", system-ui, sans-serif;   /* weights 400, 500, 700 */

	/* ---- Type scale ----
	 * clamp() endpoints are the measured mobile (390) and desktop (1440) values.
	 * Measured px pairs (size/line-height) noted per token.
	 */
	--noms-text-h1: clamp(2.0625rem, 1.389rem + 2.762vw, 3.875rem);   /* 33/37 -> 62/64, w900, tracking -0.025em..-0.03em */
	--noms-text-h2: clamp(1.625rem, 1.393rem + 0.952vw, 2.25rem);     /* 26/31 -> 36/44, w900 (item titles) */
	--noms-text-numeral: clamp(2.125rem, 1.707rem + 1.714vw, 3.25rem);/* 34/42 -> 52/64, w900 (item rank number) */
	--noms-text-deck-size: clamp(1.0625rem, 0.946rem + 0.476vw, 1.375rem); /* 17/27 -> 22/33 (intro deck) */
	--noms-text-body: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* 17/27 -> 19/31 */
	--noms-text-dish: 1.3125rem;   /* 21/26, w800 (What to Order dish name; desktop-sourced) */
	--noms-text-caption: 0.8125rem;/* 13/16, w500, tracking 0.06em (photo credits) */
	--noms-text-data: 0.9375rem;   /* 15/24, w500 (addresses, card data) */
	--noms-text-button: 0.8125rem; /* 13/16, w700 (Website / Instagram pills) */
	--noms-text-label: 0.6875rem;  /* 11/14, w700, tracking 0.12em (kicker, section labels; card labels use 12/16) */
	--noms-text-badge: 0.625rem;   /* 10/12, w700, tracking 0.1em (TOP PICK style badges) */

	--noms-tracking-display: -0.025em;
	--noms-tracking-label: 0.12em;
	--noms-tracking-badge: 0.1em;
	--noms-leading-display: 1.1;   /* measured 1.03 desktop / 1.12 mobile; single working value */
	--noms-leading-body: 1.6;      /* measured 1.63 desktop / 1.59 mobile */

	/* ---- Shape ---- */
	--noms-radius-card: 10px;  /* shortlist table, item cards */
	--noms-radius-chip: 3px;   /* small filled chips/badges */
	--noms-radius-pill: 20px;  /* Website/Instagram buttons, PRICE pill */
	--noms-radius-bar: 4px;    /* yellow accent underline (132x7 desktop, 88x6 mobile) */
	--noms-border-strong: 1.5px solid var(--noms-ink); /* card outlines, dark chip borders */
	--noms-border-hairline: 1px solid var(--noms-hairline);
}

/* ==========================================================================
   Existing migrated-template styles (pre-Phase-1, unchanged below)
   ========================================================================== */

/**
 * Zeen Child - Global Styles
 *
 * Shared styles for all child theme templates.
 * Page-specific styles go in assets/css/pages/.
 * Reusable component styles go in assets/css/components/.
 */

/* ==========================================================================
   Post Grid
   ========================================================================== */

.post-grid {
	display: grid;
	gap: 24px;
}

.post-grid[data-columns="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.post-grid[data-columns="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.post-grid[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.post-grid[data-columns="3"],
	.post-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.post-grid[data-columns="2"],
	.post-grid[data-columns="3"],
	.post-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Post Card
   ========================================================================== */

.post-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.post-card__category {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 12px;
}

.post-card__title {
	font-size: 18px;
	line-height: 1.3;
	margin: 6px 0;
}

.post-card__title a {
	text-decoration: none;
	color: inherit;
}

.post-card__date {
	font-size: 12px;
	color: #888;
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */

.hero-banner {
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 80px 20px;
	text-align: center;
}

.hero-banner__inner {
	max-width: 800px;
	margin: 0 auto;
}

.hero-banner__title {
	font-size: 42px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.hero-banner__subtitle {
	font-size: 18px;
	opacity: 0.85;
	margin: 0 0 24px;
}

.hero-banner__cta {
	display: inline-block;
	background: #fff;
	color: #1a1a1a;
	padding: 12px 32px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
}

@media (max-width: 768px) {
	.hero-banner {
		padding: 48px 16px;
	}

	.hero-banner__title {
		font-size: 28px;
	}
}

/* ==========================================================================
   Newsletter Embed
   ========================================================================== */

.newsletter-embed {
	padding: 40px 20px;
}

.newsletter-embed__inner {
	max-width: 600px;
	margin: 0 auto;
}