/*
 * CountiesFirst.org - Production visual layer.
 *
 * Built for the book "Counties First: A House Divided" by Matt Hawkins.
 * Editorial, patriotic, serious. Navy-dominant. Gold and amber accents.
 * Red is rationed: the primary buy buttons and the single pull-quote only.
 *
 * Type system:
 *   Fraunces      display headings, hero subtitle, pull-quote
 *   Source Serif 4 body copy
 *   Archivo       eyebrows, labels, buttons, attributions, nav
 *
 * BEM class convention: .block__element--modifier
 */

/* ============================================================
   FONTS (self-hosted, font-display: swap)
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('/assets/fonts/sourceserif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('/assets/fonts/sourceserif-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    /* Navy base */
    --navy-900: #0A1A33;
    --navy-800: #0F2347;
    --navy-700: #16315E;

    /* Light surfaces */
    --paper: #F4EFE6;
    --white: #FAFAF7;

    /* Accents */
    --gold: #E4B95B;
    --amber: #F0CD7E;
    --red: #C0392B;
    --red-hover: #A93226;

    /* Text on navy */
    --ink-on-navy: #F2EEE4;          /* body text on navy, AA on navy-900/800/700 */
    --ink-on-navy-muted: #B7C2D4;    /* muted text on navy, AA on navy-900/800 */

    /* Text on paper */
    --ink-on-paper: #1A2438;         /* body text on paper, strong contrast */
    --ink-on-paper-muted: #4B5468;   /* muted text on paper, AA on paper */

    /* Hairlines */
    --rule-gold: rgba(228, 185, 91, 0.38);
    --rule-on-navy: rgba(242, 238, 228, 0.14);
    --rule-on-paper: rgba(26, 36, 56, 0.16);

    /* Type families */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-label: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    /* Fluid type scale (clamp: min, fluid, max) */
    --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
    --fs-label:   clamp(0.74rem, 0.70rem + 0.18vw, 0.84rem);
    --fs-small:   clamp(0.84rem, 0.81rem + 0.16vw, 0.92rem);
    --fs-body:    clamp(1.02rem, 0.98rem + 0.26vw, 1.16rem);
    --fs-body-lg: clamp(1.12rem, 1.04rem + 0.40vw, 1.34rem);
    --fs-h3:      clamp(1.22rem, 1.10rem + 0.62vw, 1.55rem);
    --fs-h2:      clamp(1.85rem, 1.45rem + 1.95vw, 3.0rem);
    --fs-h1:      clamp(2.4rem, 1.7rem + 3.4vw, 4.0rem);
    --fs-argline: clamp(1.16rem, 1.0rem + 0.85vw, 1.55rem);
    --fs-argline-em: clamp(1.32rem, 1.05rem + 1.35vw, 1.95rem);
    --fs-pull:    clamp(1.7rem, 1.15rem + 2.7vw, 3.1rem);

    /* Shadow for the physical book object */
    --shadow-book: 22px 22px 0 var(--navy-900);

    /* Layout */
    --section-pad: clamp(3.75rem, 2.5rem + 5vw, 7rem);
    /* Persistent-header height: logo 2.35rem + 0.85rem padding each
       side. Used by the hero to run its field up behind the header. */
    --header-h: 4.05rem;
}

/* ============================================================
   RESET (minimal, browser-neutral)
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem; /* clears the sticky header on anchor jumps */
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.68;
    color: var(--ink-on-navy);
    background-color: var(--navy-900);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
blockquote,
cite {
    overflow-wrap: break-word;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration-skip-ink: auto;
    color: var(--gold);
}

em {
    font-style: italic;
}

strong {
    font-weight: 600;
}

::selection {
    background: var(--gold);
    color: var(--navy-900);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
}

/* ============================================================
   STAR TEXTURE
   A faint scattered star field for navy sections. ~3-4% opacity.
   ============================================================ */

.star-texture {
    position: relative;
}

.star-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(244, 239, 230, 0.85) 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 78% 9%,  rgba(244, 239, 230, 0.85) 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 36% 62%, rgba(244, 239, 230, 0.85) 0 1.0px, transparent 1.5px),
        radial-gradient(circle at 91% 48%, rgba(244, 239, 230, 0.85) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at 58% 88%, rgba(244, 239, 230, 0.85) 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 22% 92%, rgba(244, 239, 230, 0.85) 0 1.0px, transparent 1.5px),
        radial-gradient(circle at 68% 34%, rgba(244, 239, 230, 0.85) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 6% 56%,  rgba(244, 239, 230, 0.85) 0 1.0px, transparent 1.5px);
    background-repeat: no-repeat;
    opacity: 0.05;
    z-index: 0;
}

