/*
 * Apiary — section styles.
 *
 * Seven sections, seven different structures, on purpose:
 *
 *   hero        a logbook line + headline against a live frame-register panel
 *   colonies    frame-slots grouped into supers, not a card grid
 *   lab         a workbench: the waggle-bearing calculator, then a grading tool
 *   honey       a real data table with inline colour-grade swatches
 *   hive-year   a horizontal season strip, not a two-column spread of cards
 *   markets     a ledger + a small quote trio
 *   inquiry     a two-column builder
 */

/* ------------------------------------------------------------------ hero */

.ap-hero {
	padding-block: var( --s-8 ) var( --s-9 );
	display: grid;
	gap: var( --s-8 );
	align-items: center;
}
.ap-hero > * { min-width: 0; }
@media ( min-width: 62rem ) {
	.ap-hero {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 0.85fr );
		gap: var( --s-9 );
		padding-block: var( --s-9 ) var( --s-9 );
		min-height: min( 80vh, 48rem );
	}
}

.ap-hero__note {
	display: inline-flex;
	align-items: baseline;
	gap: var( --s-2 );
	font-family: var( --ap-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ap-dim );
	margin-bottom: var( --s-5 );
	padding-bottom: var( --s-3 );
	border-bottom: 1px solid var( --ap-hair );
}
.ap-hero__note b { color: var( --ap-honey-deep ); font-weight: 600; }

.ap-hero h1 { margin-bottom: var( --s-5 ); }
.ap-hero h1 .ap-accent { color: var( --ap-honey-deep ); font-style: italic; }
.ap-hero__lede { margin-bottom: var( --s-6 ); }
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: var( --s-3 ); margin-bottom: var( --s-7 ); }

.ap-hero__facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 8rem, 100% ), 1fr ) );
	gap: var( --s-5 );
	padding-top: var( --s-5 );
	border-top: 1px solid var( --ap-hair );
	max-width: 34rem;
}
.ap-fact__value { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-lg ); color: var( --ap-ink ); line-height: 1; font-variant-numeric: tabular-nums; }
.ap-fact__value span { font-size: 0.5em; color: var( --ap-honey-deep ); margin-left: 0.1em; font-family: var( --ap-mono ); }
.ap-fact__label { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-top: var( --s-2 ); line-height: 1.35; }

.ap-register {
	padding: var( --s-5 );
	max-width: 26rem;
	width: 100%;
	justify-self: center;
}
@media ( min-width: 62rem ) { .ap-register { justify-self: end; padding: var( --s-6 ); } }

.ap-register__head {
	display: flex; align-items: center; justify-content: space-between; gap: var( --s-3 );
	padding-bottom: var( --s-4 ); border-bottom: 1px solid var( --ap-hair );
	font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); letter-spacing: 0.08em; text-transform: uppercase;
}
.ap-register__hex { width: 2rem; height: 2rem; color: var( --ap-honey-deep ); }

.ap-register__body { padding-block: var( --s-5 ); text-align: center; }
.ap-register__title { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-md ); color: var( --ap-ink ); }
.ap-register__note { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-top: var( --s-2 ); }

.ap-register__rows { background: rgba( 43, 29, 16, 0.035 ); border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius ); padding: var( --s-4 ); font-family: var( --ap-mono ); font-size: var( --t-xs ); }
.ap-register__row { display: flex; justify-content: space-between; gap: var( --s-3 ); padding-block: 0.28rem; color: var( --ap-dim ); }
.ap-register__row b { font-weight: 600; color: var( --ap-ink ); font-variant-numeric: tabular-nums; text-transform: capitalize; }

/* --------------------------------------------------------- colonies grid */

.ap-colonies__head { display: grid; gap: var( --s-4 ); margin-bottom: var( --s-7 ); align-items: end; }
@media ( min-width: 48rem ) { .ap-colonies__head { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 22rem ); gap: var( --s-7 ); } }
.ap-colonies__head p { font-size: var( --t-sm ); color: var( --ap-dim ); margin: 0; }

