/*
Theme Name: Season-Ales
Theme URI: https://season-ales.com
Description: Public interface for the Season-Ales seasonal beer search engine. Presentation only; all data and crawling live in the Season-Ales Core plugin.
Author: Alexander Rowe
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: season-ales
*/

/* ---------------------------------------------------------------------------
   Tokens

   The neutral foundation stays dominant. Seasonal colour arrives only through
   --season-accent, which is set per page from the accent_color column in the
   seasons table, so the palette can never drift from the data.
   ------------------------------------------------------------------------ */

:root {
	/* Straight from the logo. Three of the four bottle colours already matched
	   the season accents seeded in sa_seasons, so brand and data agree by
	   construction rather than coincidence. */
	--spring: #4c8b3f;
	--fall:   #c5571a;
	--summer: #e0a100;
	--winter: #1f4e79;

	--paper:       #fbfaf6;
	--surface:     #ffffff;
	--sunk:        #f1efe8;
	--ink:         #213a4f;
	--ink-soft:    #4a6274;
	--ink-muted:   #7d8f9c;
	--rule:        #e3e0d6;
	--rule-strong: #cbc7ba;

	--season-accent: #c5571a;
	--season-wash:   #fdf3ec;

	--ok:      #2f6b46;
	--caution: #a06a10;
	--unknown: #7d8f9c;

	--display: "Archivo Expanded", "Archivo", ui-sans-serif, system-ui, sans-serif;
	--body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

	--step--1: 0.8125rem;
	--step-0:  1rem;
	--step-1:  1.1875rem;
	--step-2:  1.5rem;
	--step-3:  clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
	--step-4:  clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);

	--gap-xs: 0.375rem;
	--gap-s:  0.75rem;
	--gap-m:  1.25rem;
	--gap-l:  2rem;
	--gap-xl: clamp(2.5rem, 6vw, 4.5rem);

	--radius:    14px;
	--radius-sm: 8px;
	--shell:     78rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--step-0);
	line-height: 1.6;
	font-synthesis-weight: none;
}

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--gap-m); max-width: 68ch; }

a { color: inherit; text-underline-offset: 0.18em; }

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

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

.sa-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: var(--gap-s) var(--gap-m);
	z-index: 100;
}
.sa-skip:focus { left: 0; }

.sa-shell {
	width: min(100% - 2.5rem, var(--shell));
	margin-inline: auto;
}

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

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

.sa-header {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: 20;
}

.sa-header__inner {
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	min-height: 4.25rem;
}

.sa-wordmark {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
}

/* The hyphen carries the season. It is the smallest possible brand moment and
   the only place colour appears in the header. */
.sa-wordmark__joint { color: var(--season-accent); }

.sa-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	font-size: var(--step--1);
}

.sa-nav a:not(.sa-nav__search) { text-decoration: none; color: var(--ink-soft); }
.sa-nav a:not(.sa-nav__search):hover,
.sa-nav a:not(.sa-nav__search)[aria-current] { color: var(--ink); }

.sa-nav__search {
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
}
.sa-nav__search:hover { border-color: var(--ink); }

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

   Asymmetric and left-aligned. The search field is the hero, not a headline
   sitting above a decorative graphic.
   ------------------------------------------------------------------------ */

.sa-hero { padding: var(--gap-xl) 0 var(--gap-l); }

.sa-hero__title {
	max-width: 16ch;
	margin-bottom: var(--gap-m);
}

.sa-hero__lede {
	font-size: var(--step-1);
	color: var(--ink-soft);
	max-width: 46ch;
	margin-bottom: var(--gap-l);
}

.sa-hero__now {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-xs);
	font-size: var(--step--1);
	color: var(--ink-soft);
	margin-bottom: var(--gap-m);
}

.sa-hero__now::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--season-accent);
}

/* ---------------------------------------------------------------------------
   Search
   ------------------------------------------------------------------------ */

.sa-search { display: flex; gap: var(--gap-s); max-width: 44rem; flex-wrap: wrap; }

.sa-search__field {
	flex: 1 1 20rem;
	display: flex;
	align-items: center;
	gap: var(--gap-s);
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	padding: 0 var(--gap-m);
}

.sa-search__field:focus-within { border-color: var(--ink); }

.sa-search__input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	padding: 0.95rem 0;
}
.sa-search__input:focus { outline: none; }
.sa-search__input::placeholder { color: var(--ink-muted); }

.sa-button {
	font: inherit;
	font-weight: 500;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	padding: 0.95rem 1.5rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sa-button:hover { background: #000; }

.sa-button--quiet {
	background: none;
	color: var(--ink);
	border-color: var(--rule-strong);
}
.sa-button--quiet:hover { background: var(--sunk); border-color: var(--ink); }

/* ---------------------------------------------------------------------------
   Season cards
   ------------------------------------------------------------------------ */

.sa-seasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--gap-s);
	padding: 0;
	margin: 0 0 var(--gap-xl);
	list-style: none;
}

.sa-season-card {
	display: block;
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--gap-m);
	border-top: 4px solid var(--card-accent, var(--rule-strong));
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.sa-season-card:hover { border-color: var(--rule-strong); border-top-color: var(--card-accent); }

.sa-season-card__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--step-1);
	display: block;
}

.sa-season-card__count {
	font-size: var(--step--1);
	color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Beer cards

   The season strip on the left edge is the one repeated colour moment. Cards
   are otherwise plain so a wall of them stays readable.
   ------------------------------------------------------------------------ */

.sa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--gap-m);
	list-style: none;
	padding: 0;
	margin: 0;
}

.sa-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--card-accent, var(--rule-strong));
	border-radius: 0 var(--radius) var(--radius) 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sa-card:hover { border-color: var(--rule-strong); border-left-color: var(--card-accent); }

.sa-card__media {
	aspect-ratio: 4 / 3;
	background: var(--sunk);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.sa-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--gap-s); }

.sa-card__placeholder {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--step-2);
	color: var(--card-accent, var(--ink-muted));
	opacity: 0.35;
}

.sa-card__body { padding: var(--gap-m); display: flex; flex-direction: column; gap: var(--gap-xs); flex: 1; }

.sa-card__name { font-size: var(--step-1); }

