/* HAKIM Theme — Forgotten Heroes Styles */
/* Scope: loaded INSTEAD of pages.css/blog.css on the Forgotten Heroes landing
   page (page-forgotten-heroes.php) and on single hero tributes
   (single-hakim_hero.php). The `.fh-theatre` scope is ALWAYS dark — a fixed
   candlelit "theatre" independent of the global [data-theme] toggle. Relies on
   style.css + layout.css for tokens, .hk-container(--narrow), .hk-btn--glass,
   .hk-overline, and the sitewide .hk-blockquote--quran citation card. Mirrors
   the perspektive.css vocabulary: gold hairlines, Cormorant display, glass,
   --hk-ease, navy scrims. */

/* ==========================================================================
   0. Cross-document View Transitions — PILOT (Forgotten Heroes only)
   --------------------------------------------------------------------------
   Gentle root cross-fade on real navigations between FH pages (landing ↔ a
   hero tribute). This rule ships ONLY in forgotten-heroes.css, which loads
   solely on page-forgotten-heroes.php + single-hakim_hero.php — so the
   cross-document transition fires only when BOTH endpoints are FH pages; the
   rest of the site is untouched. Pure-CSS progressive enhancement (unsupported
   browsers do a normal navigation). `--hk-dur` collapses to 0ms under reduced
   motion; the explicit override makes that unambiguous. `hk-fade-in` is defined
   in style.css (always loaded).
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
    animation: hk-fade-in var(--hk-dur) var(--hk-ease) both;
}

/* Shared-element morph: the hero portrait expands between the landing card and
   the tribute header. The tribute page has the only portrait, so it carries the
   name statically; the landing side is named per-navigation in fh-transitions.js
   (a view-transition-name must be unique per page). */
.fh-tribute__portrait { view-transition-name: fh-hero-portrait; }
::view-transition-group(fh-hero-portrait) {
    animation-duration: var(--hk-dur);
    animation-timing-function: var(--hk-ease);
}
::view-transition-old(fh-hero-portrait),
::view-transition-new(fh-hero-portrait) {
    /* same photo on both sides → keep it cover-cropped through the geometry morph */
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
    .fh-tribute__portrait { view-transition-name: none; }
}

/* ==========================================================================
   1. Theatre scope — deepened dark canvas (local tokens, no global toggle)
   ========================================================================== */

.fh-theatre {
    /* Deepened-from-navy backdrop palette. No brand token exists for these
       darker shades, so they live here as local custom properties (per the
       self-contained scope rule). --hk-* brand tokens are still reused below
       for gold / teal / parchment accents. */
    --fh-bg:        #070c17;
    --fh-bg-elev:   #0c1322;
    --fh-bg-card:   #101a2e;
    --fh-ink:       #ECE5D6;   /* warm parchment-toned text on dark */
    --fh-ink-soft:  rgba(236, 229, 214, 0.72);
    --fh-ink-faint: rgba(236, 229, 214, 0.5);
    --fh-hairline:  rgba(200, 169, 110, 0.22);
    --fh-hairline-strong: rgba(200, 169, 110, 0.45);
    --fh-scrim:     linear-gradient(to top,
        rgba(5, 9, 18, 0.95) 0%,
        rgba(5, 9, 18, 0.72) 32%,
        rgba(5, 9, 18, 0.28) 60%,
        transparent 100%);

    background: var(--fh-bg);
    color: var(--fh-ink);
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--hk-font-body);
}

/* fh-landing / fh-tribute are page-type modifiers that share the .fh-theatre
   canvas. They carry no distinct background of their own — the theatre owns it —
   but keep an explicit block-flow anchor so the <main> reliably stacks its
   sections (and so both contract classes are addressed). */
.fh-landing,
.fh-tribute {
    display: block;
}

