/* OW CSS bundle — generated 2026-07-08T07:15:59+00:00 */

/* === assets/css/fonts.css === */
/*
 * Self-hosted Google Fonts for Grandpa Goes Yard.
 *
 * Subsets: latin + latin-ext (drops cyrillic, greek, vietnamese — US English
 * gardening blog, no need). Source CSS pulled from Google Fonts API with a
 * Chrome UA so woff2 is served. Woff2 files in ../fonts/.
 *
 * Families:
 *   - Bricolage Grotesque (display)   variable: opsz, wght 400-800, wdth 75-100
 *   - Source Serif 4       (body)      variable: opsz, wght 400-700, italic
 *   - IBM Plex Mono        (labels)    static: 400, 500, 600
 *   - Caveat               (signature) static: 500, 600
 *
 * Bricolage Grotesque latin is preloaded in functions.php (first paint).
 */

/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/bricolage-grotesque-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/bricolage-grotesque-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/caveat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/caveat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/source-serif-4-variable-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/source-serif-4-variable-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/source-serif-4-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://grandpagoesyard.com/wp-content/themes/outerwave/assets/fonts/source-serif-4-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* === assets/css/tokens.css === */
/*
 * Grandpa Goes Yard — design tokens.
 *
 * Aesthetic: editorial farmhouse-almanac. Warm paper canvas, weathered
 * greens and barn red, no SaaS-rounded cards. Sourced from
 * _html-demo-site/index.html — the demo is design source of truth.
 *
 * Type: Bricolage Grotesque (display) + Source Serif 4 (body) +
 *       IBM Plex Mono (labels) + Caveat (signature).
 *
 * Component CSS references these via var(--…). Never hard-code a color,
 * font size, or border width — always reference a token.
 *
 * Section rhythm: pages alternate --cream (warm) and --paper (bright)
 * canvases; cards invert (paper cards on cream sections, cream cards on
 * paper sections) so they read against their host surface.
 *
 * Breakpoint canon — referenced in @media by value, not as tokens (CSS
 * custom properties can't live inside @media). Documented here for parity
 * with the demo:
 *
 *   --bp-phone:    480px
 *   --bp-tablet:   720px
 *   --bp-desktop:  960px   (hamburger threshold)
 *   --bp-wide:     1200px
 */

