/*
==========================================================================
WAX WINGS BREWING CO. - SHARED WEBSITE STYLES
==========================================================================

PURPOSE
-------
This file controls the visual appearance and responsive behavior of every
HTML page in the Wax Wings Brewing Co. website package.

The code is designed to be SELF-DOCUMENTING:
- Important numeric values use descriptive aliases whenever practical.
- Major sections explain what part of the website they control.
- Literal values are retained only when they are highly specific to one
	element or when CSS syntax does not reliably support an alias.

--------------------------------------------------------------------------
HOW TO READ A CSS RULE
--------------------------------------------------------------------------

.example-selector {
	width: var(--example-width);
}

.example-selector
= the SELECTOR. It tells CSS which HTML element/class to style.

width
= the PROPERTY. It tells the browser what characteristic is being changed.

var(--example-width)
= the VALUE. The descriptive alias tells the editor what the number
	represents without requiring them to memorize the number itself.

--------------------------------------------------------------------------
COMMON UNITS
--------------------------------------------------------------------------

px
= CSS pixels. Used for precise dimensions, spacing, borders, and breakpoints.

rem
= relative to the browser's base font size.
	Most browsers use approximately 16px for 1rem.

%
= percentage of the available parent/container space.

vw
= percentage of the browser viewport width.

vh
= percentage of the browser viewport height.

fr
= fraction of available CSS Grid space.

--------------------------------------------------------------------------
RESPONSIVE BREAKPOINTS
--------------------------------------------------------------------------

1400px = large desktop / maximum normal site width
1200px = laptop / narrower desktop
1024px = compact laptop / landscape tablet
900px = tablet
768px = portrait tablet / large phone
640px = normal phone
480px = small phone
360px = very narrow phone / safety layout

CSS custom properties cannot reliably be used directly inside traditional
@media conditions, so breakpoint values remain literal.
==========================================================================	*/


/*
==========================================================================
1. GLOBAL DESIGN VALUES
==========================================================================
Stores reusable colors, dimensions, spacing, typography, animation timing,
and proportions used throughout the website.

Changing an alias here changes every rule that references that alias.
==========================================================================	*/

:root {
	/*
	----------------------------------------------------------------------
	BACKGROUND COLOR
	RGB channels use a 0-255 scale:
	0 = none of that color
	255 = maximum amount of that color
	----------------------------------------------------------------------	*/
	
	--background-red-channel: 5;
	--background-green-channel: 5;
	--background-blue-channel: 5;
	
	--background-color: rgb(
		var(--background-red-channel),
		var(--background-green-channel),
		var(--background-blue-channel)
	);
	
	
	/*
	----------------------------------------------------------------------
	MAIN PANEL COLOR
	opacity uses a 0-1 scale:
	0 = completely transparent
	1 = completely opaque
	----------------------------------------------------------------------	*/

	
	--panel-red-channel: 16;
	--panel-green-channel: 16;
	--panel-blue-channel: 16;
	--panel-opacity: 0.88;
	
	--panel-color: rgba(
		var(--panel-red-channel),
		var(--panel-green-channel),
		var(--panel-blue-channel),
		var(--panel-opacity)
	);
	
	
	/* Secondary warm-toned panel. */
	
	--secondary-panel-red-channel: 30;
	--secondary-panel-green-channel: 22;
	--secondary-panel-blue-channel: 16;
	--secondary-panel-opacity: 0.82;
	
	--secondary-panel-color: rgba(
		var(--secondary-panel-red-channel),
		var(--secondary-panel-green-channel),
		var(--secondary-panel-blue-channel),
		var(--secondary-panel-opacity)
	);
	
	
	/* Main off-white text. */
	
	--text-red-channel: 242;
	--text-green-channel: 234;
	--text-blue-channel: 217;
	
	--text-color: rgb(
		var(--text-red-channel),
		var(--text-green-channel),
		var(--text-blue-channel)
	);
	
	
	/* Softer secondary text. */
	
	--muted-text-red-channel: 214;
	--muted-text-green-channel: 200;
	--muted-text-blue-channel: 168;
	
	--muted-text-color: rgb(
		var(--muted-text-red-channel),
		var(--muted-text-green-channel),
		var(--muted-text-blue-channel)
	);
	
	
	/* Shared divider and border color. */
	
	--divider-red-channel: 222;
	--divider-green-channel: 205;
	--divider-blue-channel: 169;
	--divider-opacity: 0.40;
	
	--divider-color: rgba(
		var(--divider-red-channel),
		var(--divider-green-channel),
		var(--divider-blue-channel),
		var(--divider-opacity)
	);
	
	
	/* Standard Wax Wings gold. */
	
	--accent-red-channel: 210;
	--accent-green-channel: 180;
	--accent-blue-channel: 124;
	
	--accent-color: rgb(
		var(--accent-red-channel),
		var(--accent-green-channel),
		var(--accent-blue-channel)
	);
	
	
	/* Brighter gold used for emphasis on hover state. */
	
	--accent-strong-red-channel: 228;
	--accent-strong-green-channel: 201;
	--accent-strong-blue-channel: 143;
	
	--accent-strong-color: rgb(
		var(--accent-strong-red-channel),
		var(--accent-strong-green-channel),
		var(--accent-strong-blue-channel)
	);
	
	
	/*
	----------------------------------------------------------------------
	SITE-WIDE DIMENSIONS
	----------------------------------------------------------------------	*/
	
	
	--site-maximum-width-desktop: 1400px;
	
	--full-container-width: 100%;
	--full-viewport-height: 100vh;
	
	--standard-border-width: 1px;
	
	--standard-rounded-corner-radius: 8px;
	
	
	/*
	----------------------------------------------------------------------
	SPACING SCALE
	These recurring spacing values help keep the site visually consistent.
	----------------------------------------------------------------------	*/
	
	--spacing-tiny: 4px;
	--spacing-extra-small: 8px;
	--spacing-small: 10px;
	--spacing-small-medium: 12px;
	--spacing-medium: 14px;
	--spacing-medium-large: 18px;
	--spacing-large: 20px;
	--spacing-extra-large: 24px;
	--spacing-section: 28px;
	--spacing-wide-section: 34px;
	--spacing-extra-wide: 36px;
	
	
	/*
	----------------------------------------------------------------------
	TYPOGRAPHY AND INTERACTION
	----------------------------------------------------------------------	*/
	
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	
	--transition-fast-duration: 0.18s;
	--photo-fade-duration: 0.5s;
	
	
	/*
	----------------------------------------------------------------------
	HEADER AND NAVIGATION
	----------------------------------------------------------------------	*/
	
	--header-logo-width-desktop: 360px;
	
	--header-side-panel-width-desktop: 320px;
	--header-side-panel-height-desktop: 344.7px;
	
	--header-panel-top-offset-desktop: 24px;
	--header-panel-horizontal-offset-desktop: 28px;
	
	--navigation-link-vertical-padding-desktop: 18px;
	--navigation-link-horizontal-padding-desktop: 26px;
	
	
	/*
	----------------------------------------------------------------------
	PAGE AND IMAGE DIMENSIONS
	----------------------------------------------------------------------	*/
	
	--hero-minimum-height-desktop: 210px;
	
	--home-image-area-height-desktop: 340px;
	
	--taproom-map-height-desktop: 220px;
	
	--taproom-visual-maximum-width: 320px;
	
	--featured-beer-photo-height-desktop: 330px;
	
	--staff-slideshow-height-desktop: 300px;
	
	--staff-slideshow-horizontal-inset-total: 72px;
	
	--events-calendar-height-desktop: 650px;
	
	--sell-sheet-button-minimum-width-desktop: 270px;
	
	
	/*
	----------------------------------------------------------------------
	PAGE-SPECIFIC COLUMN PROPORTIONS
	----------------------------------------------------------------------	*/
	
	--mug-club-introduction-column-width: 44%;
	--mug-club-benefits-column-width: 56%;
	
	
	/*
	----------------------------------------------------------------------
	COMPATIBILITY ALIASES
	These shorter names match the names used throughout the previous CSS version
	----------------------------------------------------------------------	*/
	
	--bg: var(--background-color);
	--panel: var(--panel-color);
	--panel-2: var(--secondary-panel-color);
	
	--text: var(--text-color);
	--muted: var(--muted-text-color);
	
	--line: var(--divider-color);
	
	--accent: var(--accent-color);
	--accent-strong: var(--accent-strong-color);
}