.ap-filters { display: flex; flex-wrap: wrap; gap: var( --s-2 ); margin-bottom: var( --s-6 ); }
.ap-filter {
	padding: 0.4rem 0.9rem; background: none; border: 1px solid var( --ap-hair ); border-radius: 999px;
	color: var( --ap-dim ); font-family: var( --ap-mono ); font-size: var( --t-xs ); cursor: pointer;
	transition: color var( --ap-fast ) var( --ap-ease ), border-color var( --ap-fast ) var( --ap-ease );
}
.ap-filter:hover { color: var( --ap-ink ); border-color: var( --ap-hair-2 ); }
.ap-filter[aria-pressed="true"] { color: #2a1a02; background: var( --ap-honey ); border-color: var( --ap-honey ); font-weight: 600; }

/*
 * A super — a labelled row of frame-slots, the way an actual box holds real
 * frames. The label is a wooden top-bar rail with a hand tag, not a section
 * heading; the slots keep the deep-frame aspect ratio.
 */
.ap-super { margin-bottom: var( --s-7 ); }
.ap-super__rail {
	display: flex; align-items: center; gap: var( --s-3 );
	padding: 0.6rem var( --s-4 );
	background: linear-gradient( 180deg, #d9b87a, #c49a55 );
	border: 1px solid var( --ap-propolis );
	border-radius: var( --ap-radius ) var( --ap-radius ) 0 0;
	font-family: var( --ap-mono ); font-size: var( --t-xs ); color: #3a2409; letter-spacing: 0.05em; text-transform: uppercase;
}
.ap-super__tag {
	background: #fbf6e6; border: 1px solid var( --ap-propolis ); border-radius: 3px;
	padding: 0.15rem 0.5rem; font-weight: 600;
}

.ap-frames {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 15rem, 100% ), 1fr ) );
	gap: 2px;
	background: var( --ap-propolis );
	border: 1px solid var( --ap-propolis );
	border-top: 0;
	border-radius: 0 0 var( --ap-radius ) var( --ap-radius );
	overflow: hidden;
}
.ap-frame { display: none; }
.ap-frame.is-shown { display: block; }

.ap-frame__slot {
	position: relative;
	background: #fbf6e6;
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: var( --s-3 );
	height: 100%;
}
.ap-frame__lugs { display: flex; justify-content: space-between; padding: 0 0.3rem; }
.ap-frame__lugs i { width: 0.9rem; height: 0.35rem; background: var( --ap-comb ); border-radius: 1px; display: block; }

.ap-frame__plate {
	position: relative;
	aspect-ratio: var( --ap-frame-ratio );
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid var( --ap-hair-2 );
	background: var( --ap-paper-2 );
}
.ap-frame__plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var( --ap-ease ); }
.ap-frame:hover .ap-frame__plate img { transform: scale( 1.05 ); }

.ap-frame__body { padding-inline: 0.3rem 0.3rem; flex: 1; display: flex; flex-direction: column; gap: var( --s-2 ); }
.ap-frame__title { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-md ); margin: 0; line-height: 1.15; }
.ap-frame__title a { color: var( --ap-ink ); text-decoration: none; }
.ap-frame__title a::after { content: ''; position: absolute; inset: 0; }
.ap-frame:hover .ap-frame__title a { color: var( --ap-honey-deep ); }
.ap-frame__meta { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); display: flex; flex-wrap: wrap; gap: var( --s-3 ); }
.ap-frame__meta .is-tag { color: var( --ap-fog ); }

.ap-empty { padding: var( --s-8 ) var( --s-5 ); text-align: center; border: 1px dashed var( --ap-hair-2 ); border-radius: var( --ap-radius-lg ); }
.ap-empty p { color: var( --ap-dim ); font-size: var( --t-sm ); }

/* ------------------------------------------------------------- the lab */

.ap-lab { display: grid; gap: var( --s-6 ); }
.ap-lab__intro { max-width: 46rem; }
.ap-lab__intro h2 { margin-bottom: var( --s-3 ); }
.ap-lab__intro p { font-size: var( --t-sm ); color: var( --ap-dim ); }

.ap-lab__frame { padding: var( --s-5 ); }
@media ( min-width: 62rem ) { .ap-lab__frame { padding: var( --s-7 ); } }