:root {

	/* ── TYPEFACES ─────────────────────────────────────────────────── */

	--font-display: "Bricolage Grotesque", Georgia, "Times New Roman", serif;
	--font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--font-script:  "Caveat", "Bradley Hand", cursive;


	/* ── TEXT SIZES (by role, rem-based) ───────────────────────────── */

	--text-caption:       0.75rem;     /* 12px */
	--text-eyebrow:       0.75rem;     /* 12px */
	--text-byline:        0.75rem;     /* 12px */
	--text-small:         0.875rem;    /* 14px */
	--text-body:          1rem;        /* 16px */
	--text-lede:          1.125rem;    /* 18px */
	--text-card-title:    1.2rem;      /* ~19px */
	--text-subhead:       clamp(1.25rem, 1.8vw, 1.5rem);
	--text-section-title: clamp(1.85rem, 3vw, 2.6rem);
	--text-article-title: clamp(2rem, 4.5vw, 3.6rem);
	--text-hero-title:    clamp(2.6rem, 6.2vw, 5.2rem);
	--text-drop-cap:      4.6rem;

	/* one-off display sizes used across components — kept here so eyebrows
	   for hub h3, brand, drawer link, hero lede stay in one ledger. */
	--text-brand:         1.3rem;       /* nav brand name, hub h3 */
	--text-micro:         0.6875rem;    /* nav brand tagline at desktop */
	--text-drawer-link:   1.4rem;       /* mobile drawer menu items */
	--text-hero-lede:     clamp(1.1rem, 1.4vw, 1.3rem);
	--text-feature-title: 1.7rem;       /* favorites grid feature card title */
	--text-404:           clamp(5rem, 14vw, 11rem);

	/* Caveat (script) size scale — used by hero signature, about signature,
	   start-here close, masthead "howdy" accent, etc. */
	--text-script-sm:     1.4rem;
	--text-script-md:     1.5rem;
	--text-script-lg:     2rem;


	/* ── LINE HEIGHTS (by role) ────────────────────────────────────── */

	--line-height-tight:    1;
	--line-height-headline: 1.1;
	--line-height-subhead:  1.2;
	--line-height-body:     1.55;
	--line-height-lede:     1.65;
	--line-height-longform: 1.75;


	/* ── LETTER SPACING (by role) ──────────────────────────────────── */

	--tracking-display:  -0.025em;
	--tracking-headline: -0.01em;
	--tracking-normal:    0;
	--tracking-loose:     0.04em;
	--tracking-eyebrow:   0.18em;
	--tracking-caption:   0.22em;


	/* ── SPACING SCALE (4px base, t-shirt sizes) ───────────────────── */

	--space-2xs: 4px;
	--space-xs:  8px;
	--space-sm:  12px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;
	--space-5xl: 128px;


	/* ── SECTION RHYTHM (vertical padding for major sections) ──────── */

	--section-pad-tight:    clamp(40px, 5vh, 64px);
	--section-pad-default:  clamp(64px, 8vh, 96px);
	--section-pad-spacious: clamp(80px, 10vh, 120px);
	--section-pad-hero:     clamp(96px, 16vh, 180px);


	/* ── LAYOUT WIDTHS + GUTTERS ───────────────────────────────────── */

	--container-narrow:       760px;
	--container:              1200px;
	--container-wide:         1320px;
	--container-gutter:       24px;
	--container-gutter-tight: 16px;


	/* ── CARD INTERIORS ────────────────────────────────────────────── */

	--card-pad:       20px;
	--card-pad-tight: 16px;
	--card-pad-loose: 28px;


	/* ── RADIUS (editorial stays flat) ─────────────────────────────── */

	--radius-flat:   0;
	--radius-edge:   2px;
	--radius-soft:   6px;
	--radius-pill:   999px;
	--radius-circle: 50%;


	/* ── ELEVATION (warm-toned shadows, not neutral grey) ──────────── */

	--shadow-subtle:     0 2px 0 rgba(74, 52, 36, 0.04);
	--shadow-card:       0 8px 24px -10px rgba(74, 52, 36, 0.18);
	--shadow-lifted:     0 18px 40px -16px rgba(74, 52, 36, 0.28);
	--shadow-stamp:      2px 3px 0 rgba(140, 47, 31, 0.18);   /* barn-tinted offset, e.g. about seal */
	--shadow-mat-frame:  0 0 0 8px var(--paper), 0 0 0 9px var(--line-strong);  /* nested matted-frame outline */


	/* ── MOTION (by purpose) ───────────────────────────────────────── */

	--motion-hover:     180ms;
	--motion-shift:     240ms;
	--motion-reveal:    380ms;
	--motion-cinematic: 700ms;
	--ease-out:         cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-precise:     cubic-bezier(0.4, 0, 0.1, 1);


	/* ── LAYERS (z-index by intent) ────────────────────────────────── */

	--layer-base:     0;
	--layer-raised:   2;
	--layer-hero:     3;
	--layer-elevated: 5;
	--layer-sticky:   50;
	--layer-drawer:   60;
	--layer-modal:    100;


	/* ── COLORS (WCAG AA verified against cream canvas) ────────────── */

	--cream:        #F4EBD3;  /* default canvas, warm */
	/* cream shifted ~14% toward ink in oklch — used for press / hover states
	   on cream-filled buttons (hero primary). hue stays, lightness drops,
	   so the change reads as a tactile press rather than a color swap. */
	--cream-press:  color-mix(in oklch, var(--cream) 86%, var(--ink));
	--paper:        #FFFAEF;  /* alternate canvas + default card surface */
	--paper-edge:   #E8DDC0;  /* card border on cream sections */
	--ink:          #1A1814;  /* primary body text */
	--ink-soft:     #3A322A;  /* secondary text */
	--moss:         #2D4A28;  /* primary green (brand) */
	--moss-soft:    #466B3C;
	--moss-tint:    #E5EDD7;  /* light moss for callouts */
	--barn:         #8C2F1F;  /* weathered red accent */
	--soil:         #4A3424;
	--wheat:        #7A5215;  /* gold CTA accent (use on cream/light) */
	--wheat-bright: #EDB252;  /* lighter gold for dark backgrounds. AA on moss. */
	--sage:         #8FA176;
	--muted:        #5E544A;  /* secondary body / footer */
	--line:         #D9CFB6;
	--line-strong:  #BFB196;


	/* ── ALPHA VARIANTS (cream + ink for surface veils / gradients) ─── */

	/* used wherever a color needs to blend with another surface — hero
	   text-on-photo veils, nav scrim, footer rules, etc. naming maps the
	   percentage so the intent is readable at the call site. */
	--cream-86:        rgba(244, 235, 211, 0.86);
	--cream-78:        rgba(244, 235, 211, 0.78);
	--cream-72:        rgba(244, 235, 211, 0.72);
	--cream-60:        rgba(244, 235, 211, 0.60);
	--cream-45:        rgba(244, 235, 211, 0.45);
	--cream-30:        rgba(244, 235, 211, 0.30);
	--cream-12:        rgba(244, 235, 211, 0.12);
	--ink-veil-strong: rgba(26, 24, 20, 0.88);
	--ink-veil-med:    rgba(26, 24, 20, 0.72);
	--ink-veil-soft:   rgba(26, 24, 20, 0.55);
	--moss-wash:       rgba(45, 74, 40, 0.04);                /* faint moss bg, about callouts */


	/* ── BRAND SEAL SIZES (used by nav + about + footer) ────────────── */

	--seal-sm:      38px;       /* mobile nav */
	--seal-default: 46px;       /* desktop nav, footer colophon */
	--seal-lg:      124px;      /* about strip portrait seal */


	/* ── FONT-VARIATION WIDTH PRESETS ──────────────────────────────── */

	/* the display family (Bricolage Grotesque) has a variable width axis.
	   Use these presets so headings + chrome read with consistent weight. */
	--wdth-tight:   "wdth" 75;        /* big 404 numerals */
	--wdth-narrow:  "wdth" 90;        /* mobile nav brand etc. */
	--wdth-mid:     "wdth" 92;        /* article title balance */
	--wdth-default: "wdth" 95;        /* default headlines + .btn */


	/* ── WORDPRESS ADMIN BAR ───────────────────────────────────────── */

	/* Default 0; bumped via body.admin-bar in global.css. Any sticky or
	   fixed element under the admin bar should anchor with
	   top: var(--admin-bar-h). */
	--admin-bar-h: 0px;
}


