/* /static/css/pages/about.css */

.about-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.about-hero {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--hover-background);
}

.about-hero-icon {
    display: block;
    margin: 0 auto 20px;
    height: 80px;
    width: auto;
}

.about-hero h1 {
    font-family: var(--brand-font);
    letter-spacing: 0;
}

.about-section {
    margin-bottom: 50px;
}

.about-section strong {
    color: var(--about-strong-color);
}

.feature-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.feature {
    flex: 1 1 250px;
    background: white;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.feature:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.about-section ul {
    padding-left: 20px;
}

.about-section li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

.about-section li:before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

.about-donate {
    text-align: center;
    padding: 0 0 32px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--rule-soft);
}

.about-donate p {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: 0 0 14px;
}

.about-donate-thanks {
    display: block;
    padding: 12px 20px;
    background: #edfaed;
    border: 1px solid var(--color-success);
    border-radius: 6px;
    color: #155724;
    font-size: 0.875rem;
    margin: 0 0 14px;
    line-height: 1.6;
}

.about-quote-image-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap; /* For mobile responsiveness */
}

.about-image {
    flex: 2;
    text-align: center;
}

.about-image img {
    max-width: 80%;
    width: 80%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block; /* Add this */
    margin: 0 auto; /* Add this to center the image */
}

.about-image div {
    margin-top: 0.5rem;
}

.about-hero .subhead {
    display: block;
    color: var(--subhead-color);
    font-family: var(--display);
    font-size: 1.05rem;
    font-style: italic;
    margin-top: var(--space-1);
}

/* Scale-of-the-graph stat band */
.stat-band {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    margin: var(--space-3) 0 var(--space-2);
}

.stat-band .stat {
    flex: 1 1 140px;
    text-align: center;
    padding: var(--space-2) var(--space-1);
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.stat-band .stat-number {
    display: block;
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-color-dark);
    line-height: 1.1;
}

.stat-band .stat-label {
    display: block;
    font-size: 0.85rem;
    margin-top: var(--space-1);
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

/* Ways-to-explore surface cards */
.about-surface-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.about-surface-cards .surface-card {
    flex: 1 1 220px;
    padding: var(--space-2);
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.about-surface-cards .surface-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.about-surface-cards .surface-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: var(--space-2);
    background: var(--paper);
}

.about-surface-cards .surface-card h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.15rem;
}

.about-surface-cards .surface-card h3 a {
    color: var(--h3-color);
    text-decoration: none;
    border-bottom: 2px solid var(--burnt-orange);
    padding-bottom: 1px;
}

.about-surface-cards .surface-card h3 a:hover {
    color: var(--primary-color-dark);
}

.about-surface-cards .surface-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Work-with-Bunkabop list */
.work-with-list {
    margin: var(--space-2) 0 var(--space-2) var(--space-3);
}

.work-with-list li {
    margin-bottom: var(--space-1);
}

.about-legal-note {
    font-size: 0.8rem;
    color: var(--ink-faint);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule-soft);
}

/* Visuals frame (SVG illustrations from static/images/about/) */
.about-visual {
    margin: var(--space-3) 0;
    padding: var(--space-2);
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    text-align: center;
}

.about-visual img,
.about-visual svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.about-visual figcaption {
    margin-top: var(--space-2);
    font-size: 0.85rem;
    color: var(--ink-faint);
    font-style: italic;
}

/* Placeholder frame — used only before an illustration is picked */
.about-visual-placeholder {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 2px dashed var(--burnt-orange);
    border-radius: 12px;
    text-align: center;
    background: var(--soft-cream);
}

.about-visual-placeholder .visual-note {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0;
}

@media screen and (max-width: 768px) {
    .feature-highlights {
        flex-direction: column;
    }

    .about-hero h1 {
        font-size: 1.8rem;
    }

    .about-quote-image-row {
        flex-direction: column;
        gap: 1rem;
    }

    .about-image {
        text-align: center;
    }

    .pull-quote {
        margin: 1rem 0;
    }

    .stat-band .stat-number {
        font-size: 1.6rem;
    }
}

/* ============================================================
   .ab-* design system — About page
   Partner surface to home.css. Same visual language:
   padded bands with border-bottom separators, golden-ochre
   eyebrows, Plus Jakarta Sans headings, pill CTAs, warm cream
   backgrounds, 900px mobile breakpoint.
   ============================================================ */

.ab-page {
    color: var(--text-color);
    background: var(--background-color);
    min-height: 100vh;
}

/* ─── Bands (each section) ────────────────────────────────
   Editorial single-column layout: all content sits in a 720px column
   centered in the viewport, with text left-aligned within it. Every
   direct child shares the same 720px max-width so they share a left
   edge. Only the hero opts out (stays centered). */
