/*
 * Bières Belges: identity layer over the Investor theme.
 * Loaded after style.css; the legacy rules stay for plugin and widget markup.
 */

/* Fonts (SIL Open Font License, self-hosted) */
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/bieres/source-sans-3-variable.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/bieres/source-sans-3-italic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Alfa Slab One";
	src: url("../fonts/bieres/alfa-slab-one-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("../fonts/bieres/zilla-slab-normal-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zilla Slab";
	src: url("../fonts/bieres/zilla-slab-normal-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bb-brick: #9b2c1d;
	--bb-brick-deep: #7a2216;
	--bb-amber: #e0a030;
	--bb-amber-light: #ffd27a;
	--bb-ink: #231f1a;
	--bb-ink-soft: #5c5249;
	--bb-on-brick-soft: #f6dcd2;
	--bb-line: #e3d9cc;
	--bb-white: #fff;
	--bb-glass: #1a2334;

	--bb-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--bb-slab: "Zilla Slab", Rockwell, Georgia, serif;
	--bb-display: "Alfa Slab One", "Zilla Slab", Rockwell, serif;

	--bb-wrap: 75rem;
	--bb-gutter: clamp(1rem, 4vw, 2.5rem);
	--bb-radius: 6px;
	--bb-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--bb-shadow-mat: drop-shadow(0 6px 10px rgba(45, 20, 8, 0.28));

	color-scheme: light;
}

/* Base */
html {
	scroll-padding-top: 5.5rem;
}

body {
	color: var(--bb-ink);
	background: var(--bb-white);
	font: 400 1.125rem/1.6 var(--bb-sans);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--bb-slab);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bb-ink);
	text-wrap: balance;
}

a {
	color: var(--bb-brick);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--bb-ease);
}
a:hover {
	color: var(--bb-brick-deep);
}

::selection {
	background: var(--bb-amber);
	color: var(--bb-ink);
}

:focus-visible {
	outline: 3px solid var(--bb-brick);
	outline-offset: 3px;
}
.bb-hero :focus-visible,
.bb-pagehead :focus-visible,
.bb-collection :focus-visible,
.bb-footer :focus-visible {
	outline-color: var(--bb-amber-light);
}

input[type="search"],
input[type="text"],
input[type="email"],
textarea {
	font: inherit;
	color: var(--bb-ink);
	background: var(--bb-white);
	border: 1px solid #b9ab9b;
	border-radius: var(--bb-radius);
}
input[type]::placeholder,
textarea::placeholder {
	color: #6f665d;
	opacity: 1;
}
input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #6f665d;
}

p,
li {
	text-wrap: pretty;
}

.bb-wrap {
	max-width: var(--bb-wrap);
	margin: 0 auto;
	padding: 0 var(--bb-gutter);
}

.bb-skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 1000;
	padding: 0.6rem 1rem;
	background: var(--bb-ink);
	color: var(--bb-white);
	border-radius: var(--bb-radius);
	text-decoration: none;
}
.bb-skip:focus {
	top: 1rem;
	color: var(--bb-white);
}

/* Header */
.bb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bb-white);
	border-bottom: 1px solid var(--bb-line);
}
.admin-bar .bb-header {
	top: 32px;
}
.bb-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
}
.bb-brand {
	font: 400 1.55rem/1 var(--bb-display);
	color: var(--bb-brick);
	text-decoration: none;
	letter-spacing: -0.01em;
	white-space: nowrap;
	margin-right: auto;
}
.bb-brand:hover {
	color: var(--bb-brick-deep);
}
.bb-brand img {
	display: block;
	max-height: 3rem;
	width: auto;
}

.bb-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	font: 600 1rem/1 var(--bb-sans);
	color: var(--bb-ink);
	background: var(--bb-white);
	border: 1px solid #b9ab9b;
	border-radius: var(--bb-radius);
}
.bb-menu-toggle .bb-i-close,
.bb-menu-open .bb-menu-toggle .bb-i-open {
	display: none;
}
.bb-menu-open .bb-menu-toggle .bb-i-close {
	display: inline;
}

.bb-menu,
.bb-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bb-menu a {
	display: block;
	color: var(--bb-ink);
	text-decoration: none;
	font-weight: 600;
}
.bb-menu .current-menu-item > a,
.bb-menu .current_page_item > a,
.bb-menu .current-menu-ancestor > a,
.bb-menu .current-menu-parent > a {
	color: var(--bb-brick);
}