/* === assets/css/global.css === */
/*
 * Grandpa Goes Yard — global stylesheet.
 *
 * Aesthetic: editorial farmhouse-almanac. Warm cream/paper canvas with a
 * very-low-intensity radial paper-grain wash, weathered greens (--moss)
 * and barn red accents, flat borders, no chunky offset shadows.
 *
 * Sourced from _html-demo-site/index.html — see that file for the design
 * source of truth. Per-component CSS lives under components/{name}/.css
 * and is enqueued on demand. Per-template CSS lives under
 * assets/css/templates/.
 */

/* ── RESET ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--line-height-lede);
	/* clip (not hidden) prevents horizontal scroll without breaking position: sticky */
	overflow-x: clip;
	font-feature-settings: "ss01", "onum";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	/* Subtle paper grain — two-tone radial wash. Very low intensity.
	   Fixed attachment so sections passing under reveal the same wash. */
	background-image:
		radial-gradient(circle at 12% 8%,  rgba(143, 161, 118, 0.08), transparent 35%),
		radial-gradient(circle at 88% 28%, rgba(140, 47, 31, 0.04),  transparent 40%),
		radial-gradient(circle at 70% 90%, rgba(122, 82, 21, 0.04),  transparent 40%);
	background-attachment: fixed;
}
body > main, body > .ow-main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }


/* ── SELECTION + FOCUS ──────────────────────────────────────────── */

::selection { background: var(--moss); color: var(--cream); }
:focus-visible {
	outline: 2px solid var(--moss);
	outline-offset: 2px;
}


/* ── SKIP LINK (a11y, hidden until focused) ─────────────────────── */

.ow-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ow-skip-link:focus,
.ow-skip-link:focus-visible {
	position: fixed;
	top: var(--space-xs);
	left: var(--space-xs);
	width: auto;
	height: auto;
	padding: var(--space-xs) var(--space-md);
	background: var(--moss);
	color: var(--cream);
	font-family: var(--font-display);
	font-weight: 600;
	z-index: var(--layer-modal);
	border-radius: var(--radius-edge);
}


/* ── LAYOUT PRIMITIVES ──────────────────────────────────────────── */

/* .wrap is the demo's primary container. .ow-container is kept as an
   alias for WP-side templates that prefer the prefixed name. */
.wrap,
.ow-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--container-gutter);
}
.wrap--narrow,
.ow-container--narrow { max-width: var(--container-narrow); }
.wrap--wide,
.ow-container--wide   { max-width: var(--container-wide); }

@media (max-width: 480px) {
	.wrap, .ow-container {
		padding: 0 var(--container-gutter-tight);
	}
}

.hidden { display: none !important; }
.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ── WP ADMIN BAR OFFSET ───────────────────────────────────────── */

