/* ==========================================================================
   Page About — "the house monograph" (markup: template-parts/sections/page-about.php).
   Overture manifesto, standfirst on the book grid, a contents spread, numbered
   chapters with a sticky folio column and a capped measure (ivory endpaper
   chapters at either end, one deep-teal full-bleed band in the middle), then a
   quiet sign-off with a tailpiece and a colophon-style "related" index.
   Plain CSS, scoped under .speedking-theme .spk-ab; loaded after guide-bento.css.
   Selectors are 0,3,0+ where they must beat the Mulia prose rules (0,2,1).
   ========================================================================== */

.speedking-theme .spk-ab {
	--ab-deep: var(--spk-deep, #042b2b);
	--ab-deep-2: var(--spk-deep-2, #063838);
	--ab-ink: var(--spk-ink, #151c0e);
	--ab-body: #2b3327;
	--ab-ivory: var(--spk-ivory, #f3f3ea);
	--ab-gold: var(--spk-gold, #c9aa69);
	--ab-gold-soft: var(--spk-gold-soft, #f0daad);
	--ab-gold-dark: var(--spk-gold-dark, #7d6a35);
	--ab-line: var(--spk-line, rgba(21, 28, 14, .14));
	--ab-serif: var(--spk-serif, 'Cormorant Garamond', Georgia, serif);
	--ab-sans: var(--spk-sans, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
	--ab-gap: clamp(1rem, 2.4vw, 2.5rem);
	/* Fixed-header clearance, and the folio numeral block (roman + rule) above each H2. */
	--ab-head: 7.5rem;
	--ab-num: clamp(3.25rem, 5.4vw, 5rem);
	--ab-num-pb: 1.25rem;
	--ab-num-mb: 1.5rem;
	/* Break out of the narrow prose column to the full container width (margins, not a transform). */
	--ab-w: min(calc(var(--spk-wide, 1320px) - 2 * var(--spk-gutter, 1.25rem)), calc(100vw - 2 * var(--spk-gutter, 1.25rem)));
	position: relative;
	width: var(--ab-w);
	max-width: none;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: 0;
	margin-left: calc(50% - var(--ab-w) / 2);
	margin-right: calc(50% - var(--ab-w) / 2);
	font-family: var(--ab-sans);
	color: var(--ab-ink);
}

/* Reset the long-form prose rules we re-style below. */
.speedking-theme .spk-ab p { margin: 0; }
.speedking-theme .spk-ab [id] { scroll-margin-top: var(--ab-head); }
.speedking-theme .spk-ab ul,
.speedking-theme .spk-ab ol { margin: 1.25rem 0 0; padding-left: 1.2rem; }
.speedking-theme .spk-ab li { margin: 0 0 .5rem; color: var(--ab-body); }
.speedking-theme .spk-ab a { color: var(--ab-deep); text-decoration: underline; text-decoration-color: var(--ab-gold); text-decoration-thickness: 1px; text-underline-offset: 5px; font-weight: 600; transition: color .25s ease, text-decoration-color .25s ease; }
.speedking-theme .spk-ab a:hover { color: var(--ab-gold-dark); text-decoration-color: currentColor; }
.speedking-theme .spk-ab a:focus-visible { outline: 2px solid var(--ab-gold); outline-offset: 4px; border-radius: 2px; }

/* ---------- Ornament (four-point star between two hairlines) ---------- */
.speedking-theme .spk-ab .spk-ab__ornament {
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	color: var(--ab-gold);
}
.speedking-theme .spk-ab .spk-ab__ornament::before,
.speedking-theme .spk-ab .spk-ab__ornament::after {
	content: ""; width: clamp(2.5rem, 6vw, 4.5rem); height: 1px; background: currentColor; opacity: .8;
}
.speedking-theme .spk-ab .spk-ab__ornament-mark { display: block; flex: none; }

/* ---------- Overture: the manifesto ---------- */
.speedking-theme .spk-ab .spk-ab__overture {
	display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 3.5vw, 2.75rem);
	padding: clamp(1rem, 3vw, 2.5rem) 0 0;
	text-align: center;
}
.speedking-theme .spk-ab .spk-ab__manifesto {
	max-width: 25em;
	margin: 0 auto;
	font: 300 clamp(1.6rem, 3.05vw, 2.7rem)/1.32 var(--ab-serif);
	letter-spacing: -.003em;
	color: var(--ab-deep);
	text-wrap: balance;
}
.speedking-theme .spk-ab .spk-ab__rule {
	display: block; width: 1px; height: clamp(3.5rem, 7vw, 6rem);
	background: linear-gradient(to bottom, var(--ab-gold), rgba(201, 170, 105, 0));
}
.speedking-theme .spk-ab .spk-ab__rule--rise { background: linear-gradient(to top, var(--ab-gold), rgba(201, 170, 105, 0)); }

/* ---------- Standfirst: margin label + intro, on the chapter grid ---------- */
.speedking-theme .spk-ab .spk-ab__standfirst {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ab-gap);
	align-items: start;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3.5rem, 6.5vw, 5.5rem);
}
.speedking-theme .spk-ab .spk-ab__label {
	display: flex; align-items: center; gap: .85rem; margin: 0 0 1.5rem;
	color: var(--ab-gold-dark);
}
.speedking-theme .spk-ab .spk-ab__label::before { content: ""; flex: none; width: 2rem; height: 1px; background: var(--ab-gold); }
.speedking-theme .spk-ab .spk-ab__margin { grid-column: 1 / span 4; margin: 0; padding-top: .7rem; }
.speedking-theme .spk-ab .spk-ab__intro { grid-column: 6 / span 6; min-width: 0; max-width: 40rem; }
.speedking-theme .spk-ab .spk-ab__intro-text {
	font: 400 clamp(1.3rem, 1.75vw, 1.55rem)/1.62 var(--ab-serif);
	color: var(--ab-ink);
}
.speedking-theme .spk-ab .spk-ab__intro-text::first-letter {
	float: left; margin: .42rem .75rem 0 0;
	font: 300 clamp(4.4rem, 6.4vw, 5.6rem)/.74 var(--ab-serif);
	color: var(--ab-gold-dark);
}
.speedking-theme .spk-ab .spk-ab__pre { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.9; }
.speedking-theme .spk-ab .spk-ab__pre p { color: var(--ab-body); }

/* ---------- Contents spread: one column per chapter, gold tab on a hairline ---------- */
.speedking-theme .spk-ab .spk-ab__contents { padding: 0 0 clamp(3.5rem, 6.5vw, 5.5rem); }
.speedking-theme .spk-ab .spk-ab__contents .spk-ab__label { margin-bottom: 1.35rem; }
.speedking-theme .spk-ab .spk-ab__toc {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--ab-gap);
	margin: 0; padding: 0; list-style: none;
	border-top: 1px solid var(--ab-line);
}
.speedking-theme .spk-ab .spk-ab__toc li { position: relative; margin: 0; padding: 0; }
.speedking-theme .spk-ab .spk-ab__toc li::before {
	content: ""; position: absolute; top: -1px; left: 0; width: 2.25rem; height: 1px;
	background: var(--ab-gold);
	transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.speedking-theme .spk-ab .spk-ab__toc li:hover::before,
.speedking-theme .spk-ab .spk-ab__toc li:focus-within::before { width: 100%; }
.speedking-theme .spk-ab .spk-ab__toc a {
	display: flex; flex-direction: column; gap: 1rem;
	padding: 1.6rem 0 .35rem;
	font-weight: 400; color: var(--ab-deep); text-decoration: none;
}
.speedking-theme .spk-ab .spk-ab__toc-no {
	font: 300 clamp(2rem, 2.8vw, 2.6rem)/.9 var(--ab-serif);
	letter-spacing: .04em; color: var(--ab-gold-dark);
}
.speedking-theme .spk-ab .spk-ab__toc-title {
	font: 400 clamp(1.12rem, 1.4vw, 1.3rem)/1.28 var(--ab-serif);
	text-wrap: balance;
}
.speedking-theme .spk-ab .spk-ab__toc a:hover { color: var(--ab-gold-dark); }

/* ---------- Chapters ---------- */
.speedking-theme .spk-ab .spk-ab__chapter {
	position: relative;
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ab-gap);
	padding: clamp(3rem, 5.5vw, 4.75rem) 0;
	border-top: 1px solid var(--ab-line);
}
.speedking-theme .spk-ab .spk-ab__folio {
	grid-column: 1 / span 4; align-self: start;
	position: sticky; top: var(--ab-head);
	min-width: 0; padding-right: clamp(0rem, 2vw, 2rem);
}
.speedking-theme .spk-ab .spk-ab__numeral {
	position: relative;
	padding-bottom: var(--ab-num-pb); margin-bottom: var(--ab-num-mb);
}
.speedking-theme .spk-ab .spk-ab__numeral::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 2.75rem; height: 1px; background: var(--ab-gold);
}
.speedking-theme .spk-ab .spk-ab__roman {
	display: block;
	font: 300 var(--ab-num)/.9 var(--ab-serif);
	letter-spacing: .04em; color: var(--ab-gold-dark);
}
.speedking-theme .spk-ab .spk-ab__title {
	margin: 0;
	font: 300 clamp(1.9rem, 2.7vw, 2.55rem)/1.12 var(--ab-serif);
	color: var(--ab-deep);
	text-wrap: balance;
}
/* Contents jumps land on the H2; clear the header AND the numeral block above it,
   so the numeral and the first line of prose both show below the fixed header. */
.speedking-theme .spk-ab h2.spk-ab__title { scroll-margin-top: calc(var(--ab-head) + .9 * var(--ab-num) + var(--ab-num-pb) + var(--ab-num-mb)); }
.speedking-theme .spk-ab .spk-ab__text {
	grid-column: 6 / span 6; min-width: 0; max-width: 37rem;
	padding-top: .35rem;
	font-size: 1.0625rem; line-height: 1.9;
}
.speedking-theme .spk-ab .spk-ab__text p { color: var(--ab-body); }
.speedking-theme .spk-ab .spk-ab__text p + p,
.speedking-theme .spk-ab .spk-ab__text * + p { margin-top: 1.25rem; }
/* Quiet lead-in: the opening line in small caps, same case and size as the text. */
.speedking-theme .spk-ab .spk-ab__text > p:first-child::first-line {
	font-variant-caps: all-small-caps; font-weight: 600; letter-spacing: .05em;
	color: var(--ab-deep);
}
.speedking-theme .spk-ab .spk-ab__text h3 { margin: 2rem 0 .75rem; font: 400 1.6rem/1.2 var(--ab-serif); color: var(--ab-deep); }

/* Endpaper chapters (first and last): an ivory tint bled to the viewport edges.
   border-image paints band + bleed as ONE image (no seam) and is ink overflow,
   so it never widens the page. */
.speedking-theme .spk-ab .spk-ab__chapter--paper {
	border-top-color: transparent;
	border-image: linear-gradient(var(--ab-ivory) 0 0) fill 0 / 0 / 0 100vmax;
}
.speedking-theme .spk-ab .spk-ab__chapter--paper .spk-ab__roman { color: var(--ab-gold-dark); }

/* The contrasting chapter: a deep-teal band, bled the same way. */
.speedking-theme .spk-ab .spk-ab__chapter--band {
	padding: clamp(4rem, 7.5vw, 6.5rem) 0;
	border-top-color: transparent;
	border-image: linear-gradient(var(--ab-deep) 0 0) fill 0 / 0 / 0 100vmax;
	color: var(--ab-ivory);
}
.speedking-theme .spk-ab .spk-ab__chapter--band + .spk-ab__chapter,
.speedking-theme .spk-ab .spk-ab__chapter--paper + .spk-ab__chapter { border-top-color: transparent; }
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__roman { color: var(--ab-gold); }
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__title { color: var(--ab-ivory); }
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__text p,
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__text li { color: rgba(243, 243, 234, .86); }
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__text > p:first-child::first-line { color: var(--ab-gold-soft); }
.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__text h3 { color: var(--ab-ivory); }
.speedking-theme .spk-ab .spk-ab__chapter--band a { color: var(--ab-gold-soft); text-decoration-color: var(--ab-gold); }
.speedking-theme .spk-ab .spk-ab__chapter--band a:hover { color: #fff; text-decoration-color: #fff; }
.speedking-theme .spk-ab .spk-ab__chapter--band a:focus-visible { outline-color: var(--ab-gold-soft); }

/* ---------- Sign-off: rising rule, closing line, tailpiece ---------- */
.speedking-theme .spk-ab .spk-ab__signoff {
	display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: 0 0 clamp(.5rem, 1.5vw, 1rem);
	border-top: 1px solid var(--ab-line);
	text-align: center;
}
.speedking-theme .spk-ab .spk-ab__chapter--band + .spk-ab__signoff,
.speedking-theme .spk-ab .spk-ab__chapter--paper + .spk-ab__signoff,
.speedking-theme .spk-ab .spk-ab__chapters:last-child + .spk-ab__signoff { border-top-color: transparent; }
.speedking-theme .spk-ab .spk-ab__signoff-text {
	max-width: 30em;
	font: italic 300 clamp(1.4rem, 2.3vw, 1.95rem)/1.5 var(--ab-serif);
	color: var(--ab-deep);
	text-wrap: balance;
}
.speedking-theme .spk-ab .spk-ab__signoff-text a { font-weight: 400; font-style: italic; }
.speedking-theme .spk-ab .spk-ab__tailpiece::before,
.speedking-theme .spk-ab .spk-ab__tailpiece::after { width: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- The appended "related" aside, set as a colophon index (About only) ---------- */
.speedking-theme .spk-ab ~ .bali-related {
	margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem);
	padding: clamp(2rem, 4vw, 2.75rem) 0 0;
	border: 0; border-top: 1px solid var(--spk-line, rgba(21, 28, 14, .14)); border-radius: 0;
	background: none;
	text-align: center;
}
.speedking-theme .spk-ab ~ .bali-related h2 {
	margin: 0 0 1.35rem;
	font: 600 .72rem/1.4 var(--spk-sans, system-ui, sans-serif);
	letter-spacing: .24em; text-transform: uppercase;
	color: var(--spk-gold-dark, #7d6a35);
}
.speedking-theme .spk-ab ~ .bali-related ul {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: .4rem;
	max-width: 42rem; margin: 0 auto; padding: 0;
	columns: auto; list-style: none;
}
.speedking-theme .spk-ab ~ .bali-related li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.speedking-theme .spk-ab ~ .bali-related li + li::before {
	content: ""; flex: none; width: 4px; height: 4px; margin: 0 1rem;
	background: var(--spk-gold, #c9aa69); transform: rotate(45deg);
}
.speedking-theme .spk-ab ~ .bali-related a {
	font: 400 1.2rem/1.5 var(--spk-serif, Georgia, serif);
	color: var(--spk-deep, #042b2b);
	text-decoration: underline; text-decoration-color: rgba(201, 170, 105, .55); text-decoration-thickness: 1px; text-underline-offset: 5px;
	transition: color .25s ease, text-decoration-color .25s ease;
}
.speedking-theme .spk-ab ~ .bali-related a:hover { color: var(--spk-gold-dark, #7d6a35); text-decoration-color: currentColor; }
.speedking-theme .spk-ab ~ .bali-related a:focus-visible { outline: 2px solid var(--spk-gold, #c9aa69); outline-offset: 3px; border-radius: 2px; }

/* ---------- Responsive ---------- */
@media (min-width: 1200px) {
	.speedking-theme .spk-ab .spk-ab__text { font-size: 1.125rem; line-height: 1.85; }
}

@media (max-width: 1060px) {
	.speedking-theme .spk-ab .spk-ab__margin { grid-column: 1 / span 4; }
	.speedking-theme .spk-ab .spk-ab__intro { grid-column: 5 / span 8; }
	.speedking-theme .spk-ab .spk-ab__folio { grid-column: 1 / span 4; padding-right: 0; }
	.speedking-theme .spk-ab .spk-ab__text { grid-column: 5 / span 8; max-width: none; }
}

@media (max-width: 720px) {
	.speedking-theme .spk-ab {
		--ab-head: 7rem;
		--ab-num-pb: 1rem;
		--ab-num-mb: 1.25rem;
	}
	.speedking-theme .spk-ab .spk-ab__standfirst { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
	.speedking-theme .spk-ab .spk-ab__margin,
	.speedking-theme .spk-ab .spk-ab__intro { grid-column: 1 / -1; }
	.speedking-theme .spk-ab .spk-ab__margin { padding-top: 0; }
	.speedking-theme .spk-ab .spk-ab__intro-text::first-letter { margin-top: .32rem; }

	.speedking-theme .spk-ab .spk-ab__toc { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
	.speedking-theme .spk-ab .spk-ab__toc li { border-bottom: 1px solid var(--ab-line); }
	.speedking-theme .spk-ab .spk-ab__toc li::before { width: 1.5rem; }
	.speedking-theme .spk-ab .spk-ab__toc a { flex-direction: row; align-items: baseline; gap: 0; padding: 1rem 0; }
	.speedking-theme .spk-ab .spk-ab__toc-no { flex: none; width: 3.25rem; font-size: 1.6rem; }
	.speedking-theme .spk-ab .spk-ab__toc-title { flex: 1 1 auto; min-width: 0; font-size: 1.18rem; }

	.speedking-theme .spk-ab .spk-ab__chapter { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
	.speedking-theme .spk-ab .spk-ab__folio,
	.speedking-theme .spk-ab .spk-ab__text { grid-column: 1 / -1; }
	.speedking-theme .spk-ab .spk-ab__folio { position: static; }
	.speedking-theme .spk-ab .spk-ab__text { padding-top: 0; font-size: 1.03rem; line-height: 1.85; }

	.speedking-theme .spk-ab ~ .bali-related ul { flex-direction: column; align-items: center; row-gap: .25rem; }
	.speedking-theme .spk-ab ~ .bali-related li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.speedking-theme .spk-ab a,
	.speedking-theme .spk-ab ~ .bali-related a,
	.speedking-theme .spk-ab .spk-ab__toc li::before { transition: none; }
}

@media print {
	.speedking-theme .spk-ab { width: auto; margin-left: 0; margin-right: 0; }
	.speedking-theme .spk-ab .spk-ab__chapter--band,
	.speedking-theme .spk-ab .spk-ab__chapter--paper { border-image: none; }
	.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__title,
	.speedking-theme .spk-ab .spk-ab__chapter--band .spk-ab__text p { color: var(--ab-ink); }
	.speedking-theme .spk-ab .spk-ab__folio { position: static; }
}