/*
 * Section redesign preview (2026-11-03). Made by Claude Code, directed by Nova (CTO).
 * Loaded only on the V2 homepage with ?btl=b or ?sections=b (inc/sections-preview.php).
 * Everything is scoped to .bpa-anat (Behind the label B).
 * Fonts: theme-loaded only (IBM Plex Sans/Mono, Newsreader incl. italic, Marcellus).
 */

/* ========== Behind the label · Option B: anatomy of the label ========== */
.bpa-anat {
	/* On-field text tones (all >= 4.5:1 on the field greens) */
	--anat-field: var(--rec-field, #1d3527);
	--anat-field-2: var(--rec-field-2, #223d2d);
	--anat-act: var(--rec-act, #2e5d40);
	--anat-on-1: #f7f3ec;
	--anat-on-2: #d8d0c1;
	--anat-on-3: #c9bda8;
	--anat-line: rgba(201, 189, 168, .28);
	--anat-plate: #efe6da;
	--anat-ease: var(--rec-ease, cubic-bezier(.16, 1, .3, 1));
	--anat-display: var(--bpa-serif);
	--anat-caps: var(--bpa-logo);
	--anat-ui: var(--bpa-sans);
	--anat-data: var(--bpa-mono);
	--anat-gutter: clamp(1.25rem, 4vw, 2.5rem);
	position: relative;
	padding-block: clamp(4rem, 9vw, 8rem);
	background: var(--anat-field);
	color: var(--anat-on-1);
	font: 400 1rem/1.6 var(--anat-ui);
	overflow: hidden;
	isolation: isolate;
}
.bpa-anat *, .bpa-anat *::before, .bpa-anat *::after { box-sizing: border-box; }
/* Faint specimen grid, like ruled record paper */
.bpa-anat::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--anat-line) 1px, transparent 1px), linear-gradient(90deg, var(--anat-line) 1px, transparent 1px); background-size: 48px 48px; opacity: .22; -webkit-mask-image: radial-gradient(75% 60% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(75% 60% at 50% 50%, #000 30%, transparent 85%); }
.bpa-anat ::selection { background: var(--anat-on-1); color: var(--anat-field); }
.bpa-anat :focus-visible { outline: 2px solid var(--anat-on-1); outline-offset: 3px; }

.bpa-anat__wrap { width: min(100% - 2 * var(--anat-gutter), 1200px); margin-inline: auto; }

.bpa-anat__head { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.bpa-anat__eyebrow { margin: 0 0 1.25rem; font: 400 .75rem/1 var(--anat-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--anat-on-3); }
.bpa-anat__title { margin: 0 0 1.25rem; font: 400 clamp(2.25rem, 5.4vw, 4.5rem)/1 var(--anat-display); letter-spacing: -.03em; color: var(--anat-on-1); text-wrap: balance; }
.bpa-anat__title em { font-style: italic; color: var(--anat-on-3); }
.bpa-anat__lede { margin: 0 auto; max-width: 44ch; font-size: 1.0625rem; line-height: 1.6; color: var(--anat-on-2); }

/* Board: callouts left/right, plate centre. DOM order stays 01–04. */
.bpa-anat__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 1.25rem; align-items: center; }
.bpa-anat__plate { grid-column: 2; grid-row: 1 / span 2; position: relative; margin: 0; }
.bpa-anat__co--1 { grid-column: 1; grid-row: 1; align-self: end; }
.bpa-anat__co--3 { grid-column: 1; grid-row: 2; align-self: start; }
.bpa-anat__co--2 { grid-column: 3; grid-row: 1; align-self: end; }
.bpa-anat__co--4 { grid-column: 3; grid-row: 2; align-self: start; }

/* Specimen plate: arched frame; fixed 4:5 ratio keeps the point positions true. */
.bpa-anat__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 22px 22px; overflow: hidden; background: var(--anat-plate); box-shadow: 0 0 0 1px var(--anat-line), 0 0 0 10px rgba(201, 189, 168, .06), 0 50px 90px -50px rgba(0, 0, 0, .6); }
.bpa-anat__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.bpa-anat__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font: 400 .6875rem/1.3 var(--anat-data); letter-spacing: .04em; color: var(--anat-on-3); }

.bpa-anat__pt { position: absolute; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 50%; font: 500 .6875rem/1 var(--anat-data); color: var(--anat-on-1); background: var(--anat-field); box-shadow: 0 0 0 2px var(--anat-plate), 0 0 0 3px rgba(29, 53, 39, .35); transition: transform .35s var(--anat-ease), background-color .35s var(--anat-ease); }
.bpa-anat__pt::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--anat-field); opacity: 0; }
.bpa-anat__pt.is-on { background: var(--anat-act); transform: scale(1.15); }
.bpa-anat__pt.is-on::after { opacity: .7; }
.bpa-anat__pt--1 { left: 26%; top: 57.5%; } /* on the label's green edge, just left of the printed name */
.bpa-anat__pt--2 { left: 66%; top: 40%; }
.bpa-anat__pt--3 { left: 43%; top: 75%; }
.bpa-anat__pt--4 { left: 79.5%; top: 70%; } /* beside the vial, level with the brand mark */