/* keep content above the texture */
.star-texture > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   SHARED ELEMENTS: eyebrow, section heading
   ============================================================ */

.eyebrow,
.hero__eyebrow,
.buy-block__label,
.interview-card__show-label,
.site-footer__buy-label {
    font-family: var(--font-label);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    white-space: nowrap;
    min-height: 48px;
    transition: background-color 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.08s ease;
}

.btn:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

.btn:active {
    transform: translateY(1px);
}

.btn--lg {
    padding: 0.95rem 1.9rem;
    font-size: var(--fs-label);
}

.btn--sm {
    padding: 0.6rem 1.2rem;
    min-height: 44px;
    font-size: var(--fs-eyebrow);
}

/* Primary: solid red. Reserved for the buy action and the chapter submit. */
.btn--primary {
    background-color: var(--red);
    border-color: var(--red);
    color: #FFFFFF;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}

.btn--primary:hover {
    background-color: var(--red-hover);
    border-color: var(--red-hover);
}

/* Secondary: navy-outline. Used for the quieter Barnes & Noble action. */
.btn--secondary {
    background-color: transparent;
    border-color: var(--gold);
    color: var(--amber);
}

.btn--secondary:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--navy-900);
}

/* On paper bands the secondary button needs a darker treatment */
.book-section .btn--secondary {
    border-color: var(--navy-700);
    color: var(--navy-800);
}

.book-section .btn--secondary:hover {
    background-color: var(--navy-800);
    border-color: var(--navy-800);
    color: var(--white);
}

/* ============================================================
   RATING BADGE (social proof)
   Small editorial credential chip. Gold stars on a deep-navy
   pill with a gold hairline. Restrained: it must sit below the
   red buy CTA in the visual hierarchy, never compete with it.
   Shared base; per-context spacing set where it is placed.
   ============================================================ */

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem;
    background-color: rgba(6, 18, 42, 0.72);
    border: 1px solid var(--rule-gold);
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.rating-badge__stars {
    display: inline-flex;
    align-items: center;
    /* Gold glyphs; AA is not required for decorative star icons,
       but the figure is labelled in markup for assistive tech. */
    color: var(--gold);
}

.rating-badge__stars svg {
    display: block;
    width: 5.5rem;
    height: 1rem;
}

.rating-badge__score {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: 0.03em;
    /* amber on rgba(6,18,42,.72) over navy: ~9:1, passes AA */
    color: var(--amber);
}

/* Hairline divider between score and the review count. */
.rating-badge__score::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.85em;
    margin-left: 0.6rem;
    background: var(--rule-gold);
    vertical-align: -0.05em;
}

.rating-badge__count {
    font-family: var(--font-label);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.02em;
    /* ink-on-navy-muted on the badge fill over navy: ~6:1, passes AA */
    color: var(--ink-on-navy-muted);
}

/* Hero placement: the badge sits inside the credential row beneath
   the action cluster, so it never outranks the red buy CTA. */
.hero .rating-badge {
    flex: none;
}

/* Praise placement: above the section heading, left-aligned with
   it. Pull the heading close so badge and title read as one unit
   rather than two separated section-gap blocks. */
.praise .rating-badge {
    align-self: flex-start;
    margin-bottom: clamp(-2rem, -1.6rem - 1vw, -1.4rem);
}

/* Narrow screens: let the badge wrap its count below the stars
   so it never forces horizontal overflow. */
@media (max-width: 24rem) {
    .rating-badge {
        flex-wrap: wrap;
        white-space: normal;
        border-radius: 14px;
    }
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-120%);
    background: var(--red);
    color: #FFFFFF;
    font-family: var(--font-label);
    font-weight: 700;
    padding: 0.75rem 1.25rem;
    z-index: 200;
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ============================================================
   SITE HEADER
   Present from page load. The header carries NO background of its
   own over the hero: the hero's navy field runs unbroken up behind
   it, so the page opens as one composed unit with no seam. On scroll
   it solidifies into the navy bar (JS adds .site-header--solid).
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.site-header--solid {
    background-color: rgba(10, 26, 51, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--rule-gold);
    box-shadow: 0 6px 24px rgba(7, 17, 35, 0.45);
}