.ab-band {
    padding: var(--space-8) var(--space-3);
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.ab-band > h2,
.ab-band > p,
.ab-band > ol,
.ab-band > blockquote,
.ab-band > form,
.ab-band > figure,
.ab-band > .ab-connection,
.ab-band > .ab-compare,
.ab-band > .ab-cards,
.ab-band > .ab-stats,
.ab-band > .ab-story-image {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.ab-band > h2 {
    font-family: var(--heading-font);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--h2-color);
    text-align: left;
    margin-top: 0;
    margin-bottom: var(--space-3);
    line-height: 1.2;
}
.ab-band > p {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-color);
}
.ab-band > p:last-child { margin-bottom: 0; }
.ab-band strong {
    color: var(--about-strong-color);
    font-weight: 700;
}
.ab-band em {
    color: var(--deep-maroon);
    font-style: italic;
}

/* Uniform beige background across every band — matches home's continuous
   --background-color canvas. Section rhythm comes from the border-bottom
   separators only, not from alternating fills. */

/* ─── Hero ─────────────────────────────────────────────────
   Matches home's .hc-hero exactly — same padding, same
   centered layout, same typographic hierarchy. */
.ab-hero {
    text-align: center;
    padding: var(--space-6) var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
}
.ab-hero-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-2);
}
.ab-hero h1 {
    font-family: var(--brand-font);
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--h1-color);
    margin: 0 0 var(--space-2);
}
.ab-hero-sub {
    font-family: var(--heading-font);
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--subhead-color);
    max-width: 34rem;
    margin: 0 auto;
    line-height: 1.5;
}

/* ─── Thanks (post-donation) ───────────────────────────────
   Subtle golden-ochre band, sits between hero and content. */
.ab-thanks {
    padding: var(--space-3) var(--space-3);
    background: linear-gradient(180deg, rgba(224, 160, 47, 0.10), rgba(224, 160, 47, 0.02));
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.ab-thanks p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

/* ─── Kicker (small eyebrow above demo) ──────────────────── */
.ab-band > p.ab-kicker {
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: var(--golden-ochre);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

/* ─── Connection demo (Kyoto ↔ topic ↔ New Orleans) ─────── */
.ab-connection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) auto;
    flex-wrap: wrap;
    max-width: 720px;
}
.ab-place {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 26px;
    background: var(--soft-cream);
    border: 1.5px solid var(--deep-maroon);
    border-radius: 12px;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 20px;
    color: var(--h1-color);
    line-height: 1.1;
    box-shadow: var(--shadow-sm);
    min-width: 140px;
}
.ab-place small {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.ab-link-line {
    position: relative;
    flex: 0 1 180px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab-link-line::before,
.ab-link-line::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 0;
    border-top: 2px dashed var(--connection-color);
    opacity: 0.55;
}
.ab-link-line::before { left: 0; right: 55%; }
.ab-link-line::after  { left: 55%; right: 0; }
.ab-topic {
    position: relative;
    background: var(--connection-color);
    color: var(--paper);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    z-index: 1;
    white-space: nowrap;
}
.ab-band > p.ab-demo-caption {
    font-style: italic;
    color: var(--ink-soft);
    font-size: 15px;
    margin-bottom: var(--space-3);
}
/* Pill-CTA override for the demo/final/support sections — matches home's
   .hc-bmap__cta pattern. .ab-work is deliberately left OUT so the "Get
   in touch" button uses the standard site .btn (rounded rectangle,
   deep-maroon, uppercase mono) from components/buttons.css. */
.ab-demo .btn,
.ab-final .btn,
.ab-support .btn {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: background var(--duration-fast);
    text-transform: none;
    letter-spacing: normal;
}
.ab-demo .btn:hover,
.ab-final .btn:hover,
.ab-support .btn:hover { background: var(--primary-color-dark); }

/* Donation button variant — keeps the deep-maroon accent from home newsletter */
.ab-support .btn-donate {
    background: var(--deep-maroon);
}
.ab-support .btn-donate:hover { background: var(--deep-plum); }

/* ─── Compare (encyclopedia vs Bunkabop) ──────────────────
   Side-by-side, no boxes. Each side leads with a small iconic
   visual — a linear-prose glyph for "encyclopedia," a network
   glyph for "Bunkabop." The visual + label + italic question
   read as a scannable unit. Column widths are equal; visual
   distinction comes from color (encyclopedia = ink-faint,
   Bunkabop = h1-color/accent). */
.ab-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    text-align: left;
}
.ab-compare-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ab-compare-card.ab-compare-accent {
    background: transparent;
    border: none;
    box-shadow: none;
}
.ab-compare-card p { margin: 0; }