.bb-search {
	display: flex;
	align-items: stretch;
}
.bb-search input[type="search"] {
	min-width: 0;
	width: 100%;
	height: 2.75rem;
	padding: 0 0.9rem;
	border-radius: var(--bb-radius) 0 0 var(--bb-radius);
	border-right: 0;
	font-size: 1rem;
}
.bb-search input[type="search"]:focus {
	border-color: var(--bb-brick);
	outline: 2px solid var(--bb-brick);
	outline-offset: -2px;
}
.bb-search button {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	padding: 0 0.8rem;
	font: 600 1rem/1 var(--bb-sans);
	color: var(--bb-white);
	background: var(--bb-brick);
	border: 0;
	border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
}
.bb-search button:hover {
	background: var(--bb-brick-deep);
}

/* Mobile panel */
@media (max-width: 63.99em) {
	.bb-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 4.5rem);
		overflow-y: auto;
		padding: 0.5rem var(--bb-gutter) 1.5rem;
		background: var(--bb-white);
		border-bottom: 1px solid var(--bb-line);
		box-shadow: 0 18px 30px -18px rgba(35, 31, 26, 0.35);
	}
	.bb-menu-open .bb-panel {
		display: block;
	}
	.bb-menu > li {
		border-bottom: 1px solid var(--bb-line);
	}
	.bb-menu a {
		padding: 0.8rem 0;
		font-size: 1.125rem;
	}
	.bb-menu .sub-menu {
		padding: 0 0 0.6rem 1rem;
	}
	.bb-menu .sub-menu a {
		padding: 0.45rem 0;
		font-weight: 400;
	}
	.bb-panel .bb-search {
		margin-top: 1.25rem;
	}
}

/* Desktop navigation */
@media (min-width: 64em) {
	.bb-menu-toggle {
		display: none;
	}
	.bb-panel {
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}
	.bb-menu {
		display: flex;
		gap: 0.25rem;
	}
	.bb-menu > li {
		position: relative;
	}
	.bb-menu > li > a {
		padding: 0.6rem 0.75rem;
		border-bottom: 3px solid transparent;
	}
	.bb-menu > li > a:hover {
		color: var(--bb-brick);
	}
	.bb-menu > .current-menu-item > a,
	.bb-menu > .current_page_item > a,
	.bb-menu > .current-menu-ancestor > a,
	.bb-menu > .current-menu-parent > a {
		border-bottom-color: var(--bb-amber);
	}
	.bb-menu > .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.45em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.2em) rotate(45deg);
	}
	.bb-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 14rem;
		padding: 0.5rem 0;
		background: var(--bb-white);
		border: 1px solid var(--bb-line);
		border-radius: var(--bb-radius);
		box-shadow: 0 14px 28px -12px rgba(35, 31, 26, 0.3);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.18s var(--bb-ease), transform 0.25s var(--bb-ease), visibility 0s 0.25s;
	}
	.bb-menu li:hover > .sub-menu,
	.bb-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	.bb-menu .sub-menu a {
		padding: 0.5rem 1.1rem;
		font-weight: 400;
	}
	.bb-menu .sub-menu a:hover {
		background: var(--bb-amber);
		color: var(--bb-ink);
	}
	.bb-panel .bb-search {
		width: 13.5rem;
	}
}

/* Buttons */
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.4rem;
	font: 600 1.0625rem/1 var(--bb-sans);
	text-decoration: none;
	border-radius: var(--bb-radius);
	border: 2px solid transparent;
	transition: background-color 0.2s var(--bb-ease), color 0.2s var(--bb-ease), border-color 0.2s var(--bb-ease);
}
.bb-btn--light {
	background: var(--bb-white);
	color: var(--bb-brick);
}
.bb-btn--light:hover {
	background: var(--bb-amber-light);
	color: var(--bb-ink);
}
.bb-btn--ghost {
	color: var(--bb-white);
	border-color: rgba(255, 255, 255, 0.7);
}
.bb-btn--ghost:hover {
	color: var(--bb-white);
	border-color: var(--bb-white);
	background: rgba(255, 255, 255, 0.12);
}
.bb-btn--amber {
	background: var(--bb-amber);
	color: var(--bb-ink);
}
.bb-btn--amber:hover {
	background: var(--bb-amber-light);
	color: var(--bb-ink);
}
.bb-btn--brick {
	background: var(--bb-brick);
	color: var(--bb-white);
}
.bb-btn--brick:hover {
	background: var(--bb-brick-deep);
	color: var(--bb-white);
}

/* Mats from the collection */
.bb-mat {
	display: block;
	height: auto;
	filter: var(--bb-shadow-mat);
}