/* Full-bleed: the cinematic hero goes UNDER the fixed header (like the homepage),
   so the page shell drops its default 85px top gap. The visual breadcrumb is
   suppressed on these pages in header.php; the hero supplies its own top padding
   to clear the floating header. */
body.page-template-page-forgotten-heroes .hk-main,
body.single-hakim_hero .hk-main {
    padding-top: 0;
}

/* Overline override — the global .hk-overline uses --hk-gold-text (a dark gold
   tuned for light backgrounds). On the dark theatre, lift it to the bright gold
   for legibility. We DO NOT re-declare text-transform here (a11y gate); the
   global rule already supplies the uppercase. */
.fh-theatre .hk-overline {
    color: var(--hk-gold);
}

/* ==========================================================================
   2. Landing — cinematic hero
   ========================================================================== */

.fh-hero {
    position: relative;
    width: 100%;
    /* Cinematic image band. background-attachment: fixed pins the cover photo to
       the viewport; the titlebar above carries the SAME fixed photo (desktop), so
       the title + band read as one continuous picture and content parallaxes over
       the pinned image as you scroll. */
    min-height: 82vh;
    overflow: hidden;
    isolation: isolate;
    /* --fh-cover is set inline on the element (cover art). */
    background-image: var(--fh-cover);
    background-size: cover;
    /* Bias toward the reading figure (right-of-centre) so it stays framed when the
       viewport crops the 21:9 banner. */
    background-position: 62% center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--fh-bg);
}

/* Fallback hero gradient when no cover art is provided. */
.fh-hero:not([style*="--fh-cover"]) {
    background-image: var(--hk-hero-gradient);
}

/* Stage parallax media layer — carries the cover photo on MOBILE (where
   background-attachment: fixed is broken). Inert on desktop, which paints the
   stage's own fixed photo; shown + transform-driven on mobile (max-width: 768px). */
.fh-hero-stage__media {
    display: none;
}

/* The cover art is already a finished dark composition, so we don't darken it —
   we only fade its foot into the theatre background for a seamless hand-off into
   the manifesto below. (The title lives in the artwork; no text overlay here.) */
.fh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 60%,
        rgba(5, 9, 18, 0.55) 85%,
        var(--fh-bg) 100%);
    pointer-events: none;
}

