/*
Theme Name: Strawberry Quest
Theme URI: https://strawberry.quest/
Author: strawberry.quest desk
Description: Standalone theme for strawberry.quest — a Canadian online-casino compliance ledger. No parent theme, no child theme, no external fonts, no JavaScript.
Version: 85519a84
Requires at least: 6.0
Tested up to: 6.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strawberry-quest

Contrast audit (WCAG AA, checked against the real background each pair is used on,
not against white — ratios computed 2026-08-20):
  ink #2A1D22      on paper #FDF8F6 15.37 · on stripe #F5EAE7 13.73 · on rule #EFE0DC 12.62
  muted #6B5560    on paper 6.44     · on stripe 5.76 · on rule 5.29
  berry #B4123C    on paper 6.45     · on stripe 5.76 · on rule 5.29
  berry-dk #8E0E30 on paper 8.84
  leaf #2F6B4F     on paper 5.97     · on rule 4.90
  paper #FDF8F6    on berry #B4123C 6.45 · on ink-deep #241419 16.76
  footer-muted #CDB6BC on ink-deep 9.26 · footer-link #F1A9BC on ink-deep 9.37
*/

/* =========================================================================
   1. Tokens — primitive tier (raw values, referenced by nothing but tier 2)
   ====================================================================== */

:root {
	/* colour primitives */
	--ber-paper: #fdf8f6;
	--ber-paper-2: #f5eae7;
	--ber-paper-3: #efe0dc;
	--ber-line: #e3d2ce;
	--ber-ink: #2a1d22;
	--ber-ink-deep: #241419;
	--ber-slate: #6b5560;
	--ber-berry: #b4123c;
	--ber-berry-dk: #8e0e30;
	--ber-leaf: #2f6b4f;
	--ber-blush: #cdb6bc;
	--ber-blush-lt: #f1a9bc;

	/* spacing primitives — 4px base */
	--ber-sp-1: 0.25rem;
	--ber-sp-2: 0.5rem;
	--ber-sp-3: 0.75rem;
	--ber-sp-4: 1rem;
	--ber-sp-5: 1.25rem;
	--ber-sp-6: 1.5rem;
	--ber-sp-8: 2rem;
	--ber-sp-10: 2.5rem;
	--ber-sp-12: 3rem;
	--ber-sp-16: 4rem;
	--ber-sp-20: 5rem;

	/* type primitives — 1.25 scale off a 16px base; xs floor is 13px raw (network gate flags <13px) */
	--ber-fs-xs: 0.85rem;
	--ber-fs-sm: 0.9rem;
	--ber-fs-md: 1rem;
	--ber-fs-lg: 1.25rem;
	--ber-fs-xl: 1.5625rem;
	--ber-fs-2xl: 1.9531rem;
	--ber-fs-3xl: 2.4414rem;
	--ber-fs-4xl: 3.0518rem;

	/* Nothing on this site goes below 1.32: the network's CSS gate flags any
	   computed line-height/font-size ratio under 1.3, and 1.3 exactly rounds
	   under on some font sizes. */
	--ber-lh-tight: 1.32;
	--ber-lh-snug: 1.38;
	--ber-lh-body: 1.65;

	/* other primitives */
	--ber-radius-sm: 3px;
	--ber-radius-md: 6px;
	--ber-rule: 1px solid var(--ber-line);
	--ber-rule-strong: 2px solid var(--ber-ink);
	--ber-shadow: 0 1px 0 var(--ber-line);
	--ber-max: 1120px;
	--ber-prose: 44rem; /* ~704px, inside the 680–840px band */

	/* =====================================================================
	   2. Tokens — semantic tier (what the value MEANS on this site)
	   ================================================================== */
	--ber-color-bg: var(--ber-paper);
	--ber-color-bg-alt: var(--ber-paper-2);
	--ber-color-bg-rule: var(--ber-paper-3);
	--ber-color-bg-invert: var(--ber-ink-deep);
	--ber-color-text: var(--ber-ink);
	--ber-color-text-muted: var(--ber-slate);
	--ber-color-text-invert: var(--ber-paper);
	--ber-color-text-invert-muted: var(--ber-blush);
	--ber-color-accent: var(--ber-berry);
	--ber-color-accent-hover: var(--ber-berry-dk);
	--ber-color-accent-invert: var(--ber-blush-lt);
	--ber-color-support: var(--ber-leaf);
	--ber-color-border: var(--ber-line);
	--ber-color-focus: var(--ber-berry-dk);

	--ber-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ber-font-ledger: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--ber-space-inline: var(--ber-sp-4);
	--ber-space-stack: var(--ber-sp-6);
	--ber-space-section: var(--ber-sp-16);

	/* =====================================================================
	   3. Tokens — component tier
	   ================================================================== */
	--ber-btn-bg: var(--ber-color-accent);
	--ber-btn-bg-hover: var(--ber-color-accent-hover);
	--ber-btn-fg: var(--ber-color-text-invert);
	--ber-btn-pad-y: var(--ber-sp-3);
	--ber-btn-pad-x: var(--ber-sp-5);
	--ber-btn-min: 48px;

	--ber-ledger-stripe: var(--ber-paper-2);
	--ber-ledger-head-bg: var(--ber-paper-3);
	--ber-ledger-border: var(--ber-color-border);
	--ber-ledger-min: 46rem;

	--ber-badge-fg: var(--ber-color-text);
	--ber-badge-bg: transparent;
	--ber-badge-border: var(--ber-color-border);

	--ber-panel-bg: var(--ber-paper-2);
	--ber-panel-accent: var(--ber-color-accent);

	--ber-header-h: 4.5rem;
	--ber-focus-ring: 3px solid var(--ber-color-focus);
	--ber-focus-offset: 2px;
}