.ap-tabs { display: flex; flex-wrap: wrap; gap: var( --s-2 ); padding-bottom: var( --s-5 ); margin-bottom: var( --s-6 ); border-bottom: 1px solid var( --ap-hair ); }
.ap-tab {
	display: inline-flex; align-items: center; gap: var( --s-2 ); padding: 0.55rem 1rem;
	background: var( --ap-raise ); border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius );
	color: var( --ap-dim ); font-family: var( --ap-mono ); font-size: var( --t-xs ); cursor: pointer;
}
.ap-tab[aria-selected="true"] { color: var( --ap-honey-deep ); border-color: var( --ap-honey-deep ); background: rgba( 204, 138, 26, 0.08 ); font-weight: 600; }
.ap-panel-body[hidden] { display: none; }

.ap-lab__split { display: grid; gap: var( --s-7 ); }
@media ( min-width: 60rem ) { .ap-lab__split { grid-template-columns: minmax( 0, 0.95fr ) minmax( 0, 1.05fr ); } }

/* Compass rose */
.ap-compass { position: relative; aspect-ratio: 1; max-width: 22rem; margin-inline: auto; }
.ap-compass svg { width: 100%; height: 100%; }
.ap-compass__needle { transform-origin: 50% 50%; transition: transform 420ms var( --ap-ease ); }
.ap-compass__sun { transform-origin: 50% 50%; transition: transform 420ms var( --ap-ease ); }

.ap-sliders { display: grid; gap: var( --s-4 ); }
.ap-slider__head { display: flex; justify-content: space-between; gap: var( --s-3 ); font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-bottom: var( --s-2 ); }
.ap-slider__head b { color: var( --ap-honey-deep ); font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-sliders input[type="range"] { width: 100%; accent-color: var( --ap-honey-deep ); cursor: pointer; }
.ap-sliders input[type="date"],
.ap-sliders input[type="time"] { width: 100%; }

.ap-readout { font-family: var( --ap-mono ); font-size: var( --t-xs ); border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius ); overflow: hidden; }
.ap-readout__row { display: flex; justify-content: space-between; gap: var( --s-3 ); padding: 0.55rem var( --s-4 ); border-bottom: 1px solid var( --ap-hair ); color: var( --ap-dim ); }
.ap-readout__row:last-child { border-bottom: 0; }
.ap-readout__row b { font-weight: 600; color: var( --ap-ink ); font-variant-numeric: tabular-nums; }
.ap-readout__row .is-approx::before { content: '≈ '; }

/* Grade tool */
.ap-grade-tool { display: grid; gap: var( --s-6 ); }
@media ( min-width: 50rem ) { .ap-grade-tool { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); } }
.ap-grade-swatch { aspect-ratio: 16/9; border-radius: var( --ap-radius ); border: 1px solid var( --ap-hair-2 ); display: flex; align-items: flex-end; padding: var( --s-4 ); transition: background-color 300ms var( --ap-ease ); }
.ap-grade-swatch__label { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-md ); color: rgba( 0, 0, 0, 0.72 ); }
.ap-pfund-strip { display: flex; height: 2.5rem; border-radius: var( --ap-radius ); overflow: hidden; border: 1px solid var( --ap-hair-2 ); margin-top: var( --s-4 ); }
.ap-pfund-strip i { flex: 1; display: block; }
.ap-pfund-labels { display: flex; justify-content: space-between; font-family: var( --ap-mono ); font-size: 0.65rem; color: var( --ap-dim ); margin-top: var( --s-2 ); }

/* --------------------------------------------------------- honey matrix */

.ap-matrix__head { display: grid; gap: var( --s-4 ); align-items: end; margin-bottom: var( --s-6 ); }
@media ( min-width: 48rem ) { .ap-matrix__head { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 24rem ); gap: var( --s-7 ); } }
.ap-matrix__head p { font-size: var( --t-sm ); color: var( --ap-dim ); margin: 0; }
.ap-matrix-scroll { overflow-x: auto; }
.ap-matrix { width: 100%; min-width: 46rem; border-collapse: collapse; text-align: left; }
.ap-matrix thead th {
	font-family: var( --ap-mono ); font-size: var( --t-xs ); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var( --ap-dim ); padding: 0 var( --s-4 ) var( --s-3 ); border-bottom: 1px solid var( --ap-hair-2 ); vertical-align: bottom;
}
.ap-matrix thead th:first-child { padding-left: 0; }
.ap-matrix tbody td { padding: var( --s-5 ) var( --s-4 ); border-bottom: 1px solid var( --ap-hair ); vertical-align: middle; font-size: var( --t-sm ); }
.ap-matrix tbody td:first-child { padding-left: 0; }
.ap-matrix tbody tr:hover { background: rgba( 43, 29, 16, 0.025 ); }
.ap-matrix__name { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-base ); color: var( --ap-ink ); display: block; }
.ap-matrix__name a { color: inherit; text-decoration: none; }
.ap-matrix__name a:hover { color: var( --ap-honey-deep ); }
.ap-matrix__forage { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); display: block; margin-top: 0.2rem; }
.ap-grade-chip { display: inline-flex; align-items: center; gap: var( --s-2 ); font-family: var( --ap-mono ); font-size: var( --t-xs ); }
.ap-grade-chip i { width: 1.4rem; height: 1.4rem; border-radius: 3px; border: 1px solid var( --ap-hair-2 ); display: block; flex: none; }

