/*
 * Apiary — design system and site shell.
 *
 * Two decisions worth stating up front.
 *
 * 1. The ground is warm and light — a foundation-wax cream, walnut ink — not
 *    the dark glass this catalogue has reached for by default lately. A
 *    beekeeping operation's whole material world (wax, wood, paper labels,
 *    honey itself) is warm and daylit, and a site that puts it on a black
 *    glass panel is describing something else.
 *
 * 2. There is no decorative card grid anywhere in this theme. Content that
 *    would default to a card sits in a frame-slot instead — a module
 *    proportioned to a real deep Langstroth frame (17 5/8" x 9 1/8", ~1.93:1)
 *    — because the layout habit this catalogue keeps repeating is "equal-size
 *    cards in a grid," and the fix is a different module, not a different
 *    coat of paint on the same one.
 */

:root {
	/* Ground */
	--ap-paper: #f7f1da;
	--ap-paper-2: #efe4c0;
	--ap-panel: rgba( 255, 251, 238, 0.72 );
	--ap-panel-solid: #fbf6e6;
	--ap-raise: rgba( 43, 29, 16, 0.04 );
	--ap-hair: rgba( 43, 29, 16, 0.14 );
	--ap-hair-2: rgba( 43, 29, 16, 0.24 );

	/* Ink */
	--ap-ink: #2a1c0f;
	--ap-fog: #5b4834;
	--ap-dim: #8a7455;

	/* The accent */
	--ap-honey: #cc8a1a;
	--ap-honey-deep: #965f0c;
	--ap-honey-glow: rgba( 204, 138, 26, 0.24 );
	--ap-honey-ink: #4a2f05;

	/* Data channels — comb states, forage distance, temperament. Not brand colours. */
	--ap-comb: #b8863a;
	--ap-propolis: #6b3a22;
	--ap-sting: #9a3a24;
	--ap-leaf: #5f6b3c;

	/* Type */
	--ap-display: 'Fraunces', ui-serif, Georgia, serif;
	--ap-text: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	--ap-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* One scale, base 17 / ratio 1.333, seven steps. */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: 1.4375rem;
	--t-lg: 1.9375rem;
	--t-xl: clamp( 2.25rem, 3.8vw, 3rem );
	--t-2xl: clamp( 2.75rem, 6vw, 4.5rem );

	/* Spacing — 4px base */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;

	--ap-radius: 6px;
	--ap-radius-lg: 14px;

	--ap-gutter: clamp( 1.25rem, 4vw, 3rem );
	--ap-max: 76rem;

	/* The frame aspect: a deep Langstroth frame's external proportions. */
	--ap-frame-ratio: 1.93;

	--ap-ease: cubic-bezier( 0.18, 0.9, 0.32, 1 );
	--ap-fast: 200ms;
	--ap-slow: 560ms;
}

/* ---------------------------------------------------------------- reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	background: var( --ap-paper );
	color: var( --ap-fog );
	font-family: var( --ap-text );
	font-size: var( --t-base );
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var( --ap-honey-glow );
	color: var( --ap-honey-ink );
}

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

a { color: var( --ap-honey-deep ); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var( --ap-ink ); }

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

button { font: inherit; color: inherit; }

.ap-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: var( --s-3 ) var( --s-5 );
	background: var( --ap-honey );
	color: #2a1a02;
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
}
.ap-skip:focus { left: var( --s-4 ); top: var( --s-4 ); }

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* ----------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6 {
	font-family: var( --ap-display );
	font-weight: 600;
	color: var( --ap-ink );
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 var( --s-4 );
	font-variation-settings: 'opsz' 40;
}

h1 { font-size: var( --t-2xl ); font-weight: 600; font-variation-settings: 'opsz' 144; }
h2 { font-size: var( --t-xl ); font-variation-settings: 'opsz' 90; }
h3 { font-size: var( --t-lg ); font-variation-settings: 'opsz' 60; }
h4 { font-size: var( --t-md ); letter-spacing: -0.005em; }
h5, h6 { font-size: var( --t-base ); letter-spacing: 0; }

p { margin: 0 0 var( --s-4 ); }
p:last-child { margin-bottom: 0; }

strong, b { color: var( --ap-ink ); font-weight: 700; }
em, i { font-style: italic; }

.ap-lede {
	font-size: var( --t-md );
	line-height: 1.5;
	font-weight: 400;
	color: var( --ap-fog );
	max-width: 44ch;
}

.ap-prose { max-width: 68ch; }
.ap-prose h2 { margin-top: var( --s-7 ); }
.ap-prose h3 { margin-top: var( --s-6 ); }
.ap-prose ul,
.ap-prose ol { margin: 0 0 var( --s-4 ); padding-left: 1.4em; }
.ap-prose li { margin-bottom: var( --s-2 ); }
.ap-prose blockquote {
	margin: var( --s-6 ) 0;
	padding-left: var( --s-5 );
	border-left: 3px solid var( --ap-honey );
	font-size: var( --t-md );
	font-family: var( --ap-display );
	font-style: italic;
	color: var( --ap-ink );
}
.ap-prose code {
	font-family: var( --ap-mono );
	font-size: 0.9em;
	background: var( --ap-raise );
	padding: 0.15em 0.4em;
	border-radius: 3px;
}
.ap-prose pre {
	background: var( --ap-panel-solid );
	border: 1px solid var( --ap-hair );
	padding: var( --s-5 );
	border-radius: var( --ap-radius );
	overflow-x: auto;
}
.ap-prose pre code { background: none; padding: 0; }
.ap-prose img { border-radius: var( --ap-radius ); }
.ap-prose figcaption {
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	color: var( --ap-dim );
	padding-top: var( --s-2 );
}
.ap-prose table { width: 100%; border-collapse: collapse; font-size: var( --t-sm ); }
.ap-prose th,
.ap-prose td { padding: var( --s-3 ); border-bottom: 1px solid var( --ap-hair ); text-align: left; }
.ap-prose th { color: var( --ap-ink ); font-weight: 700; }

.ap-num {
	font-family: var( --ap-mono );
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.ap-tag {
	display: inline-block;
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.07em;
	color: var( --ap-dim );
	text-transform: uppercase;
}

/* --------------------------------------------------------------- layout */