.site-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
    transition: padding-block 0.3s ease;
}

/* Tighten the bar height once it solidifies, so the solid state
   reads as a compact utility bar, not a thick block. */
.site-header--solid .site-header__inner {
    padding-block: 0.6rem;
}

/* The wordmark is the title lockup alone. Nothing is appended to it:
   the author name is not part of a logo and lives elsewhere on the page. */
.site-header__wordmark {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
}

.site-header__wordmark:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 4px;
}

.site-header__logo {
    height: 2.35rem;
    width: auto;
    /* Lift the wordmark off the hero field for legibility before scroll. */
    filter: drop-shadow(0 1px 4px rgba(7, 17, 35, 0.7));
    transition: filter 0.3s ease;
}

.site-header--solid .site-header__logo {
    filter: none;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 0.5rem + 1.4vw, 1.65rem);
}

/* Quiet email-capture link. Underlined gold, never a second button,
   so the buy action stays the single loudest target in the bar. */
.site-header__chapter-link {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: 0.03em;
    color: var(--amber);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.4rem 0.15rem;
    border-bottom: 1.5px solid var(--rule-gold);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.site-header__chapter-link:hover {
    color: var(--white);
    border-color: var(--amber);
}

.site-header__chapter-link:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

/* On the narrowest screens the free-chapter link is dropped from the
   bar (the hero shows it prominently); the buy button stays. */
@media (max-width: 24rem) {
    .site-header__chapter-link {
        display: none;
    }
}

/* ============================================================
   HERO (Section 1)
   One composed unit. The navy field starts at the very top of the
   viewport and runs unbroken up behind the persistent header, so
   the page opens "from the header down" with no seam. Negative top
   padding pulls the hero up under the sticky header; inner padding
   restores breathing room below the bar.
   Asymmetric 7/5 split: text column leads, cover anchors right.
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    /* Pull up under the sticky header (its height ~ 4rem) so the
       hero field is continuous with the header. */
    margin-top: calc(-1 * var(--header-h, 4rem));
    padding-top: calc(var(--header-h, 4rem) + clamp(2.25rem, 1.5rem + 3vw, 4.25rem));
    padding-bottom: clamp(3.25rem, 2.25rem + 4.5vw, 6rem);
    background:
        /* a single warm light source, upper-right, behind the cover */
        radial-gradient(ellipse 64% 58% at 82% 8%, rgba(228, 185, 91, 0.16) 0%, transparent 62%),
        radial-gradient(ellipse 78% 60% at 74% 22%, rgba(22, 49, 94, 0.9) 0%, transparent 72%),
        linear-gradient(176deg, var(--navy-800) 0%, var(--navy-900) 62%);
}

/* A single hairline rule along the foot of the hero gives the unit
   a deliberate close, instead of the field just stopping. */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--rule-gold) 22%,
        var(--rule-gold) 78%,
        transparent 100%
    );
    z-index: 2;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.75rem, 2rem + 4vw, 4rem);
    align-items: center;
}

@media (min-width: 60rem) {
    .hero__inner {
        grid-template-columns: 7fr 5fr;
        gap: clamp(2.5rem, 1rem + 4vw, 4.75rem);
        align-items: center;
    }
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* --- Eyebrow: two-part label, gold tick + meta line ------------- */
.hero__eyebrow {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--amber);
}

.hero__eyebrow-text {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.hero__eyebrow-text::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    background: var(--gold);
    display: inline-block;
}

.hero__eyebrow-meta {
    font-family: var(--font-label);
    font-weight: 500;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink-on-navy-muted);
    padding-left: 2.95rem;
}

/* --- Title: set in the display serif, the lockup art is reserved
       for the header wordmark only. Two lines, tight leading. ----- */
.hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h1);
    line-height: 0.96;
    letter-spacing: -0.018em;
    color: var(--white);
    text-wrap: balance;
}

.hero__title-line {
    display: block;
}

/* Second word picks up the gold to echo the title-lockup art
   without repeating it. */
.hero__title-line--2 {
    color: var(--amber);
    font-style: italic;
}