/* WP auto-pushes the document with html { margin-top: 32px } when the
   admin bar is present, so flow content is already offset. Only sticky
   and fixed-positioned elements need to consume --admin-bar-h. */
body.admin-bar { --admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar { --admin-bar-h: 46px; }
}


/* ── HEADINGS (display family, moss color) ─────────────────────── */

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	color: var(--moss);
	font-weight: 700;
	line-height: var(--line-height-headline);
	letter-spacing: var(--tracking-headline);
	font-variation-settings: var(--wdth-default);
}
h1 { font-size: var(--text-article-title); margin: 0 0 0.4em; }
h2 { font-size: var(--text-section-title); margin: 0.2em 0 0.5em; }
h3 { font-size: var(--text-subhead);       margin: 0 0 0.35em; }
h4 { font-size: var(--text-card-title);    margin: 0 0 0.3em; }


/* ── EYEBROW (small-caps label above section titles) ───────────── */

.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	font-weight: 500;
	letter-spacing: var(--tracking-caption);
	text-transform: uppercase;
	color: var(--barn);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}
.eyebrow--moss  { color: var(--moss); }
.eyebrow--wheat { color: var(--wheat); }
.eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px; height: 1px;
	background: currentColor;
}
.eyebrow--no::before { display: none; }


/* ── SCRIPT (Caveat handwritten accent) ────────────────────────── */

.script {
	font-family: var(--font-script);
	font-weight: 500;
	color: var(--barn);
}


/* ── BUTTONS ───────────────────────────────────────────────────── */

/* Default = moss-filled solid button. Variants change surface colors only;
   shape, padding, and motion stay constant. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 14px 26px;
	background: var(--moss);
	color: var(--cream);
	border: 1px solid var(--moss);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: var(--tracking-normal);
	font-variation-settings: var(--wdth-default);
	border-radius: var(--radius-edge);
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--shadow-subtle);
	transition:
		background    var(--motion-hover) ease,
		border-color  var(--motion-hover) ease,
		color         var(--motion-hover) ease,
		transform     var(--motion-hover) ease,
		box-shadow    var(--motion-hover) ease;
}
.btn:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}
.btn--wheat {
	background: var(--wheat);
	border-color: var(--wheat);
	color: var(--cream);
}
.btn--wheat:hover {
	background: var(--barn);
	border-color: var(--barn);
}
.btn--ghost {
	background: transparent;
	color: var(--moss);
	border-color: var(--moss);
}
.btn--ghost:hover {
	background: var(--moss);
	color: var(--cream);
}
.btn--lg { padding: 18px 32px; font-size: var(--text-body); }


/* ── SECTION BLOCK PRIMITIVES ──────────────────────────────────── */

/* Sourced from _html-demo-site/index.html. Sections alternate between
   cream (body default) and paper, and cards inside .block--paper invert
   their default paper bg to cream so they read embedded rather than
   lifted. .step is included for future Start Here / steps patterns. */

section.block        { padding: var(--section-pad-default)  0; }
section.block--tight { padding: var(--section-pad-tight)    0; }
section.block--wide  { padding: var(--section-pad-spacious) 0; }

section.block--paper { background: var(--paper); }
section.block--paper .card,
section.block--paper .hub,
section.block--paper .step,
section.block--paper .about {
	background: var(--cream);
	border-color: var(--line);
}


/* ── SECTION HEAD (eyebrow / h2 / lede / "more" link) ──────────── */

.section-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--space-lg);
	margin-bottom: var(--space-2xl);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--line);
}
.section-head .eyebrow      { margin-bottom: var(--space-xs); }
.section-head__title h2     { color: var(--moss); }
.section-head__title .lede {
	margin-top: var(--space-xs);
	color: var(--muted);
	font-size: var(--text-lede);
	max-width: 60ch;
}

@media (max-width: 720px) {
	.section-head { grid-template-columns: 1fr; }
}


/* ── CARD PRIMITIVE (photo + body, paper surface) ──────────────── */

/* Default colors assume placement on the cream canvas. On a paper band
   (.block--paper), the invert rule above swaps to cream + line border so
   the card still reads against its host surface. */
.card {
	background: var(--paper);
	border: 1px solid var(--paper-edge);
	overflow: hidden;
	cursor: pointer;
	border-radius: var(--radius-edge);
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	transition:
		transform   var(--motion-shift) var(--ease-out),
		box-shadow  var(--motion-shift) ease;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	background: transparent;
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-cinematic) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body {
	padding: var(--space-md) var(--card-pad) var(--card-pad);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card__tag {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--barn);
	font-weight: 500;
	display: inline-block;
	margin-bottom: var(--space-xs);
}