/* Faint gold vignette at the foot of the hero, echoing lamplight. */
.fh-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    height: 40%;
    background: radial-gradient(80% 120% at 50% 120%,
        rgba(200, 169, 110, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

.fh-hero__inner {
    /* The cover artwork carries its own "Forgotten Heroes." title — suppress the
       duplicate HTML title + tagline whenever the banner image is present.
       (Re-show by removing this rule if a text-over-photo hero is ever wanted.) */
    display: none;
}

.fh-hero__title {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(2.8rem, 9vw, 5.5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--fh-ink);
    margin: 0;
    /* Warm lamplit glow behind the serif. */
    text-shadow:
        0 2px 28px rgba(200, 169, 110, 0.22),
        0 1px 3px rgba(0, 0, 0, 0.6);
}

.fh-hero__dot {
    color: var(--hk-gold);
    text-shadow: 0 0 24px rgba(200, 169, 110, 0.6);
}

.fh-hero__tagline {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    line-height: 1.6;
    color: var(--fh-ink-soft);
    max-width: 38rem;
    margin: var(--hk-space-md) auto 0;
}

/* Gold hairline beneath the tagline — a perspektive-style divider. */
.fh-hero__tagline::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    margin: var(--hk-space-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
}

/* ── Title banner — the big premium wordmark above the hero image band. The title
   floats over the stage cover photo (desktop: the stage's pinned/fixed bg; mobile:
   the transform-driven .fh-hero-stage__media layer) through a dark scrim that fades
   to nothing at the foot, so the section blends seamlessly into the band beneath. ── */
.fh-titlebar {
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom,
        rgba(9, 13, 23, 0.94) 0%,
        rgba(9, 13, 23, 0.80) 38%,
        rgba(9, 13, 23, 0.48) 72%,
        rgba(9, 13, 23, 0) 100%);
    text-align: center;
    /* Generous top padding drops the title clear of the sticky nav. */
    padding: clamp(6rem, 15vw, 13rem) 0 clamp(4rem, 10vw, 8rem);
    overflow: hidden;
}

/* The hero stage hosts the cover photo so it sits behind BOTH the titlebar and the
   band as one continuous image. It must NOT be transformed — the .hk-animate'd
   titlebar is (its reveal sets a transform), which would re-anchor a fixed bg to the
   titlebar box. overflow:hidden clips the oversized mobile media layer. */
.fh-hero-stage {
    position: relative;
    overflow: hidden;
}

/* Desktop: the photo is the stage's own viewport-pinned (fixed) background. */
@media (min-width: 769px) {
    .fh-hero-stage {
        background-image: var(--fh-cover);
        background-size: cover;
        background-position: 62% center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: var(--fh-bg);
    }
}

/* Warm lamplit halo behind the wordmark. */
.fh-titlebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 90% at 50% 32%, rgba(200, 169, 110, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

.fh-titlebar .hk-container {
    position: relative;
    z-index: 1;
}

/* "Way bigger" overline — global .hk-overline still supplies the uppercase +
   tracking; we only scale it up here (extra specificity beats the 12px base). */
.fh-titlebar .fh-titlebar__overline {
    font-size: clamp(1rem, 2.6vw, 1.85rem);
    color: var(--hk-gold);
    margin-bottom: var(--hk-space-md);
}

.fh-titlebar__title {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(3rem, 11vw, 8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fh-ink);
    margin: 0;
    text-shadow:
        0 2px 40px rgba(200, 169, 110, 0.20),
        0 1px 4px rgba(0, 0, 0, 0.6);
}

.fh-titlebar__dot {
    color: var(--hk-gold);
    text-shadow: 0 0 28px rgba(200, 169, 110, 0.6);
}

.fh-titlebar__tagline {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    line-height: 1.6;
    color: var(--fh-ink-soft);
    max-width: 40rem;
    margin: var(--hk-space-md) auto 0;
}

/* Gold hairline beneath the tagline — echoes the perspektive divider. */
.fh-titlebar__tagline::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    margin: var(--hk-space-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
}

/* ── Immersive reveal — plays once when the banner scrolls into view.
   The global hk-animate IntersectionObserver adds .is-visible; with no JS the
   text simply shows (animations are additive, never a hidden default). ── */

/* A soft gold light sweeps diagonally across the banner on reveal. */
.fh-titlebar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 34%,
        rgba(212, 188, 138, 0.09) 47%,
        rgba(212, 188, 138, 0.16) 50%,
        rgba(212, 188, 138, 0.09) 53%,
        transparent 66%);
    background-size: 250% 100%;
    background-position: 185% 0;
    opacity: 0;
}

.fh-titlebar.is-visible::after {
    animation: fhSweep 1.9s ease-out 0.45s 1;
}