/* =========================================================================
   4. Base
   ====================================================================== */

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

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

body {
	margin: 0;
	background: var(--ber-color-bg);
	color: var(--ber-color-text);
	font-family: var(--ber-font-text);
	font-size: var(--ber-fs-md);
	line-height: var(--ber-lh-body);
	/* a hairline ledger rule running down the left of the page, like a ruled book margin */
	background-image: linear-gradient(to right, transparent 0, transparent calc(50% - var(--ber-max) / 2 + 0.75rem), var(--ber-line) calc(50% - var(--ber-max) / 2 + 0.75rem), var(--ber-line) calc(50% - var(--ber-max) / 2 + 0.8125rem), transparent calc(50% - var(--ber-max) / 2 + 0.8125rem));
}

img,
svg {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--ber-sp-4);
	line-height: var(--ber-lh-tight);
	letter-spacing: -0.015em;
	font-weight: 700;
	text-wrap: balance;
}

h1 {
	font-size: var(--ber-fs-3xl);
}

h2 {
	font-size: var(--ber-fs-xl);
}

h3 {
	font-size: var(--ber-fs-lg);
	line-height: var(--ber-lh-snug);
}

h4 {
	font-size: var(--ber-fs-md);
	line-height: var(--ber-lh-snug);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

p,
ul,
ol,
dl,
figure,
table,
blockquote {
	margin: 0 0 var(--ber-space-stack);
}

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

a:hover {
	color: var(--ber-color-accent-hover);
	text-decoration-thickness: 2px;
}

a:active {
	color: var(--ber-color-accent-hover);
	transform: translateY(1px);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: var(--ber-focus-ring);
	outline-offset: var(--ber-focus-offset);
	border-radius: var(--ber-radius-sm);
}

strong {
	font-weight: 700;
}

small {
	font-size: var(--ber-fs-sm);
}

hr {
	border: 0;
	border-top: var(--ber-rule);
	margin: var(--ber-sp-10) 0;
}

code,
kbd {
	font-family: var(--ber-font-ledger);
	font-size: 0.92em;
}

blockquote {
	border-left: 3px solid var(--ber-color-accent);
	padding-left: var(--ber-sp-5);
	color: var(--ber-color-text-muted);
	font-style: normal;
}

::selection {
	background: var(--ber-berry);
	color: var(--ber-paper);
}

/* =========================================================================
   5. Layout primitives
   ====================================================================== */

.ber-shell {
	width: 100%;
	max-width: var(--ber-max);
	margin-inline: auto;
	padding-inline: var(--ber-sp-5);
}

.ber-prose {
	max-width: var(--ber-prose);
}

.ber-prose > :last-child {
	margin-bottom: 0;
}

.ber-section {
	padding-block: var(--ber-sp-12);
}

.ber-section--tight {
	padding-block: var(--ber-sp-8);
}

.ber-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ber-color-bg-invert);
	color: var(--ber-color-text-invert);
	padding: var(--ber-sp-3) var(--ber-sp-4);
	z-index: 20;
}

