/**
 * ABOUT section — accordion, de-doubling head, justified body.
 *
 * Ported from design-previews/base/tokens.css §2 ABOUT (MIKO-iterated 2026-07-12), scoped
 * under .vz-about so it never touches the rest of the theme. Self-contained like
 * 10-hero-floor.css: it declares the few field-grid + palette + font custom props it needs
 * (there is no theme.json token file carrying these theme-side), so it does not depend on a
 * token rewrite.
 *
 * PROGRESSIVE-ENHANCEMENT LAW (hard rule + AEO): the accordion base state is OPEN/visible —
 * every panel's text renders with JS off and in view-source. Collapse is gated entirely behind
 * the `.js` flag that vizaion_header_js_gate() sets on <html> before first paint (functions.php,
 * wp_head priority 0). No `.js` → no max-height clamp → all panels open.
 *
 * The full-viewport-bleed fluid canvas lives in its own sheet (10-about-fluid.css) alongside
 * its runtime (10-about-fluid.js); this sheet only owns the #about positioning context + the
 * z-index:1 lift on non-canvas children so the copy sits above the backdrop.
 */

.vz-about {
	/* field-grid atoms the section uses */
	--vz-mu: 80px;
	--vz-field-max: 1280px;
	--vz-gutter: clamp(1.5rem, 4vw, 2.5rem);

	/* atmospheric-dark palette subset (values = base preview tokens, kept literal) */
	--vz-ink: #F3F1FA;
	--vz-lilac: #C6B6F2;
	--vz-mark: rgba(243, 241, 250, .22);
	--vz-mark-live: rgba(198, 182, 242, .85);

	--vz-sans: "IBM Plex Sans", system-ui, sans-serif;
	--vz-mono: "IBM Plex Mono", ui-monospace, monospace;
	--vz-reveal-ease: cubic-bezier(.2, .7, .2, 1);

	position: relative;
	padding-block: calc(var(--vz-mu) * 1.5);
	color: var(--vz-ink);
}

/* Non-canvas children ride above the fluid backdrop (canvas sits at z-index:0 in 10-about-fluid.css). */
.vz-about > *:not(canvas) {
	position: relative;
	z-index: 1;
}

/* The content column: sec-head + accordion sit in the 1280px field, gutter-padded, centred.
   The canvas is exempt — it breaks out to full-viewport width (10-about-fluid.css). */
.vz-about > .sec-head,
.vz-about > .accordion {
	max-width: var(--vz-field-max);
	margin-inline: auto;
	padding-inline: var(--vz-gutter);
}

/* ─── Section head (shared "01" index device) ─────────────────────────────── */
.vz-about .sec-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: calc(var(--vz-mu) / 3);
}
.vz-about .sec-head .idx {
	font-family: var(--vz-mono);
	font-size: .95rem;
	color: var(--vz-lilac);
	letter-spacing: .2em;
}
.vz-about .sec-head h2 {
	font-family: var(--vz-sans);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
	line-height: 1.0;
	letter-spacing: -.025em;
	margin: 0;
}

/* ─── Accordion ───────────────────────────────────────────────────────────── */
.vz-about .accordion {
	border-top: 1px solid var(--vz-mark);
	margin-top: calc(var(--vz-mu) / 2);
}
.vz-about .acc-item { border-bottom: 1px solid var(--vz-mark); }

.vz-about .acc-head {
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
	display: flex;
	align-items: baseline;
	gap: 1.6rem;
	text-align: left;
	padding-block: calc(var(--vz-mu) / 3);
	padding-inline: 0;
}
/* (Roman-numeral .idx column + the +/× .sign glyph RETIRED — Fabão 2026-08-12 clarity
   pass: the panel head is now just the title on the ruled row.) */
.vz-about .acc-head .ttl {
	flex: 1;
	font-family: var(--vz-sans);
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
	font-weight: 400;
	letter-spacing: -.02em;
	align-self: baseline;
	transition: opacity .35s ease, color .35s ease;
}
/* Toggle affordance WITHOUT reintroducing the retired glyphs (critic 2026-08-12: removing
   .sign left sighted users no expand/collapse signal): state is carried by ink alone —
   closed heads sit dimmed, the open head holds full ink in lilac, hover/keyboard focus
   preview the lift. Scoped to .js: with JS off every panel ships open and non-collapsible,
   so the dim would misread there. aria-expanded (10-about-accordion.js) drives it. */
.js .vz-about .acc-head .ttl { opacity: .62; }
.js .vz-about .acc-head:hover .ttl,
.js .vz-about .acc-head:focus-visible .ttl,
.js .vz-about .acc-head[aria-expanded="true"] .ttl { opacity: 1; }
.js .vz-about .acc-head[aria-expanded="true"] .ttl { color: var(--vz-lilac); }
.vz-about .acc-head:focus-visible {
	outline: 1px solid var(--vz-lilac);
	outline-offset: 4px;
}