/* Callouts */
.bpa-anat__co { position: relative; min-width: 0; margin: 0; background: var(--anat-field-2); border: 1px solid var(--anat-line); border-radius: 14px; transition: border-color .35s var(--anat-ease), background-color .35s var(--anat-ease); }
.bpa-anat__co.is-open { border-color: rgba(201, 189, 168, .55); background: #26442f; }
/* Leader line toward the plate */
.bpa-anat__co::after { content: ""; position: absolute; top: 2.15rem; width: clamp(2rem, 4vw, 3.5rem); height: 1px; background: var(--anat-line); }
.bpa-anat__co::before { content: ""; position: absolute; top: calc(2.15rem - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--anat-on-3); opacity: .55; }
.bpa-anat__co--1::after, .bpa-anat__co--3::after { left: 100%; }
.bpa-anat__co--1::before, .bpa-anat__co--3::before { left: calc(100% + clamp(2rem, 4vw, 3.5rem) - 4px); }
.bpa-anat__co--2::after, .bpa-anat__co--4::after { right: 100%; }
.bpa-anat__co--2::before, .bpa-anat__co--4::before { right: calc(100% + clamp(2rem, 4vw, 3.5rem) - 4px); }
.bpa-anat__co.is-open::after { background: rgba(201, 189, 168, .6); }
.bpa-anat__co.is-open::before { opacity: 1; }

.bpa-anat__h { margin: 0; font: inherit; letter-spacing: normal; color: inherit; }
.bpa-anat__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem .9rem; width: 100%; min-height: 5.25rem; margin: 0; padding: 1.25rem 1.25rem 1.2rem; border: 0; border-radius: 13px; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.bpa-anat__btn:hover .bpa-anat__name { text-decoration: underline; text-decoration-color: var(--anat-on-3); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bpa-anat__btn:focus-visible { outline: 2px solid var(--anat-on-1); outline-offset: 2px; }
.bpa-anat__num { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--anat-on-3); font: 500 .6875rem/1 var(--anat-data); color: var(--anat-on-1); }
.bpa-anat__co.is-open .bpa-anat__num { background: var(--anat-on-1); border-color: var(--anat-on-1); color: var(--anat-field); }
.bpa-anat__name { grid-column: 2; grid-row: 1; font: 500 1.25rem/1.2 var(--anat-display); letter-spacing: -.01em; color: var(--anat-on-1); }
.bpa-anat__where { grid-column: 1 / -1; grid-row: 2; padding-top: .55rem; border-top: 1px solid var(--anat-line); font: 400 .6875rem/1.4 var(--anat-data); letter-spacing: .03em; color: var(--anat-on-3); }
.bpa-anat__icon { grid-column: 3; grid-row: 1; position: relative; width: 14px; height: 14px; }
.bpa-anat__icon::before, .bpa-anat__icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--anat-on-2); transition: transform .35s var(--anat-ease); }
.bpa-anat__icon::after { transform: rotate(90deg); }
.bpa-anat__co.is-open .bpa-anat__icon::after { transform: rotate(0deg); }