.ber-skip:focus {
	left: var(--ber-sp-4);
	top: var(--ber-sp-2);
}

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

/* =========================================================================
   6. Header + navigation (wraps on mobile — no collapse, no JavaScript)
   ====================================================================== */

.ber-header {
	background: var(--ber-color-bg);
	border-bottom: var(--ber-rule-strong);
}

.ber-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ber-sp-3) var(--ber-sp-6);
	padding-block: var(--ber-sp-4);
}

.ber-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ber-sp-3);
	min-height: 48px;
}

.ber-brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ber-brand .custom-logo {
	max-height: 44px;
	width: auto;
}

.ber-brand__name {
	font-size: var(--ber-fs-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ber-color-text);
	text-decoration: none;
}

.ber-brand__name:hover {
	color: var(--ber-color-accent);
}

.ber-brand__rule {
	display: none;
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ber-color-text-muted);
	border-left: var(--ber-rule);
	padding-left: var(--ber-sp-3);
}

.ber-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ber-sp-1) var(--ber-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ber-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding-block: var(--ber-sp-1);
	color: var(--ber-color-text);
	font-size: var(--ber-fs-sm);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.ber-nav__list a:hover {
	color: var(--ber-color-accent);
	border-bottom-color: var(--ber-color-accent);
}

.ber-nav__list .current-menu-item > a,
.ber-nav__list .current-menu-parent > a,
.ber-nav__list [aria-current="page"] {
	border-bottom-color: var(--ber-color-text);
}

/* =========================================================================
   7. Masthead / page intros
   ====================================================================== */

.ber-masthead {
	padding-block: var(--ber-sp-12) var(--ber-sp-8);
	border-bottom: var(--ber-rule);
}

.ber-kicker {
	margin: 0 0 var(--ber-sp-3);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ber-color-accent);
}

.ber-masthead__title {
	font-size: var(--ber-fs-3xl);
	max-width: 20ch;
	margin-bottom: var(--ber-sp-5);
}

.ber-masthead__lede {
	max-width: var(--ber-prose);
	font-size: var(--ber-fs-lg);
	line-height: 1.55;
	color: var(--ber-color-text-muted);
	margin-bottom: var(--ber-sp-6);
}

.ber-masthead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ber-sp-2) var(--ber-sp-4);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ber-color-text-muted);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ber-masthead__meta li + li {
	border-left: var(--ber-rule);
	padding-left: var(--ber-sp-4);
}

/* =========================================================================
   8. Component — Ledger table (the site's structural idea)
   ====================================================================== */

.ber-ledger-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ber-sp-2) var(--ber-sp-6);
	margin-bottom: var(--ber-sp-5);
}

.ber-ledger-head h2 {
	margin: 0;
}

.ber-ledger-head__note {
	margin: 0;
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
}

.ber-ledger-scroll {
	overflow-x: auto;
	border: 1px solid var(--ber-ledger-border);
	border-radius: var(--ber-radius-md);
	background: var(--ber-color-bg);
}

.ber-ledger {
	width: 100%;
	min-width: var(--ber-ledger-min); /* keeps 4 columns readable inside the scroller */
	border-collapse: collapse;
	margin: 0;
	font-size: var(--ber-fs-sm);
	text-align: left;
}

.ber-ledger caption {
	caption-side: top;
	text-align: left;
	padding: var(--ber-sp-3) var(--ber-sp-4);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
	border-bottom: 1px solid var(--ber-ledger-border);
	background: var(--ber-color-bg);
}

.ber-ledger thead th {
	background: var(--ber-ledger-head-bg);
	color: var(--ber-color-text);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--ber-sp-3) var(--ber-sp-4);
	border-bottom: 2px solid var(--ber-ink);
	white-space: nowrap;
}

