/*!
Theme Name: internet_service
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: internet_service
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

internet_service is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Colors
	- Brand palette
	- Semantic tokens
	- Dark mode overrides
# Typography
	- Font families
	- Modular scale
	- Fluid type (clamp)
	- Weights, leading, tracking
	- Semantic type tokens
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
	- Site footer
# Front Page
	- Buttons
	- Shared section utilities
	- Hero
	- Story
	- Menu cards
	- Experience
	- Testimonials
	- Blog post cards
	- CTA banner
# Single Post
	- Post breadcrumbs
	- Post header
	- Post featured image
	- Post content & typography
	- Post tags & share
	- Author bio
	- Post navigation
	- Related posts
	- Comments
	- Comment form
	- Recipe card shortcode
	- Callout shortcode
	- Print styles
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/

/* Brand Palette
   ============================================================
   All raw color values live here. Reference these only via
   the semantic tokens below — never use raw palette variables
   directly in component styles.

   Contrast notes (against white #FFFFFF unless stated):
     --color-espresso       ~19.5:1  ✓ AAA normal text
     --color-coffee         ~8.2:1   ✓ AAA normal text
     --color-saddle         ~4.6:1   ✓ AA  normal text  (≥ 4.5:1)
     --color-caramel        ~2.9:1   ✓ AA  large text   (≥ 3:1, borderline — use ≥ 18px bold)
     --color-latte          ~2.0:1   ✗ decorative / non-text only
     --color-forest         ~3.0:1   ✓ AA  large text   (≥ 3:1)
     --color-sage           ~3.5:1   ✓ AA  large text
     --color-gold           ~2.5:1   ✗ decorative / non-text only
     --color-charcoal       ~18.3:1  ✓ AAA normal text
     --color-mid-brown-gray ~5.6:1   ✓ AA  normal text
   ============================================================ */

:root {
	/* --- Primary: Coffee Browns --- */
	/* Hex: #1C0A00  |  HSL: 22 100% 5.5% */
	--color-espresso:   #1c0a00;

	/* Hex: #6F3D2A  |  HSL: 16 45% 30% */
	--color-coffee:     #6f3d2a;

	/* Hex: #8B4513  |  HSL: 25 76% 31% */
	--color-saddle:     #8b4513;

	/* Hex: #C97D4B  |  HSL: 24 52% 55% */
	--color-caramel:    #c97d4b;

	/* Hex: #D4A574  |  HSL: 27 50% 64% */
	--color-latte:      #d4a574;

	/* --- Secondary: Forest Greens --- */
	/* Hex: #1A6B1A  |  HSL: 120 61% 26% — darkened for AA large-text pass */
	--color-forest:     #1a6b1a;

	/* Hex: #4A7A4A  |  HSL: 120 24% 38% */
	--color-sage:       #4a7a4a;

	/* Hex: #8FBC8F  |  HSL: 120 25% 65% */
	--color-mint:       #8fbc8f;

	/* --- Accent: Warm Golds --- */
	/* Hex: #DAA520  |  HSL: 43 74% 49% — decorative only, fails AA for text */
	--color-gold:       #daa520;

	/* Hex: #F0B429  |  HSL: 40 87% 56% */
	--color-honey:      #f0b429;

	/* --- Neutrals: Warm Whites & Grays --- */
	/* Hex: #FFFFFF  |  HSL: 0 0% 100% */
	--color-white:      #ffffff;

	/* Hex: #FFF8DC  |  HSL: 48 100% 93% — cornsilk */
	--color-cream:      #fff8dc;

	/* Hex: #F5F5DC  |  HSL: 60 56% 91% — beige */
	--color-beige:      #f5f5dc;

	/* Hex: #FAF6F0  |  HSL: 35 67% 97% — warm white */
	--color-warm-white: #faf6f0;

	/* Hex: #E8E0D8  |  HSL: 28 22% 88% — light warm gray */
	--color-gray-light: #e8e0d8;

	/* Hex: #9E8D82  |  HSL: 18 12% 56% — medium warm gray */
	--color-gray-mid:   #9e8d82;

	/* Hex: #5A4A42  |  HSL: 13 15% 31% — dark warm gray */
	--color-gray-dark:  #5a4a42;

	/* Hex: #2C1A0E  |  HSL: 22 60% 12% — near-black charcoal */
	--color-charcoal:   #2c1a0e;
}

/* Semantic Tokens
   ============================================================
   Use these throughout component styles. Changing a token here
   cascades everywhere — swap a theme without touching components.
   ============================================================ */

:root {
	/* Text */
	--text-primary:        var(--color-charcoal);     /* body copy */
	--text-secondary:      var(--color-gray-dark);    /* captions, metadata */
	--text-muted:          var(--color-gray-mid);     /* placeholder, disabled */
	--text-on-dark:        var(--color-warm-white);   /* text on dark backgrounds */
	--text-on-accent:      var(--color-espresso);     /* text on gold/caramel backgrounds */
	--text-heading:        var(--color-espresso);     /* h1–h6 */
	--text-link:           var(--color-saddle);       /* links — 4.6:1 on white ✓ AA */
	--text-link-visited:   var(--color-coffee);       /* visited links */

	/* Backgrounds */
	--bg-site:             var(--color-warm-white);   /* <body> */
	--bg-surface:          var(--color-white);        /* cards, modals */
	--bg-surface-alt:      var(--color-cream);        /* alternating rows, sidebars */
	--bg-surface-subtle:   var(--color-beige);        /* callouts, blockquotes */
	--bg-dark:             var(--color-espresso);     /* footer, hero overlays */
	--bg-dark-mid:         var(--color-coffee);       /* secondary dark sections */

	/* Borders */
	--border-default:      var(--color-gray-light);
	--border-subtle:       var(--color-beige);
	--border-strong:       var(--color-gray-mid);
	--border-accent:       var(--color-caramel);

	/* Interactive — Primary (Coffee) */
	--btn-primary-bg:           var(--color-saddle);
	--btn-primary-bg-hover:     var(--color-coffee);
	--btn-primary-bg-active:    var(--color-espresso);
	--btn-primary-text:         var(--color-warm-white);

	/* Interactive — Secondary (Green) */
	--btn-secondary-bg:         var(--color-forest);
	--btn-secondary-bg-hover:   #155215;   /* forest darkened ~8% */
	--btn-secondary-bg-active:  #0e370e;
	--btn-secondary-text:       var(--color-warm-white);

	/* Interactive — Ghost / Outline */
	--btn-ghost-border:         var(--color-saddle);
	--btn-ghost-text:           var(--color-saddle);
	--btn-ghost-bg-hover:       var(--color-cream);

	/* Accent / Highlight */
	--accent-primary:      var(--color-gold);         /* decorative highlights */
	--accent-warm:         var(--color-honey);        /* badges, tags */
	--accent-green:        var(--color-sage);         /* tags, status indicators */

	/* Focus ring — visible on keyboard navigation */
	--focus-ring:          var(--color-honey);        /* 3px offset outline */
}

/* Dark Mode Overrides
   ============================================================
   Flips surface and text tokens; raw palette stays the same.
   ============================================================ */