.sa-card__name a { text-decoration: none; }
.sa-card__name a::after { content: ""; position: absolute; inset: 0; }
.sa-card__name a:hover { text-decoration: underline; }

.sa-card__brewery { color: var(--ink-soft); font-size: var(--step--1); }

.sa-card__meta { color: var(--ink-muted); font-size: var(--step--1); margin-top: auto; padding-top: var(--gap-xs); }

/* ---------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------ */

.sa-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--step--1);
	line-height: 1.3;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	width: fit-content;
}

.sa-badge--season {
	border-color: color-mix(in srgb, var(--card-accent, var(--season-accent)) 45%, var(--rule));
	background: color-mix(in srgb, var(--card-accent, var(--season-accent)) 10%, var(--surface));
	color: color-mix(in srgb, var(--card-accent, var(--season-accent)) 80%, var(--ink));
}

/* Availability is never conveyed by colour alone: each state has its own word
   and its own dot shape. */
.sa-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.sa-badge--stock .sa-badge__dot { background: var(--ok); }
.sa-badge--limited .sa-badge__dot { background: var(--caution); }
.sa-badge--unknown .sa-badge__dot { background: none; border: 1px solid var(--unknown); }

/* ---------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------ */

.sa-section { padding-bottom: var(--gap-xl); }

.sa-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gap-m);
	margin-bottom: var(--gap-m);
	padding-bottom: var(--gap-s);
	border-bottom: 1px solid var(--rule);
}

.sa-section__head h2 { font-size: var(--step-2); }

.sa-section__more { font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Beer detail
   ------------------------------------------------------------------------ */

.sa-beer {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--gap-xl);
	padding: var(--gap-l) 0 var(--gap-xl);
	align-items: start;
}

.sa-beer__media {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: var(--gap-m);
}

.sa-beer__brewery { font-size: var(--step-1); color: var(--ink-soft); text-decoration: none; }

.sa-beer__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-s) var(--gap-m);
	margin: var(--gap-m) 0 var(--gap-l);
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.sa-beer__specs dt { color: var(--ink-muted); }
.sa-beer__specs dd { margin: 0; font-weight: 500; color: var(--ink); }

.sa-panel {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--gap-m) var(--gap-l);
	margin-bottom: var(--gap-l);
}

.sa-panel h2 { font-size: var(--step-2); margin-bottom: var(--gap-s); }

/* Review module. The one place the site speaks in its own voice, so it gets a
   heavier treatment than anything else on the page. */
.sa-review { border-left: 4px solid var(--season-accent); border-radius: 0 var(--radius) var(--radius) 0; }

.sa-review__score {
	font-family: var(--display);
	font-size: var(--step-3);
	font-weight: 700;
	line-height: 1;
}

.sa-review__scale { font-size: var(--step--1); color: var(--ink-muted); font-family: var(--body); font-weight: 400; }

.sa-review__head { display: flex; align-items: baseline; gap: var(--gap-m); flex-wrap: wrap; margin-bottom: var(--gap-s); }

.sa-review__episode { font-size: var(--step--1); color: var(--ink-muted); }

/* Offers */
.sa-offers { list-style: none; margin: 0; padding: 0; }

.sa-offer {
	display: flex;
	align-items: center;
	gap: var(--gap-m);
	padding: var(--gap-m) 0;
	border-bottom: 1px solid var(--rule);
	flex-wrap: wrap;
}
.sa-offer:last-child { border-bottom: 0; }

.sa-offer__name { font-weight: 500; }
.sa-offer__detail { font-size: var(--step--1); color: var(--ink-muted); }
.sa-offer__price { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

.sa-offer__link { font-size: var(--step--1); }

.sa-sources { font-size: var(--step--1); color: var(--ink-muted); }
.sa-sources a { color: var(--ink-soft); }

.sa-stale { font-size: var(--step--1); color: var(--ink-muted); margin-top: var(--gap-m); }

/* ---------------------------------------------------------------------------
   Listing pages
   ------------------------------------------------------------------------ */

.sa-page-head {
	padding: var(--gap-xl) 0 var(--gap-l);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--gap-l);
}

.sa-page-head--season { border-top: 6px solid var(--season-accent); }

.sa-page-head__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 52ch; margin-top: var(--gap-s); }

.sa-filters { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-bottom: var(--gap-m); padding: 0; list-style: none; }

.sa-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--step--1);
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	text-decoration: none;
}
.sa-pill:hover { border-color: var(--ink); }

.sa-pagination { display: flex; gap: var(--gap-s); margin-top: var(--gap-l); align-items: center; }

.sa-count { color: var(--ink-muted); font-size: var(--step--1); margin-bottom: var(--gap-m); }

/* Empty and error states get direction, not an apology. */
.sa-empty {
	background: var(--surface);
	border: 1px dashed var(--rule-strong);
	border-radius: var(--radius);
	padding: var(--gap-xl) var(--gap-l);
	text-align: center;
}

.sa-empty h2 { font-size: var(--step-2); margin-bottom: var(--gap-s); }
.sa-empty p { margin-inline: auto; }
.sa-empty__actions { display: flex; gap: var(--gap-s); justify-content: center; flex-wrap: wrap; margin-top: var(--gap-m); }

/* ---------------------------------------------------------------------------
   Age gate

   The page renders normally underneath. This overlay is added by script only
   when a visitor has not confirmed, which keeps the content server-rendered
   and fully crawlable.
   ------------------------------------------------------------------------ */

.sa-gate[hidden] { display: none; }

.sa-gate {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: color-mix(in srgb, var(--ink) 92%, transparent);
	display: grid;
	place-items: center;
	padding: var(--gap-m);
}

.sa-gate__panel {
	background: var(--paper);
	border-radius: var(--radius);
	padding: var(--gap-xl) var(--gap-l);
	max-width: 30rem;
	text-align: center;
	border-top: 6px solid var(--season-accent);
}

.sa-gate__panel h2 { font-size: var(--step-2); margin-bottom: var(--gap-s); }
.sa-gate__panel p { margin-inline: auto; font-size: var(--step--1); color: var(--ink-soft); }
.sa-gate__actions { display: flex; gap: var(--gap-s); justify-content: center; flex-wrap: wrap; margin-top: var(--gap-m); }

