/**
 * PCW AI Auto Post — Premium Article Stylesheet
 * --------------------------------------------------------------------------
 * Modeled on the Medium article aesthetic, evolved with a sleek, modern,
 * ultra-futuristic edge: a restrained, hyper-readable typographic base
 * (the Medium hallmark) layered with a refined gradient accent system, a
 * reading-progress beam, glassy meta surfaces, and tasteful motion.
 *
 * Scope: this sheet ONLY affects content inside .pcw-aap-article, and only
 * when the body carries .pcw-aap-styled (i.e. a single, generated post with
 * styling enabled). It deliberately does not touch the rest of the site, and
 * the theme's header/footer/sidebar are left untouched.
 *
 * Everything degrades gracefully: prefers-color-scheme is honored,
 * prefers-reduced-motion disables animation, and every rule is defensive
 * against the host theme (scoped resets win the cascade inside the wrapper).
 * --------------------------------------------------------------------------
 */

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
body.pcw-aap-styled {
    --pcw-grad: linear-gradient(120deg, #6366f1 0%, #8b5cf6 32%, #d946ef 66%, #06b6d4 100%);
    --pcw-grad-soft: linear-gradient(120deg, rgba(99, 102, 241, 0.10), rgba(217, 70, 239, 0.10) 50%, rgba(6, 182, 212, 0.10));
    --pcw-accent: #6d5efc;
    --pcw-accent-2: #d946ef;
    --pcw-accent-3: #06b6d4;

    --pcw-ink: #1a1a1f;
    --pcw-ink-soft: #56565f;
    --pcw-ink-faint: #8a8a94;
    --pcw-bg: #ffffff;
    --pcw-surface: #faf9f6;
    --pcw-surface-2: #f3f2ee;
    --pcw-line: #e7e6e0;
    --pcw-line-strong: #d6d4cc;

    --pcw-shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.04), 0 2px 8px rgba(20, 20, 40, 0.04);
    --pcw-shadow-md: 0 6px 24px rgba(20, 20, 40, 0.08), 0 2px 6px rgba(20, 20, 40, 0.05);
    --pcw-shadow-glow: 0 18px 60px rgba(109, 94, 252, 0.14);

    --pcw-serif: "Charter", "Iowan Old Style", "Apple Garamond", "Baskerville", "Source Serif Pro", "Georgia", "Times New Roman", serif;
    --pcw-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pcw-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --pcw-col: 720px;
    --pcw-col-wide: 1080px;
    --pcw-radius: 14px;
    --pcw-radius-sm: 9px;

    --pcw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark theme — automatically engaged by the OS preference. */
@media (prefers-color-scheme: dark) {
    body.pcw-aap-styled {
        --pcw-ink: #e9e9ee;
        --pcw-ink-soft: #a9a9b4;
        --pcw-ink-faint: #76767f;
        --pcw-bg: #0d0e12;
        --pcw-surface: #15161c;
        --pcw-surface-2: #1c1d25;
        --pcw-line: #2a2c36;
        --pcw-line-strong: #383b47;

        --pcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35);
        --pcw-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
        --pcw-shadow-glow: 0 18px 60px rgba(109, 94, 252, 0.28);
    }
}

/* ============================================================
   1. READING-PROGRESS BEAM
   ============================================================ */
/* A thin gradient beam pinned to the top of the viewport whose width tracks
   scroll progress through the article. Injected/updated by the companion JS. */
.pcw-aap-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}
.pcw-aap-progress::after {
    content: "";
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--pcw-grad);
    box-shadow: 0 0 14px rgba(109, 94, 252, 0.55);
    transition: inset 0.08s linear;
}

/* ============================================================
   2. ARTICLE WRAPPER + COLUMN
   ============================================================ */
.pcw-aap-article {
    font-family: var(--pcw-serif);
    color: var(--pcw-ink);
    background: var(--pcw-bg);
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
    line-height: 1.72;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    word-wrap: break-word;
    position: relative;
}