.card__body h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--moss);
	font-size: var(--text-card-title);
	line-height: var(--line-height-subhead);
	margin-bottom: var(--space-xs);
	font-variation-settings: var(--wdth-default);
}

.card__body p {
	color: var(--muted);
	font-size: var(--text-small);
	line-height: var(--line-height-body);
}

.card__body .card__by {
	font-family: var(--font-mono);
	font-size: var(--text-byline);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--soil);
	margin-top: auto;
	padding-top: var(--space-sm);
}


/* ── REDUCED MOTION ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ── PRINT (basic) ─────────────────────────────────────────────── */

@media print {
	.masthead, .colophon { display: none; }
	body { background: #fff; color: #000; }
}


/* === components/nav/nav.css === */
/*
 * Masthead component.
 *
 * Sticky magazine header. Cream surface with a single hairline bottom rule,
 * grid: auto | 1fr | auto (brand · primary nav · cta). At ≤960px the nav and
 * cta hide and a hamburger reveals a drop-down drawer below the row.
 *
 * Sourced from _html-demo-site/index.html § MASTHEAD HEADER.
 */

/* ── MASTHEAD SHELL ─────────────────────────────────────────────── */

.masthead {
	position: sticky;
	top: var(--admin-bar-h);
	z-index: var(--layer-sticky);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.masthead__row {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-md) var(--container-gutter);
}


/* ── BRAND (seal + name stack) ──────────────────────────────────── */

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	cursor: pointer;
	text-decoration: none;
}

.brand__seal {
	width: var(--seal-default);
	height: var(--seal-default);
	border-radius: var(--radius-circle);
	background: var(--moss);
	color: var(--cream);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-small);
	letter-spacing: var(--tracking-loose);
	border: 2px solid var(--moss);
	box-shadow: inset 0 0 0 1px rgba(244, 235, 211, 0.4);
}

.brand__name {
	display: flex;
	flex-direction: column;
	line-height: var(--line-height-tight);
}

.brand__name b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-brand);
	letter-spacing: var(--tracking-normal);
	color: var(--moss);
	font-variation-settings: var(--wdth-narrow);
}

.brand__name small {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-caption);
	color: var(--soil);
	text-transform: uppercase;
	margin-top: var(--space-2xs);
}


/* ── PRIMARY NAV (desktop) ──────────────────────────────────────── */

.mast-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.mast-nav a {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--ink);
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition:
		color        var(--motion-hover) ease,
		border-color var(--motion-hover) ease;
	font-variation-settings: var(--wdth-default);
	text-decoration: none;
}

.mast-nav a:hover { color: var(--moss); }

/* wp_nav_menu emits current-menu-item / current_page_item on the <li>
   that matches the requested URL. .active is the demo's class for the
   same purpose (matched when nav items are rendered by the JS fallback). */
.mast-nav .current-menu-item > a,
.mast-nav .current_page_item > a,
.mast-nav a.active {
	color: var(--moss);
	border-bottom-color: var(--barn);
}


/* ── CTA (script greeting + button) ─────────────────────────────── */

.mast-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
}

.mast-cta .script {
	font-size: var(--text-card-title);
	color: var(--barn);
	transform: rotate(-3deg);
}


/* ── HAMBURGER (mobile only — animates into an X when open) ─────── */

.mast-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	align-items: center;
	position: relative;
	z-index: var(--layer-raised);
}

.mast-burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--moss);
	border-radius: 1px;
	transition:
		transform var(--motion-shift) var(--ease-out),
		opacity   var(--motion-shift) ease;
	transform-origin: center;
}

body.is-nav-open .mast-burger span:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
body.is-nav-open .mast-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.is-nav-open .mast-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── DROPDOWN DRAWER (mobile) ───────────────────────────────────── */

/* Drops down from below the masthead row. Masthead row stays
   stationary; only this panel animates. */
.drawer {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--paper);
	max-height: 0;
	overflow: hidden;
	border-bottom: 1px solid transparent;
}

body.is-nav-open .drawer {
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	border-bottom-color: var(--line);
}

.drawer__nav {
	padding: var(--space-lg) var(--container-gutter) var(--space-xs);
	max-width: var(--container);
	margin: 0 auto;
}

.drawer__nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.drawer__nav a {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-drawer-link);
	font-weight: 700;
	color: var(--ink);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--line);
	font-variation-settings: var(--wdth-mid);
	cursor: pointer;
	transition: color var(--motion-hover) ease;
	text-decoration: none;
}

.drawer__nav li:last-child a { border-bottom: 0; }