.sa-gate__deny { font-size: var(--step--1); color: var(--ink-soft); }

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

.sa-footer {
	border-top: 1px solid var(--rule);
	padding: var(--gap-l) 0;
	margin-top: var(--gap-xl);
	font-size: var(--step--1);
	color: var(--ink-muted);
}

.sa-footer__links { display: flex; gap: var(--gap-m); flex-wrap: wrap; margin-bottom: var(--gap-s); }
.sa-footer__links a { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 60rem) {
	.sa-beer { grid-template-columns: 1fr; gap: var(--gap-l); }
	.sa-beer__media { aspect-ratio: 4 / 3; max-width: 22rem; }
}

@media (max-width: 40rem) {
	.sa-nav a:not(.sa-nav__browse) { display: none; }
	.sa-hero { padding-top: var(--gap-l); }
	.sa-panel { padding: var(--gap-m); }
	.sa-offer__price { margin-left: 0; width: 100%; }
}

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

/* ---------------------------------------------------------------------------
   Map

   The list below the map is not a fallback bolted on afterwards: it is the
   canonical rendering, and the map sits on top of it.
   ------------------------------------------------------------------------ */

.sa-map-block { margin-bottom: var(--gap-xl); }

.sa-map {
	height: clamp(18rem, 42vh, 28rem);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--sunk);
	z-index: 1;
}

.sa-map:empty::after {
	content: "";
	display: block;
	height: 100%;
}

.sa-map-list {
	margin-top: var(--gap-s);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	padding: var(--gap-s) var(--gap-m);
}

.sa-map-list summary {
	cursor: pointer;
	font-size: var(--step--1);
	color: var(--ink-soft);
	font-weight: 500;
}

.sa-map-list__items {
	list-style: none;
	margin: var(--gap-s) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--gap-xs) var(--gap-m);
	font-size: var(--step--1);
}

.sa-map-list__items li { padding: 0.2rem 0; }
.sa-map-list__place { color: var(--ink-muted); display: block; }

/* Leaflet renders its own controls; keep them from fighting the sticky header. */
.leaflet-container { font: inherit; }
.leaflet-top, .leaflet-bottom { z-index: 2; }

.sa-cities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--gap-s);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--step--1);
}

.sa-cities a { text-decoration: none; }
.sa-cities a:hover { text-decoration: underline; }
.sa-cities span { color: var(--ink-muted); display: block; }

/* ---------------------------------------------------------------------------
   Breadcrumbs and cross-links
   ------------------------------------------------------------------------ */

.sa-crumbs { padding-top: var(--gap-m); font-size: var(--step--1); }

.sa-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
	margin: 0;
	padding: 0;
	color: var(--ink-muted);
}

.sa-crumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--gap-xs);
	color: var(--rule-strong);
}

.sa-crumbs a { color: var(--ink-soft); }

.sa-pill__count {
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	font-size: 0.85em;
}

/* ===========================================================================
   v2 — colour, bottles and mobile

   Overrides and additions layered over the base above. The organising idea:
   the logo is four bottles in four colours, so the site is built from those
   four colours and that bottle shape, used consistently enough to feel like a
   system rather than decoration.
   ======================================================================== */

body { background: var(--paper); color: var(--ink); overflow-x: hidden; }
html { scroll-behavior: smooth; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }

:focus-visible { outline: 3px solid var(--season-accent); outline-offset: 3px; }

/* --- The four-season bar: the logo's repeating brand device -------------- */

.sa-seasonbar { display: flex; height: 6px; width: 100%; }
.sa-seasonbar span { flex: 1; }
.sa-seasonbar span:nth-child(1) { background: var(--spring); }
.sa-seasonbar span:nth-child(2) { background: var(--fall); }
.sa-seasonbar span:nth-child(3) { background: var(--summer); }
.sa-seasonbar span:nth-child(4) { background: var(--winter); }

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

.sa-header {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
}

.sa-header__inner { min-height: 4.5rem; gap: var(--gap-m); }

.sa-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sa-logo img { height: 2.4rem; width: auto; }

.sa-wordmark { font-size: 1.25rem; letter-spacing: -0.03em; }
.sa-wordmark__joint { color: var(--fall); }

.sa-nav { margin-left: auto; display: flex; align-items: center; gap: var(--gap-xs); }

.sa-nav__link {
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 500;
	padding: 0.45rem 0.85rem;
	border-radius: 99px;
	color: var(--ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Each season link carries its own colour, so the nav itself shows the palette. */
.sa-nav__link::before {
	content: "";
	width: 0.55rem; height: 0.55rem;
	border-radius: 50%;
	background: var(--nav-accent, var(--rule-strong));
	flex: none;
}

.sa-nav__link:hover, .sa-nav__link[aria-current] {
	background: color-mix(in srgb, var(--nav-accent, var(--ink)) 14%, transparent);
	color: color-mix(in srgb, var(--nav-accent, var(--ink)) 78%, var(--ink));
}

.sa-nav__search {
	background: var(--ink); color: #fff;
	border: 0; border-radius: 99px;
	padding: 0.55rem 1.1rem;
	font: inherit; font-size: var(--step--1); font-weight: 600;
	text-decoration: none; cursor: pointer;
	margin-left: var(--gap-xs);
}
.sa-nav__search:hover { background: var(--season-accent); }

/* --- Mobile drawer ------------------------------------------------------ */

.sa-burger {
	display: none;
	margin-left: auto;
	background: none;
	border: 1.5px solid var(--rule-strong);
	border-radius: 10px;
	padding: 0.6rem 0.7rem;
	cursor: pointer;
	color: var(--ink);
	min-height: 44px;
	min-width: 44px;
}

.sa-burger__bars, .sa-burger__bars::before, .sa-burger__bars::after {
	display: block; width: 20px; height: 2px;
	background: currentColor; border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.sa-burger__bars { position: relative; margin-inline: auto; }
.sa-burger__bars::before, .sa-burger__bars::after { content: ""; position: absolute; left: 0; }
.sa-burger__bars::before { top: -6px; }
.sa-burger__bars::after  { top: 6px; }
.sa-burger[aria-expanded="true"] .sa-burger__bars { background: transparent; }
.sa-burger[aria-expanded="true"] .sa-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.sa-burger[aria-expanded="true"] .sa-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.sa-drawer {
	position: fixed;
	inset: 4.5rem 0 0;
	background: var(--paper);
	z-index: 55;
	padding: var(--gap-l) 1rem calc(var(--gap-xl) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	display: none;
}
.sa-drawer[data-open="true"] { display: block; }

.sa-drawer__search { margin-bottom: var(--gap-l); }

.sa-drawer__seasons {
	list-style: none; margin: 0 0 var(--gap-l); padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-s);
}

.sa-drawer__season {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 7rem; padding: var(--gap-m);
	border-radius: var(--radius);
	text-decoration: none; color: #fff;
	background: var(--card-accent, var(--ink));
	font-family: var(--display); font-weight: 700; font-size: var(--step-1);
	overflow: hidden; isolation: isolate;
}

.sa-drawer__season svg { position: absolute; right: -0.5rem; top: -0.5rem; height: 6rem; opacity: 0.25; z-index: -1; }

.sa-drawer__links { list-style: none; margin: 0; padding: 0; }
.sa-drawer__links a {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--gap-m) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none; font-size: var(--step-1); font-weight: 600;
	min-height: 56px;
}

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

.sa-hero { position: relative; padding: var(--gap-xl) 0 var(--gap-l); }

.sa-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: color-mix(in srgb, var(--season-accent) 12%, var(--surface));
	color: color-mix(in srgb, var(--season-accent) 85%, var(--ink));
	border: 1.5px solid color-mix(in srgb, var(--season-accent) 35%, transparent);
	border-radius: 99px; padding: 0.35rem 0.9rem;
	font-size: var(--step--1); font-weight: 600;
	margin-bottom: var(--gap-m);
}

.sa-hero__eyebrow::before {
	content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
	background: var(--season-accent);
	animation: sa-pulse 2.4s ease-in-out infinite;
}

@keyframes sa-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.75); }
}