/* ---------------------------------------------------------- hive year */

.ap-year__head { max-width: 46rem; margin-bottom: var( --s-7 ); }
.ap-year-strip {
	display: flex;
	gap: var( --s-4 );
	overflow-x: auto;
	padding-bottom: var( --s-4 );
	scroll-snap-type: x proximity;
}
.ap-season {
	scroll-snap-align: start;
	flex: 0 0 15rem;
	padding: var( --s-5 );
	display: flex;
	flex-direction: column;
	gap: var( --s-3 );
}
.ap-season__month { font-family: var( --ap-mono ); font-size: var( --t-xs ); letter-spacing: 0.08em; text-transform: uppercase; color: var( --ap-honey-deep ); }
.ap-season h3 { font-size: var( --t-md ); margin: 0; }
.ap-season p { font-size: var( --t-sm ); margin: 0; }

/* ------------------------------------------------------------- markets */

.ap-ledger { border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius-lg ); overflow: hidden; }
.ap-ledger__row { display: grid; gap: var( --s-2 ) var( --s-5 ); padding: var( --s-5 ); border-bottom: 1px solid var( --ap-hair ); }
.ap-ledger__row:last-child { border-bottom: 0; }
.ap-ledger__row:hover { background: rgba( 43, 29, 16, 0.025 ); }
@media ( min-width: 54rem ) { .ap-ledger__row { grid-template-columns: 8rem minmax( 0, 1fr ) 12rem; align-items: center; } }
.ap-ledger__day { font-family: var( --ap-mono ); font-weight: 600; font-size: var( --t-sm ); color: var( --ap-honey-deep ); }
.ap-ledger__place { font-family: var( --ap-display ); font-weight: 600; font-size: var( --t-base ); color: var( --ap-ink ); margin: 0 0 0.15rem; }
.ap-ledger__season { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); justify-self: start; }
@media ( min-width: 54rem ) { .ap-ledger__season { justify-self: end; } }