.ber-ledger tbody tr {
	border-bottom: 1px solid var(--ber-ledger-border);
}

.ber-ledger tbody tr:nth-child(odd) {
	background: var(--ber-ledger-stripe);
}

.ber-ledger tbody tr:last-child {
	border-bottom: 0;
}

.ber-ledger td,
.ber-ledger th[scope="row"] {
	padding: var(--ber-sp-4);
	vertical-align: top;
}

.ber-ledger__topic {
	width: 30%;
	font-size: var(--ber-fs-md);
	font-weight: 700;
	line-height: var(--ber-lh-snug);
	text-align: left;
}

.ber-ledger__topic a {
	color: var(--ber-color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--ber-color-accent);
}

.ber-ledger__topic a:hover {
	color: var(--ber-color-accent);
}

.ber-ledger__scope {
	width: 14%;
	white-space: nowrap;
}

.ber-ledger__means {
	width: 42%;
	color: var(--ber-color-text-muted);
	line-height: 1.55;
}

.ber-ledger__read {
	width: 14%;
	white-space: nowrap;
	text-align: right;
}

.ber-ledger__read a {
	display: inline-flex;
	align-items: center;
	gap: var(--ber-sp-2);
	min-height: 48px;
	padding-inline: var(--ber-sp-2);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.ber-ledger__read a:hover {
	gap: var(--ber-sp-3);
}

.ber-ledger__arrow {
	font-size: 1.1em;
	line-height: 1.32;
}

.ber-ledger__cat {
	display: block;
	margin-top: var(--ber-sp-2);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ber-ledger__cat a {
	color: var(--ber-color-text-muted);
	border: 0;
	text-decoration: underline;
}

.ber-ledger__cat a:hover {
	color: var(--ber-color-accent);
}

/* =========================================================================
   9. Component — Badge
   ====================================================================== */

.ber-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border: 1px solid var(--ber-badge-border);
	border-radius: var(--ber-radius-sm);
	background: var(--ber-badge-bg);
	color: var(--ber-badge-fg);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}

.ber-badge--provincial {
	border-color: var(--ber-color-accent);
	color: var(--ber-color-accent);
}

.ber-badge--national {
	border-color: var(--ber-color-support);
	color: var(--ber-color-support);
}

/* =========================================================================
   10. Component — Button
   ====================================================================== */

.ber-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ber-sp-2);
	min-height: var(--ber-btn-min);
	min-width: var(--ber-btn-min);
	padding: var(--ber-btn-pad-y) var(--ber-btn-pad-x);
	background: var(--ber-btn-bg);
	color: var(--ber-btn-fg);
	border: 2px solid var(--ber-btn-bg);
	border-radius: var(--ber-radius-sm);
	font-size: var(--ber-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
}

.ber-btn:hover {
	background: var(--ber-btn-bg-hover);
	border-color: var(--ber-btn-bg-hover);
	color: var(--ber-btn-fg);
}

.ber-btn:active {
	transform: translateY(1px);
}

.ber-btn--ghost {
	background: transparent;
	color: var(--ber-color-accent);
	border-color: var(--ber-color-accent);
}

.ber-btn--ghost:hover {
	background: var(--ber-color-accent);
	color: var(--ber-btn-fg);
}

/* =========================================================================
   11. Component — Panel / banner (standing notices)
   ====================================================================== */

.ber-panel {
	background: var(--ber-panel-bg);
	border-left: 4px solid var(--ber-panel-accent);
	border-radius: 0 var(--ber-radius-md) var(--ber-radius-md) 0;
	padding: var(--ber-sp-5) var(--ber-sp-6);
	max-width: var(--ber-prose);
}

.ber-panel > :last-child {
	margin-bottom: 0;
}

.ber-panel__label {
	margin: 0 0 var(--ber-sp-2);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
}

.ber-panel--support {
	border-left-color: var(--ber-color-support);
}

/* =========================================================================
   12. Component — Accordion (native <details>, no script)
   ====================================================================== */

.ber-accordion {
	max-width: var(--ber-prose);
	border-top: var(--ber-rule);
}

.ber-accordion__item {
	border-bottom: var(--ber-rule);
}

