/* ==========================================================================
   ABOUT US — page-specific styles
   Built on the shared design-system.css components + tokens.
   No local --pm-* redefinition, no raw hex, theme-aware, mobile-first.
   ========================================================================== */

/* ==========================================================================
   AUTHOR CARD (#author)
   This page is the destination of Person.url in every Article JSON-LD, so the
   identity block has to read as an author page, not as a decorative intro.
   Portrait left, identity right on desktop; stacked and centered on mobile.
   ========================================================================== */
.pm-author-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(20px, 4vw, 40px);
    margin-bottom: var(--pm-space-8);
    text-align: center;
}
.pm-author-page__photo {
    flex: 0 0 auto;
    margin: 0 auto;
}
/* Mobile first, and independent of any token for its SHAPE.
   The owner reported this portrait rendering large and square on an iPhone.
   Three separate components on this page all specify a small circle, so the
   cause is a runtime one I cannot see without a browser — but one failure mode
   is removable here and now: the circle used to depend on var(--pm-r-full),
   which is defined in design-system.css. If design-system.css does not reach
   this element for any reason, border-radius becomes invalid and the portrait
   falls back to a raw square at its intrinsic size, which is exactly what the
   screenshot shows. A literal 50% cannot fail that way, and the width is
   clamped so the image can never exceed its box even with no other rule.
   The tokens are kept as progressive enhancement on colour only, where losing
   them costs a border, not the layout. */
.pm-author-page__photo img {
    display: block;
    width: 140px;
    max-width: 46vw;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 50%;
    border: 3px solid rgba(215, 191, 129, 0.45);
    border-color: var(--pm-border-strong, rgba(215, 191, 129, 0.45));
    box-shadow: 0 4px 16px rgba(215, 191, 129, 0.25);
    box-shadow: var(--pm-shadow-gold-sm, 0 4px 16px rgba(215, 191, 129, 0.25));
}
/* Desktop size is set by the existing min-width: 768px block further down
   (200px); no second breakpoint is needed here. max-width is released there so
   the vw clamp cannot fight it. */
.pm-author-page__body {
    flex: 1 1 320px;
    min-width: 0;
}
.pm-author-page__eyebrow {
    margin: 0 0 var(--pm-space-2);
    font-size: var(--pm-fs-caption);
    font-weight: var(--pm-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--pm-tracking-wider);
    color: var(--pm-accent);
}
.pm-about .pm-author-page__name {
    margin: 0 0 var(--pm-space-1);
    font-size: var(--pm-fs-h3);
    font-weight: var(--pm-fw-bold);
    line-height: var(--pm-lh-snug);
    color: var(--pm-text);
}
.pm-author-page__role {
    margin: 0 0 var(--pm-space-4);
    font-size: var(--pm-fs-body-sm);
    color: var(--pm-text-muted);
}
.pm-author-page__bio {
    margin: 0 0 var(--pm-space-5);
    font-size: var(--pm-fs-body);
    line-height: var(--pm-lh-relaxed);
    color: var(--pm-text-soft);
}
/* Facts, not credentials: pill-shaped so they never read as a badge or a
   certification the site cannot back up. */
.pm-author-page__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pm-space-2);
    justify-content: center;
    margin: 0 0 var(--pm-space-6);
    padding: 0;
    list-style: none;
}
.pm-author-page__facts li {
    padding: 6px 14px;
    font-size: var(--pm-fs-caption);
    font-weight: var(--pm-fw-semibold);
    color: var(--pm-text-soft);
    background: var(--pm-gold-a08);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-r-pill);
}
.pm-author-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pm-space-4) var(--pm-space-6);
}

@media (min-width: 768px) {
    .pm-author-page { flex-wrap: nowrap; text-align: left; }
    .pm-author-page__photo { margin: 0; }
    .pm-author-page__photo img { width: 200px; max-width: none; }
    .pm-author-page__facts,
    .pm-author-page__actions { justify-content: flex-start; }
}

/* Drop cap on the opening paragraph. */
.pm-about__dropcap::first-letter {
    float: left;
    margin: 8px 14px 0 0;
    font-family: var(--pm-font);
    font-size: 4.25rem;
    font-weight: var(--pm-fw-extrabold);
    line-height: .82;
    background: var(--pm-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 8px var(--pm-gold-a25));
}
/* The light-gold gradient reads on the dark panel but washes out on the light
   paper panel — swap to a solid deeper gold in light mode so the letter stays
   legible. */
html[data-theme="light"] .pm-about__dropcap::first-letter {
    background: none;
    -webkit-text-fill-color: var(--pm-gold-deep);
    color: var(--pm-gold-deep);
    filter: none;
}

/* Gold uppercase sub-headings (override the default prose h2). */
.pm-about .pm-about__subhead {
    position: relative;
    margin: var(--pm-space-12) 0 var(--pm-space-5);
    padding-bottom: var(--pm-space-3);
    font-size: var(--pm-fs-h3);
    font-weight: var(--pm-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--pm-tracking-wide);
    color: var(--pm-accent);
}
.pm-about .pm-about__subhead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 3px;
    border-radius: var(--pm-r-pill);
    background: var(--pm-grad-gold);
}

/* Highlight quote. */
.pm-about .pm-about__quote {
    position: relative;
    margin: var(--pm-space-12) 0 var(--pm-space-8);
    padding: var(--pm-space-8) var(--pm-space-6);
    text-align: center;
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: var(--pm-fw-bold);
    font-style: italic;
    line-height: var(--pm-lh-snug);
    color: var(--pm-accent);
    background: var(--pm-gold-a08);
    border: 0;
    border-left: 4px solid var(--pm-accent);
    border-radius: var(--pm-r-md);
}
.pm-about .pm-about__quote::before {
    content: "\201C";
    position: absolute;
    top: 2px;
    left: 16px;
    font-size: 4rem;
    line-height: 1;
    color: var(--pm-accent);
    opacity: .28;
}

/* Contact prompt at the end of the story. */
.pm-about__contact {
    margin-top: var(--pm-space-10);
    padding-top: var(--pm-space-8);
    border-top: 1px solid var(--pm-border);
    text-align: center;
}
.pm-about__contact .pm-doc-link { font-size: var(--pm-fs-body-lg); }
.pm-about__email {
    margin: var(--pm-space-3) 0 0;
    font-size: var(--pm-fs-body-sm);
    color: var(--pm-text-muted);
}
.pm-about__email a { color: var(--pm-accent); }

/* Support CTA icon: give the heart a filled look on its gold disc. */
.pm-about__support .pm-doc-cta__icon svg { fill: var(--pm-gold-a25); }

/* The old `.pm-about__photo` float is gone with the figure it styled: the
   portrait now lives once, in the author card above the story. */