@media (prefers-color-scheme: dark) {
	:root {
		--text-primary:       var(--color-warm-white);
		--text-secondary:     var(--color-gray-light);
		--text-muted:         var(--color-gray-mid);
		--text-heading:       var(--color-latte);
		--text-link:          var(--color-caramel);   /* caramel on dark bg: ~4.8:1 ✓ AA */
		--text-link-visited:  var(--color-latte);

		--bg-site:            var(--color-espresso);
		--bg-surface:         #2a1200;                /* espresso lightened slightly */
		--bg-surface-alt:     #3a1a08;
		--bg-surface-subtle:  #4a2510;
		--bg-dark:            #0d0400;
		--bg-dark-mid:        var(--color-espresso);

		--border-default:     var(--color-coffee);
		--border-subtle:      #3a1a08;
		--border-strong:      var(--color-caramel);
		--border-accent:      var(--color-gold);

		--btn-primary-bg:          var(--color-caramel);
		--btn-primary-bg-hover:    var(--color-saddle);
		--btn-primary-bg-active:   var(--color-coffee);
		--btn-primary-text:        var(--color-espresso);

		--focus-ring:         var(--color-gold);
	}
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Font Families
   ============================================================
   Three-font system:

   1. Playfair Display (serif) — headings
      Elegant, high-contrast serif with ink-trap details. Feels
      artisanal and premium; has italic variants for pull-quotes.
      Weights loaded: 400, 600, 700 + italic 400.

   2. Lato (sans-serif) — body text
      Humanist sans with subtle warmth in its rounded terminals.
      Highly legible at small sizes for menus, hours, body copy.
      Weights loaded: 300, 400, 700 + italic 400.

   3. Amatic SC (display) — decorative accents only
      Hand-lettered uppercase feel; great for chalkboard specials,
      pull-quotes, section dividers. Never use below 20px.
      Weights loaded: 400, 700.
   ============================================================ */

:root {
	--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Amatic SC', 'Comic Sans MS', cursive;  /* decorative only */
	--font-mono:    'Courier New', Courier, monospace;
}

/* Modular Scale — Major Third (× 1.250)
   ============================================================
   Base: 1rem (16px browser default)
   Each step up multiplies by 1.25; each step down divides.

   Step   rem       px (approx)   Use
   ─────────────────────────────────────────────────────────
   -2     0.64rem   ≈ 10px        legal / fine print
   -1     0.8rem    ≈ 13px        labels, hours, metadata
    0     1rem       16px         body copy base
   +1     1.25rem   ≈ 20px        large body / menu items
   +2     1.563rem  ≈ 25px        h5–h6, subheadings
   +3     1.953rem  ≈ 31px        h4, section labels
   +4     2.441rem  ≈ 39px        h3
   +5     3.052rem  ≈ 49px        h2
   +6     3.815rem  ≈ 61px        h1 (max)
   ============================================================ */

:root {
	--font-size-2xs:   0.512rem;   /* ≈  8px — absolute minimum */
	--font-size-xs:    0.64rem;    /* ≈ 10px */
	--font-size-sm:    0.8rem;     /* ≈ 13px */
	--font-size-base:  1rem;       /*   16px */
	--font-size-md:    1.25rem;    /* ≈ 20px */
	--font-size-lg:    1.563rem;   /* ≈ 25px */
	--font-size-xl:    1.953rem;   /* ≈ 31px */
	--font-size-2xl:   2.441rem;   /* ≈ 39px */
	--font-size-3xl:   3.052rem;   /* ≈ 49px */
	--font-size-4xl:   3.815rem;   /* ≈ 61px */
}

/* Fluid Type — clamp(min, fluid, max)
   ============================================================
   Headings scale smoothly between 375px and 1280px viewports.
   Formula: preferred = font-size-at-min + (scale * 1vw)
   No media queries needed; the browser interpolates.
   ============================================================ */

:root {
	/* Headings */
	--font-size-h1: clamp(2.441rem, 3.5vw + 1.5rem, 3.815rem);
	--font-size-h2: clamp(1.953rem, 2.5vw + 1rem,   3.052rem);
	--font-size-h3: clamp(1.563rem, 2vw + 0.75rem,  2.441rem);
	--font-size-h4: clamp(1.25rem,  1.5vw + 0.5rem, 1.953rem);
	--font-size-h5: clamp(1rem,     1vw + 0.5rem,   1.563rem);
	--font-size-h6: clamp(0.8rem,   0.5vw + 0.5rem, 1.25rem);

	/* Body */
	--font-size-body:    clamp(1rem,    0.25vw + 0.9rem, 1.125rem);
	--font-size-lead:    clamp(1.25rem, 0.5vw + 1rem,    1.563rem);

	/* Interface */
	--font-size-menu:    clamp(0.9rem,  0.3vw + 0.8rem,  1.1rem);
	--font-size-caption: clamp(0.75rem, 0.2vw + 0.7rem,  0.875rem);
	--font-size-label:   0.75rem; /* fixed — never scale UI labels */
}

/* Weights, Leading, Tracking
   ============================================================ */

:root {
	/* Font weights */
	--font-weight-light:    300;
	--font-weight-regular:  400;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	/* Line heights */
	--leading-none:   1;      /* display text only */
	--leading-tight:  1.2;    /* large headings */
	--leading-snug:   1.35;   /* subheadings, menu items */
	--leading-normal: 1.5;    /* UI text */
	--leading-base:   1.65;   /* body copy — generous for readability */
	--leading-loose:  1.8;    /* long-form articles */

	/* Letter spacing */
	--tracking-tight:   -0.03em;   /* large display headings */
	--tracking-snug:    -0.01em;   /* h2–h3 */
	--tracking-normal:   0;        /* body text */
	--tracking-wide:     0.04em;   /* menu items, subheadings */
	--tracking-wider:    0.08em;   /* uppercase labels */
	--tracking-widest:   0.18em;   /* small-caps labels, price tags */
}

/* Semantic Type Tokens
   ============================================================
   Component styles reference these, never raw scale variables.
   ============================================================ */

:root {
	/* Page title / shop name hero */
	--type-display-family:  var(--font-display);
	--type-display-size:    clamp(3rem, 7vw, 6rem);
	--type-display-weight:  var(--font-weight-bold);
	--type-display-leading: var(--leading-none);
	--type-display-tracking: var(--tracking-normal);  /* Amatic SC already has wide spacing */

	/* h1 — section hero titles */
	--type-h1-family:  var(--font-heading);
	--type-h1-size:    var(--font-size-h1);
	--type-h1-weight:  var(--font-weight-bold);
	--type-h1-leading: var(--leading-tight);
	--type-h1-tracking: var(--tracking-tight);

	/* h2 — section headings */
	--type-h2-family:  var(--font-heading);
	--type-h2-size:    var(--font-size-h2);
	--type-h2-weight:  var(--font-weight-bold);
	--type-h2-leading: var(--leading-tight);
	--type-h2-tracking: var(--tracking-snug);

	/* h3 — card / widget headings */
	--type-h3-family:  var(--font-heading);
	--type-h3-size:    var(--font-size-h3);
	--type-h3-weight:  var(--font-weight-semibold);
	--type-h3-leading: var(--leading-snug);
	--type-h3-tracking: var(--tracking-snug);

	/* h4–h6 — small labels, sidebar titles */
	--type-h4-family:  var(--font-body);
	--type-h4-size:    var(--font-size-h4);
	--type-h4-weight:  var(--font-weight-bold);
	--type-h4-leading: var(--leading-snug);
	--type-h4-tracking: var(--tracking-wide);

	--type-h5-family:  var(--font-body);
	--type-h5-size:    var(--font-size-h5);
	--type-h5-weight:  var(--font-weight-bold);
	--type-h5-leading: var(--leading-snug);
	--type-h5-tracking: var(--tracking-wide);

	--type-h6-family:  var(--font-body);
	--type-h6-size:    var(--font-size-h6);
	--type-h6-weight:  var(--font-weight-bold);
	--type-h6-leading: var(--leading-snug);
	--type-h6-tracking: var(--tracking-wider);

	/* Body copy */
	--type-body-family:  var(--font-body);
	--type-body-size:    var(--font-size-body);
	--type-body-weight:  var(--font-weight-regular);
	--type-body-leading: var(--leading-base);
	--type-body-tracking: var(--tracking-normal);

	/* Lead paragraph (first paragraph, article intros) */
	--type-lead-family:  var(--font-body);
	--type-lead-size:    var(--font-size-lead);
	--type-lead-weight:  var(--font-weight-light);
	--type-lead-leading: var(--leading-loose);

	/* Menu items */
	--type-menu-family:  var(--font-body);
	--type-menu-size:    var(--font-size-menu);
	--type-menu-weight:  var(--font-weight-semibold);
	--type-menu-leading: var(--leading-normal);
	--type-menu-tracking: var(--tracking-wide);

	/* Prices */
	--type-price-family:  var(--font-heading);
	--type-price-size:    var(--font-size-md);
	--type-price-weight:  var(--font-weight-semibold);
	--type-price-leading: var(--leading-none);
	--type-price-tracking: var(--tracking-snug);

	/* Captions, hours, contact info */
	--type-caption-family:  var(--font-body);
	--type-caption-size:    var(--font-size-caption);
	--type-caption-weight:  var(--font-weight-regular);
	--type-caption-leading: var(--leading-snug);
	--type-caption-tracking: var(--tracking-normal);

	/* Uppercase labels (e.g. "OPEN DAILY", "ESPRESSO BAR") */
	--type-label-family:  var(--font-body);
	--type-label-size:    var(--font-size-label);
	--type-label-weight:  var(--font-weight-bold);
	--type-label-leading: var(--leading-normal);
	--type-label-tracking: var(--tracking-widest);
	--type-label-transform: uppercase;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

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

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Site Header
--------------------------------------------- */

/**
 * Sticky header: stays at the top of the viewport.
 * .is-scrolled is toggled by JS once the page scrolls past the header height.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: var(--bg-surface);
	border-bottom: 1px solid var(--border-subtle);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(28, 10, 0, 0.1);
	border-color: var(--border-default);
}

/* Flex row: branding left, nav right */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: 0.875rem;
	padding-inline: 1.5rem;
}

/* Branding
--------------------------------------------- */
.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* Custom logo uploaded via Customizer */
.custom-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.custom-logo {
	display: block;
	height: 48px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

/* Text-only fallback when no logo is set */
.site-branding__title-link {
	text-decoration: none;
}

.site-title {
	font-family: var(--type-h4-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wide);
	color: var(--text-heading);
	margin: 0;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-description {
	display: none; /* shown only on wider screens — see media query below */
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

/* ---- Hamburger button (mobile only) ---- */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	/* Push it to the far right of the nav */
	order: 2;
}

.menu-toggle:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 4px;
	border-radius: 2px;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--text-primary);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
	transform-origin: center;
}

/* Animate bars into an × when menu is open */
.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* ---- Nav menu: mobile (hidden until toggled) ---- */
#primary-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation.toggled #primary-menu {
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border-default);
	border-bottom: 3px solid var(--accent-primary);
	box-shadow: 0 8px 24px rgba(28, 10, 0, 0.12);
	z-index: 300;
	padding-block: 0.5rem;
}