.ber-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ber-sp-4);
	min-height: 48px;
	padding: var(--ber-sp-4) 0;
	font-size: var(--ber-fs-md);
	font-weight: 700;
	line-height: var(--ber-lh-snug);
	cursor: pointer;
	list-style: none;
}

.ber-accordion__item summary::-webkit-details-marker {
	display: none;
}

.ber-accordion__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-lg);
	line-height: 1;
	color: var(--ber-color-accent);
}

.ber-accordion__item[open] summary::after {
	content: "\2212";
}

.ber-accordion__item summary:hover {
	color: var(--ber-color-accent);
}

.ber-accordion__body {
	padding-bottom: var(--ber-sp-5);
	color: var(--ber-color-text-muted);
	max-width: 42rem;
}

.ber-accordion__body > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   13. Component — Section index (category links, ledger legend style)
   ====================================================================== */

.ber-index {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ber-sp-3);
	list-style: none;
	margin: 0 0 var(--ber-sp-8);
	padding: 0;
}

.ber-index__link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ber-sp-2);
	min-height: 48px;
	padding: var(--ber-sp-3) var(--ber-sp-4);
	border: 1px solid var(--ber-color-border);
	border-radius: var(--ber-radius-sm);
	background: var(--ber-color-bg);
	color: var(--ber-color-text);
	font-size: var(--ber-fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.ber-index__link:hover {
	border-color: var(--ber-color-accent);
	color: var(--ber-color-accent);
}

.ber-index__count {
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 400;
	color: var(--ber-color-text-muted);
}

.ber-index__link:hover .ber-index__count {
	color: inherit;
}

/* =========================================================================
   14. Breadcrumbs
   ====================================================================== */

.ber-crumbs {
	padding-block: var(--ber-sp-4) 0;
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.06em;
	color: var(--ber-color-text-muted);
}

.ber-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ber-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ber-crumbs li + li::before {
	content: "/";
	margin-right: var(--ber-sp-2);
	color: var(--ber-color-border);
}

.ber-crumbs a {
	color: var(--ber-color-text-muted);
}

.ber-crumbs a:hover {
	color: var(--ber-color-accent);
}

/* =========================================================================
   15. Single post + pages (article typography)
   ====================================================================== */

.ber-entry {
	padding-block: var(--ber-sp-8) var(--ber-sp-12);
}

.ber-entry__header {
	max-width: var(--ber-prose);
	padding-bottom: var(--ber-sp-6);
	border-bottom: var(--ber-rule-strong);
	margin-bottom: var(--ber-sp-8);
}

.ber-entry__title {
	font-size: var(--ber-fs-2xl);
	margin-bottom: var(--ber-sp-4);
}

.ber-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ber-sp-2) var(--ber-sp-4);
	margin: 0;
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
}

.ber-entry__figure {
	margin: 0 0 var(--ber-sp-8);
}

.ber-entry__figure img {
	width: 100%;
	border-radius: var(--ber-radius-md);
	border: 1px solid var(--ber-color-border);
}

.ber-entry__body {
	max-width: var(--ber-prose);
	font-size: 1.0625rem;
	line-height: 1.72;
}

.ber-entry__body h2 {
	margin-top: var(--ber-sp-10);
	padding-top: var(--ber-sp-4);
	border-top: var(--ber-rule);
}

.ber-entry__body h3 {
	margin-top: var(--ber-sp-8);
}

.ber-entry__body ul,
.ber-entry__body ol {
	padding-left: var(--ber-sp-6);
}

.ber-entry__body li {
	margin-bottom: var(--ber-sp-2);
}

.ber-entry__body img {
	border-radius: var(--ber-radius-md);
}

.ber-entry__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ber-fs-sm);
}

.ber-entry__body th,
.ber-entry__body td {
	padding: var(--ber-sp-3);
	border: 1px solid var(--ber-color-border);
	text-align: left;
}

.ber-entry__body th {
	background: var(--ber-color-bg-rule);
}

.ber-entry__foot {
	max-width: var(--ber-prose);
	margin-top: var(--ber-sp-10);
	display: grid;
	gap: var(--ber-sp-6);
}