/* Front page: opening */
.bb-hero {
	background: var(--bb-brick);
	color: var(--bb-white);
	overflow: hidden;
}
.bb-hero__inner {
	display: grid;
	gap: 2.5rem;
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.bb-hero__title {
	margin: 0 0 1.5rem;
	font: 400 clamp(3rem, 1.6rem + 5vw, 6rem)/0.95 var(--bb-display);
	letter-spacing: -0.01em;
	color: var(--bb-white);
}
.bb-hero__lede {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
	color: var(--bb-on-brick-soft);
}
.bb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}
.bb-hero__table {
	position: relative;
	height: 15rem;
}
.bb-hero__mat {
	position: absolute;
	width: clamp(6.5rem, 22vw, 10rem);
	transform: rotate(var(--r, 0deg));
	animation: bb-settle 0.9s var(--bb-ease) both;
	animation-delay: var(--d, 0s);
}
.bb-hero__mat--1 { left: 2%;  top: 8%;  --r: -8deg; --d: 0.05s; z-index: 2; }
.bb-hero__mat--2 { left: 30%; top: 0;   --r: 6deg;  --d: 0.12s; z-index: 3; }
.bb-hero__mat--3 { left: 60%; top: 10%; --r: -4deg; --d: 0.19s; z-index: 2; }
.bb-hero__mat--4 { left: 14%; top: 48%; --r: 5deg;  --d: 0.26s; z-index: 4; }
.bb-hero__mat--5 { left: 44%; top: 44%; --r: -7deg; --d: 0.33s; z-index: 5; }
.bb-hero__mat--6 { left: 72%; top: 52%; --r: 9deg;  --d: 0.40s; z-index: 4; }

@keyframes bb-settle {
	from {
		transform: translateY(-1.25rem) rotate(calc(var(--r, 0deg) + 10deg)) scale(1.06);
	}
}

@media (min-width: 56em) {
	.bb-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: center;
		min-height: 32rem;
	}
	.bb-hero__table {
		height: 26rem;
	}
	.bb-hero__mat {
		width: clamp(8rem, 13vw, 11rem);
	}
}

/* Sections */
.bb-section {
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.bb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 2rem;
}
.bb-section__title {
	margin: 0;
	font: 400 clamp(2.1rem, 1.5rem + 2vw, 3.1rem)/1.05 var(--bb-display);
}
.bb-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	text-decoration: none;
}
.bb-arrow {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
}
.bb-more .bb-arrow {
	transition: transform 0.3s var(--bb-ease);
}
.bb-more:hover .bb-arrow {
	transform: translateX(3px);
}
.bb-more:hover {
	text-decoration: underline;
}

/* Front page: styles */
.bb-styles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 40em) {
	.bb-styles {
		grid-template-columns: repeat(2, 1fr);
	}
	.bb-style--feature {
		grid-column: 1 / -1;
	}
}
@media (min-width: 64em) {
	.bb-styles {
		grid-template-columns: repeat(4, 1fr);
	}
	.bb-style--feature {
		grid-column: span 2;
	}
}
.bb-style__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--bb-ink);
	text-decoration: none;
}
.bb-style__link:hover {
	color: var(--bb-ink);
}
.bb-style__plate {
	display: flex;
	align-items: flex-end;
	height: 11.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 3px solid var(--bb-ink);
}
.bb-style__plate .bb-mat {
	width: 9.5rem;
	transform: rotate(var(--r, -3deg));
	transform-origin: 50% 90%;
	transition: transform 0.45s var(--bb-ease);
}
.bb-style:nth-child(2n) .bb-mat { --r: 4deg; }
.bb-style:nth-child(3n) .bb-mat { --r: -6deg; }
.bb-style__link:hover .bb-mat,
.bb-style__link:focus-visible .bb-mat {
	transform: translateY(-8px) rotate(calc(var(--r, -3deg) - 6deg));
}
.bb-style__name {
	margin: 1rem 0 0.4rem;
	font: 700 1.65rem/1.15 var(--bb-slab);
	transition: color 0.2s var(--bb-ease);
}
.bb-style__link:hover .bb-style__name {
	color: var(--bb-brick);
}
.bb-style__summary {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--bb-ink-soft);
}
.bb-style--feature .bb-style__plate {
	height: 15rem;
}
.bb-style--feature .bb-mat {
	width: 13rem;
}
.bb-style--feature .bb-style__name {
	font-size: 2.1rem;
}
.bb-style--feature .bb-style__summary {
	font-size: 1.2rem;
	max-width: 30rem;
}

/* Phones: one compact row per style, mat beside the text. */
@media (max-width: 39.99em) {
	.bb-styles {
		gap: 0;
	}
	.bb-style__link {
		display: grid;
		grid-template-columns: 5.5rem 1fr;
		column-gap: 1.1rem;
		align-items: center;
		padding: 1rem 0;
		border-bottom: 1px solid var(--bb-line);
	}
	.bb-style__plate,
	.bb-style--feature .bb-style__plate {
		grid-row: 1 / 3;
		height: auto;
		padding: 0;
		border: 0;
	}
	.bb-style__plate .bb-mat,
	.bb-style--feature .bb-mat {
		width: 5.25rem;
	}
	.bb-style__name,
	.bb-style--feature .bb-style__name {
		align-self: end;
		margin: 0 0 0.2rem;
		font-size: 1.35rem;
	}
	.bb-style__summary,
	.bb-style--feature .bb-style__summary {
		align-self: start;
		font-size: 1rem;
	}
}