/* Mobile: full-width stacked menu items */
.main-navigation.toggled #primary-menu > li > a {
	display: block;
	padding: 0.75rem 1.5rem;
	font-family: var(--type-menu-family);
	font-size: var(--font-size-menu);
	font-weight: var(--type-menu-weight);
	letter-spacing: var(--type-menu-tracking);
	color: var(--text-primary);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.main-navigation.toggled #primary-menu > li > a:hover,
.main-navigation.toggled #primary-menu > li > a:focus-visible {
	color: var(--text-link);
	background-color: var(--bg-surface-alt);
	border-left-color: var(--accent-primary);
}

/* Mobile submenu */
.main-navigation.toggled .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--bg-surface-alt);
}

.main-navigation.toggled .menu-item-has-children.focus > .sub-menu,
.main-navigation.toggled .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.main-navigation.toggled .sub-menu a {
	display: block;
	padding: 0.625rem 1.5rem 0.625rem 2.5rem;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.main-navigation.toggled .sub-menu a:hover {
	color: var(--text-link);
}

/* ---- Nav menu: desktop ---- */
@media screen and (min-width: 48em) {

	.menu-toggle {
		display: none;
	}

	.site-description {
		display: block;
	}

	#primary-menu {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	/* Top-level items */
	#primary-menu > li {
		position: relative;
	}

	#primary-menu > li > a {
		display: block;
		padding: 0.5rem 0.875rem;
		font-family: var(--type-menu-family);
		font-size: var(--font-size-menu);
		font-weight: var(--type-menu-weight);
		letter-spacing: var(--type-menu-tracking);
		color: var(--text-primary);
		text-decoration: none;
		border-radius: 4px;
		position: relative;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	/* Animated underline on hover */
	#primary-menu > li > a::after {
		content: '';
		position: absolute;
		bottom: 4px;
		left: 0.875rem;
		right: 0.875rem;
		height: 2px;
		background-color: var(--accent-primary);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.2s ease;
	}

	#primary-menu > li > a:hover,
	#primary-menu > li > a:focus-visible {
		color: var(--text-link);
		background-color: var(--bg-surface-alt);
		outline: none;
	}

	#primary-menu > li > a:hover::after,
	#primary-menu > li:focus-within > a::after {
		transform: scaleX(1);
	}

	/* Current page highlight */
	#primary-menu > .current-menu-item > a,
	#primary-menu > .current-menu-ancestor > a,
	#primary-menu > .current_page_item > a {
		color: var(--text-link);
		background-color: var(--bg-surface-alt);
	}

	#primary-menu > .current-menu-item > a::after,
	#primary-menu > .current-menu-ancestor > a::after,
	#primary-menu > .current_page_item > a::after {
		transform: scaleX(1);
	}

	/* Focus ring via outline (not ::after) for keyboard users */
	#primary-menu > li > a:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* Dropdown submenus */
	.sub-menu {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		min-width: 200px;
		list-style: none;
		margin: 0;
		padding: 0.375rem 0;
		background-color: var(--bg-surface);
		border: 1px solid var(--border-default);
		border-top: 3px solid var(--accent-primary);
		border-radius: 0 0 6px 6px;
		box-shadow: 0 8px 20px rgba(28, 10, 0, 0.1);
		z-index: 300;
	}

	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children.focus > .sub-menu {
		display: block;
	}

	.sub-menu a {
		display: block;
		padding: 0.5rem 1rem;
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-regular);
		color: var(--text-primary);
		text-decoration: none;
		transition: color 0.15s ease, background-color 0.15s ease;
		white-space: nowrap;
	}

	.sub-menu a:hover,
	.sub-menu a:focus-visible {
		color: var(--text-link);
		background-color: var(--bg-surface-alt);
		outline: none;
	}

	/* Third-level submenus open to the right */
	.sub-menu .sub-menu {
		top: -0.375rem;
		left: 100%;
		border-top-width: 1px;
		border-left: 3px solid var(--accent-primary);
		border-radius: 0 6px 6px 6px;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Site Footer
--------------------------------------------- */

/**
 * Dark espresso background + gold-to-caramel gradient top accent strip.
 * border-image paints the gradient over the transparent border-top.
 */
.site-footer {
	background-color: var(--bg-dark);
	color: var(--text-on-dark);
	border-top: 4px solid transparent;
	border-image: linear-gradient(
		to right,
		var(--color-gold),
		var(--color-caramel),
		var(--color-honey)
	) 1;
}

/* ---- Widget row ---- */

/**
 * The flat 1px border-bottom is replaced by a centred shimmer line
 * generated by ::after — more brand-consistent than a plain rule.
 */
.footer-widgets {
	border-bottom: none;
	padding-bottom: 0;
	position: relative;
}

.footer-widgets::after {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(
		to right,
		transparent,
		rgba(218, 165, 32, 0.35),
		rgba(201, 125, 75, 0.55),
		rgba(218, 165, 32, 0.35),
		transparent
	);
}

/* Default: < 36em — 1 column, tighter padding */
.footer-widgets__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: 2.5rem;
	padding-inline: 1.25rem;
}