/*
======================================================================
2. GLOBAL PAGE RULES
======================================================================
Controls default element sizing, page scrolling, typography, background,
links, and image behavior across the entire website.
======================================================================	*/

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	
	font-family:
		Georgia,
		"Times New Roman",
		serif;
	
	color: var(--text);
	
	background:
		linear-gradient(
			rgba(0, 0, 0, 0.34),
			rgba(0, 0, 0, 0.46)
		),
		url("assets/brown-barn-wood-rustic-background.jpg")
		center center
		/ cover
		no-repeat
		fixed;
	
	min-height: var(--full-viewport-height);
}

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

img {
	max-width: var(--full-container-width);
	display: block;
}


/*
======================================================================
3. MAIN WEBSITE CONTAINER
======================================================================
.site-shell surrounds the site's page content.

The website can grow to a maximum of 1400px on large displays.
On screens narrower than that, it uses the full available width.
======================================================================	*/

.site-shell {
	width: min(
		var(--site-maximum-width-desktop),
		var(--full-container-width)
	);
	
	margin: 0 auto;
	
	border-left:
		var(--standard-border-width)
		solid
		rgba(255, 255, 255, 0.03);
	
	border-right:
		var(--standard-border-width)
		solid
		rgba(255, 255, 255, 0.03);
}


/*
======================================================================
4. HEADER, LOGO, HOURS, ADDRESS AND HOME MAP
======================================================================
Controls the large header area at the top of the Home page

Desktop layout:
Hours panel | Logo | Address / Map panel
======================================================================	*/

.top-info-bar {
	position: relative;
	
	padding:
		var(--spacing-extra-large)
		var(--spacing-section)
		var(--spacing-medium-large);
	
	background: transparent;
	
	border-bottom: none;
}

.header-side {
	color: #fffaf0;
	
	font-size: 1.02rem;
	
	line-height: 1.65;
	
	text-shadow:
		0
		1px
		2px
		rgba(0, 0, 0, 0.90);
	
	background:
		rgba(0, 0, 0, 0.56);
	
	padding:
		var(--spacing-small-medium)
		var(--spacing-medium-large);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.22);
	
	border-radius:
		var(--standard-rounded-corner-radius);
}

.header-side h3 {
	margin:
		0
		0
		var(--spacing-extra-small);
	
	color: #f3d592;
	
	text-transform: uppercase;
	
	letter-spacing: 0.05em;
	
	font-size: 1.15rem;
	
	text-shadow:
		0
		1px
		2px
		rgba(0, 0, 0, 0.95);
}


.header-side p {
	margin:
		0
		0
		var(--spacing-tiny);
}


.header-side a:hover {
	color: var(--accent-strong);
}


/*
----------------------------------------------------------------------
Logo container
----------------------------------------------------------------------	*/

.top-logo {
	display: flex;
	
	justify-content: center;
	align-items: center;
	
	background: transparent;
	
	padding:
		var(--spacing-extra-large)
		0
		var(--spacing-medium-large);
}


.top-info-bar .top-logo {
	width: var(--header-logo-width-desktop);
	
	margin:
		0
		auto;
	
	padding: 0;
}


.home-top-info-bar .top-logo,
.top-info-bar .top-logo {
	padding: 0;
}


.top-logo img {
	width: var(--header-logo-width-desktop);
	
	max-width: var(--full-container-width);
	
	display: block;
	
	margin:
		0
		auto;
}


/*
----------------------------------------------------------------------
Left Hours Panel
----------------------------------------------------------------------	*/

.header-left {
	position: absolute;
	
	top:
		var(--header-panel-top-offset-desktop);
	
	left:
		var(--header-panel-horizontal-offset-desktop);
	
	width:
		var(--header-side-panel-width-desktop);
}


/*
----------------------------------------------------------------------
Right Address / Map Panel
----------------------------------------------------------------------	*/

.header-right {
	position: absolute;
	
	top:
		var(--header-panel-top-offset-desktop);
	
	right:
		var(--header-panel-horizontal-offset-desktop);
	
	width:
		var(--header-side-panel-width-desktop);
	
	height:
		var(--header-side-panel-height-desktop);
	
	text-align: left;
	
	display: flex;
	
	flex-direction: column;
}


/*
----------------------------------------------------------------------
Directions button inside the right header panel
----------------------------------------------------------------------	*/

.header-directions-btn {
	position: absolute;
	
	top: 8px;
	right: 8px;
	
	padding:
		7px
		11px;
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.45);
	
	background:
		rgba(210, 180, 124, 0.07);
	
	color:
		var(--text);
	
	font-size:
		0.74rem;
	
	font-weight:
		var(--font-weight-bold);
	
	letter-spacing:
		0.05rem;
	
	text-transform:
		uppercase;
	
	white-space:
		nowrap;
}


.header-directions-btn:hover {
	background:
		rgba(210, 180, 124, 0.16);
	
	color:
		var(--accent-strong);
}


/*
----------------------------------------------------------------------
Embedded Home-page map
----------------------------------------------------------------------	*/

.mini-map {
	margin-top:
		var(--spacing-extra-small);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
	
	border-radius:
		6px;
	
	overflow:
		hidden;
	
	background:
		transparent;
	
	width:
		var(--full-container-width);
	
	flex:
		1;
	
	min-height:
		0;
}


.mini-map iframe {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	border:
		0;
}


/*
======================================================================
5. MAIN NAVIGATION
======================================================================
Controls the horizontal navigation bar shared across the website.
======================================================================	*/

.main-nav {
	display:
		flex;
	
	justify-content:
		center;
	
	gap:
		0;
	
	flex-wrap:
		wrap;
	
	background:
		linear-gradient(
			180deg,
			rgba(52, 38, 26, 0.78),
			rgba(34, 24, 18, 0.72)
		);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	border-bottom:
		var(--standard-border-width)
		solid
		var(--line);
}


.main-nav a {
	padding:
		var(--navigation-link-vertical-padding-desktop)
		var(--navigation-link-horizontal-padding-desktop);
	
	letter-spacing:
		0.08em;
	
	font-weight:
		var(--font-weight-bold);
	
	font-size:
		clamp(
			1rem,
			1.3vw,
			1.3rem
		);
	
	text-transform:
		uppercase;
	
	position:
		relative;
}


/* Adds the "|" divider between desktop navigation links. */

.main-nav a + a::before {
	content:
		"|";
	
	position:
		absolute;
	
	left:
		-2px;
	
	top:
		50%;
	
	transform:
		translateY(-50%);
	
	color:
		rgba(255, 255, 255, 0.35);
}


.main-nav a:hover,
.main-nav a.active {
	color:
		var(--accent-strong);
}


/*
======================================================================
6. SHARED PAGE SECTIONS, CARDS, TITLES AND BUTTONS
======================================================================
These classes are reused across multiple pages.
======================================================================	*/

.page-wrap {
	padding-bottom:
		var(--spacing-wide-section);
}


.hero-row,
.grid-row,
.page-panel,
.info-strip,
.feature-list,
.beer-grid,
.visit-grid {
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
}


/*
----------------------------------------------------------------------
Hero / introductory panels
----------------------------------------------------------------------	*/

.hero-row,
.page-panel {
	min-height:
		var(--hero-minimum-height-desktop);
	
	padding:
		var(--spacing-section)
		var(--spacing-wide-section);
	
	background:
		linear-gradient(
			rgba(12, 12, 12, 0.62),
			rgba(22, 18, 14, 0.72)
		),
		radial-gradient(
			circle at right,
			rgba(182, 130, 58, 0.14),
			transparent 28%
		),
		linear-gradient(
			90deg,
			rgba(30, 30, 30, 0.90),
			rgba(16, 16, 16, 0.90)
		);
}


/*
----------------------------------------------------------------------
Three-column Home-page card grid
----------------------------------------------------------------------	*/

.grid-row {
	display:
		grid;
	
	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
	
	width:
		var(--full-container-width);
}