/* Soft ambient aurora behind the masthead — ultra-futuristic, very subtle. */
.pcw-aap-article::before {
    content: "";
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 130%);
    height: 420px;
    background:
        radial-gradient(60% 60% at 30% 50%, rgba(99, 102, 241, 0.10), transparent 70%),
        radial-gradient(55% 55% at 70% 50%, rgba(217, 70, 239, 0.08), transparent 70%),
        radial-gradient(50% 50% at 50% 40%, rgba(6, 182, 212, 0.07), transparent 70%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    .pcw-aap-article::before {
        background:
            radial-gradient(60% 60% at 30% 50%, rgba(99, 102, 241, 0.16), transparent 70%),
            radial-gradient(55% 55% at 70% 50%, rgba(217, 70, 239, 0.13), transparent 70%),
            radial-gradient(50% 50% at 50% 40%, rgba(6, 182, 212, 0.12), transparent 70%);
    }
}

.pcw-aap-article > * {
    position: relative;
    z-index: 1;
}

/* Reading column applied to the flow content. */
.pcw-aap-article .pcw-aap-flow {
    max-width: var(--pcw-col);
    margin-inline: auto;
    padding-inline: 22px;
}

/* ============================================================
   3. MASTHEAD: EYEBROW + TITLE + LEAD
   ============================================================ */
.pcw-aap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--pcw-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pcw-aap-eyebrow::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--pcw-grad);
    border-radius: 2px;
}

/* If the article already contains an <h1>, restyle it; otherwise the title
   is rendered by the theme outside the wrapper and this targets in-body h1. */
.pcw-aap-article h1 {
    font-family: var(--pcw-sans);
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.08;
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
    color: var(--pcw-ink);
    margin: 0 0 1.2rem;
    max-width: 18ch;
}

/* Gradient accent available as an opt-in class on the title. */
.pcw-aap-title-grad {
    background: linear-gradient(120deg, var(--pcw-ink) 30%, var(--pcw-accent) 55%, var(--pcw-accent-2) 80%, var(--pcw-accent-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The plugin-styled MAIN title (rendered inside the wrapper when the 'title'
   feature is on). It overrides the generic .pcw-aap-article h1 { max-width:
   18ch } above, which would awkwardly wrap a real article title; the main
   title uses the full reading-column measure. */
.pcw-aap-article .pcw-aap-title-main {
    margin: 0.2rem 0 1.4rem;
    max-width: 22ch;
    text-wrap: balance;
}

/* NOTE: section 3b "HERO BANNER" was removed in v1.4.0. Generated posts now
   carry a real AI-generated featured image (a WordPress media attachment),
   rendered natively by the host theme above the article — no plugin-side
   hero CSS/HTML is needed. */

/* ============================================================
   4. AUTHOR CARD (modern masthead byline)
   ============================================================
   A padded, rounded card carrying the author avatar (with a gradient ring),
   the display name, an optional role/bio line, and a meta row (date · read
   time). Replaces the old flat border-only byline that had no padding and
   looked tacky. Soft surface fill + subtle shadow + a gentle hover lift. */
.pcw-aap-article .pcw-aap-authorcard {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.6rem 0 2.6rem;
    padding: 1.05rem 1.25rem;
    border-radius: var(--pcw-radius);
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-line);
    box-shadow: var(--pcw-shadow-sm);
    transition: transform 0.25s var(--pcw-ease), box-shadow 0.25s var(--pcw-ease), border-color 0.25s var(--pcw-ease);
    position: relative;
    overflow: hidden;
}
/* A whisper of gradient wash along the card's leading edge for depth. */
.pcw-aap-article .pcw-aap-authorcard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pcw-grad);
    opacity: 0.85;
}
.pcw-aap-article .pcw-aap-authorcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--pcw-shadow-md);
    border-color: var(--pcw-line-strong);
}

