/**
 * Burger Boi — main stylesheet.
 *
 * Every token below is lifted from the Figma frame "Home" (1512 × 7965), so the
 * design is reproduced exactly at a 1512px viewport and scales down from there.
 * Type sizes use clamp() with a vw midpoint tuned so the maximum lands on the
 * Figma value precisely at 1512px — e.g. 144 / 1512 = 9.523vw.
 *
 * 1.  Fonts
 * 2.  Design tokens
 * 3.  Reset & base
 * 4.  Typography
 * 5.  Layout
 * 6.  Accessibility
 * 7.  Buttons
 * 8.  Sections & shared components
 * 9.  Forms
 * 10. Site header
 * 11. Site footer
 * 12. WordPress core classes
 * 13. Utilities
 * 14. Motion
 */

/* -------------------------------------------------------------------------- */
/* 1. Fonts                                                                    */
/* -------------------------------------------------------------------------- */

/*
 * General Sans, self-hosted. No external request at runtime.
 * swap: text paints immediately in the fallback and re-renders when the face
 * arrives, rather than sitting invisible.
 */
@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * Real italic cuts, not synthesised slants. The design uses two: Semibold Italic
 * for the hero eyebrow and every 24px card title, and Medium Italic for the
 * Signature tagline. Without these the browser would skew the upright, which
 * reads noticeably wrong at display sizes.
 */
@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-500-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-600-italic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------- */
/* 2. Design tokens                                                            */
/* -------------------------------------------------------------------------- */

:root {
	/* Palette — exact values from the Figma frame. */
	--c-ink: #222;              /* Page + footer background      */
	--c-charcoal: #333;         /* Dark section background       */
	--c-cream: #e8e2e0;         /* Light section background      */
	--c-off-white: #f5f3f2;     /* Card background               */
	--c-grey: #757575;          /* Secondary body copy           */
	--c-grey-mid: #757575;      /* Divider on charcoal           */
	--c-white: #fff;
	--c-black: #000;

	--c-purple: #664bba;        /* Accent: headline, strip       */
	--c-purple-dark: #573da7;   /* Primary button, subscribe bg  */
	--c-purple-light: #8166d6;  /* Primary button border         */
	--c-lilac: #c4b4d7;         /* Logo sub-lettering            */
	--c-amber: #f59e0b;         /* Stars                         */

	--c-text: var(--c-charcoal);
	--c-bg: var(--c-white);

	/* Type. */
	--font: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/*
	 * Layout. The Figma frame is 1512 wide with a 1380 content column, leaving
	 * a 66px gutter each side.
	 */
	--container: 1380px;
	--gutter: 66px;

	--radius-pill: 1000px;
	--radius: 16px;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--duration: 250ms;

	--header-h: 126px;
}

@media (max-width: 1100px) {
	:root {
		--gutter: 40px;
	}
}

@media (max-width: 640px) {
	:root {
		--gutter: 20px;
		--header-h: 88px;
	}
}

/* -------------------------------------------------------------------------- */
/* 3. Reset & base                                                             */
/* -------------------------------------------------------------------------- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * The header is pinned to the top, so an anchor jump (#story, #timeline …)
	 * would otherwise land its target underneath it. Pages that pin a second bar
	 * below the header add their own scroll-margin on top of this.
	 */
	scroll-padding-top: var(--header-h);
}