.card {
	min-height:
		420px;
	
	padding:
		var(--spacing-section)
		var(--spacing-section)
		22px;
	
	background:
		linear-gradient(
			rgba(14, 14, 14, 0.78),
			rgba(22, 17, 13, 0.83)
		),
		radial-gradient(
			circle at center,
			rgba(160, 105, 50, 0.08),
			transparent 40%
		);
	
	border-right:
		var(--standard-border-width)
		solid
		var(--line);
}


.grid-row .card:last-child {
	border-right:
		none;
}


/* Clickable card behavior. */

.card-link {
	display:
		flex;
	
	flex-direction:
		column;
	
	min-width:
		0;
	
	transition:
		transform var(--transition-fast-duration) ease,
		box-shadow var(--transition-fast-duration) ease,
		background var(--transition-fast-duration) ease;
}


.card-link:hover {
	transform:
		translateY(-3px);
	
	box-shadow:
		inset 0 0 0 1px rgba(228,201, 143, 0.18),
		0 10px 24px rgba(0, 0, 0, 0.18);
}


/*
----------------------------------------------------------------------
Home-page image areas
----------------------------------------------------------------------	*/

.home-image-area {
	width:
		var(--full-container-width);
	
	height:
		var(--home-image-area-height-desktop);
	
	margin-top:
		auto;
	
	display:
		flex;
	
	align-items:
		center;
	
	justify-content:
		center;
}


/*
----------------------------------------------------------------------
Section titles
----------------------------------------------------------------------	*/

.section-title {
	margin:
		0
		0
		var(--spacing-medium-large);
	
	text-align:
		center;
	
	text-transform:
		uppercase;
	
	font-size:
		clamp(
			1.8rem,
			3.2vw,
			3.4rem
		);
	
	line-height:
		1.02;
	
	letter-spacing:
		0.03em;
	
	color:
		var(--text);
}


.section-title.small {
	font-size:
		clamp(
			1.25rem,
			1.7vw,
			1.85rem
		);
	
	margin-bottom:
		var(--spacing-large);
	
	white-space:
		nowrap;
}


/* Decorative dash marks placed before & after shared section titles. */

.section-title::before,
.section-title::after {
	content:
		"-";
	
	color:
		var(--muted);
	
	margin:
		0
		0.22em;
	
	font-weight:
		var(--font-weight-normal);
}


.visit-title {
	position:
		relative;
	
	left:
		-8px;
}


/*
----------------------------------------------------------------------
Shared lead paragraph
----------------------------------------------------------------------	*/

.lead {
	max-width:
		780px;
	
	margin:
		0
		auto;
	
	font-size:
		clamp(
			1rem,
			1.35vw,
			1.45rem
		);
	
	line-height:
		1.5;
	
	text-align:
		center;
	
	color:
		#f6f0e4;
}


/*
----------------------------------------------------------------------
Shared button rows
----------------------------------------------------------------------	*/

.button-row {
	margin-top:
		var(--spacing-medium-large);
	
	display:
		flex;
	
	justify-content:
		center;
	
	gap:
		16px;
	
	flex-wrap:
		wrap;
}


.tap-banner-buttons {
	gap:
		35px;
}


.btn {
	display:
		inline-block;
	
	padding:
		var(--spacing-small-medium)
		var(--spacing-large);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.45);
	
	color:
		var(--text);
	
	background:
		rgba(210, 180, 124, 0.07);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.08em;
	
	font-size:
		0.95rem;
}


.btn:hover {
	background:
		rgba(210, 180, 124, 0.16);
	
	color:
		var(--accent-strong);
}


/*
----------------------------------------------------------------------
Social-media buttons
----------------------------------------------------------------------	*/

.social-button-row {
	gap:
		var(--spacing-medium);
	
	flex-wrap:
		wrap;
}


.social-btn {
	display:
		inline-flex;
	
	align-items:
		center;
	
	gap:
		var(--spacing-small);
	
	padding:
		var(--spacing-small-medium)
		var(--spacing-medium-large);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.55);
	
	color:
		var(--text);
	
	background:
		rgba(228, 201, 143, 0.18);
	
	text-transform:
		none;
	
	border-radius:
		var(--standard-rounded-corner-radius);
	
	transition:
		background var(--transition-fast-duration) ease,
		transform var(--transition-fast-duration) ease,
		color var(--transition-fast-duration) ease;
}


.social-btn:hover {
	background:
		rgba(228, 201, 143, 0.28);
	
	color:
		var(--accent-strong);
	
	transform:
		translateY(-2px);
}


.social-logo {
	width:
		22px;
	
	height:
		22px;
	
	object-fit:
		contain;
	
	display:
		block;
}


.icon-link {
	width:
		58px;
	
	height:
		58px;
	
	border-radius:
		14px;
	
	display:
		grid;
	
	place-items:
		center;
	
	background:
		rgba(228, 201, 143, 0.26);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.50);
	
	text-decoration:
		none;
	
	transition:
		transform var(--transition-fast-duration) ease,
		background var(--transition-fast-duration) ease;
}


.icon-link:hover {
	transform:
		translateY(-2px);
	
	background:
		rgba(228, 201, 143, 0.34);
}


.icon-logo {
	width:
		28px;
	
	height:
		28px;
	
	object-fit:
		contain;
	
	display:
		block;
}


/*
----------------------------------------------------------------------
Decorative beer-glass graphics
----------------------------------------------------------------------	*/

.beer-visuals {
	display:
		flex;
	
	justify-content:
		center;
	
	align-items:
		end;
	
	gap:
		var(--spacing-medium-large);
	
	margin-bottom:
		var(--spacing-medium-large);
	
	min-height:
		180px;
}


.beer-glass {
	width:
		88px;
	
	height:
		148px;
	
	border-radius:
		18px 18px 24px 24px;
	
	border:
		3px
		solid
		rgba(255, 255, 255, 0.30);
	
	position:
		relative;
	
	box-shadow:
		inset 0 12px 14px rgba(255, 255, 255, 0.08),
		0 8px 22px rgba(0, 0, 0, 0.28);
}


.beer-glass::before {
	content:
		"";
	
	position:
		absolute;
	
	top:
		-10px;
	
	left:
		8px;
	
	right:
		8px;
	
	height:
		22px;
	
	border-radius:
		999px;
	
	background:
		linear-gradient(
			180deg,
			#f5eed9,
			#dbcfa8
		);
}


.beer-gold {
	background:
		linear-gradient(
			180deg,
			#f6b03d,
			#d68414
		);
}


.beer-dark {
	background:
		linear-gradient(
			180deg,
			#312317,
			#090909
		);
}


.beer-red {
	background:
		linear-gradient(
			180deg,
			#8f4720,
			#3a130c
		);
}


.beer-names {
	text-align:
		center;
	
	font-weight:
		var(--font-weight-bold);
	
	font-size:
		clamp(
			1.05rem,
			1.3vw,
			1.45rem
		);
	
	text-transform:
		uppercase;
	
	line-height:
		1.45;
}


.beer-styles {
	margin-top:
		var(--spacing-small);
	
	display:
		flex;
	
	justify-content:
		center;
	
	gap:
		var(--spacing-large);
	
	flex-wrap:
		wrap;
	
	color:
		#f1e7d2;
	
	font-size:
		1rem;
}


/*
======================================================================
7. ABOUT PAGE: MUG CLUB AND SOCIAL CONTENT
======================================================================
Controls the Mug Club banner, membership columns, social-media icons,
decorative taproom graphics, and About-page rotating photo gallery.
======================================================================	*/

.mug-club-banner {
	width:
		var(--full-container-width);
	
	margin:
		0;
	
	padding:
		0;
	
	box-sizing:
		border-box;
	
	background:
		rgba(17, 17, 17, 0.80);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	border-bottom:
		var(--standard-border-width)
		solid
		var(--line);
}


.mug-club-title {
	margin:
		0;
	
	padding:
		16px
		var(--spacing-section)
		var(--spacing-small);
	
	color:
		var(--accent-strong);
	
	font-size:
		1.4rem;
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.04em;
	
	text-align:
		center;
}


/*	The two values total 100%:
	44% introduction + 56% benefits. */

.mug-club-content {
	display:
		grid;
	
	grid-template-columns:
		var(--mug-club-introduction-column-width)
		var(--mug-club-benefits-column-width);
	
	align-items:
		start;
}