.hero__subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: var(--fs-body-lg);
    line-height: 1.34;
    color: var(--ink-on-navy);
    max-width: 26ch;
}

/* --- Blurb: one tight paragraph, the longer story lives in the
       About the Book section. ------------------------------------ */
.hero__blurb {
    max-width: 46ch;
}

.hero__blurb p {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-on-navy);
}

.hero__blurb em {
    color: var(--amber);
    font-style: italic;
}

/* --- Action cluster: the two conversion targets, pulled high ---- */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.65rem;
    margin-top: 0.3rem;
}

.hero__chapter-link {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: 0.03em;
    color: var(--amber);
    text-decoration: none;
    padding: 0.4rem 0.1rem;
    border-bottom: 1.5px solid var(--rule-gold);
    transition: border-color 0.18s ease, color 0.18s ease;
}

.hero__chapter-link:hover {
    color: var(--white);
    border-color: var(--amber);
}

.hero__chapter-link:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

/* --- Credentials: rating badge + scholar line, on a gold rule.
       Sits below the actions so it never outranks the buy CTA. --- */
.hero__credentials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.4rem;
    width: 100%;
    margin-top: 0.55rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--rule-on-navy);
}

.hero__scholars {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--ink-on-navy-muted);
    max-width: 34ch;
}

.hero__scholar {
    font-style: normal;
    color: var(--amber);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Book object: the product anchor. A framed plinth with a gold
       hairline, hard navy drop, slight tilt. Top-aligned to the
       headline on desktop so it is a deliberate object, not a
       floating image. ------------------------------------------- */
.hero__book {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.05rem;
}

.hero__book-plinth {
    position: relative;
    perspective: 1500px;
    /* Reserve layout space below the cover for the framed-object
       treatment: the hard navy drop falls ~20px below the image box
       and the -3deg tilt overhangs further. Without this padding the
       flex gap is measured from the un-rotated, shadow-less box and
       the caption renders inside the shadow. The glow ::before is
       anchored to this padded bottom so it still pools correctly. */
    padding-bottom: 2.5rem;
}

/* Soft pooled glow under the cover, anchoring it to the field.
   Sits just below the real cover edge (above the reserved padding),
   so it never reaches the caption. */
.hero__book-plinth::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1.55rem;
    width: 86%;
    height: 26%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(7, 17, 35, 0.75) 0%, transparent 72%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
}

.hero__cover-img {
    position: relative;
    z-index: 1;
    max-width: 360px;
    width: 100%;
    height: auto;
    border-radius: 3px;
    /* Gold hairline frame + hard navy drop: the cover reads as a
       physical, framed object. */
    border: 1px solid var(--rule-gold);
    box-shadow:
        18px 20px 0 var(--navy-900),
        0 14px 34px rgba(7, 17, 35, 0.55);
    transform: rotate(-2.5deg);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero__book-caption {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Brightened one step from -muted so the small uppercase caption
       clears WCAG AA on the navy field. */
    color: var(--ink-on-navy);
    text-align: center;
}

@media (min-width: 60rem) {
    .hero__book {
        align-self: stretch;
        justify-content: center;
    }
    .hero__cover-img {
        max-width: 390px;
        transform: rotate(-3deg);
    }
    .hero__cover-img:hover {
        transform: rotate(-1.25deg) translateY(-7px);
    }
}

/* ============================================================
   THE ARGUMENT (Section 2) - giant ghost numeral, gold lead-ins
   ============================================================ */

.argument {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-pad);
    background-color: var(--navy-900);
}

.argument__inner {
    position: relative;
    max-width: 820px;
    margin-inline: auto;
    z-index: 1;
}

/* Giant low-opacity background section number. */
.argument__inner::before {
    content: "II";
    position: absolute;
    top: -0.35em;
    right: -0.1em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(11rem, 8rem + 22vw, 24rem);
    line-height: 1;
    color: var(--navy-700);
    opacity: 0.42;
    pointer-events: none;
    z-index: -1;
}

.argument__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
    max-width: 18ch;
    margin-bottom: 2.75rem;
}

.argument__lines {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    margin-bottom: 3.5rem;
}

/* Short declarative lines with a gold lead-in tick. */
.argument__line {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--fs-argline);
    line-height: 1.42;
    color: var(--ink-on-navy);
    padding-left: 1.6rem;
}

.argument__line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.7rem;
    height: 2px;
    background: var(--gold);
}