/* Front page: introduction */
.bb-section--intro {
	background: var(--bb-amber);
	color: var(--bb-ink);
}
.bb-section--intro .bb-prose li::marker {
	color: var(--bb-ink);
}
.bb-section--intro a:not(.bb-door) {
	color: var(--bb-ink);
}
.bb-intro {
	display: grid;
	gap: 1.5rem 4rem;
}
@media (min-width: 56em) {
	.bb-intro {
		grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1.4fr);
	}
}

.bb-intro__aside {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.bb-door {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1rem;
	align-items: center;
	padding: 0.75rem;
	color: var(--bb-ink);
	text-decoration: none;
	background: var(--bb-white);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	transition: box-shadow 0.3s var(--bb-ease);
}
.bb-door:hover {
	color: var(--bb-ink);
	box-shadow: 0 14px 26px -16px rgba(35, 31, 26, 0.35);
}
.bb-door img {
	width: 6rem;
	height: 7.5rem;
	object-fit: cover;
	border-radius: 4px;
	background: var(--bb-glass);
}
.bb-door__name {
	display: block;
	font: 700 1.3rem/1.2 var(--bb-slab);
}
.bb-door__summary {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--bb-ink-soft);
}

/* Reading column */
.bb-prose {
	max-width: 66ch;
}
.bb-prose > :first-child {
	margin-top: 0;
}
.bb-prose p,
.bb-prose ul,
.bb-prose ol {
	margin: 0 0 1.1em;
}
.bb-prose ul,
.bb-prose ol {
	padding-left: 1.3em;
}
.bb-prose li {
	margin-bottom: 0.35em;
}
.bb-prose li::marker {
	color: var(--bb-brick);
}
.bb-prose h2,
.bb-prose h3 {
	margin: 1.8em 0 0.5em;
}
.bb-prose h2 { font-size: 1.75rem; }
.bb-prose h3 { font-size: 1.35rem; }
.bb-prose strong,
.bb-prose b {
	font-weight: 700;
	color: var(--bb-ink);
}
.bb-prose img {
	max-width: 100%;
	height: auto;
}

/* Text pasted with inline fonts and sizes reads like the rest. */
.bb-prose span[style],
.holder.iv-page span[style] {
	font-family: inherit !important;
	font-size: inherit !important;
}