.mug-club-intro {
	padding:
		var(--spacing-medium)
		var(--spacing-extra-large)
		var(--spacing-section);
	
	min-width:
		0;
}


.mug-club-intro h3 {
	margin:
		0;
	
	color:
		var(--text);
	
	font-size:
		1.25rem;
	
	line-height:
		1.35;
}


.mug-club-shop-btn {
	display:
		block;
	
	width:
		fit-content;
	
	margin:
		42px
		auto
		0;
}


.mug-club-benefits {
	padding:
		var(--spacing-medium)
		var(--spacing-extra-large)
		var(--spacing-section)
		var(--spacing-large);
	
	min-width:
		0;
}


.mug-club-email {
		margin-top:
			16px !important;
}


.ribbon {
	margin:
		var(--spacing-extra-large)
		auto
		0;
	
	width:
		fit-content;
	
	padding:
		var(--spacing-small)
		22px;
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.32);
	
	background:
		linear-gradient(
			180deg,
			#e3c88f,
			#c9ab72
		);
	
	color:
		#21160d;
	
	font-weight:
		var(--font-weight-bold);
	
	font-size:
		1.1rem;
}


/*
----------------------------------------------------------------------
Decorative Square/taproom graphic
----------------------------------------------------------------------	*/

.taproom-visual {
	margin:
		var(--spacing-medium)
		auto
		var(--spacing-medium-large);
	
	max-width:
		var(--taproom-visual-maximum-width);
	
	aspect-ratio:
		4 / 3;
	
	border:
		var(--standard-border-width)
		solid
		rgba(255, 255, 255, 0.20);
	
	background:
		linear-gradient(
			rgba(20, 13, 8, 0.15),
			rgba(18, 12, 10, 0.25)
		),
		linear-gradient(
			135deg,
			#5b3d22,
			#1b1613 65%
		);
	
	position:
		relative;
	
	overflow:
		hidden;
}


.taproom-visual::before {
	content:
		"";
	
	position:
		absolute;
	
	inset:
		14% 52% 14% 14%;
	
	border-radius:
		var(--standard-rounded-corner-radius);
	
	background:
		linear-gradient(
			180deg,
			#ececec,
			#9aa2ae
		);
	
	box-shadow:
		140px 18px 0 -18px #ececec,
		165px 48px 0 -24px #efefef;
}


.taproom-visual::after {
	content:
		"We Accept\ASquare";
	
	white-space:
		pre;
	
	position:
		absolute;
	
	left:
		16px;
	
	bottom:
		var(--spacing-medium-large);
	
	padding:
		var(--spacing-small)
		var(--spacing-small-medium);
	
	color:
		#111;
	
	background:
		#f1ead9;
	
	font-weight:
		var(--font-weight-bold);
	
	line-height:
		1.3;
	
	border-radius:
		var(--spacing-tiny);
}


/*
----------------------------------------------------------------------
Social icon rows
----------------------------------------------------------------------	*/

.social-icons {
	display:
		flex;
	
	justify-content:
		center;
	
	gap:
		var(--spacing-medium);
	
	flex-wrap:
		wrap;
	
	margin:
		var(--spacing-small)
		0
		var(--spacing-large);
}


.icon {
	width:
		58px;
	
	height:
		58px;
	
	border-radius:
		14px;
	
	display:
		grid;
	
	place-items:
		center;
	
	font-weight:
		var(--font-weight-bold);
	
	font-size:
		1.3rem;
	
	color:
		white;
}


.ig {
	background:
		linear-gradient(
			135deg,
			#f9ce34,
			#ee2a7b 60%,
			#6228d7
		);
}


.fb {
	background:
		#3067d6;
}


.tw {
	background:
		#3aa7ff;
}


.sq {
	background:
		#e5a92a;
	
	color:
		#241500;
}


/*
----------------------------------------------------------------------
About-page photo gallery
----------------------------------------------------------------------	*/

.social-gallery {
	margin-top:
		var(--spacing-medium-large);
	
	display:
		grid;
	
	grid-template-columns:
		repeat(3, 1fr);
	
	gap:
		var(--spacing-small);
}


.social-gallery-photos {
	display:
		grid;
	
	grid-template-columns:
		repeat(2, 1fr);
	
	gap:
		var(--spacing-medium);
	
	width:
		var(--full-container-width);
	
	margin-top:
		var(--spacing-extra-large);
}


.social-gallery-photo {
	position:
		relative;
	
	width:
		var(--full-container-width);
	
	height:
		260px;
	
	overflow:
		hidden;
	
	border:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(15, 12, 10, 0.90);
}


.social-gallery-photo img {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	object-fit:
		cover;
	
	opacity:
		1;
	
	transition:
		opacity
		var(--photo-fade-duration)
		ease-in-out;
}


.social-gallery-photo img.is-changing {
	opacity:
		0;
}


.gallery-tile {
	aspect-ratio:
		1 / 1;
	
	border:
		var(--standard-border-width)
		solid
		rgba(255, 255, 255, 0.15);
	
	background:
		linear-gradient(
			rgba(0, 0, 0, 0.12),
			rgba(0, 0, 0, 0.18)
		),
		linear-gradient(
			135deg,
			#ad7e2e,
			#302821
		);
}


.gallery-tile.building {
	background:
		linear-gradient(
			rgba(0, 0, 0, 0.14),
			rgba(0, 0, 0, 0.20)
		),
		linear-gradient(
			135deg,
			#7ea2cc,
			#3c2d1e 65%
		);
}


.gallery-tile.music {
	background:
		linear-gradient(
			rgba(0, 0, 0, 0.12),
			rgba(0, 0, 0, 0.22)
		),
		linear-gradient(
			135deg,
			#6c5038,
			#171515
		);
}


/*
----------------------------------------------------------------------
Generic page-panel headings
----------------------------------------------------------------------	*/

.page-panel h1 {
	margin:
		0
		0
		var(--spacing-medium-large);
	
	text-align:
		center;
	
	text-transform:
		uppercase;
	
	font-size:
		clamp(
			2.4rem,
			4vw,
			4.2rem
		);
	
	letter-spacing:
		0.04em;
}


.page-panel p {
	max-width:
		920px;
	
	margin:
		0
		auto;
	
	text-align:
		center;
	
	font-size:
		clamp(
			1.2rem,
			1.45vw,
			1.4rem
		);
	
	line-height:
		1.8;
}


/*
======================================================================
8. SHARED CONTENT GRIDS / BEERS / VISIT / SHOP
======================================================================	*/

.content-wrap {
	padding:
		var(--spacing-wide-section)
		0
		0;
}


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


.visit-bottom-info-strip {
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
}


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


.info-box {
	padding:
		var(--spacing-extra-large);
	
	background:
		rgba(15, 15, 15, 0.76);
	
	border-right:
		var(--standard-border-width)
		solid
		var(--line);
}


.info-strip .info-box:last-child {
	border-right:
		none;
}


.info-box h3,
.text-block h2 {
	margin:
		0
		0
		var(--spacing-medium);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
	
	color:
		var(--accent-strong);
}


.info-box p,
.text-block p,
.text-block li {
	font-size:
		1.08rem;
	
	line-height:
		1.8;
}


.feature-list,
.visit-grid,
.beer-grid {
	display:
		grid;
	
	gap:
		0;
}


/* Roughly 57.5% / 42.5% split.	*/

.feature-list {
	grid-template-columns:
		1.15fr
		0.85fr;
}


.shop-stay-informed {
	grid-template-columns:
		1fr;
}


/* Roughly 55% / 45% split.	*/

.visit-grid {
	grid-template-columns:
		1.1fr
		0.9fr;
}


/*
----------------------------------------------------------------------
Visit-page Taproom Information layout
----------------------------------------------------------------------	*/

.taproom-info-layout {
	display:
		grid;
	
	grid-template-columns:
		minmax(0, 1fr)
		minmax(220px, 0.85fr);
	
	gap:
		var(--spacing-extra-large);
	
	align-items:
		start;
}


.taproom-info-details p:first-child {
	margin-top:
		0;
}


.taproom-info-map {
	width:
		var(--full-container-width);
}


.taproom-info-map iframe {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		var(--taproom-map-height-desktop);
	
	border:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(12, 10, 8, 0.88);
}