.argument__line em {
    color: var(--amber);
    font-style: italic;
}

.argument__line--divider {
    margin-block: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--rule-on-navy);
}

.argument__line--divider::before {
    top: calc(1.5rem + 0.62em);
}

.argument__line--emphasis {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-argline-em);
    line-height: 1.28;
    color: var(--white);
}

.argument__line--emphasis::before {
    top: 0.5em;
    width: 1rem;
    height: 3px;
    background: var(--amber);
}

/* The single red pull-quote, fenced by a thin gold rule. */
.argument__pullquote {
    margin: 0;
    padding-top: 2.5rem;
    border-top: 2px solid var(--rule-gold);
    text-align: center;
}

.argument__pullquote-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-pull);
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--red);
    text-wrap: balance;
}

/* The red must stay AA on navy-900; lift it just enough at large sizes. */
.argument__pullquote-text {
    color: #E0584A;
}

.argument__pullquote-cite {
    display: block;
    margin-top: 1.4rem;
    font-family: var(--font-label);
    font-style: normal;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-on-navy-muted);
}

.argument__pullquote-cite em {
    color: var(--amber);
    font-style: italic;
}

/* ============================================================
   PLAIN ANSWERS (featured-snippet block)
   A navy-800 band between the Argument and the Book. Two short
   question-and-answer pairs, set editorial: a question in the
   display serif, a tight plain-language definition below it that
   Google can lift whole as a featured snippet. Distinguished from
   the praise cards by an indexed gold marker rather than a quote
   rule, and kept to two items so it never reads as an FAQ wall.
   ============================================================ */

.answers {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-pad);
    background-color: var(--navy-800);
    border-top: 1px solid var(--rule-on-navy);
}

/* Giant low-opacity ghost question mark, echoing the Argument's
   ghost numeral so the two navy sections share a visual family. */
.answers__inner {
    position: relative;
    z-index: 1;
}

.answers__inner::before {
    content: "?";
    position: absolute;
    top: -0.34em;
    right: -0.04em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(11rem, 8rem + 22vw, 23rem);
    line-height: 1;
    color: var(--navy-700);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.answers__eyebrow {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.85rem;
}

.answers__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
    max-width: 22ch;
    margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
}

.answers__title::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    background: var(--gold);
    margin-top: 1rem;
}

/* Two-up on desktop, stacked on mobile. A single column keeps each
   answer paragraph the obvious, self-contained block on small
   screens where snippet ranking matters most. */
.answers__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 52rem) {
    .answers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.answers__item {
    counter-increment: answers;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 3.25rem);
    background-color: var(--navy-900);
    border: 1px solid var(--rule-on-navy);
    border-top: 3px solid var(--gold);
    border-radius: 3px;
}

.answers__grid {
    counter-reset: answers;
}

/* Indexed gold marker: a small set-numeral that labels the pair
   without competing with the question heading. */
.answers__item::before {
    content: "Q" counter(answers);
    position: absolute;
    top: clamp(1rem, 0.7rem + 1vw, 1.4rem);
    left: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.18em;
    color: var(--gold);
}

.answers__q {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.22;
    letter-spacing: -0.005em;
    color: var(--white);
}

/* The liftable definition. Body serif, generous leading, full
   contrast: ink-on-navy on navy-900 passes WCAG AA. */
.answers__a {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.62;
    color: var(--ink-on-navy);
}

.answers__a em {
    font-style: italic;
    color: var(--amber);
}

/* ============================================================
   THE BOOK (Section 3) - paper band
   ============================================================ */

.book-section {
    padding-block: var(--section-pad);
    background-color: var(--paper);
    color: var(--ink-on-paper);
}

.book-section__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items: start;
}

@media (min-width: 56rem) {
    .book-section__inner {
        grid-template-columns: minmax(220px, 300px) 1fr;
    }
}

.book-section__cover {
    display: flex;
    justify-content: center;
}

@media (min-width: 56rem) {
    .book-section__cover {
        position: sticky;
        top: 5.5rem;
        justify-content: flex-start;
    }
}

.book-section__cover-img {
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 16px 16px 0 rgba(10, 26, 51, 0.16);
    transform: rotate(-2deg);
}

.book-section__content {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.book-section__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--navy-900);
    margin-bottom: 0;
}

.book-section__title::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    background: var(--gold);
    margin-top: 1rem;
}