/* Front page: collection */
.bb-collection {
	background: var(--bb-ink);
	color: #e9e1d6;
}
.bb-collection .bb-section__title {
	color: var(--bb-white);
}
.bb-collection__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
.bb-collection__text p {
	max-width: 30rem;
	margin: 1rem 0 0;
}
.bb-collection__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem !important;
}
.bb-mosaic {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.75rem, 2vw, 1.5rem);
	align-items: center;
}
.bb-mosaic .bb-mat {
	width: 100%;
	max-width: 9rem;
	margin: 0 auto;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.bb-mosaic li:nth-child(3n + 1) .bb-mat { transform: rotate(-4deg); }
.bb-mosaic li:nth-child(3n + 2) .bb-mat { transform: rotate(3deg); }
.bb-mosaic li:nth-child(4n) .bb-mat { transform: rotate(-1deg); }
@media (min-width: 40em) {
	.bb-mosaic {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (min-width: 64em) {
	.bb-collection__inner {
		grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.6fr);
	}
	.bb-mosaic {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Front page: recipes */
.bb-recipes {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bb-line);
}
.bb-recipes li {
	border-bottom: 1px solid var(--bb-line);
}
.bb-recipes a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.3 var(--bb-slab);
	color: var(--bb-ink);
	text-decoration: none;
}
.bb-recipes .bb-arrow {
	flex: none;
	color: var(--bb-brick);
	transition: transform 0.3s var(--bb-ease);
}
.bb-recipes a:hover {
	color: var(--bb-brick);
}
.bb-recipes a:hover .bb-arrow {
	transform: translateX(4px);
}

/* Page header */
.bb-pagehead {
	background: var(--bb-brick);
	color: var(--bb-white);
}
.bb-pagehead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.bb-crumbs {
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}
.bb-crumbs a {
	color: var(--bb-on-brick-soft);
}
.bb-crumbs a:hover {
	color: var(--bb-white);
}
.bb-crumbs a::after {
	content: " /";
	display: inline-block;
	margin-left: 0.35em;
	color: var(--bb-on-brick-soft);
}
.bb-pagehead__title {
	margin: 0;
	font: 400 clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem)/1 var(--bb-display);
	color: var(--bb-white);
}
.bb-pagehead__intro {
	max-width: 40rem;
	margin: 0.75rem 0 0;
	font-size: 1.2rem;
	color: var(--bb-on-brick-soft);
}
.bb-pagehead__mat {
	flex: none;
	width: clamp(5.5rem, 14vw, 9.5rem);
	transform: rotate(6deg);
	filter: drop-shadow(0 10px 14px rgba(40, 10, 4, 0.45));
}

/* Inner pages */
.bb-main {
	display: block;
}
.bb-main--wide .holder.iv-page,
.bb-main--wide .holder {
	padding: clamp(2rem, 5vw, 3.5rem) var(--bb-gutter);
}
.bb-listing .holder.iv-page {
	padding: 0;
}
.bb-listing .holder.iv-page .container {
	max-width: 66ch;
	margin: 0;
}
.bb-main--wide .holder .container,
.bb-main--wide .holder.iv-page .container {
	max-width: var(--bb-wrap);
}
.holder.iv-page .container {
	font-size: 1.125rem;
	color: var(--bb-ink);
}
.holder.iv-page .container p,
.holder.iv-page .container ul,
.holder.iv-page .container ol {
	margin: 0 0 1.1em;
}
.holder.iv-page .container strong,
.holder.iv-page .container b {
	color: var(--bb-ink);
	font-weight: 700;
}
.holder.iv-page .container li::marker {
	color: var(--bb-brick);
}
.holder.iv-page table,
.bb-prose table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.holder.iv-page th,
.holder.iv-page td,
.bb-prose th,
.bb-prose td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bb-line);
	color: var(--bb-ink);
}
.holder.iv-page th,
.bb-prose th,
.holder.iv-page tr:first-child td {
	background: var(--bb-ink);
	color: var(--bb-white);
	font-weight: 700;
}
.holder.iv-page .wp-block-table,
.bb-prose .wp-block-table {
	margin: 1.5rem 0;
	overflow-x: auto;
}
.holder.iv-page table,
.holder.iv-page tr,
.bb-prose table,
.bb-prose tr {
	border: 0;
	background: none;
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 400;
}
.holder.iv-page .wp-block-table table {
	margin: 0;
	min-width: 36rem;
}
.holder.iv-page table thead {
	display: table-header-group;
}
.holder.iv-page table tr {
	display: table-row;
	margin: 0;
}
.holder.iv-page table td {
	display: table-cell;
	text-align: left;
	font-size: 1rem;
}
.holder.iv-page table td::before {
	content: none;
}
/* Cells pasted entirely in bold: keep bold for the header row and first column only. */
.holder.iv-page .container td strong {
	font-weight: inherit;
	color: inherit;
}
.holder.iv-page td:first-child {
	font-weight: 700;
}

/* Collection landing */
.bb-galleries {
	list-style: none;
	margin: 0;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	display: grid;
	gap: 1.75rem;
}
@media (min-width: 48em) {
	.bb-galleries {
		grid-template-columns: 1fr 1fr;
	}
}
.bb-gallery__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--bb-ink);
	text-decoration: none;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: box-shadow 0.3s var(--bb-ease), border-color 0.2s var(--bb-ease);
}
.bb-gallery__link:hover {
	color: var(--bb-ink);
	border-color: #cdbfae;
	box-shadow: 0 18px 34px -20px rgba(35, 31, 26, 0.4);
}
.bb-gallery__plate {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	height: 17rem;
	padding: 1.5rem;
	background: var(--bb-amber);
}
.bb-gallery__plate img {
	width: 32%;
	max-width: 10rem;
	height: auto;
	filter: var(--bb-shadow-mat);
	transition: transform 0.45s var(--bb-ease);
}
.bb-gallery__plate--sous-bock img:nth-child(1) { transform: rotate(-9deg) translateX(18%); }
.bb-gallery__plate--sous-bock img:nth-child(2) { transform: translateY(-6%); z-index: 1; }
.bb-gallery__plate--sous-bock img:nth-child(3) { transform: rotate(8deg) translateX(-18%); }
.bb-gallery__link:hover .bb-gallery__plate--sous-bock img:nth-child(1) { transform: rotate(-14deg) translateX(8%); }
.bb-gallery__link:hover .bb-gallery__plate--sous-bock img:nth-child(3) { transform: rotate(13deg) translateX(-8%); }
.bb-gallery__plate--les-verres {
	background: var(--bb-glass);
	gap: 2%;
	padding: 0 1rem;
	align-items: stretch;
}
.bb-gallery__plate--les-verres img {
	width: 32%;
	max-width: none;
	object-fit: cover;
	filter: none;
}
.bb-gallery__name {
	margin: 1.25rem 1.5rem 0.35rem;
	font: 700 1.75rem/1.15 var(--bb-slab);
}
.bb-gallery__name .bb-arrow,
.bb-door__name .bb-arrow {
	color: var(--bb-brick);
	transition: transform 0.3s var(--bb-ease);
}
.bb-gallery__link:hover .bb-arrow,
.bb-door:hover .bb-arrow {
	transform: translateX(4px);
}
.bb-gallery__text {
	margin: 0 1.5rem 1.5rem;
	color: var(--bb-ink-soft);
}
.bb-galleries__note {
	padding-bottom: 3rem;
}