.taproom-directions-link {
	display:
		block;
	
	width:
		fit-content;
	
	margin:
		var(--spacing-small)
		auto
		0;
	
	padding:
		var(--spacing-extra-small)
		var(--spacing-medium);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.45);
	
	background:
		rgba(210, 180, 124, 0.07);
	
	color:
		var(--text);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.08em;
	
	font-size:
		0.82rem;
}


.taproom-directions-link:hover {
	background:
		rgba(210, 180, 124, 0.16);
	
	color:
		var(--accent-strong);
}

.taproom-info-description {
	margin-bottom:
		0;
}


/*
----------------------------------------------------------------------
Beer grid
----------------------------------------------------------------------	*/

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


/*
----------------------------------------------------------------------
Distributor banner
----------------------------------------------------------------------	*/

.distributor-banner {
	display:
		grid;
	
	grid-template-columns:
		1fr
		auto;
	
	align-items:
		center;
	
	gap:
		var(--spacing-section);
	
	padding:
		var(--spacing-extra-large)
		var(--spacing-extra-wide);
	
	margin-top:
		var(--spacing-wide-section);
	
	margin-bottom:
		var(--spacing-wide-section);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	border-bottom:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		linear-gradient(
			rgba(20, 17, 13, 0.90),
			rgba(20, 17, 13, 0.90)
		),
		radial-gradient(
			circle at right,
			rgba(182, 130, 58, 0.16),
			transparent 38%
		);
}


.distributor-banner h2 {
	margin:
		0
		0
		var(--spacing-extra-small);
}


.distributor-action {
	display:
		flex;
	
	align-items:
		center;
	
	justify-content:
		flex-end;
}


/*
----------------------------------------------------------------------
Shared text / image / beer-card blocks
----------------------------------------------------------------------	*/

.text-block,
.visual-block,
.beer-card {
	padding:
		30px;
	
	background:
		rgba(17, 17, 17, 0.80);
	
	border-right:
		var(--standard-border-width)
		solid
		var(--line);
}


.feature-list > *:last-child,
.visit-grid > *:last-child,
.beer-grid > *:last-child {
	border-right:
		none;
}


.visual-block {
	background:
		linear-gradient(
			rgba(10, 10, 10, 0.25),
			rgba(10, 10, 10, 0.25)
		),
		linear-gradient(
			135deg,
			#4c351f,
			#121212 68%
		);
	
	min-height:
		var(--full-container-width);
}


.visual-card {
	min-height:
		320px;
	
	border:
		var(--standard-border-width)
		solid
		rgba(255, 255, 255, 0.15);
	
	background:
		radial-gradient(
			circle at top left,
			rgba(246, 176, 61, 0.24),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#2d2118,
			#0e0d0c 72%
		);
}


/*
----------------------------------------------------------------------
Beer page imagery
----------------------------------------------------------------------	*/

.beers-variety-photo {
	padding:
		0;
	
	overflow:
		hidden;
}


.beers-variety-photo img {
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	min-height:
		320px;
	
	object-fit:
		cover;
	
	display:
		block;
}


.home-taproom-photo,
.home-events-photo {
	width:
		var(--full-container-width);
	
	height:
		var(--staff-slideshow-height-desktop);
	
	padding:
		0;
	
	overflow:
		hidden;
}


.home-taproom-photo img,
.home-events-photo img {
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	object-fit:
		cover;
	
	display:
		block;
}


.taproom-photo-card img {
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	min-height:
		320px;
	
	object-fit:
		cover;
	
	display:
		block;
}


.beer-card h3 {
	text-transform:
		uppercase;
	
	letter-spacing:
		0.04em;
	
	margin-top:
		0;
	
	color:
		var(--text);
}


.beer-card .style-label {
	color:
		var(--accent-strong);
	
	font-weight:
		var(--font-weight-bold);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
	
	font-size:
		0.95rem;
}


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

.featured-beer-card {
	display:
		flex;
	
	flex-direction:
		column;
	
	min-width:
		0;
	
	padding:
		0;
	
	overflow:
		hidden;
}


.featured-beer-card h3 {
	color:
		var(--accent-strong);
}


.featured-beer-card h2,
.featured-beer-card h3,
.featured-beer-card p {
	max-width:
		var(--full-container-width);
	
	overflow-wrap:
		break-word;
}


.beer-card-copy {
	padding:
		30px
		38px
		22px;
	
	min-width:
		0;
}


.featured-beer-photo {
	width:
		calc(
			var(--full-container-width)
			-
			60px
		);
	
	height:
		var(--featured-beer-photo-height-desktop);
	
	margin-top:
		auto;
	
	margin-right:
		auto;
	
	margin-bottom:
		30px;
	
	margin-left:
		auto;
	
	overflow:
		hidden;
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(12, 10, 8, 0.88);
	
	box-sizing:
		border-box;
}


.featured-beer-photo img {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	object-fit:
		cover;
	
	object-position:
		center;
}


/*
======================================================================
9. REUSABLE LAYOUT HELPERS
======================================================================
Small utility classes used by multiple HTML pages.

These replace inline style="..." instructions so layout decisions
remain centralized in style.css.
======================================================================	*/

.align-left {
	justify-content:
		flex-start;
}


.button-row-compact {
	margin-top:
		16px;
}


.button-row-spaced {
	margin-top:
		1.5rem;
}


.lead-narrow {
	max-width:
		420px;
	
	font-size:
		1.1rem;
}


.lead-medium {
	max-width:
		520px;
	
	font-size:
		1.15rem;
}


.social-icons-spaced {
	margin-top:
		30px;
}


/*
======================================================================
10. SHARED FOOTER
======================================================================
Controls contact information at the bottom of every page.
======================================================================	*/

.footer {
	padding:
		22px
		30px
		40px;
	
	text-align:
		center;
	
	color:
		rgba(242, 234, 217, 0.80);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	font-size:
		0.98rem;
}


.footer-contact {
	display:
		grid;
	
	gap:
		6px;
	
	justify-items:
		center;
	
	text-align:
		center;
	
	line-height:
		1.7;
}


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


.footer a:hover {
	color:
		var(--accent-strong);
}


/*
======================================================================
11. CALENDAR TEMPLATE AND EVENTS COMPONENTS
======================================================================	*/

.calendar-shell {
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	padding:
		var(--spacing-wide-section);
	
	background:
		rgba(13, 13, 13, 0.78);
}


.calendar-header {
	display:
		flex;
	
	justify-content:
		space-between;
	
	align-items:
		end;
	
	gap:
		var(--spacing-extra-large);
	
	margin-bottom:
		22px;
}


.calendar-kicker {
	text-transform:
		uppercase;
	
	letter-spacing:
		0.10em;
	
	color:
		var(--accent-strong);
	
	font-size:
		0.88rem;
	
	margin-bottom:
		var(--spacing-extra-small);
}


.calendar-header h2 {
	margin:
		0;
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.05em;
	
	font-size:
		clamp(
			2rem,
			3vw,
			3.2rem
		);
}


.calendar-note {
	max-width:
		420px;
	
	color:
		rgba(242, 234, 217, 0.85);
	
	line-height:
		1.7;
}


/*	Seven equal columns represent Sunday through Saturday.	*/

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


.calendar-weekdays div {
	padding:
		var(--spacing-small-medium)
		var(--spacing-small);
	
	text-align:
		center;
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
	
	font-size:
		0.90rem;
	
	color:
		var(--accent-strong);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.82);
	
	background:
		rgba(28, 22, 17, 0.82);
}


.calendar-grid {
	border-left:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
	
	border-bottom:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
}


.day-card {
	min-height:
	138px;
	
	padding:
		var(--spacing-small-medium);
	
	border-right:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
	
	border-top:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
	
	background:
		linear-gradient(
			rgba(18, 18, 18, 0.96),
			rgba(30, 22, 16, 0.88)
		);
}


.day-number {
	font-size:
		1.1rem;
	
	font-weight:
		var(--font-weight-bold);
	
	color:
		var(--accent-strong);
	
	margin-bottom:
		var(--spacing-small);
}


.day-content {
	font-size:
		0.98rem;
	
	line-height:
		1.55;
	
	color:
		var(--text);
}