/* Avatar bubble with a gradient ring. */
.pcw-aap-article .pcw-aap-authorcard-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: var(--pcw-bg);
    box-shadow: 0 0 0 2px var(--pcw-bg), 0 0 0 4px var(--pcw-grad), var(--pcw-shadow-sm);
}
.pcw-aap-article .pcw-aap-authorcard-avatar::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--pcw-grad);
    opacity: 0.12;
}
.pcw-aap-article .pcw-aap-authorcard-initials {
    position: relative;
    z-index: 1;
    font-family: var(--pcw-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--pcw-accent);
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

/* Author card body: name + optional role/bio + meta row. */
.pcw-aap-article .pcw-aap-authorcard-body {
    min-width: 0; /* lets long names truncate rather than blow out the card */
    flex: 1 1 auto;
}
.pcw-aap-article .pcw-aap-authorcard-name {
    font-family: var(--pcw-sans);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    color: var(--pcw-ink);
    line-height: 1.25;
}
.pcw-aap-article .pcw-aap-authorcard-role {
    font-family: var(--pcw-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--pcw-ink-soft);
    margin-top: 0.18rem;
    /* Clamp to two lines so a long bio never stretches the card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcw-aap-article .pcw-aap-authorcard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--pcw-sans);
    font-size: 0.8rem;
    color: var(--pcw-ink-faint);
    margin-top: 0.5rem;
}
.pcw-aap-article .pcw-aap-authorcard-metaitem {
    display: inline-flex;
    align-items: center;
}
.pcw-aap-article .pcw-aap-authorcard-meta time { color: var(--pcw-ink-soft); }

/* The read-time slot is filled by the runtime JS (pcw-aap-read hook). */
.pcw-aap-article .pcw-aap-authorcard-meta .pcw-aap-read-time::before {
    content: "⌛";
    margin-right: 0.35rem;
    font-size: 0.85em;
    opacity: 0.8;
}
/* Small dot separators between meta items. */
.pcw-aap-article .pcw-aap-authorcard-meta .pcw-aap-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--pcw-ink-faint);
    display: inline-block;
    opacity: 0.7;
}

/* Legacy byline hooks are retained for any cached markup, restyled to match
   the card aesthetic so an older post still looks intentional. */
.pcw-aap-article .pcw-aap-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
    font-family: var(--pcw-sans);
    font-size: 0.86rem;
    color: var(--pcw-ink-soft);
    margin: 1.6rem 0 2.6rem;
    padding: 0.95rem 1.15rem;
    border-radius: var(--pcw-radius-sm);
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-line);
    box-shadow: var(--pcw-shadow-sm);
}
.pcw-aap-byline .pcw-aap-author {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--pcw-ink);
}
.pcw-aap-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: var(--pcw-grad);
    box-shadow: var(--pcw-shadow-sm);
    flex: none;
    user-select: none;
}
.pcw-aap-byline .pcw-aap-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--pcw-ink-faint);
    display: inline-block;
}
.pcw-aap-byline time { color: var(--pcw-ink-soft); }
.pcw-aap-byline .pcw-aap-read {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pcw-ink-faint);
    font-size: 0.8rem;
}

/* ============================================================
   5. BODY PROSE
   ============================================================ */
.pcw-aap-article .pcw-aap-flow > p,
.pcw-aap-article .pcw-aap-flow > .pcw-aap-section p {
    margin: 0 0 1.45rem;
}

/* Lead paragraph — slightly larger, with a delicate gradient highlight on the
   first line, the signature Medium "kickoff" beat. */
.pcw-aap-article .pcw-aap-flow > p:first-of-type,
.pcw-aap-article .pcw-aap-lead {
    font-size: 1.18em;
    line-height: 1.68;
    color: var(--pcw-ink);
    margin-bottom: 1.8rem;
}