/* ─── Animated visual: prose → sequential highlights → sequential morph → web ──
   19-second loop. Prose starts UN-highlighted; topics highlight one-by-one.
   Active-animation section (0-14s) matches previous cadence; final hold
   extended from 3s to 5s per user request.

   Timeline (19s total, percentages of 19000ms)
     0-2.0s     (0-10.53%)      INITIAL HOLD — prose visible, no highlights.
     2.0-7.3s   (10.53-38.42%)  Topics highlight in teal ONE BY ONE, 1 second
                                between each. Each highlight-in takes 300ms.
       t1 at 2.0s, t2 at 3.0s, t3 at 4.0s, t4 at 5.0s, t5 at 6.0s, t6 at 7.0s.
     7.3-8.0s   (38.42-42.11%)  All topics highlighted, brief settled hold.
     8.0-8.5s   (42.11-44.74%)  Non-topic prose text fades to zero.
     8.5-9.5s   (44.74-50%)     All six topics simultaneously translate to
                                the MIDPOINT of their connection line. Kyoto
                                center appears during this phase.
                                Encyclopedia/Bunkabop titles cross-fade here.
     9.5-14.0s  (50-73.68%)     SEQUENTIAL PER-TOPIC MORPH — each topic in
                                turn: topic fades → line draws → line label
                                appears → node grows → node label fades in.
                                Each morph = 750ms (3.95% of 19s).
     14.0-19.0s (73.68-100%)    FINAL HOLD (5s) — full labeled web visible.
   Lines do NOT pulse. */
.ab-anim {
    position: relative;
    margin: 0 auto var(--space-3);
    max-width: 720px;
    width: 100%;
    /* Container 720x640 (aspect 9:8). Title bar takes top 18.75% (120px
       at 720 wide); SVG content area (viewBox 720x520) fills bottom 81.25%. */
    aspect-ratio: 720 / 640;
    /* Match bunkaweb graph backdrop: paper-warm base + paper grain overlay. */
    background-color: var(--graph-bg, var(--paper-warm));
    background-image: radial-gradient(var(--graph-grain, rgba(141, 110, 99, 0.08)) 1px, transparent 1.2px);
    background-size: 4px 4px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* Establish a size container so the prose can scale its font relative
       to the container width (cqi) — keeps the pills visually proportional
       to the graph at any viewport. */
    container-type: inline-size;
}
.ab-anim svg {
    display: block;
    position: absolute;
    top: 18.75%;    /* below the title bar */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 81.25%;
}

/* ─── Prose overlay ──────────────────────────────────────
   Positioned HTML overlay over the SVG (previously lived inside
   <foreignObject>, which had iOS Safari overflow bugs). Box mirrors
   the old foreignObject rect (x=30 y=20 w=660 h=380 in the 720x520
   SVG viewBox), expressed as % of the .ab-anim container so it tracks
   the SVG as it scales. Top edge accounts for the 18.75% title bar
   above the SVG. */
.ab-anim__prose-overlay {
    position: absolute;
    /* SVG occupies bottom 81.25% of container. foreignObject was at
       y=20 in a 520-tall viewBox, i.e. 3.846% down the SVG.
       Overlay top = 18.75% + 81.25% × 20/520 = 21.875%. */
    top: 21.875%;
    /* x=30 in 720-wide viewBox → 4.167% */
    left: 4.167%;
    /* width=660/720 = 91.667% */
    width: 91.667%;
    /* height=380/520 × 81.25% of container = 59.375% */
    height: 59.375%;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
}

/* ─── Animation title bar (cross-fades during topic-translate phase) ─
   Occupies top ~16.67% of the square container (~120px at 720 wide).
   Both titles stacked absolutely so they cross-fade with no layout shift.
   Larger type and generous line spacing for the taller title bar. */
.ab-anim__title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18.75%;
    padding: 20px clamp(20px, 4%, 36px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    border-bottom: 1px solid var(--rule-soft);
}
.ab-anim__title--enc { animation: ab-anim-title-enc 19s ease-in-out infinite; }
.ab-anim__title--bnk { animation: ab-anim-title-bnk 19s ease-in-out infinite; opacity: 0; }

.ab-anim__title-label {
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-faint);
    line-height: 1.2;
}
.ab-anim__title-q {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--dark-teal, #116466);
}
/* Both label colors are the same light grey (--ink-faint) so the visual
   distinction between the two titles comes from the question color, not
   the label color. Encyclopedia question = connection teal (foreshadows
   the graph); Bunkabop question = burnt-orange accent. */
.ab-anim__title--bnk .ab-anim__title-label { color: var(--ink-faint); }
.ab-anim__title--bnk .ab-anim__title-q {
    color: var(--h1-color);
    font-weight: 600;
}