/* 36em–47.999em — still 1 column, more breathing room */
@media screen and (min-width: 36em) {
	.footer-widgets__inner {
		padding-inline: 2rem;
		padding-block: 3rem;
		gap: 2.5rem;
	}
}

/* 48em–71.999em — 2 columns */
@media screen and (min-width: 48em) {
	.footer-widgets__inner {
		grid-template-columns: repeat(2, 1fr);
		padding-inline: 2rem;
	}
}

/* 72em+ — 3 columns */
@media screen and (min-width: 72em) {
	.footer-widgets__inner {
		grid-template-columns: repeat(3, 1fr);
		padding-inline: 1.5rem;
	}
}

/* Left border accent on each widget column */
.footer-widget-area {
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--color-caramel);
}

/* Widget headings — Amatic SC for coffee-shop character */
.site-footer .widget-title {
	font-family: var(--font-display);
	font-size: var(--font-size-md);          /* 1.25rem — min safe for Amatic SC */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-normal);  /* Amatic SC has built-in wide spacing */
	line-height: var(--leading-snug);
	color: var(--color-gold);
	margin-block: 0 0.875rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Widget body text */
.site-footer .widget {
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: rgba(250, 246, 240, 0.8);
}

.site-footer .widget a {
	color: rgba(250, 246, 240, 0.8);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.site-footer .widget a:hover {
	color: var(--color-honey);
}

/* Recent posts list inside footer */
.site-footer .widget_recent_entries ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget_recent_entries li {
	padding-block: 0.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer .widget_recent_entries li:last-child {
	border-bottom: none;
}

/* ---- Built-in contact info fallback ---- */
.footer-contact-info {
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: rgba(250, 246, 240, 0.8);
}

.footer-contact-info p {
	margin-block: 0 0.625rem;
}

.footer-contact-info a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-contact-info a:hover {
	color: var(--color-honey);
}

.footer-contact-info__hours {
	margin: 0.75rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.875rem;
}

.footer-contact-info__hours dt {
	font-weight: var(--font-weight-bold);
	color: var(--text-on-dark);
}

.footer-contact-info__hours dd {
	margin: 0;
}

/* ---- Bottom bar ---- */

/* Divider is handled by .footer-widgets::after above */
.footer-bottom {
	border-top: none;
}

/**
 * Mobile-first: column layout, centred.
 * Tablet (48em): row with copyright on its own second line.
 * Desktop (64em): single row, space-between.
 */
.footer-bottom__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: 1.5rem;
	padding-inline: 1.25rem;
}

/* Tablet: social + nav share a row; copyright wraps beneath */
@media screen and (min-width: 48em) {
	.footer-bottom__inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.75rem 2rem;
		padding-inline: 2rem;
	}

	.footer-bottom__inner .social-links {
		order: 1;
	}

	.footer-bottom__inner #footer-menu {
		order: 2;
	}

	.footer-bottom__inner .footer-copyright {
		order: 3;
		flex-basis: 100%;
		text-align: center;
	}
}

/* Desktop: single row, social left — nav centre — copyright right */
@media screen and (min-width: 64em) {
	.footer-bottom__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-block: 1.25rem;
		padding-inline: 1.5rem;
	}

	.footer-bottom__inner .footer-copyright {
		flex-basis: auto;
		text-align: left;
	}
}

/* ---- Social links ---- */
.social-links {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 42px rounded-rect with a subtle border */
.social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--text-on-dark);
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease;
}

/* Override inline SVG dimensions set in footer.php */
.social-links__link svg {
	width: 22px;
	height: 22px;
}

.social-links__link:hover,
.social-links__link:focus-visible {
	background-color: var(--color-caramel);
	color: var(--color-espresso);
	border-color: var(--color-honey);
	transform: translateY(-2px);
}

.social-links__link:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

/* ---- Footer navigation ---- */
#footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer-menu a {
	display: block;
	padding: 0.25rem 0.5rem;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	color: rgba(250, 246, 240, 0.65);
	text-decoration: none;
	border-radius: 3px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

#footer-menu a:hover,
#footer-menu a:focus-visible {
	color: var(--color-honey);
	background-color: rgba(255, 255, 255, 0.06);
	outline: none;
}

#footer-menu a:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---- Copyright line ---- */
.footer-copyright {
	font-size: var(--font-size-xs);
	color: rgba(250, 246, 240, 0.45);
	margin: 0;
	letter-spacing: var(--tracking-wide);
}

.footer-copyright a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.footer-copyright a:hover {
	color: var(--color-honey);
}

/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

/* Buttons
--------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--font-body);
	font-size: var(--font-size-menu);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-none);
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

.btn:active {
	transform: translateY(1px);
}

/* Primary: warm brown fill */
.btn--primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-color: var(--btn-primary-bg);
}

.btn--primary:hover {
	background-color: var(--btn-primary-bg-hover);
	border-color: var(--btn-primary-bg-hover);
	color: var(--btn-primary-text);
}

/* Secondary: outline on light backgrounds */
.btn--secondary {
	background-color: transparent;
	color: var(--text-link);
	border-color: var(--text-link);
}

.btn--secondary:hover {
	background-color: var(--bg-surface-alt);
	color: var(--btn-primary-bg-hover);
	border-color: var(--btn-primary-bg-hover);
}

/* Ghost: transparent with light border — for dark backgrounds */
.btn--ghost {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-warm-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: var(--color-warm-white);
	color: var(--color-warm-white);
}

/* Shared section utilities
--------------------------------------------- */

.fp-section {
	padding-block: 4rem;
}

@media screen and (min-width: 48em) {
	.fp-section {
		padding-block: 5.5rem;
	}
}

.fp-section--alt {
	background-color: var(--bg-surface-alt);
}

.fp-section--dark {
	background-color: var(--bg-dark);
	color: var(--text-on-dark);
}

.fp-section__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media screen and (min-width: 36em) {
	.fp-section__inner {
		padding-inline: 2rem;
	}
}

@media screen and (min-width: 72em) {
	.fp-section__inner {
		padding-inline: 1.5rem;
	}
}

.fp-section__header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-block-end: 3rem;
}

.fp-section__label {
	display: block;
	font-family: var(--type-label-family);
	font-size: var(--type-label-size);
	font-weight: var(--type-label-weight);
	letter-spacing: var(--type-label-tracking);
	text-transform: var(--type-label-transform);
	color: var(--accent-primary);
	margin-block-end: 0.5rem;
}