/* Drop cap on the opening paragraph. */
.pcw-aap-article .pcw-aap-flow > p:first-of-type::first-letter,
.pcw-aap-article.has-dropcap .pcw-aap-lead::first-letter {
    float: left;
    font-family: var(--pcw-serif);
    font-weight: 700;
    font-size: 3.5em;
    line-height: 0.78;
    padding: 0.04em 0.12em 0 0;
    margin-right: 0.04em;
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   6. HEADINGS (H2 / H3 / H4)
   ============================================================ */
.pcw-aap-article h2 {
    font-family: var(--pcw-sans);
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.15rem);
    color: var(--pcw-ink);
    margin: 3rem 0 1rem;
    padding-top: 0.4rem;
    position: relative;
    scroll-margin-top: 2rem;
}

/* Futuristic heading flourish: a short gradient tick above each H2. */
.pcw-aap-article h2::before {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: var(--pcw-grad);
    margin-bottom: 0.85rem;
    box-shadow: 0 0 12px rgba(109, 94, 252, 0.35);
}

.pcw-aap-article h3 {
    font-family: var(--pcw-sans);
    font-weight: 700;
    letter-spacing: -0.014em;
    line-height: 1.3;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
    color: var(--pcw-ink);
    margin: 2.2rem 0 0.8rem;
    scroll-margin-top: 2rem;
}

.pcw-aap-article h4 {
    font-family: var(--pcw-sans);
    font-weight: 700;
    letter-spacing: 0;
    font-size: 1.08rem;
    color: var(--pcw-ink);
    margin: 1.8rem 0 0.6rem;
}

/* ============================================================
   7. LINKS — animated gradient underline
   ============================================================ */
.pcw-aap-article a {
    color: var(--pcw-accent);
    text-decoration: none;
    font-weight: 500;
    background-image: linear-gradient(var(--pcw-accent), var(--pcw-accent));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.28s var(--pcw-ease), color 0.2s var(--pcw-ease);
    padding-bottom: 1px;
}
.pcw-aap-article a:hover,
.pcw-aap-article a:focus-visible {
    color: var(--pcw-accent-2);
    background-image: linear-gradient(var(--pcw-accent-2), var(--pcw-accent-2));
    background-size: 100% 1.5px;
    outline: none;
}

/* ============================================================
   8. LISTS
   ============================================================ */
.pcw-aap-article ul,
.pcw-aap-article ol {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
}
.pcw-aap-article li { margin: 0 0 0.55rem; }
.pcw-aap-article li::marker { color: var(--pcw-accent); }

.pcw-aap-article ul { list-style: none; padding-left: 0; }
.pcw-aap-article ul > li {
    position: relative;
    padding-left: 1.7rem;
}
.pcw-aap-article ul > li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pcw-grad);
    box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.10);
}
.pcw-aap-article ol { list-style: none; counter-reset: pcw-li; padding-left: 0; }
.pcw-aap-article ol > li {
    counter-increment: pcw-li;
    position: relative;
    padding-left: 2.5rem;
    min-height: 1.6rem;
}
.pcw-aap-article ol > li::before {
    content: counter(pcw-li);
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    font-family: var(--pcw-sans);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    background: var(--pcw-grad);
    box-shadow: var(--pcw-shadow-sm);
}

/* ============================================================
   9. BLOCKQUOTES + PULL QUOTES
   ============================================================ */
.pcw-aap-article blockquote {
    margin: 2.4rem 0;
    padding: 0.4rem 0 0.4rem 1.8rem;
    border-left: 0;
    font-family: var(--pcw-serif);
    font-style: italic;
    font-size: 1.28rem;
    line-height: 1.5;
    color: var(--pcw-ink);
    position: relative;
}
.pcw-aap-article blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 4px;
    border-radius: 4px;
    background: var(--pcw-grad);
    box-shadow: 0 0 16px rgba(109, 94, 252, 0.35);
}
.pcw-aap-article blockquote p { margin: 0 0 0.6rem; }
.pcw-aap-article blockquote p:last-child { margin-bottom: 0; }
.pcw-aap-article blockquote cite {
    display: block;
    margin-top: 0.8rem;
    font-family: var(--pcw-sans);
    font-style: normal;
    font-size: 0.85rem;
    color: var(--pcw-ink-faint);
    letter-spacing: 0.01em;
}
.pcw-aap-article blockquote cite::before { content: "— "; }