@keyframes ab-anim-title-enc {
    0%       { opacity: 1; }
    44.74%   { opacity: 1; }
    50%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes ab-anim-title-bnk {
    0%       { opacity: 0; }
    44.74%   { opacity: 0; }
    50%      { opacity: 1; }
    100%     { opacity: 1; }
}

/* ─── Prose layer ────────────────────────────────────────
   Sits inside .ab-anim__prose-overlay (an HTML overlay over the SVG).
   Only children (plain text + individual topics) animate opacity; the
   wrapper stays visible so topics can translate to line midpoints.

   Font-size scales with the .ab-anim container width (cqi = 1% of the
   size-container's inline size). At container ≥500 CSS px the clamp
   caps at 20px (original desktop feel); below that it shrinks with the
   container so the pills stay visually proportional to the graph on
   phones. Line-height stays airy so highlighted topic pills never
   overlap between wrapped lines. */
.ab-anim__prose {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(11px, 4cqi, 20px);
    line-height: 3.0;
    letter-spacing: 0.03em;
    color: var(--ink);
    text-align: left;
    margin: 0;
    padding: 0;
    /* Fill overlay height and vertically center the paragraph. */
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.ab-anim__prose p { margin: 0; width: 100%; }

/* At narrow container widths the prose wraps into ~6 lines; the airy 3.0
   line-height would overflow the 59.375%-tall overlay, so tighten to 1.7
   (still leaves room for the pill highlights to not overlap between lines,
   since topic line-height is 1.4). */
@container (max-width: 640px) {
    .ab-anim__prose { line-height: 1.7; }
}

/* Non-topic prose spans: visible from start, fade out during phase 3
   (37.5-41.7%), stay invisible through the web hold, snap back at loop. */
.ab-anim__plain {
    opacity: 1;
    animation: ab-anim-plain 19s linear infinite;
}

/* Topic spans: normal ink → teal box highlight → morph to line midpoint →
   invisible → reset. The highlight is a tight teal box that is slightly
   taller than the glyph height (line-height 1.4 = 28px at 20px font) —
   deliberately NOT the full 2.5 line-height of the surrounding prose, so
   the boxes read as pill-tight highlights rather than full line strips. */
.ab-anim__topic {
    display: inline-block;
    line-height: 1.4;         /* Box height ≈ 28px, decoupled from prose 2.5 */
    padding: 1px 6px;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    transform: translate(0, 0);
    transform-origin: center;
    animation-duration: 19s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ab-anim__topic.t1 { animation-name: ab-anim-topic-1; }
.ab-anim__topic.t2 { animation-name: ab-anim-topic-2; }
.ab-anim__topic.t3 { animation-name: ab-anim-topic-3; }
.ab-anim__topic.t4 { animation-name: ab-anim-topic-4; }
.ab-anim__topic.t5 { animation-name: ab-anim-topic-5; }
.ab-anim__topic.t6 { animation-name: ab-anim-topic-6; }

/* ─── Connection lines — bunkaweb .bwg-link--topic look ────────
   Dark-teal, thin, dashed 3/4, round-capped. Each line draws
   sequentially via its own @keyframes. NO pulsing. */
.ab-anim__line {
    stroke: var(--dark-teal, #116466);
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity: 0;
    animation-duration: 19s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ab-anim__line.l1 { animation-name: ab-anim-line-1; }
.ab-anim__line.l2 { animation-name: ab-anim-line-2; }
.ab-anim__line.l3 { animation-name: ab-anim-line-3; }
.ab-anim__line.l4 { animation-name: ab-anim-line-4; }
.ab-anim__line.l5 { animation-name: ab-anim-line-5; }
.ab-anim__line.l6 { animation-name: ab-anim-line-6; }

/* ─── Line labels — text along each connection line ───────────
   Rendered as textPath, positioned at line midpoint. dy="-5" on
   the wrapping <text> lifts the label above the line. Same halo
   treatment as node labels so it reads clearly over the grain. */
.ab-anim__line-label {
    font-family: var(--display, 'Playfair Display', Georgia, serif);
    font-size: 11px;
    font-style: italic;
    font-weight: 500;
    fill: var(--dark-teal, #116466);
    paint-order: stroke;
    stroke: var(--graph-bg, var(--paper-warm));
    stroke-width: 4;
    stroke-linejoin: round;
    opacity: 0;
    letter-spacing: 0.02em;
    animation-duration: 19s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ab-anim__line-label.lb1 { animation-name: ab-anim-label-1; }
.ab-anim__line-label.lb2 { animation-name: ab-anim-label-2; }
.ab-anim__line-label.lb3 { animation-name: ab-anim-label-3; }
.ab-anim__line-label.lb4 { animation-name: ab-anim-label-4; }
.ab-anim__line-label.lb5 { animation-name: ab-anim-label-5; }
.ab-anim__line-label.lb6 { animation-name: ab-anim-label-6; }

/* ─── Outer place nodes — bunkaweb .bwg-node look ─────────────
   Small burnt-orange disc with teal-tinted stroke; label below
   with Playfair + paper-warm halo. Node GROWS from scale 0 to
   scale 1 sequentially at end of each line draw. transform-origin
   is (--cx, --cy) per node so scale grows from the circle center. */
.ab-anim__node {
    transform: scale(0);
    transform-origin: var(--cx, center) var(--cy, center);
    animation-duration: 19s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.ab-anim__node.n1 { animation-name: ab-anim-node-1; }
.ab-anim__node.n2 { animation-name: ab-anim-node-2; }
.ab-anim__node.n3 { animation-name: ab-anim-node-3; }
.ab-anim__node.n4 { animation-name: ab-anim-node-4; }
.ab-anim__node.n5 { animation-name: ab-anim-node-5; }
.ab-anim__node.n6 { animation-name: ab-anim-node-6; }
.ab-anim__node-circle {
    fill: var(--graph-node, var(--burnt-orange));
    stroke: rgba(17, 100, 102, 0.3);
    stroke-width: 2.2;
}
/* Node label opacity is animated separately so it only becomes visible
   AFTER the node has finished growing to full size — otherwise the label
   would appear at intermediate scale (unreadable) during growth. */
.ab-anim__node-label {
    font-family: var(--display, 'Playfair Display', Georgia, serif);
    font-size: 12px;
    font-weight: 500;
    fill: var(--graph-label, var(--ink));
    paint-order: stroke;
    stroke: var(--graph-bg, var(--paper-warm));
    stroke-width: 4;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0;
    animation-duration: 19s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ab-anim__node.n1 .ab-anim__node-label { animation-name: ab-anim-nodelabel-1; }
.ab-anim__node.n2 .ab-anim__node-label { animation-name: ab-anim-nodelabel-2; }
.ab-anim__node.n3 .ab-anim__node-label { animation-name: ab-anim-nodelabel-3; }
.ab-anim__node.n4 .ab-anim__node-label { animation-name: ab-anim-nodelabel-4; }
.ab-anim__node.n5 .ab-anim__node-label { animation-name: ab-anim-nodelabel-5; }
.ab-anim__node.n6 .ab-anim__node-label { animation-name: ab-anim-nodelabel-6; }

/* ─── Center Kyoto — bunkaweb .bwg-center look ────────────────
   Appears at the start of the morph phase so lines have a source. */
.ab-anim__node--center {
    animation: ab-anim-node-center 19s ease-in-out infinite;
}
.ab-anim__center-disc {
    fill: var(--graph-center, var(--deep-maroon));
    stroke: var(--graph-center-ring, var(--golden-ochre));
    stroke-width: 3;
}
.ab-anim__center-aura {
    fill: none;
    stroke: var(--graph-center-ring, var(--golden-ochre));
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: 0.5;
}
.ab-anim__center-label {
    font-family: var(--display, 'Playfair Display', Georgia, serif);
    font-size: 15px;
    font-weight: 700;
    fill: var(--graph-label, var(--ink));
    paint-order: stroke;
    stroke: var(--graph-bg, var(--paper-warm));
    stroke-width: 5;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ─── Keyframes (all 19s cycle, percentages align to timeline above) ──
   Cycle extended from 17s → 19s to give a 5-second final hold (was 3s).
   Active-animation timings all scaled by 17/19 ≈ 0.8947. Each 1s = 5.263%.
     Initial hold                0 - 10.53%   (0 - 2s)
     Topic i highlight-in start (300ms each, 1s apart):
       t1 = 10.53%   t2 = 15.79%   t3 = 21.05%
       t4 = 26.32%   t5 = 31.58%   t6 = 36.84%
     Highlighted hold            38.42 - 42.11%  (0.7s)
     Non-topic prose fade        42.11 - 44.74%  (0.5s)
     Topic translate (all)       44.74 - 50%     (1s)
     Kyoto center appears        44.74 - 50%
     Sequential morphs (750ms = 3.95% each):
       t1 = 50 - 53.95%       t4 = 61.84 - 65.79%
       t2 = 53.95 - 57.89%    t5 = 65.79 - 69.74%
       t3 = 57.89 - 61.84%    t6 = 69.74 - 73.68%
     Final hold                  73.68 - 100%    (5s)
*/

/* Non-topic prose fade: visible 0-42%, fade to 0 by 44.74%, invisible through hold. */
@keyframes ab-anim-plain {
    0%       { opacity: 1; }
    42.11%   { opacity: 1; }
    44.74%   { opacity: 0; }
    100%     { opacity: 0; }
}

/* ── TOPICS ─────────────────────────────────────────────
   Each starts transparent-bg / ink-color. Highlights in at its own
   time (1s stagger). Holds highlighted until 50%, then all translate
   simultaneously to line midpoints during 50-55.88%. Holds translated
   until its own morph window, then fades. */
@keyframes ab-anim-topic-1 {
    0%, 10.53% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    12.11%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    51.32%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
@keyframes ab-anim-topic-2 {
    0%, 15.79% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    17.37%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    53.95%     { transform: translate(var(--tx), var(--ty)); opacity: 1; }
    55.26%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
@keyframes ab-anim-topic-3 {
    0%, 21.05% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    22.63%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    57.89%     { transform: translate(var(--tx), var(--ty)); opacity: 1; }
    59.21%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
@keyframes ab-anim-topic-4 {
    0%, 26.32% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    27.89%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    61.84%     { transform: translate(var(--tx), var(--ty)); opacity: 1; }
    63.16%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
@keyframes ab-anim-topic-5 {
    0%, 31.58% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    33.16%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    65.79%     { transform: translate(var(--tx), var(--ty)); opacity: 1; }
    67.11%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
@keyframes ab-anim-topic-6 {
    0%, 36.84% { background: transparent; color: var(--ink); transform: translate(0,0); opacity: 1; }
    38.42%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    44.74%     { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(0,0); opacity: 1; }
    50%        { background: var(--dark-teal, #116466); color: var(--paper); transform: translate(var(--tx), var(--ty)); opacity: 1; }
    69.74%     { transform: translate(var(--tx), var(--ty)); opacity: 1; }
    71.05%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
    100%       { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

/* ── CONNECTION LINES (no pulsing) ─────────────────────
   Line i draws during 0.3-2% of topic i's morph window.
   Morph starts: t1=50 t2=53.95 t3=57.89 t4=61.84 t5=65.79 t6=69.74 */
@keyframes ab-anim-line-1 {
    0%, 50.27% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    50.47%     { opacity: 1; }
    51.76%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    51.89%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}
@keyframes ab-anim-line-2 {
    0%, 54.21% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    54.42%     { opacity: 1; }
    55.71%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    55.84%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}
@keyframes ab-anim-line-3 {
    0%, 58.16% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    58.37%     { opacity: 1; }
    59.66%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    59.79%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}
@keyframes ab-anim-line-4 {
    0%, 62.11% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    62.32%     { opacity: 1; }
    63.61%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    63.74%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}
@keyframes ab-anim-line-5 {
    0%, 66.05% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    66.26%     { opacity: 1; }
    67.55%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    67.68%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}
@keyframes ab-anim-line-6 {
    0%, 70.00% { stroke-dashoffset: 400; stroke-dasharray: 400; opacity: 0; }
    70.21%     { opacity: 1; }
    71.50%     { stroke-dashoffset: 0; stroke-dasharray: 400; opacity: 1; }
    71.63%     { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
    100%       { stroke-dashoffset: 0; stroke-dasharray: 3 4; opacity: 1; }
}

/* ── OUTER NODES — GROW FROM 0 TO FINAL SIZE (no pulsing) ──
   Node grows during 2-3.4% of its morph window. transform-origin
   is per-node (--cx, --cy) so growth pivots from circle center. */
@keyframes ab-anim-node-1 {
    0%, 51.76% { transform: scale(0); }
    53.06%     { transform: scale(1); }
    100%       { transform: scale(1); }
}
@keyframes ab-anim-node-2 {
    0%, 55.71% { transform: scale(0); }
    57.01%     { transform: scale(1); }
    100%       { transform: scale(1); }
}
@keyframes ab-anim-node-3 {
    0%, 59.66% { transform: scale(0); }
    60.97%     { transform: scale(1); }
    100%       { transform: scale(1); }
}
@keyframes ab-anim-node-4 {
    0%, 63.61% { transform: scale(0); }
    64.91%     { transform: scale(1); }
    100%       { transform: scale(1); }
}
@keyframes ab-anim-node-5 {
    0%, 67.55% { transform: scale(0); }
    68.86%     { transform: scale(1); }
    100%       { transform: scale(1); }
}
@keyframes ab-anim-node-6 {
    0%, 71.50% { transform: scale(0); }
    72.80%     { transform: scale(1); }
    100%       { transform: scale(1); }
}

/* ── NODE LABELS — fade in AFTER node reaches full size ── */
@keyframes ab-anim-nodelabel-1 {
    0%, 53.06% { opacity: 0; }
    53.95%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-nodelabel-2 {
    0%, 57.01% { opacity: 0; }
    57.89%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-nodelabel-3 {
    0%, 60.97% { opacity: 0; }
    61.84%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-nodelabel-4 {
    0%, 64.91% { opacity: 0; }
    65.79%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-nodelabel-5 {
    0%, 68.86% { opacity: 0; }
    69.74%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-nodelabel-6 {
    0%, 72.80% { opacity: 0; }
    73.68%     { opacity: 1; }
    100%       { opacity: 1; }
}

/* ── LINE LABELS — fade in along the line as node grows ── */
@keyframes ab-anim-label-1 {
    0%, 51.76% { opacity: 0; }
    53.06%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-label-2 {
    0%, 55.71% { opacity: 0; }
    57.01%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-label-3 {
    0%, 59.66% { opacity: 0; }
    60.97%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-label-4 {
    0%, 63.61% { opacity: 0; }
    64.91%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-label-5 {
    0%, 67.55% { opacity: 0; }
    68.86%     { opacity: 1; }
    100%       { opacity: 1; }
}
@keyframes ab-anim-label-6 {
    0%, 71.50% { opacity: 0; }
    72.80%     { opacity: 1; }
    100%       { opacity: 1; }
}

/* ── KYOTO CENTER ─────────────────────────────────────
   Appears during the topic-translate phase (44.74-50%). */
@keyframes ab-anim-node-center {
    0%, 44.74% { opacity: 0; transform: scale(0.5); }
    48.4%      { opacity: 1; transform: scale(1.1); }
    50%        { opacity: 1; transform: scale(1); }
    100%       { opacity: 1; transform: scale(1); }
}

/* Respect user's reduced-motion preference: freeze on the un-highlighted
   prose frame (the animation's actual initial state) with the encyclopedia
   title visible so the compare intent is readable without any motion. */
@media (prefers-reduced-motion: reduce) {
    .ab-anim__plain,
    .ab-anim__topic,
    .ab-anim__line,
    .ab-anim__line-label,
    .ab-anim__node,
    .ab-anim__node .ab-anim__node-label,
    .ab-anim__node--center,
    .ab-anim__title--enc,
    .ab-anim__title--bnk { animation: none; }
    .ab-anim__plain { opacity: 1; }
    .ab-anim__topic { background: transparent; color: var(--ink); transform: translate(0, 0); opacity: 1; }
    .ab-anim__line, .ab-anim__line-label { opacity: 0; }
    .ab-anim__node { transform: scale(0); }
    .ab-anim__node .ab-anim__node-label { opacity: 0; }
    .ab-anim__node--center { opacity: 0; }
    .ab-anim__title--enc { opacity: 1; }
    .ab-anim__title--bnk { opacity: 0; }
}

/* Mobile: SVG <text> (node/center/line-label) DOES scale with the SVG viewport
   so bump those UP so they stay legible when the graph shrinks. The prose is
   an HTML overlay whose font uses cqi (see .ab-anim__prose), so it scales with
   the container automatically — no per-viewport override needed.
   Title bar is HTML overlay (not SVG-scaled), so shrink title font sizes DOWN
   to prevent line-wrapping in the narrow bar. */
@media (max-width: 640px) {
    .ab-anim__node text { font-size: 14px; }
    .ab-anim__node--center text { font-size: 17px; }
    .ab-anim__line-label { font-size: 13px; }

    /* Title bar is CSS-px (not SVG-scaled) — shrink type so questions stay
       on a single line inside the narrow bar. */
    .ab-anim__title { padding: 12px 14px; gap: 4px; }
    .ab-anim__title-label { font-size: 10px; letter-spacing: 0.14em; }
    .ab-anim__title-q { font-size: 14px; line-height: 1.25; }
}
@media (max-width: 440px) {
    /* Very narrow phones: nudge title question even smaller so the longer
       "What connects Kyoto to the rest of the world?" doesn't wrap. */
    .ab-anim__title-q { font-size: 12.5px; }
    .ab-anim__title-label { font-size: 9px; }
    .ab-anim__title { padding: 10px 12px; }
}

.ab-compare-label {
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: var(--ink-faint);
    font-weight: 700;
    margin-bottom: 0 !important;
}
.ab-compare-accent .ab-compare-label {
    color: var(--golden-ochre);
}
.ab-compare-q {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(20px, 2.5vw, 25px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-faint);
}
.ab-compare-accent .ab-compare-q {
    color: var(--h1-color);
    font-weight: 600;
}

@media (max-width: 640px) {
    .ab-compare {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .ab-compare-visual { width: 56px; height: 56px; }
}
/* .ab-note inherits the default .ab-band > p paragraph styling (body font,
   17px, ink color, normal weight) — no italic, no size shrink, no muted color. */
.ab-band > p.ab-note {
    /* no overrides — matches surrounding paragraph text */
}

/* ─── Stats row ────────────────────────────────────────────
   Three metrics on a single row — no box, sits on the band's
   beige background. Compact type so it fits within the 720px
   content column comfortably. */
.ab-stats {
    /* 3 equal columns so each metric sits centered in its own third of the
       content width — evenly spaced by construction. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    gap: var(--space-2);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: var(--space-3) 0 0;
    box-shadow: none;
}
.ab-stat {
    text-align: center;
    padding: 0;
    min-width: 0;
}
.ab-stat-n {
    display: block;
    font-family: var(--display);
    font-size: clamp(32px, 4.4vw, 44px);
    font-weight: 800;
    color: var(--h1-color);
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.ab-stat-l {
    display: block;
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.3;
}

/* ─── Steps (how it's made) ─────────────────────────────── */
.ab-band > ol.ab-steps {
    list-style: none;
    counter-reset: ab-step;
    padding: 0;
    margin: 0 auto var(--space-3);
    text-align: left;
}
.ab-steps li {
    counter-increment: ab-step;
    position: relative;
    padding: var(--space-2) var(--space-2) var(--space-2) 68px;
    margin-bottom: var(--space-2);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
}
.ab-steps li::before {
    content: counter(ab-step);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--deep-maroon);
    color: var(--paper);
    font-family: var(--display);
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 0 0 3px var(--golden-ochre);
}
.ab-steps li strong {
    color: var(--h1-color);
    font-weight: 700;
    margin-right: 4px;
}
.ab-band > p.ab-trust {
    font-style: italic;
    color: var(--ink-soft);
}

/* ─── Explore cards (3 links) ────────────────────────────── */
.ab-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.ab-card {
    display: block;
    padding: var(--space-3) var(--space-2);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) ease,
                transform var(--duration-normal) ease,
                border-color var(--duration-normal) ease;
}
.ab-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--burnt-orange);
}
.ab-card h3 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--h1-color);
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
}
.ab-card p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
    max-width: none;
}

/* ─── Story ──────────────────────────────────────────────────
   Narrative section. All content left-aligned per page-wide layout.
   Bigquote keeps its left-border decoration; thesis is a slightly
   heavier callout paragraph; story image sits flush-left in the column. */
/* Big quote — clean text treatment. No box, background, border, radius, or
   ornamental opening quote glyph — just italic Playfair prose inline with the
   surrounding narrative. */
.ab-band > blockquote.ab-bigquote {
    margin: var(--space-3) auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    text-align: center !important;
}
.ab-band .ab-bigquote p {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-style: italic;
    line-height: 1.4;
    color: var(--burnt-orange);
    margin: 0 auto;
    max-width: none;
    text-align: center !important;
}
.ab-bigquote p em {
    color: var(--burnt-orange);
    font-style: italic;
    font-weight: 700;
}
.ab-band > p.ab-thesis {
    text-align: center;
    font-family: var(--heading-font);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 500;
    color: var(--burnt-orange);
    margin: var(--space-3) auto var(--space-4);
    line-height: 1.45;
}
.ab-story-image {
    margin-top: var(--space-3);
    text-align: center;
}
.ab-story-image img {
    max-width: 480px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    display: block;
    margin: 0 auto var(--space-2);
}
.ab-story-image .external-link {
    display: inline-block;
    color: var(--external-link-color);
    text-decoration: none;
    font-family: var(--body-font);
    font-size: 14px;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast), border-color var(--duration-fast);
}
.ab-story-image .external-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* ─── Support ─────────────────────────────────────────────── */
.ab-support form { margin-top: var(--space-2); }

/* ─── Work with Bunkabop ───────────────────────────────────
   "Get in touch" is a short, near-square-cornered rectangle —
   more restrained than the pill CTAs elsewhere on the page. */
.ab-work .btn {
    margin-top: var(--space-1);
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 11px;
}
/* Center the paragraph that holds the "Get in touch" button. The button is
   inline-block so text-align on its parent controls horizontal positioning. */
.ab-work p:has(> .btn) {
    text-align: center;
}
.ab-band > ul.ab-work-list {
    max-width: 720px;
    margin: 0 auto var(--space-3);
    padding-left: var(--space-2);
    list-style: none;
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-color);
}
.ab-work-list li {
    position: relative;
    padding-left: var(--space-2);
    margin-bottom: 6px;
}
.ab-work-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--burnt-orange);
}
.ab-work-list li:last-child { margin-bottom: 0; }
.ab-band > p.ab-legal {
    font-size: 13px;
    color: var(--ink-faint);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule-soft);
    line-height: 1.5;
}

/* ─── Final CTA ─────────────────────────────────────────── */
.ab-final {
    background: linear-gradient(180deg, var(--background-color) 0%, var(--soft-cream) 100%);
    border-bottom: none;
    padding-bottom: var(--space-8);
}
.ab-band > h2 + .btn,
.ab-final > .btn {
    display: inline-block;
}
.ab-final > h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: var(--space-3);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .ab-band { padding: var(--space-6) var(--space-2); }
    .ab-compare { grid-template-columns: 1fr; }
    .ab-cards { grid-template-columns: 1fr; }
    .ab-stats { gap: var(--space-1); }
    .ab-stat-n { font-size: clamp(24px, 6vw, 32px); }
    .ab-stat-l { font-size: 9px; letter-spacing: 0.08em; }
    .ab-connection { gap: var(--space-1); }
    .ab-link-line { flex-basis: 100%; height: 44px; order: 2; }
    .ab-place { flex: 1 1 45%; min-width: 130px; padding: 14px 18px; font-size: 17px; }
    .ab-place:first-of-type { order: 1; }
    .ab-place:last-of-type { order: 3; }
    .ab-steps li { padding-left: 60px; font-size: 15px; }
    .ab-steps li::before { width: 34px; height: 34px; font-size: 16px; left: 12px; }
    .ab-bigquote { padding: var(--space-2) var(--space-3); }
}