.drawer__nav .current-menu-item > a,
.drawer__nav .current_page_item > a,
.drawer__nav a.active {
	color: var(--moss);
}

.drawer__nav a:hover { color: var(--moss); }

.drawer__cta {
	padding: var(--space-md) var(--container-gutter) var(--space-lg);
	max-width: var(--container);
	margin: 0 auto;
}

.drawer__cta .btn { width: 100%; justify-content: center; }


/* ── BREAKPOINTS ────────────────────────────────────────────────── */

@media (min-width: 961px) {
	/* Drawer is mobile-only. */
	.drawer { display: none; }
}

@media (max-width: 960px) {
	.masthead__row { grid-template-columns: 1fr auto; gap: var(--space-sm); }
	.mast-nav     { display: none; }
	.mast-cta     { display: none; }
	.mast-burger  { display: inline-flex; }
}

@media (max-width: 420px) {
	.masthead__row { padding: var(--space-sm) var(--container-gutter-tight); }
	.brand__seal      { width: var(--seal-sm); height: var(--seal-sm); font-size: var(--text-eyebrow); }
	.brand__name b    { font-size: 1.1rem; }
	.brand__name small { font-size: 0.625rem; letter-spacing: var(--tracking-eyebrow); }
}


/* === components/footer/footer.css === */
/*
 * Site footer — newspaper colophon.
 *
 * Moss-band footer that closes every page on the site. Four-column grid
 * (brand · explore · fine-print · where) above a hairline legal strip.
 *
 * Reuses .brand / .brand__seal / .brand__name from the masthead's
 * components/nav/nav.css — nav.css is enqueued globally so those classes
 * are always available. The .colophon__brand scope below overrides their
 * colors for the dark moss background (cream-on-moss seal instead of the
 * default moss-on-cream).
 *
 * Sourced from _html-demo-site/index.html § FOOTER.
 */

.colophon {
	background: var(--moss);
	color: var(--cream-86);
}


/* ── Top grid (brand · 3 columns) ─────────────────────────────── */

.colophon__top {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
	padding: clamp(36px, 5vw, 56px) var(--container-gutter) clamp(28px, 4vw, 40px);
}


/* ── Brand column (recolors masthead .brand for dark surface) ─── */

.colophon__brand .brand__name b     { color: var(--cream); }
.colophon__brand .brand__name small { color: var(--cream-60); }

.colophon__brand .brand__seal {
	background: var(--cream);
	color: var(--moss);
	border-color: var(--cream);
}

.colophon__about {
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: var(--line-height-lede);
	color: var(--cream-78);
	margin-top: var(--space-md);
	max-width: 36ch;
}


/* ── Column heading + lists ────────────────────────────────────── */

.colophon h5 {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-caption);
	text-transform: uppercase;
	color: var(--cream-72);
	margin: 0 0 var(--space-sm);
}

.colophon ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.colophon ul li {
	margin-bottom: var(--space-xs);
}

.colophon ul a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-small);
	color: var(--cream);
	text-decoration: none;
	transition: color var(--motion-hover) ease;
	font-variation-settings: var(--wdth-default);
}

.colophon ul a:hover { color: var(--wheat-bright); }

/* Where-column items are spans not links — same type treatment, no hover state. */
.colophon ul li > span {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-small);
	color: var(--cream-72);
	font-variation-settings: var(--wdth-default);
}


/* ── Legal strip (bottom) ──────────────────────────────────────── */

.colophon__legal-band {
	border-top: 1px solid rgba(244, 235, 211, 0.18);
}

.colophon__legal {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-md) var(--container-gutter) var(--space-lg);
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	text-align: center;
	color: var(--cream-78);
}

.colophon__legal span + span::before {
	content: "·";
	margin: 0 var(--space-sm);
	color: var(--cream-30);
}


/* ── Breakpoints ──────────────────────────────────────────────── */

@media (max-width: 800px) {
	.colophon__top    { grid-template-columns: 1fr 1fr; }
	.colophon__brand  { grid-column: 1 / -1; }
	.colophon__legal  { text-align: left; }
	.colophon__legal span + span::before { margin: 0 var(--space-xs); }
}


/* === assets/css/templates/single.css === */
/*
 * Single post template — article hero (arthero) + article body wrapper.
 *
 * Sourced from _html-demo-site/index.html § ARTICLE PAGES (.arthero).
 * The body itself is styled via prose.css (.ow-prose--editorial).
 */

/* ── ARTICLE HERO ─────────────────────────────────────────────────────── */

.arthero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--cream);
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
}

