/* ============================================================================
   PYROPUNK - "The Forge"
   ----------------------------------------------------------------------------
   Identity: heat. The heaviest display face in the set (Anton, no tracking, set
   enormous and tight), stacked in solid blocks with almost no air between them.
   Colour temperature climbs as you descend the page. Embers rise across the
   whole surface; edges look burnt rather than drawn.
   Axis of difference: ultra-heavy display · no air · rising embers · burnt edge
   ============================================================================ */

body.family-pyropunk {
    --f-bg:            #140805;
    --f-bg-alt:        #1c0c07;
    --f-bg-panel:      #26110a;
    --f-bg-deep:       #0b0402;

    --f-text:          #e4cbb8;
    --f-text-dim:      #9c7460;
    --f-head:          #fff0e2;

    --f-accent:        #ff5a1f;   /* flame */
    --f-accent-2:      #ff8c4a;
    --f-accent-ink:    #140805;
    --f-second:        #ffc247;   /* white-hot gold */
    --f-second-2:      #ffd782;
    --f-alert:         #d4231a;   /* core red */

    --f-line:          rgba(255, 90, 31, 0.42);
    --f-line-soft:     rgba(255, 90, 31, 0.18);
    --f-rule-w:        2px;

    --f-display:       'Anton', 'Arial Narrow', sans-serif;
    --f-body:          'Archivo', system-ui, sans-serif;
    --f-mono:          'IBM Plex Mono', ui-monospace, monospace;

    --f-display-w:     400;        /* Anton has one weight and needs no more */
    --f-display-track: -0.005em;
    --f-display-case:  uppercase;

    --f-h1-size:       clamp(4em, 15vw, 13em);   /* the largest in the set */
    --f-h2-size:       clamp(2.4em, 5.2vw, 4.2em);
    --f-hero-track:    0em;
    --f-hero-justify:  flex-start;
    --f-hero-text:     left;

    --f-body-size:     0.97em;
    --f-leading:       1.7;
    --f-measure:       62ch;

    --f-tag-font:      'IBM Plex Mono', monospace;
    --f-tag-size:      0.7em;
    --f-tag-track:     0.3em;
    --f-tag-w:         500;
    --f-mono-track:    0.14em;

    --f-page:          1240px;
    --f-gutter:        58px;
    --f-rhythm:        76px;      /* the tightest rhythm: no room to breathe */
    --f-align:         start;

    --f-r: 0px; --f-r-lg: 0px; --f-r-frame: 0px; --f-r-pill: 0px;

    --f-split:         1fr 1fr;
    --f-split-gap:     46px;
    --f-card-cols:     repeat(6, 1fr);
    --f-card-gap:      4px;
    --f-tl-gutter:     108px;

    --f-glow:          0 0 30px rgba(255, 90, 31, 0.45);
    --f-text-glow:     0 0 24px rgba(255, 90, 31, 0.7);
    --f-panel-shadow:  0 0 46px rgba(255, 90, 31, 0.3);
    --f-lift:          -3px;

    --f-img-filter:        contrast(1.25) saturate(1.5) hue-rotate(-18deg) brightness(0.76);
    --f-img-filter-hover:  contrast(1.35) saturate(1.8) hue-rotate(-25deg) brightness(0.92);

    /* the whole page sits in a furnace mouth */
    --f-vignette:
        radial-gradient(ellipse 120% 60% at 50% 118%, rgba(255, 90, 31, 0.3), transparent 62%),
        radial-gradient(ellipse at 50% 44%, transparent 46%, rgba(0,0,0,0.8) 100%);
    /* embers */
    --f-veil:
        radial-gradient(circle at 14% 82%, rgba(255, 194, 71, 0.85) 1.1px, transparent 2.4px),
        radial-gradient(circle at 46% 64%, rgba(255, 90, 31, 0.75) 1.3px, transparent 2.6px),
        radial-gradient(circle at 74% 88%, rgba(255, 194, 71, 0.7) 1px, transparent 2.2px),
        radial-gradient(circle at 88% 40%, rgba(255, 90, 31, 0.6) 1.2px, transparent 2.4px),
        radial-gradient(circle at 28% 30%, rgba(255, 140, 74, 0.55) 0.9px, transparent 2px);
    --f-veil-size:     180px 300px, 240px 380px, 200px 340px, 280px 420px, 220px 360px;
    --f-veil-blend:    screen;
    --f-veil-opacity:  0.9;

    font-family: var(--f-body);
}