.sa-hero__title { max-width: 15ch; margin-bottom: var(--gap-m); }
.sa-hero__title em { font-style: normal; color: var(--season-accent); }
.sa-hero__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 44ch; margin-bottom: var(--gap-l); }

.sa-hero__bottles {
	position: absolute; right: 0; top: var(--gap-xl);
	display: flex; gap: 0.6rem; pointer-events: none;
}
.sa-hero__bottles svg { height: clamp(7rem, 15vw, 12rem); width: auto; }

/* --- Buttons and search ------------------------------------------------- */

.sa-search__field { border: 2px solid var(--rule-strong); border-radius: 99px; }
.sa-search__field:focus-within {
	border-color: var(--season-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--season-accent) 18%, transparent);
}

.sa-button {
	font-weight: 600;
	border: 2px solid var(--season-accent);
	background: var(--season-accent);
	color: #fff;
	border-radius: 99px;
	padding: 0.85rem 1.6rem;
	gap: 0.5rem;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.sa-button:hover { background: var(--season-accent); filter: brightness(0.92); transform: translateY(-1px); }
.sa-button--quiet { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.sa-button--quiet:hover { border-color: var(--season-accent); color: var(--season-accent); filter: none; }
.sa-button--ink { background: var(--ink); border-color: var(--ink); }
.sa-button--ink:hover { background: var(--ink); }

/* --- Season cards ------------------------------------------------------- */

.sa-seasons { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--gap-m); }

.sa-season-card {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 11rem; padding: var(--gap-m);
	border: 0; border-radius: var(--radius);
	color: #fff; background: var(--card-accent, var(--ink));
	overflow: hidden; isolation: isolate;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sa-season-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px var(--card-accent); }

.sa-season-card__bottle { position: absolute; right: -0.75rem; top: -1rem; height: 9.5rem; opacity: 0.25; z-index: -1; }
.sa-season-card__name { font-size: var(--step-2); line-height: 1; }
.sa-season-card__count { opacity: 0.85; margin-top: 0.25rem; }

/* --- Beer cards --------------------------------------------------------- */

.sa-card {
	border: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
	border-radius: var(--radius);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sa-card::before { content: ""; display: block; height: 5px; background: var(--card-accent, var(--rule-strong)); }

.sa-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--card-accent, var(--rule-strong)) 45%, var(--rule));
	box-shadow: 0 18px 32px -24px var(--card-accent, var(--ink));
}

.sa-card__media { background: color-mix(in srgb, var(--card-accent, var(--sunk)) 8%, var(--surface)); }
.sa-card__media svg { height: 78%; width: auto; opacity: 0.4; }

/* --- Section headings get a colour dot ---------------------------------- */

.sa-section__head { border-bottom: 0; padding-bottom: 0; flex-wrap: wrap; }
.sa-section__head h2 { font-size: var(--step-3); display: inline-flex; align-items: center; gap: 0.6rem; }
.sa-section__head h2::before {
	content: ""; width: 0.68em; height: 0.68em; border-radius: 50%;
	background: var(--section-accent, var(--season-accent)); flex: none;
}
.sa-section__more { color: var(--season-accent); font-weight: 600; text-decoration: none; }
.sa-section__more:hover { text-decoration: underline; }

/* --- Badges ------------------------------------------------------------- */

.sa-badge { font-weight: 600; border-width: 1.5px; padding: 0.22rem 0.65rem; }
.sa-badge--season {
	border-color: color-mix(in srgb, var(--card-accent, var(--season-accent)) 55%, transparent);
	background: color-mix(in srgb, var(--card-accent, var(--season-accent)) 12%, var(--surface));
	color: color-mix(in srgb, var(--card-accent, var(--season-accent)) 80%, var(--ink));
}
.sa-badge--stock { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.sa-badge--limited { border-color: color-mix(in srgb, var(--caution) 45%, transparent); color: var(--caution); }
.sa-badge--unknown { color: var(--ink-muted); }
.sa-badge--unknown .sa-badge__dot { background: none; border: 1.5px solid currentColor; }

/* --- Beer detail -------------------------------------------------------- */

.sa-beer__media {
	background: color-mix(in srgb, var(--card-accent, var(--sunk)) 10%, var(--surface));
	border-top: 6px solid var(--card-accent, var(--rule-strong));
	border-radius: var(--radius);
}
.sa-beer__media svg { height: 80%; width: auto; }

.sa-beer__specs { gap: var(--gap-s); }
.sa-beer__specs > div {
	background: var(--surface); border: 1px solid var(--rule);
	border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; min-width: 6rem;
}
.sa-beer__specs dd { font-family: var(--display); font-weight: 700; }

.sa-panel { border-radius: var(--radius); }

.sa-review {
	border: 0;
	border-left: 6px solid var(--season-accent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--season-accent) 14%, var(--surface)), var(--surface));
}
.sa-review__score { color: var(--season-accent); }