.highlight-day {
	background:
		linear-gradient(
			rgba(48, 34, 18, 0.95),
			rgba(34, 22, 14, 0.92)
		);
	
	box-shadow:
		inset
		0
		0
		0
		1px
		rgba(228, 201, 143, 0.18);
}


.muted-day .day-number,
.muted-day .day-content {
	opacity:
		0.48;
}


/*
----------------------------------------------------------------------
Current-calendar display panel.
----------------------------------------------------------------------	*/

.current-calendar-panel {
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	padding:
		var(--spacing-wide-section);
	
	background:
		rgba(13, 13, 13, 0.70);
}


.calendar-display-header {
	display:
		flex;
	
	justify-content:
		space-between;
	
	align-items:
		end;
	
	gap:
		var(--spacing-extra-large);
	
	margin-bottom:
		22px;
}


.calendar-image-frame {
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.24);
	
	background:
		rgba(9, 9, 9, 0.22);
	
	padding:
		16px;
}


.calendar-image-frame img {
	width:
		var(--full-container-width);
	
	height:
		auto;
	
	display:
		block;
}


.month-link-grid {
	display:
		grid;
	
	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);
	
	gap:
		var(--spacing-small-medium);
	
	margin-top:
		var(--spacing-medium-large);
}


.month-link-grid .btn {
	text-align:
		center;
}


.calendar-note-card {
	display:
		flex;
	
	align-items:
		center;
	
	justify-content:
		center;
	
	min-height:
		var(--full-container-width);
}


.calendar-note-inner {
	padding:
		22px;
}


.calendar-note-inner h3 {
	margin-top:
		0;
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
	
	color:
		var(--accent-strong);
}


.calendar-note-inner p {
	line-height:
		1.8;
	
	font-size:
		1.08rem;
}


/*
----------------------------------------------------------------------
Customer-facing Events page
----------------------------------------------------------------------	*/

.customer-events-layout {
	display:
		grid;
	
	grid-template-columns:
		1fr
		1fr;
	
	gap:
		0;
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
}


.events-preview-frame {
	min-height:
		var(--full-container-width);
	
	display:
		flex;
	
	align-items:
		center;
	
	justify-content:
		center;
}


.events-preview-frame img {
	width:
		var(--full-container-width);
	
	height:
		auto;
	
	display:
		block;
}


.events-preview-fallback {
	min-height:
		360px;
	
	display:
		flex;
	
	flex-direction:
		column;
	
	justify-content:
		center;
	
	text-align:
		center;
	
	padding:
		32px;
	
	color:
		var(--text);
}


.events-preview-fallback h3 {
	margin-top:
		0;
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
	
	color:
		var(--accent-strong);
}


.events-preview-fallback p {
	line-height:
		1.8;
	
	margin-bottom:
		0;
}


.events-calendar-hero {
	margin-bottom:
		var(--spacing-section);
}


.events-hero-frame {
	padding:
		var(--spacing-large);
}


.events-hero-frame img {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		auto;
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.18);
	
	background:
		rgba(255, 255, 255, 0.02);
}


.events-bottom-grid {
	display:
		grid;
	
	grid-template-columns:
		1fr
		1fr;
	
	gap:
		0;
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
}


.events-preview-side {
	display:
		flex;
	
	align-items:
		stretch;
	
	justify-content:
		stretch;
}


.events-preview-copy {
	width:
		var(--full-container-width);
	
	border-right:
		none;
	
	background:
		rgba(17, 17, 17, 0.55);
}


/*
======================================================================
12. HOME STAFF SLIDESHOW AND GOOGLE EVENTS CALENDAR
======================================================================	*/

.staff-slideshow {
	position:
		relative;
	
	width:
		calc(
			var(--full-container-width)
			-
			var(--staff-slideshow-horizontal-inset-total)
		);
	
	height:
		var(--staff-slideshow-height-desktop);
	
	margin:
		0
		auto;
	
	overflow:
		hidden;
	
	border:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(12, 10, 8, 0.88);
}


.staff-slide {
	position:
		absolute;
	
	inset:
		0;
	
	width:
		var(--full-container-width);
	
	height:
		var(--full-container-width);
	
	display:
		block;
	
	object-fit:
		cover;
	
	opacity:
		0;
	
	transition:
		opacity
		1s
		ease-in-out;
}


.staff-slide.active {
	opacity:
		1;
}


/*
----------------------------------------------------------------------
Embedded Google Calendar on Events page
----------------------------------------------------------------------	*/

.events-calendar-section {
	padding:
		30px
		var(--spacing-extra-wide);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	border-bottom:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(16, 14, 12, 0.88);
}


.events-calendar-heading {
	margin-bottom:
		var(--spacing-extra-large);
}


.events-calendar-heading h2 {
	margin-top:
		0;
}


.events-calendar-frame {
	width:
		var(--full-container-width);
	
	min-height:
		var(--events-calendar-height-desktop);
	
	overflow:
		hidden;
	
	border:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		#ffffff;
}


.events-calendar-frame iframe {
	display:
		block;
	
	width:
		var(--full-container-width);
	
	height:
		var(--events-calendar-height-desktop);
	
	border:
		0;
}


.events-calendar-buttons {
	justify-content:
		flex-start;
	
	margin-top:
		var(--spacing-extra-large);
}


.events-calendar-buttons a.btn,
.events-calendar-buttons a.btn:visited {
	background:
		var(--accent-strong);
	
	color:
		#17120d;
	
	border:
		2px
		solid
		var(--accent-strong);
	
	font-weight:
		var(--font-weight-bold);
	
	padding:
		var(--spacing-medium)
		var(--spacing-extra-large);
	
	box-shadow:
		0
		4px
		12px
		rgba(0, 0, 0, 0.35);
}


.events-calendar-buttons a.btn:hover,
.events-calendar-buttons a.btn:focus {
	background:
		#17120d;
	
	color:
		var(--accent-strong);
	
	border-color:
		var(--accent-strong);
}


/*
======================================================================
13. DISTRIBUTOR PRODUCT SELL-SHEET PAGE
======================================================================
Controls search/filter tools, sorting controls, sell-sheet cards,
and buttons on sell-sheets.html.
======================================================================	*/

.sell-sheet-controls {
	display:
		grid;
	
	grid-template-columns:
		minmax(220px, 1.5fr)
		minmax(170px, 0.75fr)
		minmax(260px, 0.90fr);
	
	gap:
		22px;
	
	align-items:
		end;
	
	padding:
		26px
		var(--spacing-section);
	
	margin-bottom:
		22px;
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		rgba(18, 15, 12, 0.92);
}


.sell-sheet-control-group {
	display:
		flex;
	
	flex-direction:
		column;
	
	gap:
		var(--spacing-extra-small);
	
	min-width:
		0;
}


.sell-sheet-control-group label {
	color:
		var(--accent-strong);
	
	font-weight:
		var(--font-weight-bold);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.08em;
	
	font-size:
		1rem;
	
	margin-bottom:
		2px;
}


.sell-sheet-control-group input,
.sell-sheet-control-group select,
.sell-sheet-sort-btn {
	width:
		var(--full-container-width);
	
	min-height:
		44px;
	
	padding:
		11px
		var(--spacing-medium);
	
	border:
		var(--standard-border-width)
		solid
		rgba(228, 201, 143, 0.45);
	
	background:
		rgba(12, 10, 8, 0.90);
	
	color:
		var(--text);
	
	font:
		inherit;
	
	box-sizing:
		border-box;
}


.sell-sheet-control-group input::placeholder {
	color:
		rgba(242, 234, 217, 0.65);
}


.sell-sheet-control-group input:focus,
.sell-sheet-control-group select:focus,
.sell-sheet-sort-btn:focus {
	outline:
		2px
		solid
		var(--accent-strong);
	
	outline-offset:
		2px;
}


.sell-sheet-sort-btn {
	display:
		flex;
	
	flex-direction:
		column;
	
	align-items:
		center;
	
	justify-content:
		center;
	
	gap:
		2px;
	
	min-height:
		54px;
	
	cursor:
		pointer;
	
	text-align:
		center;
	
	text-transform:
		uppercase;
	
	font-weight:
		var(--font-weight-bold);
	
	letter-spacing:
		0.04em;
	
	transition:
		background var(--transition-fast-duration) ease,
		border-color var(--transition-fast-duration) ease,
		color var(--transition-fast-duration) ease;
}