/* embers drift upward, each layer at its own rate */
body.family-pyropunk::after { animation: pyr-embers 18s linear infinite; }
@keyframes pyr-embers {
    0%   { background-position: 0 0,      0 0,      0 0,      0 0,      0 0; }
    100% { background-position: 0 -300px, 0 -380px, 0 -340px, 0 -420px, 0 -360px; }
}

body.family-pyropunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 50% at 50% 100%, rgba(255,90,31,0.4), transparent 65%),
        linear-gradient(180deg, rgba(20,8,5,0.55) 0%, rgba(20,8,5,0.1) 40%, var(--f-bg) 100%);
    z-index: 2;
}
body.family-pyropunk .hero-title span { text-shadow: 0 0 40px rgba(255,90,31,0.8), 0 0 90px rgba(212,35,26,0.6); }
body.family-pyropunk .hero-subtitle span { color: var(--f-second) !important; letter-spacing: 0.32em; }
body.family-pyropunk .pyr-hero-badge {
    background: var(--f-alert);
    color: var(--f-head);
    border: none;
    text-shadow: none;
    padding: 8px 20px;
}
body.family-pyropunk .pyr-hero-meta b { color: var(--f-second); }

/* - section tag: a heat stamp - */
body.family-pyropunk .pyr-section-tag {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    padding: 5px 16px;
    font-weight: 600;
}
body.family-pyropunk .pyr-h2 { line-height: 0.92; text-shadow: 0 0 34px rgba(255,90,31,0.45); }
body.family-pyropunk .pyr-lede { border-left: 5px solid var(--f-accent); padding-left: 24px; }

/* - manifesto: a solid stack, letters touching - */
body.family-pyropunk .pyr-manifesto-grid { flex-direction: column; align-items: flex-start; gap: 0; line-height: 0.8; }
body.family-pyropunk .pyr-manifesto-word {
    color: var(--f-head);
    text-shadow: 0 0 40px rgba(255,90,31,0.6);
}
body.family-pyropunk .pyr-manifesto-word.pyr-flame {
    /* the word itself is a flame gradient */
    background: linear-gradient(0deg, var(--f-alert), var(--f-accent) 45%, var(--f-second));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(255,90,31,0.6));
}
body.family-pyropunk .pyr-manifesto-amp { color: var(--f-second); font-size: 0.26em; padding: 0.3em 0; }

body.family-pyropunk .pyr-img-frame { border: 3px solid var(--f-accent); }
body.family-pyropunk .pyr-img-frame.pyr-img-frame-core { border-color: var(--f-second); box-shadow: 0 0 32px rgba(255,194,71,0.4); }
body.family-pyropunk .pyr-img-frame figcaption {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    border: none;
    font-weight: 600;
}
body.family-pyropunk .pyr-data-pill { background: var(--f-bg-deep); border: 2px solid var(--f-line); }
body.family-pyropunk .pyr-data-pill b { color: var(--f-second); }
body.family-pyropunk .pyr-callout { background: rgba(212, 35, 26, 0.2); border-left: 5px solid var(--f-second); }
body.family-pyropunk .pyr-callout-tag { color: var(--f-second); }