/* Listings: search, archives, single posts */
.bb-listing {
	display: grid;
	gap: 3rem;
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 64em) {
	.bb-listing {
		grid-template-columns: minmax(0, 1fr) 17rem;
		gap: 4rem;
	}
}
.bb-listing__main {
	min-width: 0;
	max-width: 46rem;
}
.bb-result {
	display: flex;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--bb-line);
}
.bb-result:first-child {
	padding-top: 0;
}
.bb-result__image {
	flex: none;
	width: 5.5rem;
}
.bb-result__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.bb-result__image .bb-mat {
	border-radius: 0;
}
.bb-result__title {
	margin: 0 0 0.4rem;
	font-size: 1.45rem;
}
.bb-result__title a {
	color: var(--bb-ink);
	text-decoration: none;
}
.bb-result__title a:hover {
	color: var(--bb-brick);
	text-decoration: underline;
}
.bb-result p {
	max-width: 62ch;
	margin: 0;
	color: var(--bb-ink-soft);
}
.bb-result .moretag,
.bb-prose .moretag {
	font-weight: 600;
	white-space: nowrap;
}
.bb-listing .pagination {
	display: flex;
	gap: 0.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.bb-listing .pagination a {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	text-decoration: none;
}
.bb-listing .pagination .active a {
	background: var(--bb-brick);
	border-color: var(--bb-brick);
	color: var(--bb-white);
}
.bb-listing .no-results {
	padding: 0;
}
.bb-listing .no-results .page-title {
	font-size: 1.75rem;
}

/* Sidebar widgets */
.bb-listing__side .widget {
	margin: 0 0 2.25rem;
	color: var(--bb-ink);
	font-size: 1rem;
}
.bb-listing__side .widget-title,
.bb-listing__side .widget h2 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	font: 700 1.25rem/1.2 var(--bb-slab);
	border-bottom: 2px solid var(--bb-amber);
}
.bb-listing__side .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bb-listing__side .widget li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--bb-line);
}
.bb-listing__side .widget a {
	color: var(--bb-ink);
	text-decoration: none;
}
.bb-listing__side .widget a:hover {
	color: var(--bb-brick);
	text-decoration: underline;
}
.bb-listing__side .widget_search .search-form {
	display: flex;
}
.bb-listing__side .widget_search .search-form label {
	flex: 1;
	min-width: 0;
}
.bb-listing__side .widget_search input[type="search"] {
	float: none;
	width: 100%;
	margin: 0;
	height: 2.75rem;
	font-size: 1rem;
	background: var(--bb-white);
	border-radius: var(--bb-radius) 0 0 var(--bb-radius);
}
.bb-listing__side .widget_search input[type="submit"] {
	flex: none;
	width: auto;
	min-width: 0;
	height: 2.75rem;
	padding: 0 1rem;
	font: 600 1rem/1 var(--bb-sans);
	background: var(--bb-brick);
	border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
}
.bb-listing__side .widget_search input[type="submit"]:hover {
	background: var(--bb-brick-deep);
	color: var(--bb-white);
	border-color: transparent;
}

/* Single post */
.bb-article__image img {
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	border-radius: var(--bb-radius);
}
.bb-listing .post-navigation {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bb-line);
}
.bb-listing .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	text-transform: none;
	text-align: left;
	color: var(--bb-ink);
}
.bb-listing .post-navigation .nav-links::after {
	content: none;
}
.bb-listing .post-navigation .nav-previous,
.bb-listing .post-navigation .nav-next {
	width: auto;
}
.bb-listing .post-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}
.bb-listing .post-navigation a {
	text-decoration: none;
	font-weight: 600;
}
.bb-postnav__label {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--bb-ink-soft);
}

/* 404 */
.bb-notfound {
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.bb-notfound > * {
	max-width: 46rem;
}
.bb-search--large {
	margin: 1rem 0 1.75rem;
}
.bb-search--large input[type="search"] {
	height: 3.25rem;
	font-size: 1.125rem;
}
.bb-search--large button {
	padding: 0 1.4rem;
}
.bb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.bb-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	color: var(--bb-ink);
	text-decoration: none;
	background: var(--bb-white);
	border: 1px solid #b9ab9b;
	border-radius: 999px;
}
.bb-chips a:hover {
	background: var(--bb-amber);
	color: var(--bb-ink);
}