/* Opt-in full-bleed pull quote. */
.pcw-aap-pullquote {
    max-width: var(--pcw-col-wide);
    margin: 2.8rem auto;
    padding: 0 22px;
    text-align: center;
    font-family: var(--pcw-serif);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.pcw-aap-pullquote span {
    background: linear-gradient(120deg, var(--pcw-accent), var(--pcw-accent-2) 55%, var(--pcw-accent-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   10. CODE — glassy, futuristic
   ============================================================ */
.pcw-aap-article code {
    font-family: var(--pcw-mono);
    font-size: 0.86em;
    background: var(--pcw-surface-2);
    color: var(--pcw-accent);
    padding: 0.15em 0.42em;
    border-radius: 6px;
    border: 1px solid var(--pcw-line);
}
.pcw-aap-article pre {
    margin: 1.8rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: var(--pcw-radius-sm);
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-line);
    box-shadow: var(--pcw-shadow-sm);
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.6;
}
.pcw-aap-article pre code {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pcw-ink);
    font-size: inherit;
}

/* ============================================================
   11. FIGURES / IMAGES / MEDIA
   ============================================================ */
.pcw-aap-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pcw-radius-sm);
}
.pcw-aap-article figure {
    margin: 2.2rem 0;
    text-align: center;
}
.pcw-aap-article figure img {
    width: 100%;
    box-shadow: var(--pcw-shadow-md);
    transition: transform 0.4s var(--pcw-ease), box-shadow 0.4s var(--pcw-ease);
}
.pcw-aap-article figure img:hover { transform: translateY(-3px) scale(1.006); }
.pcw-aap-article figcaption,
.pcw-aap-article .pcw-aap-caption {
    margin: 0.8rem auto 0;
    max-width: var(--pcw-col);
    font-family: var(--pcw-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--pcw-ink-faint);
    text-align: center;
}
.pcw-aap-article figcaption::before,
.pcw-aap-article .pcw-aap-caption::before {
    content: "▲ ";
    color: var(--pcw-accent);
    opacity: 0.7;
}

/* ============================================================
   12. TABLES
   ============================================================ */
.pcw-aap-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-family: var(--pcw-sans);
    font-size: 0.92rem;
    border-radius: var(--pcw-radius-sm);
    overflow: hidden;
    box-shadow: var(--pcw-shadow-sm);
    border: 1px solid var(--pcw-line);
}
.pcw-aap-article th,
.pcw-aap-article td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--pcw-line);
    vertical-align: top;
}
.pcw-aap-article thead th {
    background: var(--pcw-surface);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pcw-ink);
    border-bottom: 2px solid var(--pcw-line-strong);
}
.pcw-aap-article tbody tr:last-child td { border-bottom: 0; }
.pcw-aap-article tbody tr { transition: background 0.18s var(--pcw-ease); }
.pcw-aap-article tbody tr:hover { background: var(--pcw-grad-soft); }

/* ============================================================
   13. DIVIDERS + EMPHASIS
   ============================================================ */
.pcw-aap-article hr {
    border: 0;
    height: 2px;
    margin: 3rem auto;
    width: 60%;
    max-width: 260px;
    border-radius: 2px;
    background: var(--pcw-grad);
    opacity: 0.8;
}
.pcw-aap-article strong { font-weight: 700; color: var(--pcw-ink); }
.pcw-aap-article em { font-style: italic; }

/* Subtle highlight marker for inline emphasis (use <mark>). */
.pcw-aap-article mark {
    background: var(--pcw-grad-soft);
    color: var(--pcw-ink);
    padding: 0.05em 0.3em;
    border-radius: 4px;
}