.arthero__media {
	position: absolute;
	inset: 0;
	z-index: var(--layer-base);
}
.arthero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* dark gradient. headline + lede sit in the bottom half, so the lower
   stops are near-opaque to keep AA contrast against any photo. */
.arthero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(26, 24, 20, 0.55) 0%,
		rgba(26, 24, 20, 0.45) 25%,
		rgba(26, 24, 20, 0.80) 65%,
		rgba(26, 24, 20, 0.94) 100%
	);
}

.arthero__inner {
	position: relative;
	z-index: var(--layer-hero);
	width: 100%;
	padding-top: var(--section-pad-default);
	padding-bottom: var(--section-pad-tight);
}

.arthero__tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--wheat-bright);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	letter-spacing: var(--tracking-caption);
	text-transform: uppercase;
	font-weight: 500;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-edge);
	margin-bottom: var(--space-md);
	text-decoration: none;
	transition: background var(--motion-hover) var(--ease-out);
}
.arthero__tag:hover,
.arthero__tag:focus-visible {
	background: var(--cream);
}

.arthero h1 {
	font-family: var(--font-display);
	color: var(--cream);
	font-size: var(--text-article-title);
	font-weight: 700;
	line-height: var(--line-height-headline);
	letter-spacing: var(--tracking-display);
	max-width: 26ch;
	margin: 0 0 var(--space-md);
	font-variation-settings: var(--wdth-mid);
}

.arthero__lede {
	font-family: var(--font-body);
	font-size: var(--text-lede);
	line-height: var(--line-height-lede);
	color: rgba(244, 235, 211, 0.88); /* cream @ 88% */
	max-width: 56ch;
	margin: 0 0 var(--space-md);
}

.arthero__by {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--cream-78);
	margin: 0;
}
.arthero__by span + span::before {
	content: "·";
	margin: 0 var(--space-sm);
	color: rgba(244, 235, 211, 0.40);
}


/* ── ARTICLE BODY WRAPPER ─────────────────────────────────────────────── */

/* the .ow-prose inside this wrapper takes its own measure (760px via
   --container-narrow). this wrapper just provides the page-level vertical
   rhythm and side gutters. */
.article-body {
	padding: var(--section-pad-default) var(--container-gutter);
}


/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.arthero {
		min-height: 48vh;
	}
	.arthero h1 {
		max-width: none;
	}
	.arthero__by span + span::before {
		display: none;
	}
	.arthero__by span {
		display: block;
		margin-top: var(--space-2xs);
	}
}


/* === assets/css/prose.css === */
/*
 * ow-prose — long-form text styling, editorial farmhouse-almanac flavor.
 *
 * Wraps any block of editorial content rendered through the_content() or a
 * custom field richtext. Default flavor handles the post body; the
 * .ow-prose--editorial modifier adds the drop-cap + roomier rhythm used on
 * single-post pages.
 *
 *   <div class="ow-prose ow-prose--editorial">
 *     <p>Lede…</p>
 *     <h2>Section</h2>
 *     <p>Body…</p>
 *     <blockquote><p>Quoted line.</p></blockquote>
 *     <aside class="ow-prose__callout">
 *       <p>Heads-up text.</p>
 *     </aside>
 *   </div>
 *
 * Sourced from _html-demo-site/index.html § .article rules.
 */

.ow-prose {
	--prose-measure: var(--container-narrow);

	max-width: var(--prose-measure);
	margin-left: auto;
	margin-right: auto;
	font-family: var(--font-body);
	font-size: var(--text-lede);
	line-height: var(--line-height-longform);
	color: var(--ink-soft);
}


/* ── PARAGRAPHS ───────────────────────────────────────────────────────── */

.ow-prose p {
	margin: 0 0 var(--space-lg);
}


/* ── HEADINGS ─────────────────────────────────────────────────────────── */

.ow-prose h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-subhead);
	color: var(--moss);
	line-height: var(--line-height-subhead);
	letter-spacing: var(--tracking-headline);
	margin: var(--space-xl) 0 var(--space-sm);
	font-variation-settings: var(--wdth-default);
}
.ow-prose h2:first-child { margin-top: 0; }

.ow-prose h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-card-title);
	color: var(--moss);
	line-height: var(--line-height-subhead);
	margin: var(--space-lg) 0 var(--space-xs);
	font-variation-settings: var(--wdth-default);
}

.ow-prose h4 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-body);
	color: var(--moss);
	letter-spacing: var(--tracking-normal);
	margin: var(--space-lg) 0 var(--space-xs);
}