.ap-wall { display: grid; gap: var( --s-5 ); margin-top: var( --s-8 ); }
@media ( min-width: 60rem ) { .ap-wall { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
.ap-quote { padding: var( --s-5 ); }
.ap-quote blockquote { margin: 0 0 var( --s-5 ); font-size: var( --t-base ); font-family: var( --ap-display ); font-style: italic; color: var( --ap-ink ); }
.ap-quote__by { display: flex; justify-content: space-between; gap: var( --s-3 ); padding-top: var( --s-4 ); border-top: 1px solid var( --ap-hair ); font-family: var( --ap-mono ); font-size: var( --t-xs ); }
.ap-quote__who { color: var( --ap-ink ); font-weight: 600; }
.ap-quote__role { color: var( --ap-dim ); display: block; margin-top: 0.15rem; font-weight: 400; }

/* --------------------------------------------------------- the inquiry */

.ap-inquiry { padding: var( --s-6 ); }
@media ( min-width: 62rem ) { .ap-inquiry { padding: var( --s-9 ); } }
.ap-inquiry__grid { display: grid; gap: var( --s-8 ); }
@media ( min-width: 62rem ) { .ap-inquiry__grid { grid-template-columns: minmax( 0, 0.82fr ) minmax( 0, 1.18fr ); gap: var( --s-9 ); align-items: start; } }

.ap-dispatch { margin-top: var( --s-6 ); padding: var( --s-5 ); border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius ); font-family: var( --ap-mono ); font-size: var( --t-xs ); }
.ap-dispatch__row { display: flex; justify-content: space-between; gap: var( --s-3 ); padding-block: 0.3rem; color: var( --ap-dim ); flex-wrap: wrap; }
.ap-dispatch__row b { font-weight: 600; color: var( --ap-ink ); }
.ap-dispatch__row a { color: var( --ap-honey-deep ); text-decoration: none; }

.ap-form { display: grid; gap: var( --s-6 ); }
.ap-form__block { display: grid; gap: var( --s-3 ); }
.ap-scope { display: flex; flex-wrap: wrap; gap: var( --s-2 ); }
.ap-scope__opt {
	padding: 0.5rem 0.9rem; background: var( --ap-raise ); border: 1px solid var( --ap-hair ); border-radius: var( --ap-radius );
	color: var( --ap-fog ); font-family: var( --ap-mono ); font-size: var( --t-xs ); cursor: pointer;
}
.ap-scope__opt:hover { color: var( --ap-ink ); border-color: var( --ap-hair-2 ); }
.ap-scope__opt[aria-pressed="true"] { background: var( --ap-honey ); border-color: var( --ap-honey ); color: #2a1a02; font-weight: 600; }

.ap-form__pair { display: grid; gap: var( --s-4 ); }
@media ( min-width: 40rem ) { .ap-form__pair { grid-template-columns: 1fr 1fr; } }
.ap-form__submit { width: 100%; justify-content: center; padding-block: 1rem; }

.ap-form__status { font-family: var( --ap-mono ); font-size: var( --t-xs ); line-height: 1.5; padding: var( --s-3 ) var( --s-4 ); border-radius: var( --ap-radius ); border: 1px solid transparent; }
.ap-form__status:empty { display: none; }
.ap-form__status.is-error { color: var( --ap-sting ); border-color: rgba( 154, 58, 36, 0.4 ); background: rgba( 154, 58, 36, 0.08 ); }
.ap-form__status.is-working { color: var( --ap-fog ); border-color: var( --ap-hair ); }

.ap-sent { padding: var( --s-7 ) var( --s-5 ); text-align: center; border: 1px solid rgba( 95, 107, 60, 0.35 ); background: rgba( 95, 107, 60, 0.08 ); border-radius: var( --ap-radius-lg ); }
.ap-sent h3 { margin-bottom: var( --s-3 ); }
.ap-sent p { font-size: var( --t-sm ); max-width: 40ch; margin-inline: auto; }
.ap-sent__mark { width: 3.5rem; height: 3.5rem; margin: 0 auto var( --s-5 ); border-radius: 50%; display: grid; place-items: center; background: rgba( 95, 107, 60, 0.18 ); color: var( --ap-leaf ); font-size: var( --t-md ); }

.ap-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------- inner page furniture */

.ap-page-head { padding-block: var( --s-8 ) var( --s-6 ); border-bottom: 1px solid var( --ap-hair ); margin-bottom: var( --s-8 ); }
.ap-page-head h1 { font-size: var( --t-xl ); margin-bottom: var( --s-3 ); }
.ap-page-head p { font-size: var( --t-sm ); color: var( --ap-dim ); margin: 0; max-width: 60ch; }

.ap-crumbs { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-bottom: var( --s-4 ); }
.ap-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var( --s-2 ); margin: 0; padding: 0; }
.ap-crumbs li::after { content: '/'; margin-left: var( --s-2 ); color: var( --ap-hair-2 ); }
.ap-crumbs li:last-child::after { content: none; }
.ap-crumbs a { color: var( --ap-fog ); text-decoration: none; }
.ap-crumbs a:hover { color: var( --ap-honey-deep ); }

.ap-case__hero { position: relative; aspect-ratio: var( --ap-frame-ratio ); border-radius: var( --ap-radius-lg ); overflow: hidden; border: 1px solid var( --ap-hair ); margin-bottom: var( --s-7 ); background: var( --ap-paper-2 ); }
.ap-case__hero img { width: 100%; height: 100%; object-fit: cover; }

.ap-case__body { display: grid; gap: var( --s-7 ); }
@media ( min-width: 62rem ) { .ap-case__body { grid-template-columns: minmax( 0, 1fr ) 17rem; gap: var( --s-9 ); align-items: start; } }
.ap-case__aside { display: grid; gap: var( --s-6 ); position: sticky; top: 6rem; }
.ap-case__aside h2 { font-family: var( --ap-mono ); font-size: var( --t-xs ); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var( --ap-dim ); margin-bottom: var( --s-3 ); }
.ap-case__aside dl { margin: 0; font-size: var( --t-sm ); }
.ap-case__aside dt { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-top: var( --s-3 ); }
.ap-case__aside dt:first-child { margin-top: 0; }
.ap-case__aside dd { margin: 0.15rem 0 0; color: var( --ap-ink ); }

.ap-cards { display: grid; gap: var( --s-5 ); }
@media ( min-width: 48rem ) { .ap-cards { grid-template-columns: repeat( auto-fill, minmax( min( 17rem, 100% ), 1fr ) ); } }
.ap-card { padding: var( --s-5 ); display: flex; flex-direction: column; gap: var( --s-3 ); }
.ap-card h2, .ap-card h3 { font-size: var( --t-md ); margin: 0; }
.ap-card h2 a, .ap-card h3 a { color: var( --ap-ink ); text-decoration: none; }
.ap-card h2 a:hover, .ap-card h3 a:hover { color: var( --ap-honey-deep ); }
.ap-card p { font-size: var( --t-sm ); margin: 0; }
.ap-card__date { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); }
.ap-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var( --ap-hair ); margin: calc( var( --s-5 ) * -1 ) calc( var( --s-5 ) * -1 ) 0; border-radius: var( --ap-radius-lg ) var( --ap-radius-lg ) 0 0; border-width: 0 0 1px; }
.ap-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- comments */