.sa-offer__price { font-family: var(--display); font-weight: 700; }
.sa-offer__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* --- Listing pages ------------------------------------------------------ */

.sa-page-head { border-bottom: 0; }

.sa-page-head--season {
	border-top: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--season-accent) 14%, var(--paper)), var(--paper));
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1rem, calc(50vw - var(--shell) / 2));
	border-bottom: 1px solid var(--rule);
}

.sa-pill { border-width: 1.5px; font-weight: 500; padding: 0.35rem 0.85rem; }
.sa-pill:hover { border-color: var(--card-accent, var(--season-accent)); color: var(--card-accent, var(--season-accent)); }

.sa-empty { border: 2px dashed var(--rule-strong); border-radius: var(--radius); }
.sa-empty__bottles { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: var(--gap-m); }
.sa-empty__bottles svg { height: 3.5rem; width: auto; opacity: 0.55; }

.sa-cities a {
	display: block; background: var(--surface);
	border: 1px solid var(--rule); border-left: 4px solid var(--season-accent);
	border-radius: var(--radius-sm); padding: var(--gap-s) var(--gap-m);
	text-decoration: none; font-weight: 600;
	transition: transform 0.15s ease;
}
.sa-cities a:hover { transform: translateX(3px); }
.sa-cities span { font-weight: 400; }

/* --- Age gate ----------------------------------------------------------- */

.sa-gate__panel { border-top: 0; padding: 0 var(--gap-l) var(--gap-l); overflow: hidden; }
.sa-gate__bottles { display: flex; justify-content: center; gap: 0.4rem; margin: var(--gap-l) 0 var(--gap-m); }
.sa-gate__bottles svg { height: 3.5rem; width: auto; }

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

.sa-footer { background: var(--sunk); padding-bottom: var(--gap-xl); }
.sa-footer__links a { font-weight: 500; }

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 64rem) {
	.sa-hero__bottles { position: static; margin-top: var(--gap-l); justify-content: flex-start; }
	.sa-hero__bottles svg { height: 6rem; }
	.sa-hero__title { max-width: none; }
}

@media (max-width: 48rem) {
	.sa-nav { display: none; }
	.sa-burger { display: block; }

	.sa-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--gap-s); }
	.sa-card__body { padding: var(--gap-s); }
	.sa-seasons { grid-template-columns: repeat(2, 1fr); gap: var(--gap-s); }
	.sa-season-card { min-height: 8.5rem; }
	.sa-season-card__bottle { height: 7rem; }

	.sa-search { flex-direction: column; }
	.sa-search__field { flex: 1 1 auto; }
	.sa-button { width: 100%; padding: 0.95rem 1.5rem; }

	.sa-offer { align-items: flex-start; }
	.sa-offer__price { margin-left: 0; width: auto; }
	.sa-offer__link { width: 100%; }

	.sa-cities { grid-template-columns: 1fr 1fr; }
	.sa-map { height: 15rem; }
	.sa-map-list__items { grid-template-columns: 1fr; }

	/* Comfortable thumb targets on every control. */
	.sa-pill, .sa-nav__link, .sa-map-list summary, .sa-footer__links a { min-height: 44px; }
	.sa-pill { padding-inline: 1rem; }
	.sa-crumbs { font-size: var(--step--1); }
}