.ber-entry__nav .nav-links {
	display: grid;
	gap: var(--ber-sp-4);
	padding-top: var(--ber-sp-6);
	border-top: var(--ber-rule);
}

.ber-entry__nav a {
	display: block;
	font-size: var(--ber-fs-sm);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-block: var(--ber-sp-2);
	min-height: 48px;
}

.ber-entry__nav a:hover {
	border-bottom-color: currentColor;
}

.ber-entry__nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Byline block (single + author archive) */
.ber-byline {
	display: flex;
	align-items: flex-start;
	gap: var(--ber-sp-4);
	padding: var(--ber-sp-5);
	border: 1px solid var(--ber-color-border);
	border-radius: var(--ber-radius-md);
	background: var(--ber-color-bg-alt);
	max-width: var(--ber-prose);
}

.ber-byline__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.ber-byline__avatar img {
	border-radius: 50%;
	border: 1px solid var(--ber-color-border);
}

.ber-byline__body > :last-child {
	margin-bottom: 0;
}

.ber-byline__name {
	margin: 0 0 var(--ber-sp-1);
	font-size: var(--ber-fs-md);
	font-weight: 700;
}

.ber-byline__role {
	margin: 0 0 var(--ber-sp-3);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
}

.ber-byline__bio {
	margin: 0;
	font-size: var(--ber-fs-sm);
	color: var(--ber-color-text-muted);
}

.ber-page {
	padding-block: var(--ber-sp-8) var(--ber-sp-12);
}

.ber-page__title {
	font-size: var(--ber-fs-2xl);
	max-width: 22ch;
}

.ber-page__body {
	max-width: var(--ber-prose);
	font-size: 1.0625rem;
	line-height: 1.72;
}

.ber-page__body h2 {
	margin-top: var(--ber-sp-10);
	font-size: var(--ber-fs-lg);
	color: var(--ber-color-text);
}

.ber-page__body h2:first-child {
	margin-top: var(--ber-sp-6);
}

.ber-page__body h3 {
	margin-top: var(--ber-sp-8);
	font-size: var(--ber-fs-md);
}

.ber-page__body ul,
.ber-page__body ol {
	padding-left: var(--ber-sp-6);
}

.ber-page__body li {
	margin-bottom: var(--ber-sp-2);
}

/* Pagination */
.ber-pagination {
	padding-block: var(--ber-sp-8);
}

.ber-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ber-sp-2);
}

.ber-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 var(--ber-sp-3);
	border: 1px solid var(--ber-color-border);
	border-radius: var(--ber-radius-sm);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-sm);
	text-decoration: none;
	color: var(--ber-color-text);
}

.ber-pagination .page-numbers:hover {
	border-color: var(--ber-color-accent);
	color: var(--ber-color-accent);
}

.ber-pagination .page-numbers.current {
	background: var(--ber-color-text);
	border-color: var(--ber-color-text);
	color: var(--ber-color-text-invert);
}

.ber-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ber-empty {
	max-width: var(--ber-prose);
	color: var(--ber-color-text-muted);
}

/* =========================================================================
   16. Search form
   ====================================================================== */

.ber-search {
	max-width: 30rem;
}

.ber-search__label {
	display: block;
	margin-bottom: var(--ber-sp-2);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ber-color-text-muted);
}

.ber-search__row {
	display: flex;
	gap: var(--ber-sp-2);
}

.ber-search__input {
	flex: 1 1 auto;
	min-height: 48px;
	padding: var(--ber-sp-2) var(--ber-sp-3);
	border: 1px solid var(--ber-color-border);
	border-radius: var(--ber-radius-sm);
	background: var(--ber-color-bg);
	color: var(--ber-color-text);
	font: inherit;
	font-size: var(--ber-fs-sm);
}

.ber-search__input::placeholder {
	color: var(--ber-color-text-muted);
}

/* =========================================================================
   17. Footer
   ====================================================================== */

.ber-footer {
	background: var(--ber-color-bg-invert);
	color: var(--ber-color-text-invert);
	padding-block: var(--ber-sp-12) var(--ber-sp-8);
	margin-top: var(--ber-sp-16);
	border-top: 4px solid var(--ber-color-accent);
}

.ber-footer a {
	color: var(--ber-color-accent-invert);
}