.fp-section__heading {
	font-family: var(--type-h2-family);
	font-size: var(--font-size-h2);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-leading);
	letter-spacing: var(--type-h2-tracking);
	color: var(--text-heading);
	margin-block: 0 0.75rem;
}

.fp-section--dark .fp-section__heading {
	color: var(--text-on-dark);
}

.fp-section__subtext {
	font-size: var(--font-size-md);
	color: var(--text-secondary);
	margin: 0;
	line-height: var(--leading-base);
}

.fp-section__footer {
	text-align: center;
	margin-block-start: 2.5rem;
}

/* Hero
--------------------------------------------- */

.fp-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fp-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(28, 10, 0, calc(var(--overlay-opacity, 55) / 100));
}

.fp-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 820px;
	padding-inline: 1.5rem;
	color: var(--color-warm-white);
}

.fp-hero__eyebrow {
	font-family: var(--font-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-honey);
	margin-block: 0 0.5rem;
	letter-spacing: var(--tracking-normal);
}

.fp-hero__headline {
	font-family: var(--font-display);
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
	color: var(--color-warm-white);
	margin-block: 0 1rem;
}

.fp-hero__subtext {
	font-size: var(--font-size-md);
	line-height: var(--leading-normal);
	opacity: 0.88;
	max-width: 520px;
	margin-inline: auto;
	margin-block: 0 2rem;
}

.fp-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Bouncing scroll hint arrow at the bottom */
.fp-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-warm-white);
	opacity: 0.55;
	text-decoration: none;
	transition: opacity 0.2s ease;
	animation: fp-hero-bounce 2.2s ease-in-out infinite;
}

.fp-hero__scroll:hover {
	opacity: 0.9;
}

@keyframes fp-hero-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(8px); }
}

/* Story
--------------------------------------------- */

.fp-story__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media screen and (min-width: 64em) {
	.fp-story__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.fp-story__media {
	border-radius: 8px;
	overflow: hidden;
}

.fp-story__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.fp-story__media:hover .fp-story__image {
	transform: scale(1.03);
}

.fp-story__content .fp-section__label {
	text-align: left;
}

.fp-story__content .fp-section__heading {
	text-align: left;
}

.fp-story__text {
	font-size: var(--font-size-body);
	line-height: var(--leading-loose);
	color: var(--text-primary);
	margin-block-end: 1.5rem;
}

.fp-story__text p {
	margin-block: 0 1em;
}

/* Menu cards
--------------------------------------------- */

.fp-menu__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media screen and (min-width: 36em) {
	.fp-menu__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 72em) {
	.fp-menu__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fp-menu-card {
	background-color: var(--bg-surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(28, 10, 0, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-menu-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(28, 10, 0, 0.13);
}

.fp-menu-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.fp-menu-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.fp-menu-card:hover .fp-menu-card__image {
	transform: scale(1.06);
}

.fp-menu-card__body {
	padding: 1.25rem;
}

.fp-menu-card__name {
	font-family: var(--type-h4-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--text-heading);
	margin-block: 0 0.375rem;
	line-height: var(--leading-snug);
}

.fp-menu-card__desc {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: var(--leading-snug);
	margin-block: 0 0.75rem;
}

.fp-menu-card__price {
	font-family: var(--type-price-family);
	font-size: var(--type-price-size);
	font-weight: var(--type-price-weight);
	color: var(--color-saddle);
	margin: 0;
}

/* Experience
--------------------------------------------- */

.fp-experience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media screen and (min-width: 48em) {
	.fp-experience__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

.fp-experience-card {
	text-align: center;
	padding: 2rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.03);
}

.fp-experience-card__icon {
	color: var(--color-gold);
	margin-block-end: 0.875rem;
}

.fp-experience-card__title {
	font-family: var(--font-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-gold);
	margin-block: 0 0.875rem;
	letter-spacing: var(--tracking-normal);
	line-height: var(--leading-snug);
}

.fp-experience-card__text {
	font-size: var(--font-size-sm);
	color: rgba(250, 246, 240, 0.8);
	line-height: var(--leading-base);
	margin-block: 0 0.5rem;
	font-style: normal; /* <address> reset */
}

.fp-experience-card__link {
	display: inline-block;
	margin-block-start: 0.75rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-honey);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.fp-experience-card__link:hover {
	opacity: 0.8;
}

.fp-experience-card__hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 1rem;
	font-size: var(--font-size-sm);
	color: rgba(250, 246, 240, 0.8);
	margin: 0;
	text-align: left;
}

.fp-experience-card__hours dt {
	font-weight: var(--font-weight-bold);
	color: var(--text-on-dark);
}

.fp-experience-card__hours dd {
	margin: 0;
}

/* Testimonials
--------------------------------------------- */

.fp-testimonials {
	background-color: var(--bg-surface-subtle);
}

.fp-testimonials__slider {
	position: relative;
}

.fp-testimonials__track {
	position: relative;
	min-height: 220px;
}

.fp-testimonial-card {
	display: none;
	max-width: 740px;
	margin-inline: auto;
	text-align: center;
	padding: 2.5rem 2rem;
	background-color: var(--bg-surface);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(28, 10, 0, 0.08);
}

.fp-testimonial-card.is-active {
	display: block;
	animation: fp-fade-in 0.45s ease both;
}

@keyframes fp-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fp-testimonial-card__stars {
	margin-block-end: 1rem;
	font-size: 1.25rem;
	letter-spacing: 0.1em;
}

.fp-star {
	color: var(--color-gray-light);
}

.fp-star--filled {
	color: var(--color-gold);
}

.fp-testimonial-card__quote {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-style: italic;
	line-height: var(--leading-snug);
	color: var(--text-primary);
	margin-block: 0 1.5rem;
	padding: 0;
}

/* Opening quotation mark as a decorative element */
.fp-testimonial-card__quote p::before {
	content: '\201C';
	font-size: 3.5rem;
	line-height: 0;
	vertical-align: -1.4rem;
	color: var(--color-caramel);
	opacity: 0.45;
	margin-inline-end: 0.125rem;
}

.fp-testimonial-card__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
}

.fp-testimonial-card__avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--color-caramel);
}

.fp-testimonial-card__author {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	font-style: normal;
	color: var(--text-primary);
}

.fp-testimonial-card__role {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin: 0;
}

.fp-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.fp-testimonials__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-surface);
	border: 1px solid var(--border-default);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fp-testimonials__btn:hover {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-color: var(--btn-primary-bg);
}

.fp-testimonials__btn:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

.fp-testimonials__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fp-testimonials__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background-color: var(--border-strong);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	padding: 0;
}

.fp-testimonials__dot.is-active {
	background-color: var(--accent-primary);
	transform: scale(1.3);
}

.fp-testimonials__dot:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Blog post cards
--------------------------------------------- */

.fp-posts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media screen and (min-width: 48em) {
	.fp-posts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 72em) {
	.fp-posts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fp-post-card {
	display: flex;
	flex-direction: column;
	background-color: var(--bg-surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(28, 10, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(28, 10, 0, 0.11);
}

.fp-post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.fp-post-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.fp-post-card:hover .fp-post-card__image {
	transform: scale(1.05);
}

.fp-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}

.fp-post-card__date {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--accent-primary);
	margin-block: 0 0.375rem;
}

.fp-post-card__title {
	font-family: var(--type-h4-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-snug);
	color: var(--text-heading);
	margin-block: 0 0.625rem;
}

.fp-post-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.fp-post-card__title a:hover {
	color: var(--text-link);
}

.fp-post-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: var(--leading-base);
	margin-block: 0 1rem;
	flex: 1;
}