body {
	min-height: 100vh;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* The marquee strip runs wider than the viewport. */
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* 4. Typography                                                               */
/* -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--fw-bold);
	line-height: 1.1;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* 5. Layout                                                                   */
/* -------------------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

.container {
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------------- */
/* 6. Accessibility                                                            */
/* -------------------------------------------------------------------------- */

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

.screen-reader-text:focus {
	z-index: 1000;
	top: 8px;
	left: 8px;
	display: block;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip-path: none;
	border-radius: 4px;
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 14px;
}

:focus-visible {
	outline: 3px solid var(--c-purple-light);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------------------- */
/* 7. Buttons                                                                  */
/* -------------------------------------------------------------------------- */

/*
 * The variants, all straight from the Figma component set:
 *   .btn--primary        #664bba fill, 2px #8166d6 border  (About Us, Order Now)
 *   .btn--deep           as primary but the deeper #573da7  (hero only)
 *   .btn--outline        10% white fill, 2px #e8e2e0 border (header CTA, on dark)
 *   .btn--ghost          10% black fill, 1px white/20       (Find a Location)
 *   .btn--purple         solid purple on light              (order strip)
 *   .btn--outline-purple purple outline on light            (View Full Menu)
 *   .btn--outline-dark   hairline outline on light          (order strip)
 *   .btn--outline-dark-2 heavy charcoal outline on light    (Signature)
 *   .btn--dark           near-black on purple               (newsletter)
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

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

.btn:active {
	transform: translateY(0);
}

/* The arrow slides forward on hover — the one flourish the buttons carry. */
.btn__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	transition: transform var(--duration) var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(3px);
}

/*
 * Padding is the Figma value minus the border width, on both axes. A Figma
 * stroke is drawn inside the frame and does not change its size, whereas a CSS
 * border adds to it — pad as designed and every button comes out 4px too tall.
 *
 *   primary  Figma 12/24 padding, 2px stroke, 46px tall -> 10/22 + 2px border
 *   outline  same
 *   ghost    Figma  6/12 padding, 1px stroke, 34px tall ->  5/11 + 1px border
 */
.btn--primary {
	gap: 8px;
	padding: 10px 22px;
	border-color: var(--c-purple-light);
	background: var(--c-purple);
	color: var(--c-white);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.btn--primary:hover {
	border-color: var(--c-purple);
	background: var(--c-purple-dark);
	color: var(--c-white);
}

.btn--outline {
	gap: 10px;
	padding: 10px 22px;
	border-color: var(--c-cream);
	background: rgb(255 255 255 / 10%);
	color: var(--c-white);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.btn--outline:hover {
	background: var(--c-white);
	color: var(--c-ink);
}

.btn--ghost {
	gap: 4px;
	padding: 5px 11px;
	border-width: 1px;
	border-color: rgb(255 255 255 / 20%);
	background: rgb(0 0 0 / 10%);
	color: var(--c-white);
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.4; /* 22.4 / 16 — gives the designed 34px pill. */
}

.btn--ghost:hover {
	border-color: var(--c-white);
	background: rgb(255 255 255 / 15%);
}

/*
 * Small — Figma 6/12 padding, 1px stroke, 34px tall. The 16px text is set on a
 * 22.4px line (1.4), not the 1.2 the larger buttons use; at 1.2 the pill comes
 * out 31px instead of 34.
 */
.btn--sm {
	gap: 4px;
	padding: 5px 11px;
	border-width: 1px;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* Large — Figma 12/24 padding, 2px stroke, 52px tall: 20px text on a 28px line. */
.btn--lg {
	padding: 10px 22px;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* Hero only: the deeper purple fill. */
.btn--deep {
	background: var(--c-purple-dark);
}

.btn--deep:hover {
	background: var(--c-purple);
}

/* Solid purple on light — the order strip. */
.btn--purple {
	border-color: rgb(51 51 51 / 20%);
	background: var(--c-purple);
	color: var(--c-white);
}

.btn--purple:hover {
	border-color: var(--c-purple);
	background: var(--c-purple-dark);
	color: var(--c-white);
}

/* Purple outline on light — "View full menu", "View all locations". */
.btn--outline-purple {
	gap: 10px;
	padding: 10px 22px;
	border-color: var(--c-purple);
	background: rgb(255 255 255 / 10%);
	color: var(--c-purple);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.btn--outline-purple:hover {
	background: var(--c-purple);
	color: var(--c-white);
}

/* Hairline outline on light — the order strip's secondary. */
.btn--outline-dark {
	border-color: rgb(51 51 51 / 20%);
	background: transparent;
	color: var(--c-purple);
}

.btn--outline-dark:hover {
	border-color: var(--c-purple);
	background: var(--c-purple);
	color: var(--c-white);
}

/* Heavy outline on light — the Signature section's secondary. */
.btn--outline-dark-2 {
	gap: 10px;
	padding: 10px 22px;
	border-color: var(--c-charcoal);
	background: transparent;
	color: var(--c-charcoal);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.btn--outline-dark-2:hover {
	background: var(--c-charcoal);
	color: var(--c-white);
}

/* Near-black on purple — the newsletter submit. */
.btn--dark {
	padding: 10px 22px;
	border-color: var(--c-purple-light);
	background: var(--c-ink);
	color: var(--c-white);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.btn--dark:hover {
	background: var(--c-black);
}

/* -------------------------------------------------------------------------- */
/* 8. Sections & shared components                                             */
/* -------------------------------------------------------------------------- */

/* Every section in the design is 96px of padding top and bottom. */
.section {
	padding-block: clamp(56px, 6.35vw, 96px); /* 96 / 1512 */
}

.section--white {
	background: var(--c-white);
}

.section--cream {
	background: var(--c-cream);
}

.section--charcoal {
	background: var(--c-charcoal);
	color: var(--c-white);
}

/* --- Section head: eyebrow + heading (+ sub-copy) with an optional button --- */

.section-head {
	display: flex;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: 32px;
}

.section-head__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.section-head__eyebrow {
	margin: 0;
	color: var(--c-purple);
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.section-head__eyebrow--light {
	color: var(--c-cream);
}

.section-head__title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(30px, 3.1746vw, 48px); /* 48 / 1512 */
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
}

.section-head__title--light {
	color: var(--c-white);
}

.section-head__sub {
	margin: 0;
	color: var(--c-grey);
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.section-head--light .section-head__eyebrow,
.section-head--light .section-head__title,
.section-head--light .section-head__sub {
	color: var(--c-white);
}

.section-head .btn {
	flex-shrink: 0;
}

@media (max-width: 780px) {
	.section-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Badge: white pill with a flame, e.g. "Fan Fav" --- */

.badge {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	padding: 8px 12px;
	border: 1px solid var(--c-cream);
	border-radius: 20px;
	background: var(--c-white);
	color: var(--c-purple);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge__icon {
	width: 16px;
	height: 16px;
	color: var(--c-purple);
}

/* --- Pill: solid purple, e.g. "x4 or x8" --- */

.pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 8px 12px;
	border-radius: 20px;
	background: var(--c-purple);
	color: var(--c-white);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	line-height: 1.6;
	white-space: nowrap;
}

/* --- Rule: the 100×2 purple dash under a paragraph --- */

.rule {
	display: block;
	width: 100px;
	height: 2px;
	background: var(--c-purple);
}

/* --- Stats: the three-up 61g / ×3 / 100% block --- */

.stats {
	display: flex;
	margin: 0;
	border: 2px solid var(--c-cream);
	border-radius: 12px;
	background: var(--c-white);
}

.stats__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	padding-block: 16px;
	border-right: 1px solid var(--c-cream);
}

.stats__item:last-child {
	border-right: 0;
}

.stats__value {
	margin: 0;
	color: var(--c-charcoal);
	font-size: 40px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.stats__label {
	color: var(--c-charcoal);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* On charcoal the borders lift to grey and the type flips to white. */
.stats--dark {
	border-color: var(--c-grey-mid);
	background: var(--c-charcoal);
}

.stats--dark .stats__item {
	border-right-color: var(--c-grey-mid);
}

.stats--dark .stats__value,
.stats--dark .stats__label {
	color: var(--c-white);
}

/* --- Link with a trailing arrow, e.g. "Visit store", "Read more" --- */

.link-arrow {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	color: var(--c-purple);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-transform: uppercase;
	transition: gap var(--duration) var(--ease);
}

.link-arrow:hover {
	gap: 10px;
	color: var(--c-purple-dark);
}

.link-arrow__icon {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------------------- */
/* 9. Forms                                                                    */
/* -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	transition: border-color var(--duration) var(--ease);
}

input:focus,
textarea:focus {
	border-color: var(--c-purple);
}

/* -------------------------------------------------------------------------- */
/* 10. Site header                                                              */
/* -------------------------------------------------------------------------- */

/*
 * Figma "Frame 53": 126px tall, sitting over the hero with a black scrim that
 * fades out downwards (70% opacity at the top). It is part of the hero, not a
 * band above it — hence absolute, not sticky.
 */
.site-header {
	z-index: 100;
	min-height: var(--header-h);
	transition:
		background-color var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease);
}

/*
 * On the homepage the header floats over the hero, as designed. Fixed rather
 * than absolute: it stays out of the flow, so the hero still starts at the very
 * top, but it now travels with the reader instead of scrolling away.
 */
.site-header--overlay {
	position: fixed;
	inset: 0 0 auto;
	background: linear-gradient(180deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 0%) 100%);
}

/*
 * Everywhere else there is no hero beneath it, so it is a solid bar. Sticky
 * keeps it in the flow — the page below is laid out exactly as before — while
 * still pinning it to the top once it is reached.
 */
.site-header--solid {
	position: sticky;
	top: 0;
	background: var(--c-ink);
}

/*
 * Past the top of the page the hero's scrim would be sitting over ordinary page
 * content, where it reads as a smudge rather than a header — so the bar goes
 * solid and lifts off the content. main.js adds the class past 8px of scroll.
 */
.site-header.is-scrolled {
	background: var(--c-ink);
	box-shadow: 0 2px 16px rgb(0 0 0 / 25%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2.1vw, 32px);
	min-height: var(--header-h);
	padding-block: 32px;
}

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

.site-header__logo img,
.site-header__logo svg {
	/* Gives back the last of the width the nav needs to stay on one line. */
	width: clamp(200px, 21vw, 317px);
	height: auto;
}

/* --- Primary navigation --- */

.main-navigation .menu {
	display: flex;
	align-items: center;
	/*
	 * The row needs ~1324px to sit on one line, but the bar only collapses to the
	 * toggle below 1100 — so between the two the gaps give way first, before the
	 * logo does.
	 */
	gap: clamp(14px, 2.1vw, 32px);
	margin: 0;
}

.main-navigation a {
	position: relative;
	color: var(--c-white);
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	/*
	 * A label is one unit: "Find Your FUEL" is three words and would otherwise
	 * stack into three lines the moment the bar is squeezed.
	 */
	white-space: nowrap;
	transition: color var(--duration) var(--ease);
}

/* Underline grows from the left on hover rather than snapping in. */
.main-navigation a::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--c-purple-light);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration) var(--ease);
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after,
.main-navigation .current-menu-item > a::after,
.main-navigation [aria-current="page"]::after {
	transform: scaleX(1);
}

.site-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
}

/* --- Mobile menu toggle --- */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: var(--c-white);
	transition: background-color var(--duration) var(--ease);
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--c-white);
	transition: transform var(--duration) var(--ease);
}

.menu-toggle__bars::before {
	transform: translateY(-7px);
}

.menu-toggle__bars::after {
	transform: translateY(7px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: rotate(-45deg);
}

/*
 * The Figma frame is desktop-only. Below 1100px the nav becomes a drawer —
 * the six links plus the logo and CTA cannot share a row much below that.
 */
/*
 * The bar hands over to the toggle at 1150 rather than 1100: even with the gaps
 * and logo at their smallest, six labels plus the logo and the CTA cannot fit on
 * one line below roughly that, and squeezing them further only stacked the
 * longest label onto three lines.
 */
@media (max-width: 1150px) {
	.menu-toggle {
		display: inline-flex;
	}

	.site-header__logo img,
	.site-header__logo svg {
		width: 220px;
	}

	.main-navigation {
		position: fixed;
		inset: var(--header-h) 0 0;
		z-index: 99;
		overflow-y: auto;
		padding: 32px var(--gutter) 64px;
		background: var(--c-ink);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity var(--duration) var(--ease),
			transform var(--duration) var(--ease),
			visibility var(--duration) var(--ease);
	}

	.main-navigation.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.main-navigation .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.main-navigation a {
		font-size: 24px;
	}

	body.menu-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {
	.site-header__inner {
		padding-block: 20px;
	}

	.site-header__logo img,
	.site-header__logo svg {
		width: 170px;
	}

	/* The CTA would crowd the logo and the toggle on a phone. */
	.site-header__actions .btn {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* 11. Site footer                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Figma "Footer": 64px of padding on top, 48px at the base. A 162px brand column
 * then four 209px link columns, separated by 96px gutters — 162 + (209 × 4) +
 * (96 × 4) = 1382, which is the 1380 content column.
 */
.site-footer {
	padding-block: 64px 48px;
	background: var(--c-ink);
	color: var(--c-white);
}

.site-footer a {
	transition: color var(--duration) var(--ease);
}

.site-footer a:hover {
	color: var(--c-purple-light);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 162px repeat(4, 1fr);
	gap: 96px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__logo img {
	width: 162px;
	height: auto;
}

.site-footer__social {
	display: flex;
	gap: 9px;
	margin: 0;
	padding: 0;
}

/* White discs with the icon knocked out in near-black. */
.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-ink);
	transition:
		background-color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.site-footer__social-link:hover {
	background: var(--c-purple-light);
	color: var(--c-white);
	transform: translateY(-2px);
}

.site-footer__social-link svg {
	width: 18px;
	height: 18px;
}

.site-footer__col-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.site-footer__links a {
	display: block;
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: 2;
}

.site-footer__rule {
	height: 1px;
	margin-block: 32px;
	border: 0;
	background: var(--c-purple);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	line-height: 1.6;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

@media (max-width: 1100px) {
	.site-footer__top {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		gap: 16px;
	}
}

/* -------------------------------------------------------------------------- */
/* 12. WordPress core classes                                                  */
/* -------------------------------------------------------------------------- */

.alignwide,
.alignfull {
	max-width: none;
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
figcaption {
	margin-top: 8px;
	font-size: 14px;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* 13. Utilities                                                               */
/* -------------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------- */
/* 14. Motion                                                                  */
/* -------------------------------------------------------------------------- */

/*
 * Scroll-reveal. main.js adds .is-visible via IntersectionObserver. Scoped to
 * .js so a visitor without JavaScript sees the content instead of a blank page.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms var(--ease),
		transform 700ms var(--ease);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.js [data-reveal][data-reveal-delay="1"] { transition-delay: 100ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 200ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 300ms; }
.js [data-reveal][data-reveal-delay="4"] { transition-delay: 400ms; }

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

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

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}