/* Key Insight callout box — opt-in via .pcw-aap-callout. */
.pcw-aap-callout {
    margin: 2rem 0;
    padding: 1.3rem 1.5rem;
    border-radius: var(--pcw-radius-sm);
    border: 1px solid var(--pcw-line);
    border-left: 4px solid var(--pcw-accent);
    background: var(--pcw-surface);
    box-shadow: var(--pcw-shadow-sm);
    font-family: var(--pcw-sans);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--pcw-ink-soft);
}
.pcw-aap-callout strong { color: var(--pcw-ink); }
.pcw-aap-callout::before {
    content: "Key Insight";
    display: block;
    font-family: var(--pcw-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

/* ============================================================
   14. ARTICLE FOOTER / END MARK
   ============================================================ */
.pcw-aap-endmark {
    text-align: center;
    margin: 3.5rem 0 1rem;
    line-height: 1;
}
.pcw-aap-endmark::before {
    content: "◆ ◆ ◆";
    letter-spacing: 0.6em;
    font-size: 0.8rem;
    color: var(--pcw-ink-faint);
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pcw-aap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.6rem 0 0.5rem;
    padding: 0;
    list-style: none;
}
.pcw-aap-tags li,
.pcw-aap-tag {
    font-family: var(--pcw-sans);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pcw-ink-soft);
    padding: 0.35em 0.85em;
    border-radius: 999px;
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-line);
    transition: transform 0.2s var(--pcw-ease), box-shadow 0.2s var(--pcw-ease), color 0.2s var(--pcw-ease);
}
.pcw-aap-tags li:hover,
.pcw-aap-tag:hover {
    color: var(--pcw-accent);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--pcw-shadow-sm);
}

/* ============================================================
   15. ENTRANCE MOTION (staggered fade-up; observer-driven)
   ============================================================ */
.pcw-aap-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--pcw-ease), transform 0.6s var(--pcw-ease);
    will-change: opacity, transform;
}
.pcw-aap-reveal.pcw-aap-in {
    opacity: 1;
    transform: none;
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .pcw-aap-article { font-size: 1.06rem; line-height: 1.7; }
    .pcw-aap-article h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.3rem); }
    .pcw-aap-article .pcw-aap-byline { font-size: 0.8rem; gap: 0.5rem 0.7rem; }
    .pcw-aap-article .pcw-aap-byline .pcw-aap-read { margin-left: 0; flex-basis: 100%; }
    .pcw-aap-article blockquote { font-size: 1.12rem; }
    .pcw-aap-article .pcw-aap-flow > p:first-of-type::first-letter { font-size: 3em; }
    /* Compact the author card on narrow screens. */
    .pcw-aap-article .pcw-aap-authorcard { gap: 0.8rem; padding: 0.85rem 0.95rem; }
    .pcw-aap-article .pcw-aap-authorcard-avatar { width: 44px; height: 44px; }
    .pcw-aap-article .pcw-aap-authorcard-initials { font-size: 0.9rem; }
    .pcw-aap-article .pcw-aap-authorcard-name { font-size: 0.95rem; }
    .pcw-aap-article .pcw-aap-authorcard-role { font-size: 0.8rem; }
    .pcw-aap-article .pcw-aap-authorcard-meta { font-size: 0.76rem; gap: 0.35rem; }
}

/* ============================================================
   17. ACCESSIBILITY — honor reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pcw-aap-article *,
    .pcw-aap-progress::after,
    .pcw-aap-reveal {
        animation: none !important;
        transition: none !important;
    }
    .pcw-aap-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   18. CINEMATIC HERO — full-bleed zoom+pan gallery carousel (3.0.0)
   ============================================================
   The same visual language as the home page's hero (alternating zoom+pan
   slides, a slow crossfade, the dots), rendered inside the article. The
   width contract mirrors the chrome's own full-bleed rail —
   ``min(100vw,1500px)`` centred with ``calc(50% - min(50vw,750px))`` — so
   the band breaks out of the theme's content column WITHOUT the horizontal
   overflow a bare ``100vw`` causes on a page with a visible scrollbar. */