.fp-post-card__link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-link);
	text-decoration: none;
	transition: opacity 0.15s ease;
	align-self: flex-start;
}

.fp-post-card__link:hover {
	opacity: 0.75;
}

/* CTA banner
--------------------------------------------- */

.fp-cta {
	position: relative;
	padding-block: 5rem;
	background-color: var(--bg-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

.fp-cta__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(28, 10, 0, 0.65);
}

.fp-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	color: var(--text-on-dark);
}

.fp-cta__heading {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
	color: var(--color-warm-white);
	margin-block: 0 1rem;
}

.fp-cta__subtext {
	font-size: var(--font-size-md);
	line-height: var(--leading-normal);
	opacity: 0.85;
	margin-block: 0 2rem;
}

.fp-cta__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/*--------------------------------------------------------------
# Single Post
--------------------------------------------------------------*/

/* Post Breadcrumbs
--------------------------------------------- */
.post-breadcrumbs {
	background-color: var(--bg-subtle, #faf8f5);
	border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.post-breadcrumbs__inner {
	max-width: var(--content-width, 1200px);
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 0.75rem;
}

.post-breadcrumbs nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: center;
	font-size: var(--font-size-xs, 0.8125rem);
	color: var(--text-muted, #6b5c4c);
}

.post-breadcrumbs a {
	color: var(--color-saddle);
	text-decoration: none;
}

.post-breadcrumbs a:hover {
	color: var(--color-gold);
	text-decoration: underline;
}

.post-breadcrumbs .breadcrumb-sep {
	color: var(--text-muted, #6b5c4c);
	opacity: 0.5;
}

.post-breadcrumbs .breadcrumb-current {
	color: var(--text-muted, #6b5c4c);
}

/* Post Header
--------------------------------------------- */
.post-header {
	padding-block: 3rem 2.5rem;
	background-color: var(--bg-subtle, #faf8f5);
}

.post-header__inner {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	text-align: center;
}

.post-header__categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.post-category-badge {
	display: inline-block;
	background-color: var(--color-gold);
	color: var(--color-espresso);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
	transition: background-color 0.2s, color 0.2s;
}

.post-category-badge:hover {
	background-color: var(--color-caramel);
	color: #fff;
}

.post-title {
	font-family: var(--font-heading);
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: var(--leading-snug, 1.25);
	color: var(--color-espresso);
	margin-block: 0 1.5rem;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	font-size: var(--font-size-sm, 0.9375rem);
	color: var(--text-muted, #6b5c4c);
}

.post-meta__author,
.post-meta__date,
.post-meta__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.post-meta__author a {
	color: var(--color-saddle);
	text-decoration: none;
}

.post-meta__author a:hover {
	color: var(--color-gold);
	text-decoration: underline;
}

@media (min-width: 48em) {
	.post-header {
		padding-block: 4rem 3rem;
	}

	.post-header__inner {
		padding-inline: 2rem;
	}
}

/* Post Featured Image
--------------------------------------------- */
.post-featured-image {
	position: relative;
	max-height: 540px;
	overflow: hidden;
}

.post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.post-featured-image__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(28,10,0,0.75) 0%, transparent 100%);
	color: rgba(255,255,255,0.85);
	font-size: var(--font-size-xs, 0.8125rem);
	padding: 1.5rem 1.25rem 0.75rem;
	text-align: center;
}

@media (min-width: 48em) {
	.post-featured-image {
		max-height: 600px;
	}
}

/* Post Content & Typography
--------------------------------------------- */
.post-content-wrap {
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 2.5rem 0;
}

.post-content {
	font-size: var(--font-size-base, 1.0625rem);
	line-height: var(--leading-relaxed, 1.75);
	color: var(--text-body, #3a2a1e);
}

.post-content h2,
.post-content h3,
.post-content h4 {
	font-family: var(--font-heading);
	color: var(--color-espresso);
	margin-block: 2em 0.6em;
	line-height: var(--leading-snug, 1.25);
}

.post-content h2 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.post-content h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.post-content h4 { font-size: 1.0625rem; }

.post-content p {
	margin-block: 0 1.25em;
}

.post-content a {
	color: var(--color-saddle);
	text-decoration: underline;
	text-decoration-color: var(--color-honey);
	text-underline-offset: 3px;
	transition: color 0.2s;
}

.post-content a:hover {
	color: var(--color-gold);
}

.post-content blockquote {
	margin-inline: 0;
	margin-block: 2rem;
	padding: 1.5rem 1.5rem 1.5rem 2rem;
	background-color: var(--bg-subtle, #faf8f5);
	border-inline-start: 4px solid var(--color-gold);
	border-radius: 0 4px 4px 0;
	font-family: var(--font-heading);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	font-style: italic;
	color: var(--color-espresso);
}

.post-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: var(--font-size-sm, 0.9375rem);
	font-style: normal;
	color: var(--text-muted, #6b5c4c);
}

.post-content ul,
.post-content ol {
	margin-block: 0 1.25em;
	padding-inline-start: 1.75em;
}

.post-content li {
	margin-block-end: 0.4em;
}

.post-content ul li::marker {
	color: var(--color-gold);
}

.post-content ol li::marker {
	color: var(--color-caramel);
	font-weight: var(--font-weight-bold, 700);
}

.post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.post-content figure {
	margin-inline: 0;
	margin-block: 2rem;
}

.post-content figcaption {
	font-size: var(--font-size-xs, 0.8125rem);
	color: var(--text-muted, #6b5c4c);
	text-align: center;
	margin-top: 0.5rem;
}

.post-content hr {
	border: none;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--color-gold), transparent);
	margin-block: 2.5rem;
}

.post-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.5rem;
	font-size: var(--font-size-sm, 0.9375rem);
}

.post-content th {
	background-color: var(--color-espresso);
	color: var(--color-warm-white, #fdf6e3);
	font-family: var(--font-heading);
	text-align: start;
	padding: 0.625rem 0.875rem;
}

.post-content td {
	border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.08));
	padding: 0.625rem 0.875rem;
}

.post-content tr:hover td {
	background-color: rgba(218,165,32,0.06);
}

.page-links {
	clear: both;
	margin-block: 2rem;
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
}

.page-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	margin-inline: 0.125rem;
	border: 1px solid var(--border-light, rgba(0,0,0,0.12));
	border-radius: 4px;
	text-decoration: none;
	color: var(--color-saddle);
	transition: background-color 0.2s, color 0.2s;
}

.page-links__item:hover,
.page-links .page-links__item[aria-current] {
	background-color: var(--color-gold);
	color: var(--color-espresso);
	border-color: var(--color-gold);
}

@media (min-width: 48em) {
	.post-content-wrap {
		padding-inline: 2rem;
		padding-block: 3rem 0;
	}
}

/* Post Tags & Share
--------------------------------------------- */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: 2.5rem 0;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.post-tags__label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--text-muted, #6b5c4c);
}

.post-tag {
	display: inline-block;
	background-color: transparent;
	color: var(--color-saddle);
	font-size: var(--font-size-xs, 0.8125rem);
	font-weight: var(--font-weight-medium, 500);
	text-decoration: none;
	padding: 0.2rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 2rem;
	transition: background-color 0.2s, color 0.2s;
}

.post-tag:hover {
	background-color: var(--color-saddle);
	color: #fff;
}

.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-block: 1.5rem 0;
}