@media (max-width: 30rem) {
	.sa-cities { grid-template-columns: 1fr; }
	.sa-beer__specs > div { flex: 1 1 45%; }
	.sa-hero__bottles svg { height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sa-card:hover, .sa-season-card:hover, .sa-cities a:hover, .sa-button:hover { transform: none; }
}

/* ===========================================================================
   v2.1 — contrast, logo scale and the bottles artwork
   ======================================================================== */

.sa-logo img { height: 4rem; width: auto; }

/* The bottles row can be a single artwork file matching the logo, or the
   built-in vectors when no image is configured. */
.sa-bottles-img { height: auto; width: auto; max-width: 100%; }
.sa-hero__bottles .sa-bottles-img { height: clamp(6rem, 14vw, 11rem); width: auto; }
.sa-empty__bottles .sa-bottles-img { height: 4rem; width: auto; opacity: 0.75; }
.sa-gate__bottles .sa-bottles-img { height: 4rem; width: auto; }
.sa-drawer__season .sa-bottles-img { display: none; }

/* Anything sitting on a filled colour uses white, never the muted ink. Grey
   text on a saturated background is the most common contrast failure and it
   was showing up in the header, the season cards and the drawer. */
.sa-nav__search,
.sa-nav__search:hover,
.sa-nav__search:focus,
.sa-button,
.sa-button:hover,
.sa-button:focus,
.sa-season-card,
.sa-season-card:hover,
.sa-season-card .sa-season-card__name,
.sa-season-card .sa-season-card__count,
.sa-drawer__season,
.sa-drawer__season:hover,
.sa-gate .sa-gate__panel .sa-button {
	color: #fff;
}

/* The quiet button is the deliberate exception: it has no fill, so it keeps
   ink-coloured text. */
.sa-button--quiet,
.sa-button--quiet:hover,
.sa-button--quiet:focus { color: var(--ink); }
.sa-button--quiet:hover { color: var(--season-accent); }

.sa-season-card__count { opacity: 0.92; }

/* Focus rings need to stay visible on top of a colour fill. */
.sa-season-card:focus-visible,
.sa-drawer__season:focus-visible,
.sa-nav__search:focus-visible,
.sa-button:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.sa-button:focus-visible { outline-color: var(--ink); }

@media (max-width: 48rem) {
	.sa-logo img { height: 3rem; }
}

.sa-drawer__bottle { position: absolute; right: -0.5rem; top: -0.5rem; height: 6rem; opacity: 0.28; z-index: -1; }

/* ===========================================================================
   v3 — Phase 1: hierarchy, icons, touch, contrast

   Scope is deliberately Phase 1 of the brief: mobile-first hierarchy, the
   hero and search, the season switcher, card redesign, typography, spacing and
   accessibility. The seasonal illustration system in Phase 2 needs real
   artwork, not CSS.
   ======================================================================== */

/* --- Icons -------------------------------------------------------------- */

.sa-icon { display: inline-block; vertical-align: middle; flex: none; }

/* --- Search button contrast --------------------------------------------- */

/* .sa-nav a is a class plus an element, so it outranks a bare class. Matching
   that specificity is the only way the white actually applies. */
.sa-nav a.sa-nav__search,
.sa-nav a.sa-nav__search:hover,
.sa-nav a.sa-nav__search:focus,
.sa-nav a.sa-nav__search:visited { color: #fff; }

.sa-nav__search {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--ink);
	border: 0;
	border-radius: 99px;
	padding: 0.6rem 1.15rem;
	font-weight: 600;
	text-decoration: none;
}
.sa-nav__search:hover { background: var(--season-accent); }

/* Anything on a filled colour takes white; the outlined button is the one
   deliberate exception. */
.sa-button, .sa-season-card, .sa-drawer__season, .sa-dock,
.sa-season-card__name, .sa-season-card__count { color: #fff; }
.sa-button--quiet { color: var(--ink); }
.sa-button--quiet:hover { color: var(--season-accent); }

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

.sa-nav__link { display: inline-flex; align-items: center; gap: 0.4rem; }
.sa-nav__link::before { display: none; }
.sa-nav__icon { color: var(--nav-accent, var(--ink-muted)); }
.sa-nav__link:hover .sa-nav__icon,
.sa-nav__link[aria-current] .sa-nav__icon { color: var(--nav-accent, var(--ink)); }

.sa-nav__link[aria-current] {
	background: color-mix(in srgb, var(--nav-accent, var(--ink)) 14%, transparent);
	font-weight: 600;
}

.sa-nav__link--plain { --nav-accent: var(--ink-soft); }

/* --- Mobile drawer ------------------------------------------------------ */

html.sa-locked, html.sa-locked body { overflow: hidden; }

.sa-drawer__inner { max-width: 34rem; margin-inline: auto; }

.sa-drawer__season {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	min-height: 7.5rem;
	padding: var(--gap-m);
	border-radius: var(--radius);
	text-decoration: none;
	background: var(--card-accent, var(--ink));
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--step-1);
	overflow: hidden;
}

.sa-drawer__icon { opacity: 0.9; }

.sa-drawer__now {
	font-family: var(--body);
	font-size: var(--step--1);
	font-weight: 600;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 99px;
	padding: 0.1rem 0.55rem;
}

.sa-drawer__links a { display: flex; align-items: center; min-height: 56px; }

/* --- Sticky search dock ------------------------------------------------- */

/* Search is one of the site's two core jobs, so it stays reachable after the
   hero scrolls away rather than being buried at the top. */
.sa-dock {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 150%);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--ink);
	border-radius: 99px;
	padding: 0.85rem 1.4rem;
	font-weight: 600;
	font-size: var(--step--1);
	text-decoration: none;
	box-shadow: 0 10px 30px -12px rgba(33, 58, 79, 0.6);
	transition: transform 0.25s ease;
}

.sa-dock[data-visible="true"] { transform: translate(-50%, 0); }
.sa-dock:hover { background: var(--season-accent); }

@media (min-width: 56rem) { .sa-dock { display: none; } }

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

.sa-hero { position: relative; }
.sa-hero__mark { position: absolute; right: 0; top: var(--gap-xl); pointer-events: none; }
.sa-hero__icon { color: var(--season-accent); opacity: 0.16; }

.sa-hero__title { font-size: clamp(2.5rem, 1.1rem + 6vw, 5rem); line-height: 0.98; }

/* --- Season switcher ---------------------------------------------------- */

.sa-season-card__icon {
	position: absolute;
	right: -0.25rem;
	bottom: -0.25rem;
	width: 4.75rem;
	height: 4.75rem;
	opacity: 0.4;
	z-index: -1;
}

.sa-season-card {
	min-height: 10rem;
	justify-content: flex-end;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sa-season-card:active { transform: scale(0.98); }

/* --- Section headings --------------------------------------------------- */

.sa-section__head h2 { display: flex; align-items: center; gap: 0.55rem; }
.sa-section__icon { color: var(--section-accent, var(--season-accent)); display: inline-flex; }
.sa-section__lede { color: var(--ink-soft); margin: -0.5rem 0 var(--gap-m); max-width: 54ch; }

/* --- Cards -------------------------------------------------------------- */

.sa-card__media { aspect-ratio: 1 / 1; }
.sa-card__icon { color: var(--card-accent, var(--ink-muted)); opacity: 0.45; }
.sa-card__name { font-size: var(--step-1); line-height: 1.2; }
.sa-card__brewery { font-weight: 500; color: var(--ink-soft); }

.sa-card__foot {
	margin-top: auto;
	padding-top: var(--gap-xs);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	align-items: flex-start;
}

.sa-card__meta { margin: 0; padding: 0; }
.sa-badge { gap: 0.3rem; }

/* A pressed state that is unmistakable on touch, where hover does not exist. */
.sa-card:active { transform: scale(0.985); }

/* --- Beer detail -------------------------------------------------------- */

.sa-beer__icon { color: var(--card-accent, var(--ink-muted)); opacity: 0.4; }

.sa-backlink { margin: 0 0 var(--gap-l); }
.sa-backlink a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	font-size: var(--step--1);
	color: var(--season-accent);
	text-decoration: none;
	border: 1.5px solid color-mix(in srgb, var(--season-accent) 35%, transparent);
	border-radius: 99px;
	padding: 0.5rem 1rem;
	min-height: 44px;
}
.sa-backlink a:hover { background: color-mix(in srgb, var(--season-accent) 10%, transparent); }

/* --- Page heads --------------------------------------------------------- */

.sa-page-head__mark { display: inline-flex; margin-bottom: var(--gap-s); }
.sa-page-head__icon { color: var(--season-accent); }
.sa-page-head--plain .sa-page-head__icon { color: var(--ink-soft); }