.sort-label {
	font-size:
		0.78rem;
	
	letter-spacing:
		0.08em;
	
	color:
		var(--muted);
}


.sort-direction {
	font-size:
		1rem;
	
	font-weight:
		var(--font-weight-bold);
	
	color:
		var(--text);
}


.sell-sheet-sort-btn:hover {
	background:
		rgba(210, 180, 124, 0.12);
}


.sell-sheet-sort-buttons {
	display:
		grid;
	
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
	
	gap:
		var(--spacing-small);
}


.sell-sheet-sort-btn.active {
	background:
		rgba(210, 180, 124, 0.18);
	
	border-color:
		var(--accent-strong);
}


.sell-sheet-sort-btn.active .sort-label,
.sell-sheet-sort-btn.active .sort-direction {
	color:
		var(--accent-strong);
}


.sell-sheet-results {
	min-height:
		0;
	
	margin:
		0
		0
		var(--spacing-small-medium);
	
	color:
		rgba(242, 234, 217, 0.80);
	
	font-size:
		0.92rem;
}


.sell-sheet-card.is-hidden {
	display:
		none !important;
}


.sell-sheets-list {
	display:
		grid;
	
	gap:
		22px;
}


.sell-sheet-card {
	display:
		grid;
	
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	
	align-items:
		center;
	
	gap:
		32px;
	
	padding:
		var(--spacing-section)
		var(--spacing-extra-wide);
	
	border-top:
		var(--standard-border-width)
		solid
		var(--line);
	
	border-bottom:
		var(--standard-border-width)
		solid
		var(--line);
	
	background:
		linear-gradient(
			rgba(18, 15, 12, 0.90),
			rgba(18, 15, 12, 0.90)
		),
		radial-gradient(
			circle at right,
			rgba(182, 130, 58, 0.14),
			transparent 38%
		);
}


.sell-sheet-copy h2 {
	margin:
		0
		0
		var(--spacing-extra-small);
	
	color:
		var(--accent-strong);
}


.beer-specs {
	margin:
		0
		0
		var(--spacing-medium);
	
	font-weight:
		var(--font-weight-bold);
	
	text-transform:
		uppercase;
	
	letter-spacing:
		0.06em;
}


.sell-sheet-copy p:last-child {
	margin-bottom:
		0;
	
	max-width:
		950px;
}


.sell-sheet-action {
	display:
		flex;
	
	align-items:
		center;
	
	justify-content:
		flex-end;
}


.sell-sheet-action .btn {
	min-width:
		var(--sell-sheet-button-minimum-width-desktop);
	
	text-align:
		center;
}



/*
======================================================================
14. RESPONSIVE BREAKPOINTS
======================================================================
The CSS above is the default desktop design.

Each block below changes only what is necessary when the browser
gets narrower.

Breakpoint numbers must remain literal because traditional
@media rules cannot reliably read ordinary CSS custom properties.
======================================================================	*/


/*
----------------------------------------------------------------------
1400PX AND SMALLER
Large desktop boundary.

1400px matches the site's normal maximum desktop width.
----------------------------------------------------------------------	*/

@media (max-width: 1400px) {
	
	.site-shell {
		width:
			var(--full-container-width);
	}
}


/*
----------------------------------------------------------------------
1200PX AND SMALLER
Large / narrow desktop.

The desktop structure stays intact, but header and navigation elements
become slightly smaller to preserve horizontal space.
----------------------------------------------------------------------	*/

@media (max-width: 1200px) {
	
	.top-info-bar {
		padding-left:
			22px;
		
		padding-right:
			22px;
	}
	
	
	.header-left,
	.header-right {
		width:
			285px;
	}
	
	
	.top-info-bar .top-logo,
	.top-logo img {
		width:
			330px;
	}
	
	
	.main-nav a {
		padding-left:
			var(--spacing-large);
		
		padding-right:
			var(--spacing-large);
	}
	
	
	.hero-row,
	.page-panel {
		padding-left:
			var(--spacing-section);
		
		padding-right:
			var(--spacing-section);
	}
}


/*
----------------------------------------------------------------------
1024PX AND SMALLER
Compact Laptop / landscape tablet.

The desktop header no longer has enough room for absolute-positioned
left/right cards, so it changes to a two-column Grid below the logo.
----------------------------------------------------------------------	*/

@media (max-width: 1024px) {
	.top-info-bar {
		display:
			grid;
		
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
		
		gap:
			var(--spacing-medium-large)
			var(--spacing-extra-large);
		
		align-items:
			start;
	}
	
	
	.top-info-bar .top-logo {
		grid-column:
			1 / -1;
		
		grid-row:
			1;
		
		width:
			min(
				330px,
				var(--full-container-width)
			);
	}
	
	
	.header-left,
	.header-right {
		position:
			static;
		
		width:
			var(--full-container-width);
		
		max-width:
			none;
		
		height:
			auto;
		
		justify-self:
			stretch;
	}
	
	
	.header-left {
		grid-column:
			1;
		
		grid-row:
			2;
	}
	
	
	.header-right {
		grid-column:
			2;
		
		grid-row:
			2;
		
		text-align:
			left;
	}
	
	
	.header-right .mini-map {
		min-height:
			var(--taproom-map-height-desktop);
	}
	
	
	.grid-row,
	.beer-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
	
	
	.sell-sheet-controls > .sell-sheet-control-group:last-child {
		grid-column:
			1 / -1;
	}
}


/*
----------------------------------------------------------------------
900PX AND SMALLER
Tablet.

This is the primary stacking breakpoint. Most multi-column sections
become single-column layouts.
----------------------------------------------------------------------	*/

@media (max-width: 900px) {
	
	.main-nav a {
		padding:
			15px
			17px;
		
		font-size:
			0.98rem;
	}
	
	
	.grid-row,
	.info-strip,
	.feature-list,
	.visit-grid,
	.beer-grid,
	.visit-bottom-info-strip,
	.events-info-strip,
	.customer-events-layout,
	.events-bottom-grid {
		grid-template-columns:
			1fr;
	}
	
	
	.card,
	.info-box,
	.text-block,
	.visual-block,
	.beer-card {
		border-right:
			none;
		
		border-bottom:
			var(--standard-border-width)
			solid
			var(--line)
	}
	
	
	.grid-row > *:last-child,
	.info-strip > *:last-child,
	.feature-list > *:last-child,
	.visit-grid > *:last-child,
	.beer-grid > *:last-child {
		border-bottom:
			none;
	}
	
	
	.mug-club-content {
		grid-template-columns:
			1fr;
	}
	
	
	.mug-club-benefits {
		padding:
			0
			var(--spacing-section)
			var(--spacing-extra-large);
	}
	
	
	.mug-club-benefits p {
		white-space:
			normal;
	}
	
	
	.distributor-banner,
	.sell-sheet-card {
		grid-template-columns:
			1fr;
	}
	
	
	.distributor-action,
	.sell-sheet-action {
		justify-content:
			flex-start;
	}
	
	
	.calendar-shell,
	.current-calendar-panel {
		padding:
			var(--spacing-extra-large)
			var(--spacing-medium-large);
	}
	
	
	.calendar-header,
	.calendar-display-header {
		align-items:
			flex-start;
		
		flex-direction:
			column;
	}
	
	
	.calendar-weekdays {
		display:
			none;
	}
	
	
	.calendar-grid {
		grid-template-columns:
			1fr;
		
		border-left:
			none;
	}
	
	
	.day-card {
		min-height:
			auto;
	}
	
	
	.month-link-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
	
	
	.events-preview-copy {
		border-top:
			var(--standard-border-width)
			solid
			var(--line);
	}
}


/*
----------------------------------------------------------------------
768PX AND SMALLER
Portrait tablet / larger phone.

The Home header becomes one vertical column.
Maps, galleries and controls adapt to touch-first mobile use.
----------------------------------------------------------------------	*/