.fh-titlebar.is-visible .fh-titlebar__overline {
    animation: fhOverlineIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fh-titlebar.is-visible .fh-titlebar__title {
    animation: fhFocusIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.fh-titlebar.is-visible .fh-titlebar__dot {
    animation: fhDotGlow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}

.fh-titlebar.is-visible .fh-titlebar__tagline {
    animation: fhRiseUp 1s ease-out 0.55s both;
}

/* Wordmark "focus-in": rises out of a soft blur and settles. */
@keyframes fhFocusIn {
    0%   { opacity: 0; transform: translateY(34px) scale(1.045); filter: blur(10px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Overline settles in as its letter-spacing draws together. */
@keyframes fhOverlineIn {
    0%   { opacity: 0; transform: translateY(14px); letter-spacing: 0.42em; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 0.15em; }
}

@keyframes fhRiseUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Gold dot pops + glows after the wordmark settles. */
@keyframes fhDotGlow {
    0%   { opacity: 0; transform: scale(0); text-shadow: 0 0 0 rgba(200, 169, 110, 0); }
    55%  { opacity: 1; transform: scale(1.5); text-shadow: 0 0 38px rgba(200, 169, 110, 0.95); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 28px rgba(200, 169, 110, 0.6); }
}

@keyframes fhSweep {
    0%   { opacity: 0; background-position: 185% 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; background-position: -65% 0; }
}

/* ==========================================================================
   3. Landing — manifesto / "Warum"
   ========================================================================== */

.fh-manifesto {
    position: relative;
    padding: clamp(4rem, 11vw, 7.5rem) 0;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(200, 169, 110, 0.05) 0%, transparent 70%),
        var(--fh-bg-elev);
    border-top: 1px solid var(--fh-hairline);
}

.fh-manifesto .hk-container--narrow {
    text-align: center;
}

.fh-manifesto p {
    font-family: var(--hk-font-body);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.85;
    color: var(--fh-ink-soft);
    margin: 0 auto 1.4rem;
    max-width: 40rem;
}

/* The opening paragraph reads as a reverent lede. */
.fh-manifesto p:first-of-type {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    line-height: 1.55;
    color: var(--fh-ink);
    margin-bottom: var(--hk-space-lg);
}

.fh-manifesto h2,
.fh-manifesto h3 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    color: var(--fh-ink);
    line-height: 1.2;
    margin: var(--hk-space-xl) 0 var(--hk-space-md);
}

.fh-manifesto h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.fh-manifesto h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* The al-Insān ayah arrives via the sitewide .hk-blockquote--quran card
   (style.css). On the theatre it already reads as a navy/gold pull-quote;
   lift it onto the elevated surface with a soft gold ring + breathing room. */
.fh-manifesto .hk-blockquote-wrap.hk-blockquote--quran {
    margin-inline: auto;
    margin-block: var(--hk-space-xl);
    max-width: 44rem;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--fh-hairline);
}

/* ==========================================================================
   4. Landing — heroes display (spotlight + grid)
   ========================================================================== */

.fh-display {
    position: relative;
    padding: clamp(4rem, 11vw, 7.5rem) 0;
    background: var(--fh-bg);
    border-top: 1px solid var(--fh-hairline);
}

/* ── Spotlight: single-hero editorial feature ────────────────────────────── */

.fh-display--spotlight .fh-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 1080px;
    margin: 0 auto;
}

/* The spotlight is a single large .fh-card; override the portrait crop so the
   feature reads tall and editorial rather than as a lonely grid cell. */
.fh-spotlight .fh-card {
    flex-direction: row;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    gap: 0;
    min-height: 460px;
}

.fh-spotlight .fh-card__img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
}

.fh-spotlight .fh-card__body {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(135deg, var(--fh-bg-card), var(--fh-bg-elev));
}

/* Hide the gradient scrim on the spotlight — text sits beside, not over. */
.fh-spotlight .fh-card__scrim {
    display: none;
}

.fh-spotlight .fh-card__epithet {
    margin-bottom: var(--hk-space-sm);
}

.fh-spotlight .fh-card__name {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.fh-spotlight .fh-card__daten {
    font-size: 1rem;
    margin-top: var(--hk-space-sm);
}

/* Optional lead text inside a spotlight body. */
.fh-spotlight .fh-card__lead {
    font-family: var(--hk-font-body);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--fh-ink-soft);
    margin: var(--hk-space-md) 0 0;
    max-width: 32rem;
}

/* ── Grid: multi-card portrait gallery ───────────────────────────────────── */

/* The grid layout lives on the inner .fh-grid; .fh-display--grid is the section
   modifier (kept explicit so the contract class is addressed and to allow
   grid-only section tweaks). */
.fh-display--grid .hk-container {
    max-width: 1240px;
}