.book-section__blurb {
    display: flex;
    flex-direction: column;
    gap: 1.85rem;
}

.book-section__blurb-block {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.book-section__blurb-block p {
    color: var(--ink-on-paper);
}

/* Lead paragraph (first block, no heading) reads larger. */
.book-section__blurb-block:first-child p {
    font-size: var(--fs-body-lg);
    line-height: 1.55;
}

.book-section__blurb-block em {
    font-style: italic;
    color: var(--navy-800);
}

.book-section__blurb-heading {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-on-paper-muted);
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule-on-paper);
}

/* ============================================================
   BUY BLOCK (reusable component)
   ============================================================ */

.buy-block {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    border-radius: 3px;
}

/* Inline buy block on the paper band. */
.book-section .buy-block {
    background-color: var(--navy-900);
    color: var(--ink-on-navy);
    border: 1px solid var(--navy-700);
}

/* Centered variant (thank-you page) on navy. */
.buy-block--centered {
    align-items: center;
    text-align: center;
    background-color: var(--navy-800);
    border: 1px solid var(--rule-gold);
    color: var(--ink-on-navy);
}

.buy-block__label {
    color: var(--amber);
}

.buy-block__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: stretch;
}

.buy-block--centered .buy-block__buttons {
    justify-content: center;
}

.buy-block__trust {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-on-navy-muted);
    margin: 0;
}

/* ============================================================
   PRAISE (Section 4) - asymmetric stacked quotes, not equal cards
   ============================================================ */

.praise {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-pad);
    background-color: var(--navy-800);
}

.praise__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.praise__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
    text-align: left;
    max-width: 20ch;
}

.praise__title::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    background: var(--gold);
    margin-top: 1rem;
}

/* Editorial stack: alternating offsets, not a tidy 2x2 of equal cards. */
.praise__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.praise__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 760px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
    padding-left: clamp(2.75rem, 2rem + 3vw, 4.5rem);
    background-color: var(--navy-900);
    border: 1px solid var(--rule-on-navy);
    border-left: 3px solid var(--gold);
    border-radius: 3px;
}

/* Stagger the cards left and right for editorial rhythm. */
@media (min-width: 56rem) {
    .praise__card:nth-child(even) {
        align-self: flex-end;
    }
    .praise__card:nth-child(odd) {
        align-self: flex-start;
    }
    .praise__card:nth-child(3) {
        margin-left: clamp(0rem, -4rem + 8vw, 4rem);
    }
    .praise__card:nth-child(2) {
        margin-right: clamp(0rem, -4rem + 8vw, 3rem);
    }
}

/* Large gold quotation mark. */
.praise__card::before {
    content: "\201C";
    position: absolute;
    top: clamp(0.1rem, -0.5rem + 2vw, 0.6rem);
    left: clamp(0.6rem, 0.2rem + 1.5vw, 1.4rem);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 3rem + 5vw, 6.5rem);
    line-height: 1;
    color: var(--gold);
    opacity: 0.55;
    pointer-events: none;
}

.praise__quote {
    flex: 1;
    margin: 0;
}

.praise__quote p {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-body-lg);
    font-style: italic;
    line-height: 1.45;
    color: var(--white);
}

.praise__quote em {
    font-style: normal;
    color: var(--amber);
}

.praise__attribution {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule-on-navy);
}

.praise__name {
    display: block;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
}

.praise__credential {
    display: block;
    font-family: var(--font-label);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-on-navy-muted);
}

.praise__credential em {
    font-style: italic;
    color: var(--ink-on-navy-muted);
}

/* ============================================================
   INTERVIEWS (Section 5) - 2x2 framed embeds, gold rules
   ============================================================ */

.interviews {
    padding-block: var(--section-pad);
    background-color: var(--navy-900);
}

.interviews__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.interviews__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
    text-align: center;
}

.interviews__intro {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink-on-navy-muted);
    text-align: center;
    max-width: 56ch;
    margin-inline: auto;
}

.interviews__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

@media (min-width: 48rem) {
    .interviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.interview-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: clamp(1.25rem, 1rem + 1.4vw, 1.85rem);
    background-color: var(--navy-800);
    border: 1px solid var(--rule-gold);
    border-radius: 3px;
}

.interview-card__show {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.15;
    color: var(--white);
}