.post-share__label {
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--text-muted, #6b5c4c);
}

.post-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.post-share__link:hover {
	transform: translateY(-2px);
}

.post-share__link--facebook {
	background-color: #1877f2;
	color: #fff;
}

.post-share__link--facebook:hover {
	background-color: #0d65d9;
	color: #fff;
}

.post-share__link--twitter {
	background-color: #000;
	color: #fff;
}

.post-share__link--twitter:hover {
	background-color: #222;
	color: #fff;
}

.post-share__link--pinterest {
	background-color: #e60023;
	color: #fff;
}

.post-share__link--pinterest:hover {
	background-color: #cc001f;
	color: #fff;
}

/* Author Bio
--------------------------------------------- */
.post-author-bio {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	max-width: 780px;
	margin-inline: auto;
	margin-block: 3rem;
	padding: 1.75rem;
	background-color: var(--bg-subtle, #faf8f5);
	border: 1px solid var(--border-light, rgba(0,0,0,0.08));
	border-radius: 8px;
	border-inline-start: 4px solid var(--color-caramel);
}

.post-author-bio__img {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.post-author-bio__name {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	margin-block: 0 0.5rem;
}

.post-author-bio__name a {
	color: var(--color-espresso);
	text-decoration: none;
}

.post-author-bio__name a:hover {
	color: var(--color-gold);
}

.post-author-bio__desc {
	font-size: var(--font-size-sm, 0.9375rem);
	color: var(--text-body, #3a2a1e);
	margin-block: 0 0.75rem;
	line-height: var(--leading-relaxed, 1.75);
}

.post-author-bio__link {
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-saddle);
	text-decoration: none;
}

.post-author-bio__link:hover {
	color: var(--color-gold);
	text-decoration: underline;
}

@media (max-width: 35.999em) {
	.post-author-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-inline: 1.25rem;
	}
}

/* Post Navigation
--------------------------------------------- */
.post-navigation {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 2.5rem;
}

.post-navigation__inner {
	display: grid;
	gap: 1rem;
}

.post-navigation__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background-color: var(--bg-subtle, #faf8f5);
	border: 1px solid var(--border-light, rgba(0,0,0,0.08));
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.post-navigation__link:hover {
	border-color: var(--color-gold);
	box-shadow: 0 2px 12px rgba(218,165,32,0.15);
	transform: translateY(-1px);
	color: inherit;
}

.post-navigation__link--next {
	flex-direction: row-reverse;
	text-align: end;
}

.post-navigation__direction {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--font-size-xs, 0.8125rem);
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-caramel);
	white-space: nowrap;
}

.post-navigation__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	color: var(--color-espresso);
	line-height: var(--leading-snug, 1.25);
	flex: 1;
}

.post-navigation__thumb {
	flex-shrink: 0;
}

.post-navigation__thumb img {
	display: block;
	width: 72px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
}

@media (min-width: 48em) {
	.post-navigation__inner {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation {
		padding-inline: 2rem;
	}
}

/* Related Posts
--------------------------------------------- */
.related-posts {
	background-color: var(--bg-subtle, #faf8f5);
	padding-block: 3rem;
	border-block: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.related-posts__heading {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-espresso);
	text-align: center;
	margin-block: 0 2rem;
}

.related-posts__grid {
	display: grid;
	gap: 1.5rem;
	max-width: var(--content-width, 1200px);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.related-post-card {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(28,10,0,0.07);
	transition: box-shadow 0.2s, transform 0.2s;
}

.related-post-card:hover {
	box-shadow: 0 6px 20px rgba(28,10,0,0.12);
	transform: translateY(-3px);
}

.related-post-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.related-post-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.related-post-card:hover .related-post-card__thumb img {
	transform: scale(1.05);
}

.related-post-card__body {
	padding: 1.25rem;
}

.related-post-card__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	line-height: var(--leading-snug, 1.25);
	margin-block: 0 0.5rem;
}

.related-post-card__title a {
	color: var(--color-espresso);
	text-decoration: none;
}

.related-post-card__title a:hover {
	color: var(--color-gold);
}

.related-post-card__date {
	font-size: var(--font-size-xs, 0.8125rem);
	color: var(--text-muted, #6b5c4c);
	margin-block: 0;
}

@media (min-width: 48em) {
	.related-posts__grid {
		grid-template-columns: repeat(2, 1fr);
		padding-inline: 2rem;
	}
}

@media (min-width: 72em) {
	.related-posts__grid {
		grid-template-columns: repeat(3, 1fr);
		padding-inline: 1.5rem;
	}
}

/* Comments Section
--------------------------------------------- */
.comments-section {
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 3rem;
}

.comments-section__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-espresso);
	margin-block: 0 2rem;
	padding-block-end: 1rem;
	border-block-end: 2px solid var(--color-gold);
}

/* Comment navigation */
.comments-navigation,
.comment-navigation {
	margin-block: 1.5rem;
}

.comments-navigation .nav-links,
.comment-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.comments-navigation a,
.comment-navigation a {
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-saddle);
	text-decoration: none;
}

.comments-navigation a:hover,
.comment-navigation a:hover {
	color: var(--color-gold);
}

/* Comment list */
.comment-list {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0 2.5rem;
}

.comment-list .children {
	list-style: none;
	padding-inline-start: 1.25rem;
	border-inline-start: 2px solid var(--border-light, rgba(0,0,0,0.08));
	margin-block-start: 1rem;
}

/* Individual comment */
.comment__article {
	display: flex;
	gap: 1rem;
	padding-block: 1.5rem;
	border-block-end: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.comment__avatar img {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.comment__body-wrap {
	flex: 1;
	min-width: 0;
}

.comment__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin-block-end: 0.75rem;
}

.comment__author-name {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-espresso);
	margin-block: 0;
}