.fh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Portrait card (shared by spotlight + grid) ──────────────────────────── */

.fh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--fh-bg-card);
    border: 1px solid var(--fh-hairline);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.5s var(--hk-ease),
        box-shadow 0.5s var(--hk-ease),
        border-color 0.5s var(--hk-ease);
}

.fh-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--fh-hairline-strong);
    border-color: var(--fh-hairline-strong);
}

.fh-card:focus-visible {
    outline: 2px solid var(--hk-gold);
    outline-offset: 4px;
}

.fh-card__img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.fh-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--hk-ease), filter 0.7s var(--hk-ease);
    /* Subtle desaturation lifts on hover — a quiet, reverent reveal. */
    filter: saturate(0.85) contrast(1.02);
}

.fh-card:hover .fh-card__img img {
    transform: scale(1.05);
    filter: saturate(1) contrast(1.02);
}

/* Navy gradient scrim — darker at the foot so the body text stays legible. */
.fh-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fh-scrim);
    pointer-events: none;
}

.fh-card__body {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(1.25rem, 2vw, 1.75rem);
}

.fh-card__epithet {
    display: block;
    margin-bottom: 0.5rem;
    /* .hk-overline already supplies gold uppercase; reinforce the dark-scrim
       readability with a shadow. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.fh-card__name {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.18;
    color: var(--fh-ink);
    margin: 0 0 0.35rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
    transition: color 0.4s var(--hk-ease);
}

.fh-card:hover .fh-card__name {
    color: var(--hk-gold-light);
}

.fh-card__daten {
    font-family: var(--hk-font-body);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--fh-ink-faint);
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   5. Landing — connect-cta / newsletter partials on the dark canvas
   ========================================================================== */

/* The closing connect-cta is the premium homepage banner — the FH landing loads
   homepage.css so it renders identically (plant backdrop + glass panel). We do
   NOT override it here; a dark harmonization would strip the premium look. */

/* ==========================================================================
   6. Tribute — reading progress + back-to-top (dark-themed)
   ========================================================================== */

.hk-reading-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: var(--hk-z-overlay);
    height: 3px;
    background: rgba(200, 169, 110, 0.12);
    pointer-events: none;
}

.hk-reading-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--hk-gold), var(--hk-gold-light));
    box-shadow: 0 0 12px rgba(200, 169, 110, 0.5);
    transition: width 0.1s linear;
}

.hk-back-to-top {
    position: fixed;
    bottom: var(--hk-space-lg);
    inset-inline-end: var(--hk-space-lg);
    z-index: var(--hk-z-sticky);
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    border: 1px solid var(--fh-hairline-strong);
    background: rgba(16, 26, 46, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--hk-gold);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s var(--hk-ease), transform 0.3s var(--hk-ease), background 0.3s var(--hk-ease);
}

.hk-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hk-back-to-top:hover {
    background: rgba(200, 169, 110, 0.16);
    border-color: var(--hk-gold);
}

/* ==========================================================================
   7. Tribute — portrait hero
   ========================================================================== */

.fh-tribute__hero {
    position: relative;
    min-height: 84svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--fh-bg);
}

.fh-tribute__portrait {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fh-tribute__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
    filter: saturate(0.9) contrast(1.02);
}

/* Navy gradient scrim — darker toward the foot where the name sits. */
.fh-tribute__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(5, 9, 18, 0.6) 0%, transparent 50%),
        linear-gradient(to top,
            rgba(5, 9, 18, 0.97) 0%,
            rgba(5, 9, 18, 0.78) 26%,
            rgba(5, 9, 18, 0.35) 58%,
            rgba(5, 9, 18, 0.5) 100%);
    pointer-events: none;
}

.fh-tribute__head {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(6rem, 14vh, 10rem);
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
    text-align: center;
}