.pcw-aap-hero {
    position: relative;
    overflow: hidden;
    width: min(100vw, 1500px);
    margin-left: calc(50% - min(50vw, 750px));
    margin-bottom: clamp(1.4rem, 3vw, 2.6rem);
    aspect-ratio: 21 / 9;
    min-height: 280px;
    max-height: 560px;
    border-radius: 0;
    background: var(--pcw-surface);
    box-shadow: var(--pcw-shadow-md);
}
.pcw-aap-hero-carousel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pcw-aap-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.03) translate3d(0, 0, 0);
    transition: opacity 1.5s var(--pcw-ease), transform 9.5s ease-out;
}
.pcw-aap-hero-slide.is-on { opacity: 1; animation: pcwAapKen 9.5s ease-out both; }
.pcw-aap-hero-slide.is-on.pan-b { animation-name: pcwAapKenB; }
/* The LEAVING slide holds the zoom it reached instead of snapping back —
   the defect the home hero's own rule was written for (a slide that visibly
   recedes under the visitor while it crossfades). */
.pcw-aap-hero-slide.is-out { opacity: 0; transform: scale(1.16) translate3d(0, -1.6%, 0); }
.pcw-aap-hero-slide.is-out.pan-b { transform: scale(1.03) translate3d(0, 0, 0); }
@keyframes pcwAapKen {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(0, -1.6%, 0); }
}
@keyframes pcwAapKenB {
    from { transform: scale(1.16) translate3d(-1.4%, 1.2%, 0); }
    to   { transform: scale(1.03) translate3d(0, 0, 0); }
}
/* Scrim so the dots and credit stay legible over any photograph. */
.pcw-aap-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 10, 14, 0) 55%, rgba(3, 10, 14, 0.55) 100%);
}
.pcw-aap-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.pcw-aap-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.25s var(--pcw-ease), background 0.25s var(--pcw-ease);
}
.pcw-aap-hero-dot.is-on { background: #fff; transform: scale(1.25); }
.pcw-aap-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pcw-aap-hero-credit {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    font-family: var(--pcw-sans);
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   19. RICH BANDS — the fact-rich furniture of a curated post
   ============================================================ */

/* Facts panel: a grid of short, surprising, self-contained items. */
.pcw-aap-facts {
    margin: 2.4rem 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.pcw-aap-fact {
    position: relative;
    padding: 1.1rem 1.2rem 1.1rem 1.35rem;
    border-radius: var(--pcw-radius-sm);
    background: var(--pcw-surface);
    border: 1px solid var(--pcw-line);
    box-shadow: var(--pcw-shadow-sm);
}
.pcw-aap-fact::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 3px;
    border-radius: 3px;
    background: var(--pcw-grad);
}
.pcw-aap-fact strong {
    display: block;
    font-family: var(--pcw-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pcw-accent);
    margin-bottom: 0.35rem;
}
.pcw-aap-fact p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--pcw-ink-soft); }