.comment__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.comment__date {
	font-size: var(--font-size-xs, 0.8125rem);
	color: var(--text-muted, #6b5c4c);
	text-decoration: none;
}

.comment__date:hover {
	color: var(--color-gold);
}

.comment__badge {
	display: inline-block;
	background-color: var(--color-espresso);
	color: var(--color-warm-white, #fdf6e3);
	font-size: 0.625rem;
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.5rem;
	border-radius: 2rem;
}

.comment__body {
	font-size: var(--font-size-sm, 0.9375rem);
	line-height: var(--leading-relaxed, 1.75);
	color: var(--text-body, #3a2a1e);
	margin-block: 0 0.75rem;
}

.comment__body p {
	margin-block: 0 0.75em;
}

.comment__body p:last-child {
	margin-block-end: 0;
}

.comment__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.comment__reply-link a,
.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--font-size-xs, 0.8125rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-caramel);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color 0.2s;
}

.comment__reply-link a:hover,
.comment-reply-link:hover {
	color: var(--color-gold);
}

/* Awaiting moderation notice */
.comment-awaiting-moderation {
	display: inline-block;
	margin-block-start: 0.5rem;
	font-size: var(--font-size-xs, 0.8125rem);
	color: var(--text-muted, #6b5c4c);
	font-style: italic;
}

.comments-closed {
	padding: 1.25rem;
	background-color: var(--bg-subtle, #faf8f5);
	border-radius: 6px;
	font-size: var(--font-size-sm, 0.9375rem);
	color: var(--text-muted, #6b5c4c);
	text-align: center;
}

@media (min-width: 48em) {
	.comments-section {
		padding-inline: 2rem;
	}

	.comment-list .children {
		padding-inline-start: 2.5rem;
	}
}

/* Comment Form
--------------------------------------------- */
.comment-respond {
	margin-block-start: 3rem;
	padding-block-start: 2.5rem;
	border-block-start: 2px solid var(--color-gold);
}

.comment-reply-title {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-espresso);
	margin-block: 0 0.5rem;
}

.comment-reply-title small {
	display: block;
	margin-block-start: 0.35rem;
	font-size: var(--font-size-xs, 0.8125rem);
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal, 400);
}

.comment-reply-title small a {
	color: var(--color-saddle);
	text-decoration: none;
}

.comment-reply-title small a:hover {
	color: var(--color-gold);
	text-decoration: underline;
}

.comment-notes {
	font-size: var(--font-size-sm, 0.9375rem);
	color: var(--text-muted, #6b5c4c);
	margin-block: 0.75rem 1.5rem;
}

.comment-form__field {
	margin-block-end: 1.25rem;
}

.comment-form__field label {
	display: block;
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-espresso);
	margin-block-end: 0.35rem;
}

.comment-form__optional {
	font-weight: var(--font-weight-normal, 400);
	color: var(--text-muted, #6b5c4c);
	font-size: var(--font-size-xs, 0.8125rem);
}

.comment-form__field input[type="text"],
.comment-form__field input[type="email"],
.comment-form__field input[type="url"],
.comment-form__field textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-family: var(--font-body);
	font-size: var(--font-size-sm, 0.9375rem);
	color: var(--text-body, #3a2a1e);
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 6px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-form__field input:focus,
.comment-form__field textarea:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(218,165,32,0.2);
}

.comment-form__field textarea {
	resize: vertical;
	min-height: 130px;
}

/* Two-col layout for name/email on wider screens */
@media (min-width: 48em) {
	.comment-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	.comment-form__field--comment,
	.comment-form__field--url,
	.form-submit,
	.comment-notes {
		grid-column: 1 / -1;
	}
}

.form-submit {
	margin-block: 0.5rem 0;
}

.form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 2rem;
	background-color: var(--color-espresso);
	color: var(--color-warm-white, #fdf6e3);
	font-family: var(--font-body);
	font-size: var(--font-size-sm, 0.9375rem);
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 2px solid var(--color-espresso);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.form-submit .submit:hover {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-espresso);
}

.form-submit .submit:focus-visible {
	outline: 3px solid var(--focus-ring, var(--color-honey));
	outline-offset: 2px;
}

/* Recipe Card Shortcode
--------------------------------------------- */
.recipe-card {
	background-color: var(--bg-subtle, #faf8f5);
	border: 1px solid var(--border-light, rgba(0,0,0,0.1));
	border-radius: 8px;
	overflow: hidden;
	margin-block: 2.5rem;
}

.recipe-card__header {
	background-color: var(--color-espresso);
	color: var(--color-warm-white, #fdf6e3);
	padding: 1.25rem 1.5rem;
}

.recipe-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: var(--font-weight-bold, 700);
	margin-block: 0 0.25rem;
}

.recipe-card__description {
	font-size: var(--font-size-sm, 0.9375rem);
	color: rgba(253,246,227,0.8);
	margin-block: 0;
}

.recipe-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 1.25rem 1.5rem;
	background-color: rgba(218,165,32,0.1);
	border-block-end: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.recipe-card__meta-item {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-xs, 0.8125rem);
}

.recipe-card__meta-label {
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--text-muted, #6b5c4c);
	font-size: 0.625rem;
}

.recipe-card__meta-value {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	color: var(--color-espresso);
}

.recipe-card__body {
	display: grid;
	gap: 0;
	padding: 0;
}

.recipe-card__ingredients,
.recipe-card__instructions {
	padding: 1.5rem;
}

.recipe-card__ingredients {
	border-block-end: 1px solid var(--border-light, rgba(0,0,0,0.08));
}

.recipe-card__section-title {
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: var(--font-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-caramel);
	margin-block: 0 1rem;
}

.recipe-card__ingredients ul {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

.recipe-card__ingredients li {
	padding-block: 0.4rem;
	border-block-end: 1px solid var(--border-light, rgba(0,0,0,0.06));
	font-size: var(--font-size-sm, 0.9375rem);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.recipe-card__ingredients li::before {
	content: "☕";
	font-size: 0.75rem;
	margin-block-start: 0.15rem;
	flex-shrink: 0;
}

.recipe-card__instructions ol {
	padding-inline-start: 0;
	margin-block: 0;
	counter-reset: recipe-step;
	list-style: none;
}

.recipe-card__instructions li {
	counter-increment: recipe-step;
	padding-block: 0.625rem;
	padding-inline-start: 2.25rem;
	border-block-end: 1px solid var(--border-light, rgba(0,0,0,0.06));
	font-size: var(--font-size-sm, 0.9375rem);
	position: relative;
}

.recipe-card__instructions li::before {
	content: counter(recipe-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-gold);
	color: var(--color-espresso);
	border-radius: 50%;
	font-weight: var(--font-weight-bold, 700);
	font-size: 0.75rem;
}

@media (min-width: 64em) {
	.recipe-card__body {
		grid-template-columns: 1fr 1fr;
	}

	.recipe-card__ingredients {
		border-block-end: none;
		border-inline-end: 1px solid var(--border-light, rgba(0,0,0,0.08));
	}
}

/* Callout Shortcode
--------------------------------------------- */
.callout {
	display: flex;
	gap: 1rem;
	margin-block: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: 6px;
	border-inline-start: 4px solid currentColor;
}

.callout__icon {
	flex-shrink: 0;
	font-size: 1.375rem;
	line-height: 1;
	margin-block-start: 0.1rem;
}

.callout__content {
	flex: 1;
}

.callout__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-base, 1.0625rem);
	font-weight: var(--font-weight-bold, 700);
	margin-block: 0 0.4rem;
}

.callout__body {
	font-size: var(--font-size-sm, 0.9375rem);
	line-height: var(--leading-relaxed, 1.75);
	margin-block: 0;
}

.callout--tip {
	background-color: rgba(218,165,32,0.1);
	color: var(--color-saddle);
}

.callout--tip .callout__title {
	color: var(--color-saddle);
}

.callout--warning {
	background-color: rgba(201,125,75,0.12);
	color: var(--color-caramel);
}

.callout--warning .callout__title {
	color: var(--color-caramel);
}

.callout--info {
	background-color: rgba(70,130,180,0.1);
	color: #2c6b9e;
}

.callout--info .callout__title {
	color: #2c6b9e;
}

.callout--fun {
	background-color: rgba(42,90,48,0.1);
	color: var(--color-forest-green, #2a5a30);
}

.callout--fun .callout__title {
	color: var(--color-forest-green, #2a5a30);
}

/* Print Styles
--------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.post-breadcrumbs,
	.post-share,
	.post-author-bio,
	.post-navigation,
	.related-posts,
	.comments-section,
	.wp-block-buttons {
		display: none !important;
	}

	.single-post {
		max-width: 100%;
	}

	.post-header {
		background: none;
		padding-block: 1.5rem;
	}

	.post-header__inner {
		text-align: start;
	}

	.post-title {
		font-size: 1.75rem;
	}

	.post-featured-image {
		max-height: 300px;
	}

	.post-content-wrap {
		max-width: 100%;
		padding-inline: 0;
	}

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

	.post-content a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.75rem;
		color: #666;
	}

	.recipe-card {
		break-inside: avoid;
	}

	.callout {
		break-inside: avoid;
		border: 1px solid #ccc;
	}
}