.ap-shell { position: relative; z-index: 2; min-height: 100vh; }

.ap-wrap {
	width: 100%;
	max-width: var( --ap-max );
	margin-inline: auto;
	padding-inline: var( --ap-gutter );
}

.ap-section { padding-block: var( --s-9 ); }
.ap-section--tight { padding-block: var( --s-8 ); }

@media ( min-width: 1200px ) {
	.ap-section { padding-block: var( --s-9 ); }
	.ap-section--tight { padding-block: var( --s-8 ); }
}

/* -------------------------------------------------------------- comb field */

#ap-comb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	display: block;
}

.ap-has-comb .ap-shell { background: transparent; }

/* ------------------------------------------------------------ the panel */

.ap-panel {
	position: relative;
	background: var( --ap-panel );
	-webkit-backdrop-filter: blur( 14px ) saturate( 130% );
	backdrop-filter: blur( 14px ) saturate( 130% );
	border: 1px solid var( --ap-hair );
	border-radius: var( --ap-radius-lg );
}
.ap-panel--lit { border-color: var( --ap-hair-2 ); }
.ap-panel--solid { background: var( --ap-panel-solid ); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ------------------------------------------------------------- controls */

.ap-btn {
	display: inline-flex;
	align-items: center;
	gap: var( --s-2 );
	padding: 0.875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --ap-radius );
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform var( --ap-fast ) var( --ap-ease ),
	            background-color var( --ap-fast ) var( --ap-ease ),
	            border-color var( --ap-fast ) var( --ap-ease ),
	            color var( --ap-fast ) var( --ap-ease );
}

.ap-btn--solid { background: var( --ap-honey ); color: #2a1a02; }
.ap-btn--solid:hover { background: #e0a234; color: #2a1a02; transform: translateY( -2px ); }

.ap-btn--ghost { background: var( --ap-raise ); border-color: var( --ap-hair-2 ); color: var( --ap-ink ); }
.ap-btn--ghost:hover { background: rgba( 43, 29, 16, 0.08 ); border-color: var( --ap-honey-deep ); transform: translateY( -2px ); }

.ap-icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: inline-block;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ap-field-input {
	width: 100%;
	padding: 0.8rem 1rem;
	background: #fffdf5;
	border: 1px solid var( --ap-hair-2 );
	border-radius: var( --ap-radius );
	color: var( --ap-ink );
	font-family: var( --ap-text );
	font-size: var( --t-sm );
	transition: border-color var( --ap-fast ) var( --ap-ease );
}
.ap-field-input::placeholder { color: var( --ap-dim ); }
.ap-field-input:focus { border-color: var( --ap-honey-deep ); outline: none; }
textarea.ap-field-input { resize: vertical; min-height: 6.5rem; }

.ap-label {
	display: block;
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.05em;
	color: var( --ap-fog );
	margin-bottom: var( --s-2 );
}

/* ------------------------------------------------------------- header */

.ap-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: var( --s-4 );
	transition: background-color var( --ap-slow ) var( --ap-ease ),
	            border-color var( --ap-slow ) var( --ap-ease ),
	            padding var( --ap-slow ) var( --ap-ease );
	border-bottom: 1px solid transparent;
}
.ap-header.is-stuck {
	background: rgba( 247, 241, 218, 0.92 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	border-bottom-color: var( --ap-hair );
	padding-block: var( --s-3 );
}

.ap-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var( --s-5 ); }

.ap-brand { display: inline-flex; align-items: center; gap: var( --s-3 ); text-decoration: none; color: var( --ap-ink ); }
.ap-brand__mark { width: 2.35rem; height: 2.35rem; flex: none; }
.ap-brand__name {
	font-family: var( --ap-display );
	font-weight: 600;
	font-size: var( --t-base );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}
.ap-brand__sub {
	display: block;
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ap-dim );
	margin-top: 0.35rem;
}
.ap-brand:hover .ap-brand__name { color: var( --ap-honey-deep ); }