.ber-footer a:hover {
	color: var(--ber-color-text-invert);
}

.ber-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ber-sp-8);
	margin: 0 0 var(--ber-sp-10);
	padding: 0;
	list-style: none;
}

.ber-footer__col h2 {
	margin: 0 0 var(--ber-sp-4);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ber-color-text-invert-muted);
}

.ber-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ber-sp-1);
}

.ber-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--ber-fs-sm);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ber-footer__list a:hover {
	border-bottom-color: currentColor;
}

.ber-footer__contact {
	margin: 0 0 var(--ber-sp-3);
	font-size: var(--ber-fs-sm);
	color: var(--ber-color-text-invert-muted);
}

.ber-footer__mail {
	display: block;
	margin-top: var(--ber-sp-1);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-sm);
	color: var(--ber-color-text-invert);
	word-break: break-all;
}

.ber-footer__base {
	display: grid;
	gap: var(--ber-sp-3);
	padding-top: var(--ber-sp-6);
	border-top: 1px solid rgba(253, 248, 246, 0.22);
	font-size: var(--ber-fs-sm);
	color: var(--ber-color-text-invert-muted);
	line-height: 1.6;
}

.ber-footer__base p {
	margin: 0;
}

.ber-footer__age {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid var(--ber-color-text-invert-muted);
	border-radius: var(--ber-radius-sm);
	font-family: var(--ber-font-ledger);
	font-size: var(--ber-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ber-color-text-invert);
}

/* =========================================================================
   18. Breakpoints — 375 (base, mobile-first) / 768 / 1440
   ====================================================================== */

/* Below 768px the ledger reflows to stacked label:value rows. Explicit ARIA
   roles in the markup keep table semantics after display is overridden. */
@media (max-width: 767px) {
	.ber-ledger-scroll {
		border: 0;
		border-radius: 0;
		overflow-x: visible;
	}

	.ber-ledger {
		min-width: 0;
		display: block;
	}

	.ber-ledger caption {
		border: 0;
		padding-inline: 0;
	}

	.ber-ledger thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.ber-ledger tbody {
		display: block;
	}

	.ber-ledger tbody tr {
		display: block;
		padding: var(--ber-sp-5) var(--ber-sp-4);
		border: 1px solid var(--ber-ledger-border);
		border-radius: var(--ber-radius-md);
		margin-bottom: var(--ber-sp-4);
		background: var(--ber-color-bg);
	}

	.ber-ledger tbody tr:nth-child(odd) {
		background: var(--ber-ledger-stripe);
	}

	.ber-ledger td,
	.ber-ledger th[scope="row"] {
		display: block;
		width: auto;
		padding: 0 0 var(--ber-sp-3);
		text-align: left;
		white-space: normal;
	}

	.ber-ledger td:last-child {
		padding-bottom: 0;
	}

	.ber-ledger [data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--ber-sp-1);
		font-family: var(--ber-font-ledger);
		font-size: var(--ber-fs-xs);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ber-color-text-muted);
	}

	.ber-masthead__title {
		font-size: var(--ber-fs-2xl);
		max-width: none;
	}

	.ber-entry__title,
	.ber-page__title {
		font-size: var(--ber-fs-xl);
	}
}

@media (min-width: 768px) {
	:root {
		--ber-space-section: var(--ber-sp-20);
	}

	.ber-shell {
		padding-inline: var(--ber-sp-8);
	}

	.ber-brand__rule {
		display: inline-block;
	}

	.ber-section {
		padding-block: var(--ber-sp-16);
	}

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

	.ber-entry__foot {
		gap: var(--ber-sp-8);
	}
}

@media (min-width: 1024px) {
	.ber-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ber-sp-10);
	}
}

@media (min-width: 1440px) {
	:root {
		--ber-max: 1200px;
	}

	.ber-masthead__title {
		font-size: var(--ber-fs-4xl);
	}

	.ber-entry__body,
	.ber-page__body {
		font-size: 1.125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}

	a:active,
	.ber-btn:active {
		transform: none;
	}
}

@media print {
	.ber-header,
	.ber-footer,
	.ber-crumbs,
	.ber-pagination {
		display: none;
	}

	body {
		background-image: none;
	}
}