/* --- How it works ------------------------------------------------------- */

.sa-how {
	border-top: 1px solid var(--rule);
	padding: var(--gap-l) 0 var(--gap-xl);
	margin-top: var(--gap-l);
}
.sa-how h2 { font-size: var(--step-2); margin-bottom: var(--gap-s); }
.sa-how p { color: var(--ink-soft); max-width: 52ch; }

/* --- Empty and gate marks ----------------------------------------------- */

.sa-empty__mark, .sa-gate__mark { display: inline-flex; color: var(--ink-muted); margin-bottom: var(--gap-s); }
.sa-gate__mark { color: var(--season-accent); margin-top: var(--gap-l); }

/* --- Focus -------------------------------------------------------------- */

/* Visible on both paper and a saturated fill. */
.sa-season-card:focus-visible,
.sa-drawer__season:focus-visible,
.sa-dock:focus-visible,
.sa-nav a.sa-nav__search:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 56rem) {
	.sa-nav { display: none; }
	.sa-burger { display: block; }
}

@media (max-width: 48rem) {
	/* Two columns, but only because card artwork stays large at this size. */
	.sa-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-s); }
	.sa-card__body { padding: var(--gap-s) var(--gap-s) var(--gap-m); }
	.sa-card__name { font-size: var(--step-0); }

	.sa-seasons { grid-template-columns: repeat(2, 1fr); }
	.sa-season-card { min-height: 7.5rem; }

	.sa-hero { padding-top: var(--gap-l); }
	.sa-hero__mark { position: static; display: block; margin-bottom: var(--gap-s); }
	.sa-hero__icon { width: 4.5rem; height: 4.5rem; opacity: 0.9; }
	.sa-hero__lede { font-size: var(--step-0); }

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

	/* Comfortable thumb targets throughout. */
	.sa-pill, .sa-nav__link, .sa-footer__links a, .sa-map-list summary { min-height: 44px; }
}

@media (max-width: 26rem) {
	.sa-grid { grid-template-columns: 1fr; }
	.sa-card__media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-dock { transition: none; }
	.sa-card:active, .sa-season-card:active { transform: none; }
}

/* ===========================================================================
   v3.1 — hero artwork and horizontal cards
   ======================================================================== */

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

   The arm enters from the right, so the layer is anchored to the right edge of
   the viewport rather than to the content column. Using `right: calc(50% -
   50vw)` breaks the element out of the centred shell without needing a
   full-width wrapper, so the arm reads as continuing off the screen at every
   width.

   `contain` keeps the whole arm and bottle visible; cropping it would cut the
   hand off on narrow screens, which is the one part that has to stay whole.

   The source file is a white-background JPEG-style PNG with no alpha, so
   `multiply` blending is what stops it appearing as a white rectangle on the
   paper background. A transparent PNG would not need this, and would look
   better on the seasonal tints. */

.sa-hero--image { position: relative; isolation: isolate; }

.sa-hero--image::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(50% - 50vw);
	width: min(62vw, 54rem);
	background-image: var(--hero-image);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	mix-blend-mode: multiply;
	z-index: -1;
	pointer-events: none;
}

/* Text stays in the left half so the two never overlap. */
@media (min-width: 56rem) {
	.sa-hero--image .sa-hero__title,
	.sa-hero--image .sa-hero__lede,
	.sa-hero--image .sa-hero__eyebrow,
	.sa-hero--image .sa-search { max-width: min(100%, 34rem); }

	.sa-hero--image { min-height: 30rem; display: flex; flex-direction: column; justify-content: center; }
}

/* On a phone there is no room beside the arm, so it sits behind the words at
   low contrast instead of competing with them. */
@media (max-width: 56rem) {
	.sa-hero--image::before {
		width: 92vw;
		opacity: 0.2;
		background-position: right top;
	}

	.sa-hero--image { padding-top: var(--gap-l); }
}

/* --- Horizontal beer cards ---------------------------------------------

   Artwork left, information right. Two per row rather than four, but each row
   is far shorter, so the same number of beers stays in view while every one of
   them is easier to read. */

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

.sa-card--row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	align-items: stretch;
	border-radius: var(--radius);
	overflow: hidden;
}

/* The season stripe runs down the left edge instead of across the top. */
.sa-card--row::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	height: auto;
	background: var(--card-accent, var(--rule-strong));
	z-index: 1;
}

.sa-card--row .sa-card__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 7.5rem;
	padding: var(--gap-s) var(--gap-s) var(--gap-s) calc(var(--gap-s) + 5px);
}

.sa-card--row .sa-card__body {
	padding: var(--gap-s) var(--gap-m);
	gap: 0.15rem;
	justify-content: center;
}

.sa-card--row .sa-card__name { font-size: var(--step-0); line-height: 1.25; }
.sa-card--row .sa-card__brewery { font-size: var(--step--1); }

.sa-card--row .sa-card__foot {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	padding-top: 0.35rem;
}