/* Footer */
.bb-footer {
	background: var(--bb-brick-deep);
	color: #f1c9bd;
	font-size: 1rem;
}
.bb-footer__inner {
	display: grid;
	gap: 1.5rem 3rem;
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}
.bb-footer__brand {
	margin: 0 0 0.25rem;
	font: 400 1.6rem/1 var(--bb-display);
	color: var(--bb-white);
}
.bb-footer__about p:last-child {
	margin: 0;
}
.bb-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-footer__nav a {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--bb-white);
	text-decoration: none;
}
.bb-footer__nav a:hover {
	text-decoration: underline;
	color: var(--bb-white);
}
.bb-footer__legal {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.9rem;
}
@media (min-width: 56em) {
	.bb-footer__inner {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	.bb-footer__nav ul {
		justify-content: flex-end;
	}
	.bb-footer__legal {
		grid-column: 1 / -1;
	}
}

/* Guide rail on reading pages */
.bb-rail__title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	font-size: 1.25rem;
	border-bottom: 2px solid var(--bb-amber);
}
.bb-rail ul {
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 0;
}
.bb-rail a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.25rem 0;
	color: var(--bb-ink);
	text-decoration: none;
	font-size: 1rem;
}
.bb-rail a:hover {
	color: var(--bb-brick);
}
.bb-rail a[aria-current="page"] {
	color: var(--bb-brick);
	font-weight: 700;
}
.bb-rail .bb-mat {
	width: 3rem;
	filter: drop-shadow(0 2px 3px rgba(45, 20, 8, 0.25));
	transform: rotate(-4deg);
	transition: transform 0.3s var(--bb-ease);
}
.bb-rail a:hover .bb-mat,
.bb-rail a[aria-current="page"] .bb-mat {
	transform: rotate(4deg) scale(1.06);
}
.bb-rail__more li {
	border-bottom: 1px solid var(--bb-line);
}

/* Read more */
.bb-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	font-weight: 600;
	text-decoration: none;
}
.bb-readmore:hover {
	text-decoration: underline;
}

/* The header already carries the search. */
.bb-listing__side .widget_search {
	display: none;
}

/* Phones: hero actions share one width. */
@media (max-width: 39.99em) {
	.bb-hero__actions {
		flex-direction: column;
	}
	.bb-hero__actions .bb-btn {
		width: 100%;
	}
}

/* Pages with a table: full-width content, the rail goes below. */
@media (min-width: 64em) {
	.bb-listing--table {
		grid-template-columns: minmax(0, 1fr);
	}
	.bb-listing--table .bb-listing__main {
		max-width: none;
	}
	.bb-listing--table .holder.iv-page .container {
		max-width: none;
	}
	.bb-listing--table .holder.iv-page .container > :not(.wp-block-table) {
		max-width: 66ch;
	}
	.bb-listing--table .bb-rail {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 0 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--bb-line);
	}
	.bb-listing--table .bb-rail__styles {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 2rem;
	}
	.bb-listing--table .bb-rail__title:nth-of-type(1) { grid-column: 1; grid-row: 1; }
	.bb-listing--table .bb-rail__styles { grid-column: 1; grid-row: 2; }
	.bb-listing--table .bb-rail__title:nth-of-type(2) { grid-column: 2; grid-row: 1; }
	.bb-listing--table .bb-rail__more { grid-column: 2; grid-row: 2; }
}

/* Phones: one labelled block per table row, nothing to scroll. */
@media (max-width: 39.99em) {
	.holder.iv-page .wp-block-table {
		overflow: visible;
	}
	.holder.iv-page table.bb-table--labelled {
		min-width: 0;
	}
	.holder.iv-page table.bb-table--labelled,
	.holder.iv-page table.bb-table--labelled tbody {
		display: block;
	}
	.holder.iv-page table.bb-table--labelled .bb-table__head {
		display: none;
	}
	.holder.iv-page table.bb-table--labelled tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid var(--bb-line);
		border-radius: var(--bb-radius);
		overflow: hidden;
	}
	.holder.iv-page table.bb-table--labelled td {
		display: block;
		padding: 0.5rem 0.9rem;
		border-bottom: 1px solid var(--bb-line);
	}
	.holder.iv-page table.bb-table--labelled td:last-child {
		border-bottom: 0;
	}
	.holder.iv-page table.bb-table--labelled td:first-child {
		background: var(--bb-ink);
		color: var(--bb-white);
		font: 700 1.15rem/1.3 var(--bb-slab);
	}
	.holder.iv-page table.bb-table--labelled td:not(:first-child)::before {
		content: attr(data-label);
		display: block;
		float: none;
		text-transform: none;
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--bb-brick);
	}
}

.bb-nowrap {
	white-space: nowrap;
}