.bpa-anat__body { padding: 0 1.25rem 1.35rem calc(1.25rem + 1.75rem + .9rem); }
.bpa-anat__body[hidden] { display: none; }
.bpa-anat__q { margin: 0 0 .55rem; font: 400 1.3125rem/1.2 var(--anat-display); letter-spacing: -.01em; color: var(--anat-on-1); text-wrap: balance; }
.bpa-anat__a { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--anat-on-2); }
.bpa-anat__co.is-entering .bpa-anat__body { animation: bpa-anat-open .4s var(--anat-ease) both; }
@keyframes bpa-anat-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Status strip */
.bpa-anat__strip { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem); border: 1px dashed rgba(201, 189, 168, .45); border-radius: 14px; }
.bpa-anat__strip dl { display: contents; }
.bpa-anat__strip dl > div { display: flex; align-items: baseline; gap: .65rem; }
.bpa-anat__strip dt { font: 400 .6875rem/1 var(--anat-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--anat-on-3); }
.bpa-anat__strip dd { margin: 0; font: 400 .875rem/1.2 var(--anat-data); color: var(--anat-on-1); border-bottom: 1px dashed var(--anat-on-3); }
.bpa-anat__note { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--anat-on-2); }
.bpa-anat__action { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .75rem 1.6rem; border-radius: 999px; background: var(--anat-on-1); color: var(--anat-field); font: 600 .9375rem/1 var(--anat-ui); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color .3s var(--anat-ease), box-shadow .3s var(--anat-ease); }
.bpa-anat__action:hover { background: #fff; color: var(--anat-field); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.bpa-anat__action svg { display: block; width: 1.1rem; height: 1.1rem; transition: transform .4s var(--anat-ease); }
.bpa-anat__action:hover svg { transform: translateX(3px); }
.bpa-anat__action:focus-visible { outline: 2px solid var(--anat-on-1); outline-offset: 3px; }

.bpa-anat__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 1.25rem; font-size: .8125rem; line-height: 1.5; color: var(--anat-on-2); }
.bpa-anat__foot p { margin: 0; }
.bpa-anat__foot a { color: var(--anat-on-1); text-decoration: underline; text-decoration-color: var(--anat-on-3); text-underline-offset: .3em; }
.bpa-anat__foot a:hover { text-decoration-color: var(--anat-on-1); }

@media (max-width: 1080px) {
	.bpa-anat__board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 1rem; align-items: start; }
	.bpa-anat__plate { grid-column: 1 / -1; grid-row: auto; width: min(100%, 22rem); justify-self: center; margin-bottom: 1.5rem; }
	.bpa-anat__co--1, .bpa-anat__co--2, .bpa-anat__co--3, .bpa-anat__co--4 { grid-column: auto; grid-row: auto; align-self: start; }
	.bpa-anat__co::before, .bpa-anat__co::after { display: none; }
	.bpa-anat__strip { grid-template-columns: auto auto minmax(0, 1fr); }
	.bpa-anat__strip .bpa-anat__action { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
	.bpa-anat__head { text-align: left; }
	.bpa-anat__lede { margin: 0; }
	.bpa-anat__board { grid-template-columns: minmax(0, 1fr); }
	.bpa-anat__plate { width: min(100%, 19rem); }
	.bpa-anat__cap { flex-direction: column; gap: .2rem; }
	.bpa-anat__btn { padding: 1.1rem 1rem; gap: .25rem .75rem; }
	.bpa-anat__body { padding: 0 1rem 1.2rem calc(1rem + 1.75rem + .75rem); }
	.bpa-anat__name { font-size: 1.125rem; }
	/* Title, meta and body share one left edge: the column after the number */
	.bpa-anat__where { grid-column: 2 / -1; }
	.bpa-anat__strip { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
	.bpa-anat__strip .bpa-anat__action { width: 100%; justify-content: space-between; }
	.bpa-anat__foot { flex-direction: column; }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
	.bpa-anat *, .bpa-anat *::before, .bpa-anat *::after { animation: none !important; transition: none !important; }
}