/* ── INLINE ───────────────────────────────────────────────────────────── */

.ow-prose strong {
	color: var(--moss);
	font-weight: 600;
}

.ow-prose em { font-style: italic; }

.ow-prose a {
	color: var(--moss);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--motion-hover) var(--ease-out);
}
.ow-prose a:hover,
.ow-prose a:focus-visible {
	color: var(--barn);
}


/* ── LISTS ────────────────────────────────────────────────────────────── */

.ow-prose ul,
.ow-prose ol {
	margin: 0 0 var(--space-lg) var(--space-lg);
	color: var(--ink-soft);
}
.ow-prose li {
	margin-bottom: var(--space-sm);
	font-size: var(--text-lede);
	line-height: var(--line-height-lede);
}


/* ── BLOCKQUOTE ───────────────────────────────────────────────────────── */

.ow-prose blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-md) var(--space-lg);
	background: var(--moss-tint);
	border-left: 4px solid var(--moss);
	border-radius: var(--radius-edge);
	font-style: italic;
	color: var(--ink-soft);
}
.ow-prose blockquote > *:first-child { margin-top: 0; }
.ow-prose blockquote > *:last-child  { margin-bottom: 0; }


/* ── CALLOUT (note, disclosure) ───────────────────────────────────────── */

/* moss-tint card with a moss left rule — matches the demo's .disclosure
   treatment used for affiliate / "tested where" notes. */
.ow-prose__callout {
	margin: var(--space-xl) 0;
	padding: var(--space-sm) var(--space-md);
	background: var(--moss-tint);
	border-left: 4px solid var(--moss);
	border-radius: var(--radius-edge);
	font-size: var(--text-small);
	color: var(--ink-soft);
	font-style: italic;
}
.ow-prose__callout > *:first-child { margin-top: 0; }
.ow-prose__callout > *:last-child  { margin-bottom: 0; }


/* ── BEST-PICK LABEL ──────────────────────────────────────────────────── */

/* Small barn-red caption that sits between an h2 product heading and the
   body paragraph, e.g. "Best for budget-minded homeowners…". Authors add
   class="ow-prose__best" to a paragraph; default <p> margin is overridden
   to tuck it close to the heading. */
.ow-prose__best {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--barn);
	letter-spacing: var(--tracking-normal);
	margin: calc(var(--space-xs) * -1) 0 var(--space-sm);
	font-variation-settings: var(--wdth-default);
}


/* ── HORIZONTAL RULE ──────────────────────────────────────────────────── */

.ow-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--space-2xl) 0;
}


/* ── IMAGES + FIGURES ─────────────────────────────────────────────────── */

.ow-prose img {
	display: block;
	max-width: 100%;
	height: auto;
}
.ow-prose > img,
.ow-prose figure {
	margin: var(--space-xl) 0;
}
.ow-prose figure img { margin: 0; }
.ow-prose figcaption {
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: var(--muted);
	line-height: var(--line-height-body);
	font-style: italic;
}


/* ── CODE (rare in this voice, kept minimal) ──────────────────────────── */

.ow-prose code {
	background: var(--moss-tint);
	color: var(--ink);
	padding: 0 var(--space-2xs);
	font-family: var(--font-mono);
	font-size: 0.9em;
	border-radius: var(--radius-edge);
}
.ow-prose pre {
	margin: var(--space-xl) 0;
	padding: var(--space-md);
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--radius-edge);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-small);
	line-height: var(--line-height-body);
}
.ow-prose pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}


/* ── TABLE (rare) ─────────────────────────────────────────────────────── */

.ow-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-xl) 0;
	font-size: var(--text-small);
}
.ow-prose th,
.ow-prose td {
	padding: var(--space-xs) var(--space-sm);
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.ow-prose thead th {
	background: var(--moss-tint);
	color: var(--moss);
	font-family: var(--font-mono);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-loose);
	font-size: var(--text-caption);
	border-bottom-color: var(--moss);
}


/* ─────────────────────────────────────────────────────────────────────── */
/*  EDITORIAL MODIFIER — single-post body                                  */
/* ─────────────────────────────────────────────────────────────────────── */

/* Adds the signature drop cap on the first paragraph. Other tweaks
   (bigger headings, looser rhythm) are baked into the defaults above
   since this is the only flavor we currently ship. */
.ow-prose--editorial > p:first-of-type:first-letter {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-drop-cap);
	line-height: var(--line-height-tight);
	float: left;
	margin: var(--space-2xs) var(--space-sm) 0 -2px;
	color: var(--barn);
	font-variation-settings: var(--wdth-tight);
}