.ap-nav { display: none; }
@media ( min-width: 62rem ) {
	.ap-nav { display: block; }
	.ap-nav ul { display: flex; align-items: center; gap: var( --s-1 ); list-style: none; margin: 0; padding: 0; }
	.ap-nav a {
		display: block;
		padding: 0.55rem 0.9rem;
		font-size: var( --t-sm );
		font-weight: 500;
		color: var( --ap-fog );
		text-decoration: none;
		border-radius: var( --ap-radius );
		transition: color var( --ap-fast ) var( --ap-ease ), background-color var( --ap-fast ) var( --ap-ease );
	}
	.ap-nav a:hover,
	.ap-nav .current-menu-item > a,
	.ap-nav .current_page_item > a { color: var( --ap-ink ); background: var( --ap-raise ); }
}

.ap-header__tools { display: flex; align-items: center; gap: var( --s-2 ); }

.ap-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: 0.6rem;
	background: var( --ap-raise );
	border: 1px solid var( --ap-hair );
	border-radius: var( --ap-radius );
	color: var( --ap-fog );
	cursor: pointer;
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
}
.ap-burger { display: inline-flex; }
@media ( min-width: 62rem ) { .ap-burger { display: none; } }

.ap-drawer { display: none; margin-top: var( --s-4 ); padding: var( --s-4 ); }
.ap-drawer.is-open { display: block; }
.ap-drawer ul { list-style: none; margin: 0; padding: 0; }
.ap-drawer a {
	display: flex; justify-content: space-between; padding: var( --s-3 ) var( --s-2 );
	color: var( --ap-ink ); text-decoration: none; border-bottom: 1px solid var( --ap-hair ); font-size: var( --t-sm );
}
.ap-drawer li:last-child a { border-bottom: 0; }
.ap-drawer__cta { display: flex; justify-content: center; width: 100%; margin-top: var( --s-4 ); }

@media ( max-width: 30rem ) {
	.ap-header__bar { gap: var( --s-3 ); }
	.ap-brand__sub { display: none; }
	.ap-brand__name { font-size: var( --t-sm ); letter-spacing: 0.1em; }
	.ap-header__tools .ap-btn__label { display: none; }
	.ap-header__tools .ap-btn { padding-inline: 0.7rem; }
}

/* ------------------------------------------------------------- reveal --- */

.ap-js .ap-reveal {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity var( --ap-slow ) var( --ap-ease ), transform var( --ap-slow ) var( --ap-ease );
}
.ap-js .ap-reveal.is-in { opacity: 1; transform: none; }

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.ap-js .ap-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- footer */

.ap-footer {
	position: relative;
	z-index: 2;
	margin-top: var( --s-9 );
	border-top: 1px solid var( --ap-hair );
	background: rgba( 251, 246, 230, 0.92 );
	-webkit-backdrop-filter: blur( 12px );
	backdrop-filter: blur( 12px );
	padding-block: var( --s-8 ) var( --s-6 );
}

.ap-footer__cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 11.5rem, 100% ), 1fr ) );
	gap: var( --s-6 ) var( --s-7 );
	align-items: start;
}

.ap-widget-title,
.ap-footer__cols h2 {
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ap-dim );
	margin-bottom: var( --s-3 );
}
.ap-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.ap-footer__cols li { margin-bottom: var( --s-2 ); }
.ap-footer__cols a { color: var( --ap-fog ); text-decoration: none; font-size: var( --t-sm ); }
.ap-footer__cols a:hover { color: var( --ap-honey-deep ); }
.ap-footer__cols p { font-size: var( --t-sm ); }

.ap-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --s-4 );
	margin-top: var( --s-8 );
	padding-top: var( --s-5 );
	border-top: 1px solid var( --ap-hair );
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	color: var( --ap-dim );
}

/* -------------------------------------------------------------- utility */

.ap-hr { border: 0; border-top: 1px solid var( --ap-hair ); margin: var( --s-7 ) 0; }
.ap-embed { position: relative; margin-block: var( --s-5 ); }
.ap-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var( --ap-radius ); }

.ap-pagination { display: flex; flex-wrap: wrap; gap: var( --s-2 ); margin-top: var( --s-8 ); font-family: var( --ap-mono ); font-size: var( --t-sm ); }
.ap-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding-inline: 0.5rem;
	border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius ); color: var( --ap-fog ); text-decoration: none;
}
.ap-pagination .page-numbers.current,
.ap-pagination .page-numbers:hover { border-color: var( --ap-honey-deep ); color: var( --ap-honey-deep ); }