/* Enamel-sign frame on the brick bands */
@media (max-width: 39.99em) {
	.bb-hero__inner,
	.bb-pagehead__inner {
		padding-left: calc(var(--bb-gutter) + 0.75rem);
		padding-right: calc(var(--bb-gutter) + 0.75rem);
	}
}
.bb-hero,
.bb-pagehead {
	position: relative;
}
.bb-hero::before,
.bb-pagehead::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 1.5px solid rgba(255, 210, 122, 0.55);
	border-radius: 10px;
	pointer-events: none;
}

/* Beer names inside the pages */
.bb-lead {
	margin: 0 0 1.5rem !important;
	font: 600 1.55rem/1.3 var(--bb-slab);
	color: var(--bb-brick);
}
h2.bb-beer {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2.25rem 0 0.6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bb-line);
	font: 700 1.75rem/1.1 var(--bb-slab);
	color: var(--bb-ink);
}
.bb-beer__mat {
	flex: none;
	width: 4.5rem;
	transform: rotate(-5deg);
}
.holder.iv-page ol:has(.bb-entry) {
	list-style: none;
	padding: 0;
}
.bb-entry {
	position: relative;
	margin: 0 0 1.5rem !important;
	padding: 1.25rem 0 0 0;
	border-top: 1px solid var(--bb-line);
}
.bb-entry--mat {
	padding-left: 5.5rem;
	min-height: 5.5rem;
}
.bb-entry__mat {
	position: absolute;
	left: 0;
	top: 1.25rem;
	width: 4.25rem;
	transform: rotate(-5deg);
}
.bb-entry__name {
	display: block;
	margin-bottom: 0.2rem;
	font: 700 1.4rem/1.2 var(--bb-slab);
	color: var(--bb-ink);
}

/* Collection galleries, A to Z: a dark display case, the scans' dark corners disappear into it */
.bb-case {
	background: var(--bb-ink);
	color: #e9e1d6;
}
.bb-main--wide .holder:has(.bb-case) {
	padding: 0;
}
.bb-gallery-page {
	padding-top: 2rem;
	padding-bottom: 4rem;
}
.bb-gallery-page__count {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	color: #e9e1d6;
}
.bb-gallery-page :focus-visible {
	outline-color: var(--bb-amber-light);
}
.bb-az {
	position: sticky;
	top: 4.5rem;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 calc(-1 * var(--bb-gutter)) 1rem;
	padding: 0.6rem var(--bb-gutter);
	background: rgba(35, 31, 26, 0.97);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 39.99em) {
	.bb-az {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.bb-az a,
	.bb-az span {
		flex: none;
	}
}
.admin-bar .bb-az {
	top: calc(4.5rem + 32px);
}
.bb-az a,
.bb-az span {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	font: 400 1.05rem/1 var(--bb-display);
	border-radius: 4px;
}
.bb-az a {
	color: var(--bb-amber);
	text-decoration: none;
}
.bb-az a:hover {
	background: var(--bb-amber);
	color: var(--bb-ink);
}
.bb-az span {
	color: #9a9086;
}
.bb-letter {
	scroll-margin-top: 9rem;
	padding-top: 2.5rem;
}
.bb-letter__title {
	margin: 0 0 1.25rem;
	padding-bottom: 0.4rem;
	font: 400 3rem/1 var(--bb-display);
	color: var(--bb-amber);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.bb-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
	gap: 2rem 1.5rem;
}
.bb-grid figure {
	margin: 0;
	text-align: center;
}
.bb-grid .bb-mat {
	width: 100%;
	max-width: 9.5rem;
	margin: 0 auto;
	transform: rotate(var(--r, -2deg));
	transition: transform 0.4s var(--bb-ease);
}
.bb-grid li:nth-child(3n + 1) .bb-mat { --r: 3deg; }
.bb-grid li:nth-child(4n) .bb-mat { --r: -5deg; }
.bb-grid li:hover .bb-mat {
	transform: rotate(0deg) scale(1.08);
}
.bb-grid .bb-mat {
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
}
.bb-grid figcaption {
	margin-top: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.3;
	color: #e9e1d6;
}
.bb-grid--glasses {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}
.bb-zoom {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background: var(--bb-glass);
}
.bb-zoom img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.5s var(--bb-ease);
}
.bb-zoom:hover img {
	transform: scale(1.05);
}

/* Glass viewer */
.bb-viewer {
	max-width: min(32rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--bb-radius);
	background: var(--bb-glass);
	color: var(--bb-white);
}
.bb-viewer::backdrop {
	background: rgba(20, 16, 12, 0.82);
}
.bb-viewer img {
	display: block;
	width: 100%;
	height: auto;
}
.bb-viewer__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem 0.75rem 1.1rem;
}
.bb-viewer__name {
	margin-right: auto;
	font: 700 1.25rem/1.2 var(--bb-slab);
}
.bb-viewer button {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--bb-white);
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	border-radius: var(--bb-radius);
	cursor: pointer;
}
.bb-viewer button:hover {
	background: rgba(255, 255, 255, 0.22);
}

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