/* Stat chips: one number, one label. */
.pcw-aap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.8rem 0;
    padding: 0;
    list-style: none;
}
.pcw-aap-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    background: var(--pcw-surface-2);
    border: 1px solid var(--pcw-line);
}
.pcw-aap-stat b {
    font-family: var(--pcw-sans);
    font-size: 1.05rem;
    background: var(--pcw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pcw-aap-stat span { font-family: var(--pcw-sans); font-size: 0.78rem; color: var(--pcw-ink-soft); }

/* Timeline: a dated column of moments. */
.pcw-aap-timeline { margin: 2.4rem 0; padding: 0 0 0 1.1rem; list-style: none; border-left: 2px solid var(--pcw-line-strong); }
.pcw-aap-timeline li { position: relative; padding: 0 0 1.3rem 1rem; }
.pcw-aap-timeline li:last-child { padding-bottom: 0; }
.pcw-aap-timeline li::before {
    content: "";
    position: absolute;
    left: -1.45rem;
    top: 0.4rem;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--pcw-grad);
    box-shadow: 0 0 0 3px var(--pcw-bg);
}
.pcw-aap-timeline b {
    display: block;
    font-family: var(--pcw-sans);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pcw-accent);
    margin-bottom: 0.15rem;
}
.pcw-aap-timeline p { margin: 0; font-size: 0.96rem; color: var(--pcw-ink-soft); }

/* Species profile: a named subject and its vital statistics. */
.pcw-aap-species {
    margin: 2.4rem 0;
    padding: 1.3rem 1.4rem;
    border-radius: var(--pcw-radius-sm);
    border: 1px solid var(--pcw-line);
    background: linear-gradient(180deg, var(--pcw-surface), var(--pcw-surface-2));
    box-shadow: var(--pcw-shadow-sm);
}
.pcw-aap-species h3 {
    margin: 0 0 0.2rem;
    font-family: var(--pcw-serif);
    font-size: 1.25rem;
}
.pcw-aap-species em { display: block; font-size: 0.85rem; color: var(--pcw-ink-faint); margin-bottom: 0.8rem; }
.pcw-aap-species dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.pcw-aap-species dt {
    font-family: var(--pcw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pcw-accent);
    padding-top: 0.15rem;
}
.pcw-aap-species dd { margin: 0; font-size: 0.94rem; color: var(--pcw-ink-soft); }

/* Field note: a first-person aside from the author's own experience. */
.pcw-aap-fieldnote {
    margin: 2.2rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: var(--pcw-radius-sm);
    background: var(--pcw-grad-soft);
    border: 1px solid var(--pcw-line);
    border-left: 4px solid var(--pcw-accent-2);
}
.pcw-aap-fieldnote::before {
    content: "Field note";
    display: block;
    font-family: var(--pcw-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pcw-accent-2);
    margin-bottom: 0.4rem;
}
.pcw-aap-fieldnote p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--pcw-ink); }

/* Sources & further reading. */
.pcw-aap-sources { margin: 2.6rem 0 0.5rem; padding: 1.2rem 1.4rem; border-radius: var(--pcw-radius-sm); border: 1px solid var(--pcw-line); background: var(--pcw-surface); }
.pcw-aap-sources h3 { margin: 0 0 0.6rem; font-family: var(--pcw-sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pcw-ink-faint); }
.pcw-aap-sources ol { margin: 0; padding-left: 1.2rem; }
.pcw-aap-sources li { font-size: 0.86rem; line-height: 1.55; color: var(--pcw-ink-soft); margin-bottom: 0.3rem; }
.pcw-aap-sources a { color: var(--pcw-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Wide figure + attribution. */
.pcw-aap-figure-wide { margin: 2.6rem 0; }
.pcw-aap-figure-wide img { width: 100%; border-radius: var(--pcw-radius-sm); box-shadow: var(--pcw-shadow-md); }
.pcw-aap-media-attr { font-family: var(--pcw-sans); font-size: 0.72rem; color: var(--pcw-ink-faint); margin-top: 0.4rem; }

/* The a11y text-only mode hides every photograph (the chrome's own contract). */
html[data-pcw-a11y-textonly="1"] .pcw-aap-hero,
html[data-pcw-a11y-textonly="1"] .pcw-aap-figure-wide { display: none !important; }

@media (max-width: 640px) {
    .pcw-aap-hero { aspect-ratio: 4 / 3; max-height: 420px; }
    .pcw-aap-facts { grid-template-columns: 1fr; }
    .pcw-aap-species dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .pcw-aap-species dt { padding-top: 0.5rem; }
}