.sa-card--row .sa-badge { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
.sa-card--row .sa-card__meta { font-size: 0.75rem; }

@media (max-width: 64rem) {
	.sa-card--row { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* One per row on phones, with everything a step smaller. */
@media (max-width: 48rem) {
	.sa-grid { grid-template-columns: 1fr; gap: var(--gap-s); }

	.sa-card--row { grid-template-columns: 5.5rem minmax(0, 1fr); }
	.sa-card--row .sa-card__media { min-height: 5.5rem; }
	.sa-card--row .sa-card__name { font-size: 0.9375rem; }
	.sa-card--row .sa-card__brewery { font-size: 0.8125rem; }
	.sa-card--row .sa-badge,
	.sa-card--row .sa-card__meta { font-size: 0.7rem; }
	.sa-card--row .sa-card__body { padding: var(--gap-s); }
}

@media (max-width: 26rem) {
	/* Overrides the earlier single-column rule so the row layout is kept. */
	.sa-card--row .sa-card__media { aspect-ratio: auto; min-height: 5rem; }
	.sa-card--row { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ===========================================================================
   v3.2 — accounts, claims and forms
   ======================================================================== */

.sa-narrow { max-width: 54rem; }

/* --- Notices ------------------------------------------------------------ */

.sa-notice {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 5px solid var(--rule-strong);
	border-radius: var(--radius);
	padding: var(--gap-m) var(--gap-l);
	margin-bottom: var(--gap-l);
}

.sa-notice h2 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.sa-notice p:last-child { margin-bottom: 0; }
.sa-notice--good { border-left-color: var(--ok); }
.sa-notice--bad { border-left-color: var(--fall); }

/* --- Forms -------------------------------------------------------------- */

.sa-field { display: block; margin-bottom: var(--gap-m); }

.sa-field > span {
	display: block;
	font-weight: 600;
	font-size: var(--step--1);
	margin-bottom: 0.35rem;
}

.sa-field input,
.sa-field textarea {
	width: 100%;
	font: inherit;
	color: inherit;
	background: var(--surface);
	border: 2px solid var(--rule-strong);
	border-radius: var(--radius-sm);
	padding: 0.7rem 0.85rem;
	min-height: 44px;
}

.sa-field textarea { min-height: 6rem; resize: vertical; }

.sa-field input:focus,
.sa-field textarea:focus {
	outline: none;
	border-color: var(--season-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--season-accent) 18%, transparent);
}

.sa-field small { display: block; color: var(--ink-muted); font-size: var(--step--1); margin-top: 0.3rem; }

/* --- Signup ------------------------------------------------------------- */

/* Two cards side by side on desktop so the choice is a comparison, stacked on
   mobile so neither is squeezed. */
.sa-signup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--gap-m);
	align-items: start;
}

.sa-signup__card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--gap-l);
}

.sa-signup__icon { display: inline-flex; color: var(--season-accent); margin-bottom: var(--gap-s); }
.sa-signup__card h2 { font-size: var(--step-2); margin-bottom: 0.35rem; }

.sa-signup__list {
	list-style: none;
	margin: 0 0 var(--gap-m);
	padding: 0;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.sa-signup__list li { padding-left: 1.35rem; position: relative; margin-bottom: 0.35rem; }

.sa-signup__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--season-accent);
}

.sa-signup__note {
	font-size: var(--step--1);
	color: var(--ink-muted);
	background: var(--sunk);
	border-radius: var(--radius-sm);
	padding: var(--gap-s) var(--gap-m);
	margin-bottom: var(--gap-m);
}

/* --- Claim prompt ------------------------------------------------------- */

.sa-claim-cta {
	display: flex;
	align-items: center;
	gap: var(--gap-s);
	flex-wrap: wrap;
	margin-bottom: var(--gap-l);
}

.sa-claim-cta__note { font-size: var(--step--1); color: var(--ink-muted); }

@media (max-width: 48rem) {
	.sa-signup__card { padding: var(--gap-m); }
	.sa-claim-cta .sa-button { width: 100%; }
}

/* ===========================================================================
   v3.3 — beer lightbox
   ======================================================================== */

.sa-lightbox[hidden] { display: none; }

.sa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: color-mix(in srgb, var(--ink) 72%, transparent);
	backdrop-filter: blur(3px);
	display: grid;
	place-items: center;
	padding: var(--gap-m);
	overflow-y: auto;
	animation: sa-fade 0.18s ease;
}

@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }

.sa-lightbox__panel {
	position: relative;
	background: var(--paper);
	border-radius: var(--radius);
	width: min(100%, 62rem);
	max-height: min(92vh, 60rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
	animation: sa-rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes sa-rise {
	from { transform: translateY(14px) scale(0.99); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.sa-lightbox__close {
	position: sticky;
	top: var(--gap-s);
	float: right;
	margin: var(--gap-s) var(--gap-s) 0 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.sa-lightbox__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.sa-lightbox__body { padding: 0 var(--gap-m) var(--gap-l); }

/* The beer template's own shell would re-centre inside the panel, so it is
   neutralised here rather than being given a second set of markup. */
.sa-lightbox__body .sa-shell { width: 100%; margin: 0; }
.sa-lightbox__body .sa-crumbs { display: none; }
.sa-lightbox__body .sa-beer { padding-top: var(--gap-s); }

/* --- Brewing indicator --------------------------------------------------

   A glass filling while the request is in flight. It is a status region, so a
   screen reader hears "Brewing…" rather than nothing at all. */

.sa-brewing { display: grid; place-items: center; gap: var(--gap-m); padding: var(--gap-xl) 0; }

.sa-brewing__glass {
	position: relative;
	width: 3.5rem;
	height: 4.5rem;
	border: 3px solid var(--ink-soft);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	background: color-mix(in srgb, var(--season-accent) 12%, transparent);
}

/* Filling liquid. */
.sa-brewing__glass::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 20%;
	background: var(--season-accent);
	animation: sa-fill 1.6s ease-in-out infinite;
}

@keyframes sa-fill {
	0%, 100% { height: 22%; }
	50% { height: 74%; }
}

/* Bubbles rising through it. */
.sa-brewing__glass span {
	position: absolute;
	bottom: 12%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--paper) 75%, var(--season-accent));
	animation: sa-bubble 1.9s ease-in infinite;
}

.sa-brewing__glass span:nth-child(1) { left: 22%; animation-delay: 0s; }
.sa-brewing__glass span:nth-child(2) { left: 48%; animation-delay: 0.45s; }
.sa-brewing__glass span:nth-child(3) { left: 70%; animation-delay: 0.9s; }

@keyframes sa-bubble {
	0% { transform: translateY(0) scale(0.6); opacity: 0; }
	25% { opacity: 1; }
	100% { transform: translateY(-2.6rem) scale(1); opacity: 0; }
}

.sa-brewing__text {
	font-family: var(--display);
	font-weight: 700;
	color: var(--ink-soft);
	margin: 0;
}

@media (max-width: 48rem) {
	.sa-lightbox { padding: 0; align-items: end; }

	.sa-lightbox__panel {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--radius) var(--radius) 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.sa-lightbox__body { padding: 0 var(--gap-s) var(--gap-l); }
}

@media (prefers-reduced-motion: reduce) {
	.sa-lightbox, .sa-lightbox__panel { animation: none; }
	.sa-brewing__glass::after, .sa-brewing__glass span { animation: none; }
	.sa-brewing__glass::after { height: 55%; }
}