.fh-tribute__epithet {
    display: block;
    margin-bottom: var(--hk-space-sm);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.fh-tribute__name {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--fh-ink);
    margin: 0 0 var(--hk-space-md);
    text-shadow:
        0 2px 24px rgba(200, 169, 110, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Gold hairline between name and facts. */
.fh-tribute__name::after {
    content: '';
    display: block;
    width: 56px;
    height: 1px;
    margin: var(--hk-space-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
}

.fh-tribute__facts {
    font-family: var(--hk-font-body);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    letter-spacing: 0.03em;
    color: var(--fh-ink-soft);
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   8. Tribute — body
   ========================================================================== */

.fh-tribute__body {
    position: relative;
    padding-top: clamp(3rem, 7vw, 5rem);
    padding-bottom: clamp(4rem, 9vw, 6.5rem);
}

.fh-tribute__lead {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    line-height: 1.55;
    color: var(--fh-ink);
    text-align: center;
    max-width: 38rem;
    margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

/* Diamond ornament separating lead from narrative body. */
.fh-tribute__lead::after {
    content: '\25C6';
    display: block;
    margin: var(--hk-space-lg) auto 0;
    font-size: 0.7rem;
    color: var(--hk-gold);
    opacity: 0.6;
}

/* ── entry-content prose (self-contained — blog.css is NOT loaded here) ───── */

.fh-tribute__body .entry-content {
    font-family: var(--hk-font-body);
    font-weight: 300;
    font-size: 1.13rem;
    line-height: 1.85;
    color: var(--fh-ink-soft);
}

.fh-tribute__body .entry-content > p {
    margin: 0 0 1.5rem;
}

/* Lettrine on the first paragraph — quiet editorial flourish. */
.fh-tribute__body .entry-content > p:first-of-type::first-letter {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 0.8;
    float: inline-start;
    padding-inline-end: 0.6rem;
    padding-top: 0.4rem;
    color: var(--hk-gold);
}

.fh-tribute__body .entry-content h2,
.fh-tribute__body .entry-content h3,
.fh-tribute__body .entry-content h4 {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    color: var(--fh-ink);
    line-height: 1.2;
}

.fh-tribute__body .entry-content h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.2rem);
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 var(--hk-space-md);
}

.fh-tribute__body .entry-content h3 {
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    padding-inline-start: var(--hk-space-sm);
    border-inline-start: 3px solid var(--hk-gold);
    margin: var(--hk-space-xl) 0 var(--hk-space-md);
}

.fh-tribute__body .entry-content a {
    color: var(--hk-gold-light);
    text-decoration: underline;
    text-decoration-color: rgba(212, 188, 138, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.3s var(--hk-ease);
}

.fh-tribute__body .entry-content a:hover {
    text-decoration-color: var(--hk-gold-light);
}

.fh-tribute__body .entry-content ul,
.fh-tribute__body .entry-content ol {
    padding-inline-start: 1.5rem;
    margin: 0 0 1.5rem;
}

.fh-tribute__body .entry-content li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.fh-tribute__body .entry-content li::marker {
    color: var(--hk-gold);
}

.fh-tribute__body .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: clamp(2rem, 5vw, 3rem) auto;
}

/* ── Plain / unclassified blockquote (blog.css not loaded → style here) ───── */

.fh-tribute__body .entry-content blockquote:not([class]),
.fh-tribute__body .entry-content blockquote.hk-scholar,
.fh-tribute__body .entry-content blockquote.hk-hadith {
    margin: clamp(2rem, 5vw, 3rem) 0;
    padding: var(--hk-space-md) var(--hk-space-lg);
    border: none;
    border-inline-start: 3px solid var(--hk-gold);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(135deg, rgba(200, 169, 110, 0.09), rgba(200, 169, 110, 0.02));
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.65;
    color: var(--fh-ink);
}

/* Hadith keeps a distinct teal accent. */
.fh-tribute__body .entry-content blockquote.hk-hadith {
    border-inline-start-color: var(--hk-teal);
    background: linear-gradient(135deg, rgba(91, 138, 154, 0.12), rgba(91, 138, 154, 0.03));
}

.fh-tribute__body .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.fh-tribute__body .entry-content blockquote cite {
    display: block;
    margin-top: var(--hk-space-sm);
    font-family: var(--hk-font-body);
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--hk-gold);
}

/* Arabic line inside a plain blockquote. */
.fh-tribute__body .entry-content blockquote .hk-arabic,
.fh-tribute__body .entry-content blockquote .arabic {
    font-family: var(--hk-font-arabic);
    font-style: normal;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 2;
    direction: rtl;
    text-align: center;
    display: block;
    margin-bottom: var(--hk-space-sm);
    color: var(--hk-gold);
}

/* ── Ayah/Hadith centerpiece — the sitewide Quran card on the theatre ────── */

/* style.css already renders .hk-blockquote--quran as a navy/gold card; deepen
   its frame on the tribute body so it reads as the reverent pull-quote. */
.fh-tribute__body .hk-blockquote-wrap.hk-blockquote--quran {
    margin-inline: auto;
    margin-block: clamp(2.5rem, 6vw, 4rem);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--fh-hairline);
}

/* ── "Was uns das lehrt" — closing reflection block ──────────────────────── */

.fh-tribute__body .fh-reflection,
.fh-tribute__body .entry-content .fh-reflection {
    margin: clamp(3rem, 7vw, 4.5rem) 0;
    padding: clamp(2rem, 4vw, 3rem);
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(200, 169, 110, 0.06) 0%, transparent 70%),
        var(--fh-bg-card);
    border: 1px solid var(--fh-hairline);
    border-top: 2px solid var(--hk-gold);
    border-radius: 14px;
    text-align: center;
}

