/*
Theme Name: Serratore's
Theme URI: https://serratoresnc.com
Author: Built for Serratore's Pasta & Pizza
Description: A single-page classic PHP theme for Serratore's Pasta & Pizza in Hillsborough, NC. A photo hero carries the logo and the page runs straight into the menu, which is managed in WordPress as menu items grouped into sections so the printed card and the site stay in step. Colors are taken from the brand logo, type from the printed menu.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serratores
Tags: restaurant, custom-menu, custom-logo, translation-ready
*/

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	--red: #7d131d;
	--red-deep: #560d15;
	--red-wash: #f6ecea;
	--sage: #788c6e;
	/*
	 * Brand sage is 3.64:1 on the paper tone — fine for the large script
	 * headings (WCAG wants 3:1 there) but short of the 4.5:1 small text needs.
	 * This darker cut is for small sage type only; 4.70:1 on --paper.
	 */
	--sage-ink: #55654a;
	--sage-pale: #c7d0bb;
	--sage-wash: #f0f2ea;
	/*
	 * The green the painted frame is drawn on — matches the interior of
	 * border.png and the old site's $green, so the sprite meets the panel with
	 * no seam.
	 */
	--green-panel: #92af89;
	--cream: #fbf7ef;
	/*
	 * Warm beige rather than white — sampled from the brand's own social posts
	 * (Serratores_WeddingPost). It is the surface colour for the footer and the
	 * menu boxes. Going deeper drops the small sage and muted type under 4.5:1,
	 * so darken those to match if you do.
	 */
	--paper: #ecddc6;
	--paper-rgb: 236, 221, 198;
	--ink: #3b322c;
	--muted: #675d55;
	--rule: rgba(120, 140, 110, 0.45);

	--serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--script: "Kaushan Script", "Snell Roundhand", cursive;
	--sans: Jost, Futura, -apple-system, BlinkMacSystemFont, sans-serif;

	--wrap: 1180px;
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--radius: 2px;
}

/* -------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--red);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--red-deep);
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-weight: 400;
	line-height: 1.15;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

hr {
	height: 1px;
	margin: 3rem 0;
	border: 0;
	background: var(--rule);
}

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--red);
	color: var(--paper);
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
	color: var(--paper);
}

/* Keeps the footer flush to the bottom on short pages. */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

/* On a tall window the photo grows rather than leaving a gap above the footer. */
.hero {
	flex: 1 0 auto;
}

.site-footer {
	flex-shrink: 0;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow {
	max-width: 820px;
}

/* -------------------------------------------------------------------------
 * 3. Type helpers
 * ---------------------------------------------------------------------- */

.script {
	font-family: var(--script);
	font-weight: 400;
	color: var(--sage);
	letter-spacing: 0.01em;
}

.eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sage-ink);
}

.lede {
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--muted);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--red);
	border-radius: var(--radius);
	background: var(--red);
	color: var(--paper);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
	background: var(--red-deep);
	border-color: var(--red-deep);
	color: var(--paper);
}

.btn--ghost {
	background: transparent;
	color: var(--red);
}