/* Amber "show" eyebrow injected via ::before for editorial labelling. */
.interview-card__show::before {
    content: "Interview";
    display: block;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.5rem;
}

.interview-card__desc {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--ink-on-navy-muted);
    margin-bottom: 0.4rem;
}

.interview-card__embed {
    position: relative;
    width: 100%;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule-on-navy);
}

.interview-card__embed iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
}

/* YouTube click-to-load poster: 16:9 frame. */
.interview-card__embed--youtube {
    cursor: pointer;
    overflow: hidden;
}

.interview-card__embed--youtube .interview-card__yt-poster {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    filter: saturate(0.92) brightness(0.92);
    transition: filter 0.2s ease, transform 0.4s ease;
}

.interview-card__embed--youtube:hover .interview-card__yt-poster,
.interview-card__embed--youtube:focus-visible .interview-card__yt-poster {
    filter: saturate(1) brightness(1);
    transform: scale(1.02);
}

.interview-card__embed--youtube:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

.interview-card__embed--youtube iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.interview-card__yt-play {
    position: absolute;
    top: calc(50% + 0.42rem);
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.interview-card__embed--youtube:hover .interview-card__yt-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.yt-play-btn__bg {
    fill: var(--red);
    fill-opacity: 0.92;
}

.yt-play-btn__arrow {
    fill: #FFFFFF;
}

.interview-card__embed--youtube:hover .yt-play-btn__bg,
.interview-card__embed--youtube:focus-visible .yt-play-btn__bg {
    fill-opacity: 1;
}

/* ============================================================
   FREE FIRST CHAPTER / LEAD MAGNET (Section 6)
   Deepest navy, faint star texture, single-purpose form.
   ============================================================ */

.chapter-offer {
    position: relative;
    overflow: hidden;
    padding-block: var(--section-pad);
    background-color: #06122A; /* deepest navy, below navy-900 */
}

.chapter-offer__inner {
    position: relative;
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    z-index: 1;
}

.chapter-offer__inner::before {
    content: "Free Download";
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
}

.chapter-offer__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
}

.chapter-offer__title em {
    font-style: italic;
    color: var(--amber);
}

.chapter-offer__value {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--ink-on-navy);
    max-width: 48ch;
}

.chapter-offer__value em {
    font-style: italic;
    color: var(--amber);
}

.chapter-offer__form {
    width: 100%;
    max-width: 540px;
    margin-top: 0.5rem;
}

.chapter-offer__field-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.chapter-offer__label {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    color: var(--ink-on-navy);
    text-align: left;
}

.chapter-offer__input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.chapter-offer__input {
    flex: 1 1 240px;
    min-height: 52px;
    padding: 0.9rem 1.05rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--navy-900);
    background-color: var(--white);
    border: 2px solid transparent;
    border-radius: 2px;
}

.chapter-offer__input::placeholder {
    color: #7A8194;
}

.chapter-offer__input:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
    border-color: var(--gold);
}

.chapter-offer__submit {
    flex: 0 0 auto;
    min-height: 52px;
}

.chapter-offer__hint {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    color: var(--ink-on-navy-muted);
    text-align: left;
}

/* ============================================================
   ABOUT THE AUTHOR (Section 7) - paper band, framed portrait
   ============================================================ */

.author {
    padding-block: var(--section-pad);
    background-color: var(--paper);
    color: var(--ink-on-paper);
}

.author__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    align-items: start;
    max-width: 960px;
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .author__inner {
        grid-template-columns: minmax(200px, 260px) 1fr;
    }
}

.author__portrait {
    display: flex;
    justify-content: center;
}

@media (min-width: 48rem) {
    .author__portrait {
        justify-content: flex-start;
    }
}

/* Framed portrait: navy mat with a gold hairline. */
.author__img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 2px;
    padding: 8px;
    background-color: var(--navy-900);
    border: 1px solid var(--gold);
    box-shadow: 10px 10px 0 rgba(10, 26, 51, 0.14);
}

.author__bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.author__title {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-on-paper-muted);
}

.author__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--navy-900);
    margin-bottom: 0.35rem;
}

.author__name::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    background: var(--gold);
    margin-top: 0.9rem;
}

.author__bio p {
    color: var(--ink-on-paper);
}

.author__bio em {
    font-style: italic;
    color: var(--navy-800);
}