.fh-tribute__body .fh-reflection__label {
    display: block;
    margin-bottom: var(--hk-space-sm);
}

.fh-tribute__body .fh-reflection__title {
    font-family: var(--hk-font-heading);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--fh-ink);
    margin: 0 0 var(--hk-space-md);
    line-height: 1.2;
}

.fh-tribute__body .fh-reflection p {
    font-family: var(--hk-font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    line-height: 1.65;
    color: var(--fh-ink-soft);
    max-width: 34rem;
    margin: 0 auto 1rem;
}

.fh-tribute__body .fh-reflection p:last-child {
    margin-bottom: 0;
}

/* ── Share buttons (.hk-share) on the dark theatre ───────────────────────── */

.fh-tribute__body .hk-share {
    margin: clamp(2.5rem, 6vw, 3.5rem) 0;
    padding-top: var(--hk-space-lg);
    border-top: 1px solid var(--fh-hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hk-space-sm);
}

.fh-tribute__body .hk-share a,
.fh-tribute__body .hk-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    border: 1px solid var(--fh-hairline);
    background: rgba(16, 26, 46, 0.6);
    color: var(--fh-ink-soft);
    cursor: pointer;
    transition: border-color 0.3s var(--hk-ease), color 0.3s var(--hk-ease), background 0.3s var(--hk-ease);
}

.fh-tribute__body .hk-share a:hover,
.fh-tribute__body .hk-share button:hover {
    border-color: var(--hk-gold);
    color: var(--hk-gold);
    background: rgba(200, 169, 110, 0.12);
}

/* ── Photo credit + back link ────────────────────────────────────────────── */

.fh-tribute__credit {
    margin: clamp(2rem, 5vw, 3rem) 0 var(--hk-space-lg);
    font-family: var(--hk-font-body);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--fh-ink-faint);
    font-style: italic;
}