.btn--ghost:hover {
	background: var(--red);
	color: var(--paper);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* Decorative frame, echoing the scalloped boxes on the printed card ------- */

/*
 * The double frame echoes the scalloped boxes on the printed card. The outer
 * ring is an outline rather than a positioned pseudo-element, because inside
 * CSS multi-column layout an absolutely positioned child gets painted into the
 * wrong column fragment — which is exactly where the menu sections live.
 */
.deco-frame {
	position: relative;
	border: 1px solid var(--sage);
	border-radius: var(--radius);
	background: var(--paper);
	outline: 3px dotted var(--sage);
	outline-offset: 5px;
}

/*
 * The painted rope frame from the original mockup, carried over from the old
 * site — a 300px sprite sliced 100px in on every edge and repeated with
 * `round` so the ornament never gets cut mid-motif. Same numbers the old site
 * used. Add `deco-frame--pattern` alongside `deco-frame` to swap the dotted
 * outline for it.
 */
.deco-frame--pattern {
	border: 30px solid transparent;
	border-image-source: url("assets/img/border.png");
	border-image-slice: 48;
	border-image-width: 30px;
	border-image-repeat: round;
	border-radius: 0;
	outline: 0;
}

@media (max-width: 600px) {
	.deco-frame--pattern {
		border-width: 22px;
		border-image-width: 22px;
	}
}

/* -------------------------------------------------------------------------
 * 4. Top bar and header
 * ---------------------------------------------------------------------- */

.topbar {
	background: var(--red);
	color: rgba(var(--paper-rgb), 0.88);
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	min-height: 2.75rem;
	padding-block: 0.5rem;
	text-align: center;
}

.topbar a {
	color: var(--paper);
	text-decoration: none;
}

.topbar a:hover {
	color: var(--paper);
	text-decoration: underline;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.status.is-open {
	color: #cfe0bd;
}

.status.is-closed {
	color: rgba(var(--paper-rgb), 0.72);
}

.site-header {
	position: relative;
	background: var(--cream);
	border-bottom: 1px solid var(--rule);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding-block: 1.25rem;
}

/* Brandmark -------------------------------------------------------------- */

.site-branding {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.brandmark {
	display: block;
	text-decoration: none;
}

.brandmark__img {
	width: auto;
	height: clamp(40px, 5vw, 56px);
	margin-inline: auto;
}

/* Navigation ------------------------------------------------------------- */

.primary-nav {
	grid-column: 3;
	justify-self: end;
}

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

.primary-nav a {
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--red);
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	border-bottom-color: var(--sage);
}

.nav-toggle {
	grid-column: 1;
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: transparent;
	color: var(--red);
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle__bars {
	display: block;
	width: 16px;
	height: 1px;
	background: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

@media (max-width: 860px) {
	.site-header__inner {
		grid-template-columns: 1fr auto 1fr;
	}

	.nav-toggle {
		display: inline-flex;
		justify-self: start;
	}

	.primary-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		display: none;
		padding-top: 1rem;
		border-top: 1px solid var(--rule);
		margin-top: 0.75rem;
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-nav li + li {
		border-top: 1px dotted var(--rule);
	}

	.primary-nav a {
		display: block;
		padding: 0.85rem 0;
	}
}

/* Phones: tighten the info bar and drop the toggle's word. */
@media (max-width: 600px) {
	.topbar__inner {
		gap: 0.3rem 1rem;
		font-size: 0.6875rem;
	}

	.topbar__address {
		display: none;
	}

	.nav-toggle {
		padding: 0.5rem 0.65rem;
	}

	.nav-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hero {
		min-height: min(78vh, 620px);
	}

	.hero__tagline {
		letter-spacing: 0.2em;
	}
}

/* -------------------------------------------------------------------------
 * 5. Hero
 * ---------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(86vh, 780px);
	padding-block: clamp(3.5rem, 10vw, 6rem);
	text-align: center;
	overflow: hidden;
	background: var(--red-deep);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* The shade below flattens the food; put the richness back. */
	filter: saturate(1.14) contrast(1.07);
}

/*
 * Enough shade for the beige type and logotype to hold up over the food:
 * a top-to-bottom gradient for the bar and the buttons, plus a soft pool of
 * shadow behind the centred text block.
 */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* A tight pool of shade right behind the lockup. */
		radial-gradient(46% 42% at 50% 52%, rgba(18, 5, 7, 0.62) 0%, rgba(18, 5, 7, 0) 100%),
		/* Vignette: hold the corners down so the centre can stay appetising. */
		radial-gradient(120% 90% at 50% 50%, rgba(14, 4, 5, 0) 42%, rgba(14, 4, 5, 0.66) 100%),
		linear-gradient(
			180deg,
			rgba(24, 7, 9, 0.55) 0%,
			rgba(24, 7, 9, 0.22) 46%,
			rgba(24, 7, 9, 0.7) 100%
		);
}

.hero__inner {
	position: relative;
	max-width: 46rem;
}

.hero__logo {
	margin: 0 0 1.35rem;
}

/*
 * The logotype is inline SVG, so it takes its colour from here. Keep the width
 * inside .hero__inner (46rem): wider than its container and `margin: auto` has
 * nothing left to distribute, so it drifts off centre.
 */
.hero__logotype {
	display: block;
	width: min(460px, 74vw);
	height: auto;
	margin-inline: auto;
	color: var(--paper);
	shape-rendering: geometricPrecision;
	/* Two shadows: a tight one for edge definition, a wide one to lift it off. */
	filter:
		drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
		drop-shadow(0 6px 30px rgba(0, 0, 0, 0.45));
}

.hero__tagline {
	margin: 0 0 1.4rem;
	font-family: var(--sans);
	font-size: clamp(0.72rem, 1.7vw, 0.85rem);
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--paper);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero .btn-row {
	justify-content: center;
}

/*
 * Brand red on a red-shaded photo barely separates, so the primary button takes
 * the logo's mint — the one brand colour that is nowhere in the photo, which is
 * exactly why it stands out. Red on mint is 6.64:1.
 */
.hero .btn {
	background: var(--sage-pale);
	border-color: var(--sage-pale);
	color: var(--red);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.hero .btn:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--red);
}

.hero .btn--ghost {
	background: rgba(var(--paper-rgb), 0.08);
	color: var(--paper);
	border-color: rgba(var(--paper-rgb), 0.78);
	backdrop-filter: blur(2px);
	box-shadow: none;
}

.hero .btn--ghost:hover {
	background: var(--paper);
	color: var(--red);
	border-color: var(--paper);
}

/* -------------------------------------------------------------------------
 * 6. Sections
 * ---------------------------------------------------------------------- */

.section {
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.section--tint {
	background: var(--sage-wash);
}

.section--paper {
	background: var(--paper);
}

.section__head {
	max-width: 40rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.section__title {
	font-family: var(--script);
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	color: var(--sage);
	margin-bottom: 0.25em;
}

.section__note {
	color: var(--muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * 7. Menu page
 * ---------------------------------------------------------------------- */

/* Sits tight under the hero so the page reads as one continuous scroll. */
.menu-area {
	padding-block: 0 clamp(3rem, 7vw, 5rem);
}

.menu-head {
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	text-align: center;
}

.menu-head__title {
	font-family: var(--script);
	font-size: clamp(2.6rem, 7vw, 4.25rem);
	color: var(--red);
	margin-bottom: 0.15em;
}

.menu-head__meta {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sage);
}

.menu-block + .menu-block {
	margin-top: clamp(3rem, 7vw, 5rem);
}

.menu-block__title {
	font-family: var(--script);
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	color: var(--red);
	text-align: center;
	margin-bottom: 0.3em;
}

.menu-block__note {
	text-align: center;
	color: var(--muted);
	font-style: italic;
	margin-bottom: 2rem;
}

/* Two columns on wide screens, like the printed card */
.menu-columns {
	column-gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 1000px) {
	.menu-columns {
		columns: 2;
	}
}

.menu-section {
	break-inside: avoid;
	margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.menu-section__head {
	margin-bottom: 1.1rem;
}

/* Mixed case, like the card — theme.json's global h3 rule uppercases otherwise. */
.menu-section__title {
	font-family: var(--script);
	font-size: 2rem;
	line-height: 1.1;
	color: var(--sage);
	margin-bottom: 0.15em;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.menu-section__note,
.menu-section__price {
	font-size: 0.95rem;
	color: var(--muted);
	font-style: italic;
	margin: 0;
}

.menu-section__price {
	font-style: normal;
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red);
	margin-top: 0.35rem;
}

/*
 * Set like the printed card: no rules, no leader dots, everything in the house
 * red, the name and description running on in one line with the price hung to
 * the right of the first line.
 */
.menu-items {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.97rem;
	line-height: 1.34;
}

.menu-item {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-bottom: 0.62rem;
	color: var(--red);
}

.menu-item__body {
	flex: 1 1 auto;
}

.menu-item__name {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--red);
}

.menu-item__sep {
	color: var(--red);
}

.menu-item__desc {
	color: var(--red);
}

.menu-item__detail {
	font-style: italic;
}

.menu-item__price {
	flex: 0 0 auto;
	color: var(--red);
	font-variant-numeric: lining-nums tabular-nums;
}

.menu-item__variants,
.menu-item__addons {
	display: block;
	margin-top: 0.05rem;
	font-size: 0.94em;
	color: var(--red);
}

.menu-item__addons {
	font-style: italic;
}

.menu-item.is-sold-out {
	opacity: 0.55;
}

.menu-item.is-sold-out .menu-item__name,
.menu-item.is-sold-out .menu-item__price {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.menu-item__flag {
	display: inline-block;
	margin-left: 0.5rem;
	font-family: var(--sans);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	vertical-align: 0.15em;
}

/* Feature layout — the boxed sections on the card ------------------------ */

.menu-section--feature {
	break-inside: avoid;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}

.menu-section--feature .menu-section__head {
	margin-bottom: 1.4rem;
}

.menu-item--feature {
	display: block;
	text-align: center;
	margin-bottom: 1.15rem;
}

.menu-item--feature .menu-item__line {
	margin: 0;
}

.menu-item--feature .menu-item__name {
	letter-spacing: 0.11em;
}

.menu-item--feature .menu-item__price {
	margin-left: 0.5rem;
}

.menu-item--feature .menu-item__desc,
.menu-item--feature .menu-item__variants,
.menu-item--feature .menu-item__addons {
	margin: 0.1rem auto 0;
	max-width: 30rem;
}

/* Toppings grid ---------------------------------------------------------- */

.menu-section--toppings {
	break-inside: avoid;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-color: var(--red);
	text-align: center;
}

.menu-section--toppings {
	outline-color: var(--red);
}

.menu-section--toppings .menu-section__title {
	color: var(--red);
}

.toppings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.15rem 2rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.toppings li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.24rem;
}

.toppings .name {
	font-family: var(--serif);
	font-size: 0.93rem;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--red);
}

.toppings .price {
	color: var(--red);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Sub-sections (wine colors) ------------------------------------------- */

.menu-subsection + .menu-subsection {
	margin-top: 1.5rem;
}

.menu-subsection__title {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sage-ink);
	margin-bottom: 0.6rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--rule);
}

.menu-empty {
	max-width: 32rem;
	margin-inline: auto;
	padding: 2.5rem;
	text-align: center;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
 * 8. Static pages and posts
 * ---------------------------------------------------------------------- */

.page-hero {
	padding-block: clamp(2.5rem, 6vw, 4rem) 0;
	text-align: center;
}

.page-hero__title {
	font-family: var(--script);
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	color: var(--red);
}

.entry-content {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.entry-content > * {
	max-width: 760px;
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wrap);
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content h2 {
	font-family: var(--script);
	font-size: 2.2rem;
	color: var(--sage);
	margin-top: 1.5em;
}

.entry-content h3 {
	font-family: var(--sans);
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	margin-top: 2em;
}

.entry-content blockquote {
	margin-inline: 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--sage);
	font-style: italic;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
 * 9. Footer
 * ---------------------------------------------------------------------- */

/*
 * The footer is a painted panel: the rope frame from the mockup, drawn on the
 * same green it was designed over. Type goes deep maroon — brand red only
 * manages 4.40:1 on this green, maroon clears it at 5.95:1.
 */
.site-footer {
	background: var(--paper);
	color: var(--red-deep);
	padding: clamp(1.25rem, 3.5vw, 2.25rem) clamp(0.75rem, 3vw, 2rem);
	text-align: center;
}

/*
 * The frame sits on the inner container, not the footer, so it wraps the
 * content instead of running edge to edge — the way #Frame worked on the old
 * site. Green inside and out, so the sprite's own interior joins the panel
 * invisibly and the rope reads as drawn on it.
 */
.site-footer > .wrap {
	max-width: 650px;
	padding-inline: clamp(0.5rem, 3vw, 2rem);
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	/*
	 * The rope motif has a 51px period, so the slice has to leave a middle tile
	 * that is a whole number of them or the pattern collides where it repeats.
	 * 48 leaves 204px — exactly four periods, horizontally and vertically — so
	 * the tile meets itself and the corners in phase.
	 */
	border: 30px solid transparent;
	border-image-source: url("assets/img/border.png");
	border-image-slice: 48;
	border-image-width: 30px;
	border-image-repeat: round;
}

@media (max-width: 700px) {
	.site-footer > .wrap {
		border-width: 22px;
		border-image-width: 22px;
		padding-block: 1.25rem;
		padding-inline: 0.5rem;
	}
}

.site-footer a {
	color: var(--red-deep);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--red-deep);
	text-decoration: underline;
}

.footer-logo {
	display: block;
	width: fit-content;
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

/*
 * The mark is vector, but its interior linework is about 2 units wide against a
 * 107-unit viewBox. Drawn at 76px that lands on ~1.4 device pixels on a 1x
 * display — sub-pixel, so it aliases; on retina the same line gets 2.8px and
 * looks clean. Drawing it larger puts those lines back over 1px, and
 * geometricPrecision asks the renderer for quality over speed on fine detail.
 */
.footer-mark {
	display: block;
	width: clamp(68px, 8vw, 96px);
	height: auto;
	margin-inline: auto;
	shape-rendering: geometricPrecision;
	/* Softer than the type maroon, so the mark sits back a little. */
	color: #814a4c;
}

.footer-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	max-width: 40rem;
	margin-inline: auto;
}

/*
 * Columns sized to their content, not 1fr each — with equal halves the two
 * blocks centre inside them and drift much further apart than the grid gap
 * suggests. This way the gap is the gap.
 */
@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: auto auto;
		justify-content: center;
		gap: clamp(3rem, 8vw, 5.5rem);
		align-items: start;
	}
}

.footer-col__title {
	font-family: var(--sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--red-deep);
	opacity: 0.75;
	margin-bottom: 1rem;
}

/*
 * A definition list on a grid: days in column one, times in column two, both
 * flush left so the figures stack, and sharing a baseline despite the label and
 * the time being different faces and sizes.
 */
.footer-hours {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 0.4rem 1.5rem;
	margin: 0;
	font-size: 0.95rem;
	text-align: left;
}

.footer-hours .day {
	margin: 0;
}

.footer-hours .time {
	margin: 0;
	font-variant-numeric: lining-nums tabular-nums;
}

.footer-hours .day {
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red-deep);
}

/* Not italic: that one word was the only thing pulling the italic face onto the
   landing page. Colour carries the meaning instead. */
.footer-hours .time.is-closed {
	font-style: italic;
	opacity: 0.72;
}

.footer-address {
	font-style: normal;
	font-size: 1.02rem;
	line-height: 1.5;
	margin: 0 0 0.5rem;
}

.footer-phone {
	margin: 0;
	font-size: 1.02rem;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.footer-bottom {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(86, 13, 21, 0.22);
	font-family: var(--sans);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red-deep);
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * 10. Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}