/* Panel: base = OPEN/visible (JS-off shows all text). .js collapses to max-height:0.
   Smooth measured fold (MIKO 2026-07-12): the JS sets inline max-height to the panel's
   real scrollHeight so the .7s tween covers actual pixels edge to edge (no fixed ceiling). */
.vz-about .acc-panel { overflow: hidden; }
.js .vz-about .acc-panel {
	max-height: 0;
	opacity: 0;
	transition: max-height .7s var(--vz-reveal-ease), opacity .55s ease;
}
.js .vz-about .acc-panel.open { opacity: 1; }

/* Body — justified, no measure cap (MIKO 2026-07-12: the 64ch cap made the block hug the
   left; removed so the justified copy fills the accordion width). hyphens:auto softens the
   word-gap rivers justify creates. */
.vz-about .acc-body { padding-bottom: calc(var(--vz-mu) / 2); }
.vz-about .acc-body p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}
.vz-about .acc-body p + p { margin-top: 1rem; }
.vz-about .acc-body .beats {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	margin-top: 1.25rem;
}
.vz-about .acc-body .beat { display: flex; gap: 1.15rem; align-items: flex-start; }
/* L2 · Methodology beats — variant D v2 (About Numerals R3, 2026-07-13): the roman i./ii./iii./iv.
   markers become the four inline field-mark ICONS (burst / lens / loop / infinity), each a fixed
   28px slot. currentColor picks up --vz-lilac (the same accent L1 uses), so the two levels share
   one colour but are unmistakably different species. margin-top seats the icon on the first text
   line. Icons carry aria-hidden — decorative; each beat's meaning lives in the adjacent <p>. */
.vz-about .acc-body .beat .n {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: .1rem;
	color: var(--vz-mark-live);
	display: inline-flex;
}
.vz-about .acc-body .beat .n svg { width: 100%; height: 100%; display: block; }

/* (.vz-ride-about-fallback beat rules REMOVED — GFX 2026-07-23, critic MINOR: the
   .vz-ride-about-fallback block was deleted from front-page.html when the About ride stop
   was cut (f6b1960 track reshape); these selectors matched nothing. The #about accordion
   (.vz-about .acc-body .beat, above) is now the single source of the beat-icon styling.) */

/* Journey-world header brand: theme vmark (logo-white.png) sizing override.
   Fabão's gfx sheet forces .brand-anim to a 125px SQUARE box (was a square webm); the
   theme mark is portrait (231×268 ≈ aspect 1.0833, the ratified 84×91 box). object-fit:
   contain in his rule already prevents distortion, but a square box letterboxes the mark
   too small — so restate the box to the mark's true aspect. Higher specificity than
   #vz-header .brand-anim via the extra .brand class. Height tracks the theme mark; width
   derives from aspect. Mobile (his ≤781px rule sets 68px square) gets the same aspect fix. */
#vz-header .brand .brand-anim {
	height: 91px;
	width: calc(91px / 1.0833);
	object-fit: contain;
}
@media (max-width: 781px) {
	#vz-header .brand .brand-anim { height: 68px; width: calc(68px / 1.0833); }
}

/* De-doubled "About" head (MIKO 2026-07-12): while panel 1 is open (the default), its
   "About" head hides — the H2 "About VizAion" does the naming and the text starts directly
   beneath. Folding the panel brings the head back. SMOOTH, not display:none: the head fades
   (opacity .45s) AND folds its own height + padding (max-height 7rem→0, padding-block→0)
   over .6s, in step with the panel motion. Gated behind .js so JS-off keeps the head visible
   (harmless duplication, accepted). */
.js .vz-about #acc-about-head {
	max-height: 7rem;
	overflow: hidden;
	transition: opacity .45s ease,
	            max-height .6s var(--vz-reveal-ease),
	            padding-block .6s var(--vz-reveal-ease);
}
.js .vz-about #acc-about-head[aria-expanded="true"] {
	opacity: 0;
	max-height: 0;
	padding-block: 0;
	pointer-events: none;
}

/* Nexus Sonance anchor link — inherits colour; the <b> stays legible on the dark ground. */
.vz-about .acc-body .anchor a { color: var(--vz-lilac); }
.vz-about .acc-body .anchor a:hover { color: var(--vz-ink); }

/* Focus visibility for the panel heads (buttons). */
.vz-about :focus-visible {
	outline: 2px solid var(--vz-lilac);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ─── Reduced motion: instant swap, no fold/fade transitions ──────────────── */
@media (prefers-reduced-motion: reduce) {
	.js .vz-about .acc-panel { transition: none !important; }
	.js .vz-about #acc-about-head { transition: none !important; }
}