.fh-tribute__back.hk-btn.hk-btn--glass {
    /* .hk-btn--glass defaults to --hk-heading text (dark navy on light); on the
       always-dark theatre override to parchment + dark glass for legibility. */
    background: rgba(16, 26, 46, 0.6);
    color: var(--fh-ink);
    border: 1px solid var(--fh-hairline-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.3s var(--hk-ease), background 0.3s var(--hk-ease), color 0.3s var(--hk-ease);
}

.fh-tribute__back.hk-btn.hk-btn--glass:hover {
    background: rgba(200, 169, 110, 0.14);
    border-color: var(--hk-gold);
    color: var(--hk-gold);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .fh-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fh-display--spotlight .fh-spotlight,
    .fh-spotlight .fh-card {
        grid-template-columns: 1fr;
    }

    .fh-spotlight .fh-card {
        min-height: 0;
    }

    .fh-spotlight .fh-card__img {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    /* Fixed-attachment is broken on iOS, so on mobile the cover photo rides on
       .fh-hero-stage__media — spanning the WHOLE stage (title + band) so the title
       blends over the photo here too. A small JS module (fh-transitions.js)
       transform-translates it from scroll position for an iOS-safe parallax.
       Oversized top+bottom so the translate never reveals a gap; --fh-parallax is 0
       at rest (reduced-motion / no-JS = a clean static cover). 62% frames the figure. */
    .fh-hero-stage__media {
        display: block;
        position: absolute;
        inset: -15% 0;
        z-index: 0;
        background-image: var(--fh-cover);
        background-size: cover;
        background-position: 62% center;
        background-repeat: no-repeat;
        background-color: var(--fh-bg);
        transform: translateY(var(--fh-parallax, 0px));
        will-change: transform;
    }
    .fh-hero-stage:not([style*="--fh-cover"]) .fh-hero-stage__media {
        background-image: var(--hk-hero-gradient);
    }

    /* Band is transparent so the shared stage photo shows through it; its ::before
       still fades the foot into the manifesto. */
    .fh-hero {
        min-height: 56svh;
        background: transparent;
        position: relative;
        z-index: 1;
    }

    .fh-hero__inner {
        padding-top: clamp(7rem, 18vh, 11rem);
    }

    .fh-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .fh-tribute__hero {
        min-height: 72svh;
    }

    .fh-tribute__body .entry-content > p:first-of-type::first-letter {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .fh-hero__title {
        font-size: clamp(2.4rem, 13vw, 3.4rem);
    }

    .fh-manifesto,
    .fh-display {
        padding-block: clamp(3rem, 12vw, 4.5rem);
    }

    .hk-back-to-top {
        bottom: var(--hk-space-md);
        inset-inline-end: var(--hk-space-md);
    }

    .fh-tribute__body .hk-share a,
    .fh-tribute__body .hk-share button {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   10. RTL (Arabic) — Amiri body, mirrored accents
   ========================================================================== */

.fh-theatre[dir="rtl"] .fh-tribute__body .entry-content,
.fh-theatre[dir="rtl"] .fh-manifesto p {
    font-family: var(--hk-font-arabic);
}

.fh-theatre[dir="rtl"] .fh-tribute__body .entry-content > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    padding: 0;
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fh-card,
    .fh-card__img img,
    .fh-card__name,
    .hk-back-to-top,
    .hk-reading-progress__bar,
    .fh-titlebar.is-visible::after,
    .fh-titlebar.is-visible .fh-titlebar__overline,
    .fh-titlebar.is-visible .fh-titlebar__title,
    .fh-titlebar.is-visible .fh-titlebar__dot,
    .fh-titlebar.is-visible .fh-titlebar__tagline,
    .fh-tribute__back.hk-btn.hk-btn--glass,
    .fh-tribute__body .hk-share a,
    .fh-tribute__body .hk-share button,
    .fh-tribute__body .entry-content a {
        transition: none !important;
        animation: none !important;
    }

    /* No parallax when reduced motion is requested. */
    .fh-hero {
        background-attachment: scroll;
    }

    .fh-card:hover {
        transform: none;
    }

    .fh-card:hover .fh-card__img img {
        transform: none;
    }
}