@media (max-width: 768px) {
	body {
		/* Fixed background images can behave poorly on mobile browsers. */
		background-attachment:
			scroll;
	}
	
	
	.top-info-bar {
		grid-template-columns:
			1fr;
		
		padding:
			var(--spacing-medium-large);
	}
	
	
	.top-info-bar .top-logo {
		grid-column:
			1;
		
		grid-row:
			1;
		
		width:
			min(
				300px,
				88vw
			);
	}
	
	
	.header-left {
		grid-column:
			1;
		
		grid-row:
			2;
	}
	
	
	.header-right{
		grid-column:
			1;
		
		grid-row:
			3;
		
		text-align:
			center;
	}
	
	
	.header-side {
		text-align:
			center;
	}
	
	
	.header-right .mini-map,
	.mini-map {
		min-height:
			240px;
	}
	
	
	.main-nav a {
		padding:
			13px
			var(--spacing-medium);
		
		font-size:
			0.92rem;
	}
	
	
	/* Dividers are removed once the navigation begins wrapping. */
	
	.main-nav a + a::before {
		display:
			none;
	}
	
	
	.hero-row,
	.page-panel,
	.events-calendar-section {
		padding-left:
			var(--spacing-large);
		
		padding-right:
			var(--spacing-large);
	}
	
	
	.taproom-info-layout {
		grid-template-columns:
		1fr;
	}
	
	
	.taproom-info-map iframe {
		height:
			240px;
	}
	
	
	.social-gallery-photos {
		grid-template-columns:
			1fr;
	}
	
	
	.social-gallery-photo {
		height:
			280px;
	}
	
	
	.staff-slideshow {
		width:
			calc(
				var(--full-container-width)
				-
				36px
			);
		
		height:
			280px;
		
		margin-top:
			var(--spacing-extra-large);
	}
	
	
	.events-calendar-section {
		padding-top:
			var(--spacing-extra-large);
		
		padding-bottom:
			var(--spacing-extra-large);
	}
	
	
	.events-calendar-frame,
	.events-calendar-frame iframe {
		min-height:
			540px;
		
		height:
			540px;
	}
	
	
	.sell-sheet-controls {
		grid-template-columns:
			1fr;
		
		padding:
			var(--spacing-large);
	}
	
	
	.sell-sheet-controls > .sell-sheet-control-group:last-child {
		grid-column:
			auto;
	}
	
	
	.sell-sheet-card {
		gap:
			var(--spacing-large);
		
		padding:
			var(--spacing-extra-large);
	}
	
	
	.sell-sheet-action .btn {
		min-width:
			0;
		
		width:
			var(--full-container-width);
	}
}


/*
----------------------------------------------------------------------
640PX AND SMALLER
Standard phone.

Navigation becomes three links per row, and spacing/images shrink to
conserve screen space.
----------------------------------------------------------------------	*/

@media (max-width: 640px) {
	
	.top-logo {
		padding-top:
			var(--spacing-medium-large);
	}
	
	
	.main-nav a {
		flex:
			1 1 33.333%;
		
		text-align:
			center;
		
		padding:
			var(--spacing-small-medium)
			var(--spacing-extra-small);
		
		font-size:
			0.86rem;
	}
	
	
	.hero-row,
	.page-panel,
	.content-wrap {
		padding-left:
			var(--spacing-medium-large);
		
		padding-right:
			var(--spacing-medium-large);
	}
	
	
	.card {
		padding:
			22px
			var(--spacing-medium-large);
		
		min-height:
			auto;
	}
	
	
	.section-title.small {
		white-space:
			normal;
	}
	
	
	.section-title::before,
	.section-title::after {
		margin:
			0
			0.12em;
	}
	
	
	.info-box,
	.text-block,
	.visual-block,
	.beer-card {
		padding-left:
			var(--spacing-large);
		
		padding-right:
			var(--spacing-large);
	}
	
	
	.beer-card-copy {
		padding:
			var(--spacing-extra-large)
			22px
			var(--spacing-medium-large);
	}
	
	
	.featured-beer-photo {
		width:
			calc(
				var(--full-container-width)
				-
				36px
			);
		
		height:
			280px;
		
		margin-bottom:
			var(--spacing-medium-large);
	}
	
	
	.home-image-area,
	.home-taproom-photo,
	.home-events-photo {
		height:
			260px;
	}
	
	
	.social-gallery {
		grid-template-columns:
			1fr;
	}
	
	
	.mug-club-title {
		padding-left:
			var(--spacing-medium-large);
		
		padding-right:
			var(--spacing-medium-large);
	}
	
	
	.mug-club-intro,
	.mug-club-benefits {
		padding-left:
			var(--spacing-large);
		
		padding-right:
			var(--spacing-large);
	}
	
	
	.mug-club-shop-btn {
		margin-top:
			var(--spacing-extra-large);
	}
	
	
	.month-link-grid {
		grid-template-columns:
			1fr;
	}
	
	
	.calendar-header,
	.calendar-display-header {
		gap:
			var(--spacing-medium);
	}
	
	
	.events-calendar-buttons {
		justify-content:
			center;
	}
	
	
	.events-calendar-buttons .btn {
		width:
			var(--full-container-width);
		
		text-align:
			center;
	}
	
	
	.sell-sheet-sort-buttons {
		grid-template-columns:
			1fr;
	}
}


/*
----------------------------------------------------------------------
480PX AND SMALLER
Small phone.

Navigation changes to two links per row. Buttons become full-width and
decorative title marks are removed.
----------------------------------------------------------------------	*/

@media (max-width: 480px) {
	
	.top-info-bar {
		padding:
			var(--spacing-medium)
			var(--spacing-small-medium);
	}
	
	
	.header-side {
		padding:
			11px
			var(--spacing-small-medium);
		
		font-size:
			0.94rem;
	}
	
	
	.top-info-bar .top-logo {
		width:
			min(
				270px,
				90vw
			);
	}
	
	
	.main-nav a {
		flex-basis:
			50%;
		
		padding:
			11px
			6px;
		
		font-size:
			0.82rem;
		
		letter-spacing:
			0.05em;
	}
	
	
	.hero-row,
	.page-panel,
	.calendar-shell,
	.current-calendar-panel,
	.events-calendar-section {
		padding-left:
			var(--spacing-medium);
		
		padding-right:
			var(--spacing-medium);
	}
	
	
	.section-title {
		font-size:
			clamp(
				1.55rem,
				8vw,
				2.15rem
			);
	}
	
	
	.section-title::before,
	.section-title::after {
		display:
			none;
	}
	
	
	.page-panel h1 {
		font-size:
			clamp(
				2rem,
				10vw,
				2.8rem
			);
	}
	
	
	.button-row,
	.tap-banner-buttons,
	.social-button-row {
		gap:
			var(--spacing-small);
	}
	
	
	.button-row .btn,
	.tap-banner-buttons .btn,
	.social-btn {
		width:
			var(--full-container-width);
		
		text-align:
			center;
	}
	
	
	.social-btn {
		justify-content:
			center;
	}
	
	
	.featured-beer-photo,
	.staff-slideshow {
		width:
			var(--full-container-width);
	}
	
	
	.staff-slideshow,
	.social-gallery-photo,
	.featured-beer-photo,
	.home-image-area,
	.home-taproom-photo,
	.home-events-photo {
		height:
			240px;
	}
	
	
	.taproom-info-map iframe,
	.header-right .mini-map,
	.mini-map {
		min-height:
			var(--taproom-map-height-desktop);
	}
	
	
	.distributor-banner,
	.sell-sheet-card,
	.sell-sheet-controls,
	.footer {
		padding-left:
			16px;
		
		padding-right:
			16px;
	}
}


/*
----------------------------------------------------------------------
360PX AND SMALLER
Very narrow phone / safety layout.

Navigation becomes one link per row. Padding and text sizes reduce one
final step to prevent horizontal overflow.
----------------------------------------------------------------------	*/

@media (max-width: 360px) {
	
	.main-nav a {
		flex-basis:
			var(--full-container-width);
	}
	
	
	.top-info-bar .top-logo {
		width:
			min(
				240px,
				88vw
			);
	}
	
	
	.header-side,
	.card,
	.info-box,
	.text-block,
	.visual-block,
	.beer-card {
		padding-left:
			var(--spacing-medium);
		
		padding-right:
			var(--spacing-medium);
	}
	
	
	.btn,
	.social-btn,
	.sell-sheet-control-group input,
	.sell-sheet-control-group select,
	.sell-sheet-sort-btn {
		font-size:
			0.86rem;
	}
}