/* - chronology: a heat scale, cold at the top, white-hot at the bottom - */
body.family-pyropunk .pyr-timeline::before {
    width: 5px;
    background: linear-gradient(180deg, var(--f-alert), var(--f-accent) 55%, var(--f-second));
    box-shadow: 0 0 16px rgba(255,90,31,0.6);
}
body.family-pyropunk .pyr-timeline li::before {
    border-radius: 0;
    width: 18px; height: 18px;
    background: var(--f-bg);
    border: 3px solid var(--f-accent);
    left: calc(var(--f-tl-gutter) - 7px);
    box-shadow: 0 0 14px var(--f-accent);
}
body.family-pyropunk .pyr-tl-highlight::before { background: var(--f-second) !important; box-shadow: 0 0 26px var(--f-second) !important; }
body.family-pyropunk .pyr-tl-year { font-family: var(--f-display); font-size: 2.6em; color: var(--f-accent); letter-spacing: 0; line-height: 0.9; }
body.family-pyropunk .pyr-tl-body h4 { font-family: var(--f-display); font-size: 1.4em; letter-spacing: 0.02em; }

/* - pillars: one solid wall of blocks - */
body.family-pyropunk .pyr-card {
    background: linear-gradient(180deg, var(--f-bg-panel), var(--f-bg));
    border: none;
    border-bottom: 5px solid var(--f-accent);
}
body.family-pyropunk .pyr-card:hover { background: linear-gradient(180deg, #33170d, var(--f-bg-panel)); border-bottom-color: var(--f-second); }
body.family-pyropunk .pyr-card-num { font-family: var(--f-display); font-size: 3em; line-height: 0.9; color: var(--f-alert); letter-spacing: 0; }
body.family-pyropunk .pyr-card h3 { font-family: var(--f-display); font-size: 1.5em; line-height: 1; }
body.family-pyropunk .pyr-card-tag { border-top: 2px solid var(--f-line-soft); color: var(--f-second); }

body.family-pyropunk .pyr-pullquote {
    background: radial-gradient(ellipse at center, rgba(255,90,31,0.3), transparent 66%), var(--f-bg-deep);
    border-top: 5px solid var(--f-accent);
    border-bottom: 5px solid var(--f-alert);
}
body.family-pyropunk .pyr-pullquote blockquote { text-shadow: 0 0 40px rgba(255,90,31,0.6); }
body.family-pyropunk .pyr-pullquote-accent { color: var(--f-second); text-shadow: 0 0 30px var(--f-second); }
body.family-pyropunk .pyr-pullquote-marks { color: var(--f-accent); }
body.family-pyropunk .pyr-pullquote cite { color: var(--f-second); }

body.family-pyropunk .pyr-pills li { background: var(--f-accent); color: var(--f-accent-ink); border: none; font-weight: 600; }
body.family-pyropunk .pyr-gallery { gap: 5px; }
body.family-pyropunk .pyr-gallery figure { border: 2px solid var(--f-line-soft); }
body.family-pyropunk .pyr-gallery figcaption { color: var(--f-second); text-shadow: 0 0 8px rgba(255,194,71,0.7); }

body.family-pyropunk .pyr-author {
    background: linear-gradient(140deg, var(--f-bg-panel), var(--f-bg));
    border: none;
    border-left: 6px solid var(--f-accent);
}
body.family-pyropunk .pyr-author-right { border-left: none; border-right: 6px solid var(--f-second); }
body.family-pyropunk .pyr-author-avatar { filter: drop-shadow(0 0 14px var(--f-accent)); }
body.family-pyropunk .pyr-author h3 { font-family: var(--f-display); font-size: 2.3em; line-height: 1; }
body.family-pyropunk .pyr-author-quote { border-left: 4px solid var(--f-second); background: rgba(255,194,71,0.08); color: var(--f-second-2); }

body.family-pyropunk .pyr-works-cat { color: var(--f-second) !important; border-bottom-color: var(--f-line); }
body.family-pyropunk .pyr-work { background: var(--f-bg-panel); border: 2px solid var(--f-line-soft); }
body.family-pyropunk .pyr-work-meta h4 { font-family: var(--f-display); letter-spacing: 0.02em; font-size: 1.2em; }
body.family-pyropunk .pyr-work-byline { color: var(--f-second); }

/* --- SIGNATURE: the forge gauge ---
   A furnace control: a live temperature bar across the top, readings below. */
body.family-pyropunk .pyr-forge {
    background: var(--f-bg-deep);
    border: 3px solid var(--f-accent);
    box-shadow: var(--f-panel-shadow), inset 0 -50px 70px rgba(255, 90, 31, 0.16);
    margin-top: 44px;
}
body.family-pyropunk .pyr-forge-bar {
    background: linear-gradient(90deg, var(--f-alert), var(--f-accent) 55%, var(--f-second));
    border-bottom: 3px solid var(--f-bg-deep);
    padding: 12px 20px;
}
body.family-pyropunk .pyr-forge-dot {
    border-radius: 0;
    width: 8px; height: 18px;
    background: var(--f-bg-deep);
    opacity: 0.55;
}
body.family-pyropunk .pyr-forge-dot:nth-child(1) { opacity: 1; }
body.family-pyropunk .pyr-forge-dot:nth-child(2) { opacity: 0.8; }
body.family-pyropunk .pyr-forge-title {
    color: var(--f-accent-ink);
    font-family: var(--f-display);
    letter-spacing: 0.18em;
    font-size: 0.95em;
}
body.family-pyropunk .pyr-forge-body {
    padding: 26px 24px;
    background: repeating-linear-gradient(180deg, transparent 0 29px, rgba(255,90,31,0.05) 29px 58px);
}
body.family-pyropunk .pyr-line { padding: 3px 0; }
body.family-pyropunk .pyr-prompt { color: var(--f-second); text-shadow: 0 0 8px var(--f-second); }
body.family-pyropunk .pyr-out { color: var(--f-text-dim); }
body.family-pyropunk .pyr-cursor { color: var(--f-accent); }

body.family-pyropunk .pyr-compare { gap: 4px; }
body.family-pyropunk .pyr-compare-row {
    background: linear-gradient(90deg, rgba(212,35,26,0.18), transparent 50%, rgba(255,194,71,0.14));
    border-top: 2px solid var(--f-line-soft);
    border-bottom: none;
}
body.family-pyropunk .pyr-compare-arrow { color: var(--f-second); text-shadow: 0 0 12px var(--f-second); }
body.family-pyropunk .pyr-tag-fic { border-color: var(--f-alert); color: var(--f-accent-2); }
body.family-pyropunk .pyr-tag-real { border-color: var(--f-second); color: var(--f-second); }

body.family-pyropunk .pyr-questions li {
    background: rgba(212,35,26,0.16);
    border-left: 5px solid var(--f-accent);
    color: var(--f-second);
    font-family: var(--f-display);
    letter-spacing: 0.03em;
}
body.family-pyropunk .pyr-questions li::before { content: "▲ " !important; color: var(--f-accent); }

body.family-pyropunk .pyr-banner {
    background: radial-gradient(ellipse at 50% 120%, rgba(255,194,71,0.4), rgba(255,90,31,0.2) 40%, transparent 70%), var(--f-bg-deep);
    border-top: 5px solid var(--f-accent);
    border-bottom: 5px solid var(--f-second);
}
body.family-pyropunk .pyr-banner-line-1 { text-shadow: 0 0 40px rgba(255,90,31,0.7); }
body.family-pyropunk .pyr-banner-line-2 { color: var(--f-second); text-shadow: 0 0 50px rgba(255,194,71,0.8); }
body.family-pyropunk .pyr-banner-line-3 { color: var(--f-accent-2); }
body.family-pyropunk .pyr-banner-footer { color: var(--f-second); }

body.family-pyropunk #clapat-logo .black-logo { filter: invert(1) sepia(0.6) saturate(3) hue-rotate(335deg); }
body.family-pyropunk ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--f-second), var(--f-alert)); }