.author__site-link {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    color: var(--red);
    text-decoration: none;
    border-bottom: 2px solid rgba(192, 57, 43, 0.35);
    transition: border-color 0.18s ease, color 0.18s ease;
}

.author__site-link:hover {
    color: var(--red-hover);
    border-color: var(--red);
}

/* ============================================================
   SITE FOOTER (deepest navy)
   ============================================================ */

.site-footer {
    background-color: #06122A;
    border-top: 3px solid var(--gold);
    color: var(--ink-on-navy);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1.5rem + 3vw, 3rem);
    padding-block: clamp(2.75rem, 2rem + 3vw, 4rem);
}

@media (min-width: 56rem) {
    .site-footer__inner {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 2.5rem;
    }
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.site-footer__brand img {
    height: 3rem;
    width: auto;
}

.site-footer__tagline {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: italic;
    line-height: 1.55;
    color: var(--ink-on-navy-muted);
    max-width: 32ch;
}

.site-footer__buy {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.site-footer__buy-label {
    color: var(--amber);
}

.site-footer__buy-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
}

.site-footer__buy-links .btn {
    width: 100%;
    max-width: 280px;
}

.site-footer__link-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.site-footer__link-list a {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink-on-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.site-footer__link-list a:hover {
    color: var(--amber);
    border-color: var(--rule-gold);
}

.site-footer__donate-link {
    color: var(--ink-on-navy-muted) !important;
}

.site-footer__donate-link:hover {
    color: var(--gold) !important;
}

.site-footer__legal {
    border-top: 1px solid var(--rule-on-navy);
    padding-block: 1.35rem;
}

.site-footer__copyright {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    color: var(--ink-on-navy-muted);
}

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */

.thankyou-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse 65% 50% at 80% 20%, rgba(22, 49, 94, 0.8) 0%, transparent 70%),
        linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

.thankyou {
    width: 100%;
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}

.thankyou__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 2rem + 4vw, 4.5rem);
    align-items: start;
}

@media (min-width: 56rem) {
    .thankyou__inner {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }
}

.thankyou__content {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.thankyou__content::before {
    content: "You're In";
    font-family: var(--font-label);
    font-weight: 600;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
}

.thankyou__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--white);
}

.thankyou__lead {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--white);
}

.thankyou__lead em,
.thankyou__body em {
    font-style: italic;
    color: var(--amber);
}

.thankyou__body {
    font-size: var(--fs-body);
    color: var(--ink-on-navy-muted);
}

.thankyou__movement {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    color: var(--ink-on-navy-muted);
    margin-top: 0.5rem;
}

.thankyou__book-object {
    display: flex;
    justify-content: center;
}

.thankyou__cover-img {
    max-width: 270px;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: var(--shadow-book);
    transform: rotate(3deg);
}

/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

a:focus-visible {
    border-radius: 2px;
}

/* ============================================================
   MOTION
   One staggered hero load-in. Subtle heading scroll-reveals.
   ============================================================ */

/* Header settles in just before the hero content begins to rise. */
.site-header {
    opacity: 0;
    animation: header-settle 0.5s ease 0.05s forwards;
}

@keyframes header-settle {
    to { opacity: 1; }
}

/* Staggered hero load-in (80ms steps). */
.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__blurb,
.hero__actions,
.hero__credentials,
.hero__book {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero__eyebrow      { animation-delay: 0.06s; }
.hero__title        { animation-delay: 0.14s; }
.hero__subtitle     { animation-delay: 0.22s; }
.hero__blurb        { animation-delay: 0.30s; }
.hero__actions      { animation-delay: 0.38s; }
.hero__credentials  { animation-delay: 0.46s; }
/* The cover rises with the headline so the unit reads as one beat. */
.hero__book         { animation-delay: 0.18s; }

@keyframes hero-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll-reveal hook (JS adds .is-revealed). */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion: kill all entrance motion, keep everything visible. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
    .site-header,
    .hero__eyebrow,
    .hero__title,
    .hero__subtitle,
    .hero__blurb,
    .hero__actions,
    .hero__credentials,
    .hero__book,
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    body {
        background: #fff;
        color: #000;
    }
    .site-header,
    .chapter-offer,
    .interviews,
    .hero__actions,
    .buy-block {
        display: none;
    }
    .star-texture::before,
    .argument__inner::before {
        display: none;
    }
}