.ap-comments { margin-top: var( --s-9 ); padding-top: var( --s-7 ); border-top: 1px solid var( --ap-hair ); }
.ap-comments h2 { font-size: var( --t-md ); margin-bottom: var( --s-5 ); }
.ap-comments ol { list-style: none; margin: 0; padding: 0; }
.ap-comments .children { list-style: none; margin: var( --s-4 ) 0 0 var( --s-5 ); padding: 0; border-left: 1px solid var( --ap-hair ); padding-left: var( --s-5 ); }
.ap-comments .comment-body { padding-block: var( --s-4 ); border-bottom: 1px solid var( --ap-hair ); }
.ap-comments .comment-meta { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-dim ); margin-bottom: var( --s-2 ); }
.ap-comments .comment-author .fn { color: var( --ap-ink ); font-style: normal; font-weight: 600; }
.ap-comments .comment-author img { border-radius: 50%; margin-right: var( --s-2 ); vertical-align: middle; }
.ap-comments .reply { font-family: var( --ap-mono ); font-size: var( --t-xs ); }
.ap-comments .comment-respond { margin-top: var( --s-6 ); }
.ap-comments .comment-form { display: grid; gap: var( --s-4 ); }
.ap-comments .comment-form input[type="text"],
.ap-comments .comment-form input[type="email"],
.ap-comments .comment-form input[type="url"],
.ap-comments .comment-form textarea { 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 ); }
.ap-comments .comment-form label { font-family: var( --ap-mono ); font-size: var( --t-xs ); color: var( --ap-fog ); display: block; margin-bottom: var( --s-2 ); }
.ap-comments .comment-form .submit { justify-self: start; padding: 0.875rem 1.5rem; background: var( --ap-honey ); color: #2a1a02; border: 0; 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; cursor: pointer; }
.ap-comments .comment-notes,
.ap-comments .form-submit + p { font-size: var( --t-xs ); color: var( --ap-dim ); }

/* --------------------------------------------------------------- search */

.ap-searchform { display: flex; gap: var( --s-2 ); max-width: 28rem; }
.ap-searchform input[type="search"] { flex: 1; padding: 0.7rem 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 ); }
.ap-searchform button { padding: 0.7rem 1.1rem; background: var( --ap-raise ); border: 1px solid var( --ap-hair-2 ); border-radius: var( --ap-radius ); color: var( --ap-ink ); font-family: var( --ap-mono ); font-size: var( --t-xs ); cursor: pointer; }

/* ------------------------------------------------------------------ 404 */

.ap-404 { padding-block: var( --s-9 ); max-width: 46rem; }
.ap-404 h1 { margin-bottom: var( --s-4 ); }
.ap-404__code { font-family: var( --ap-mono ); font-size: var( --t-xs ); letter-spacing: 0.14em; color: var( --ap-honey-deep ); text-transform: uppercase; margin-bottom: var( --s-4 ); }