/* ============================================================================
   FROSTPUNK - "The Edict"
   ----------------------------------------------------------------------------
   Identity: a decree nailed to a frozen wall. Every container is a SHARD -
   clip-path with angled corners, never a rectangle, never a curve. Condensed
   capitals tracked out wide and cold. One warm colour only: the generator's
   ember, rationed. Frost crystals and steam drift across the page.
   Axis of difference: shard clip-paths · rationed warmth · tracked condensed
   ============================================================================ */

body.family-frostpunk {
    --f-bg:            #0c1620;
    --f-bg-alt:        #101c28;
    --f-bg-panel:      #142434;
    --f-bg-deep:       #070f16;

    --f-text:          #b9cbd8;
    --f-text-dim:      #6c8497;
    --f-head:          #e9f4fa;

    --f-accent:        #9fe6f4;   /* ice */
    --f-accent-2:      #d2f3fa;
    --f-accent-ink:    #08131c;
    --f-second:        #ff7a2e;   /* the generator. used sparingly. */
    --f-second-2:      #ffa163;
    --f-alert:         #ff7a2e;

    --f-line:          rgba(159, 230, 244, 0.3);
    --f-line-soft:     rgba(159, 230, 244, 0.13);
    --f-rule-w:        1px;

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

    --f-display-w:     300;
    --f-display-track: 0.22em;    /* cold, stretched, official */
    --f-display-case:  uppercase;

    --f-h1-size:       clamp(2.6em, 8vw, 6.4em);
    --f-h2-size:       clamp(1.7em, 3.4vw, 2.6em);
    --f-hero-track:    0.3em;
    --f-hero-justify:  center;
    --f-hero-text:     center;

    --f-body-size:     0.95em;
    --f-leading:       1.8;
    --f-measure:       64ch;

    --f-tag-font:      'IBM Plex Mono', monospace;
    --f-tag-size:      0.7em;
    --f-tag-track:     0.34em;
    --f-tag-w:         400;
    --f-mono-track:    0.18em;

    --f-page:          1180px;
    --f-gutter:        64px;
    --f-rhythm:        98px;
    --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:     58px;
    --f-card-cols:     repeat(6, 1fr);
    --f-tl-gutter:     100px;

    --f-glow:          0 0 26px rgba(159, 230, 244, 0.25);
    --f-text-glow:     0 0 18px rgba(159, 230, 244, 0.45);
    --f-panel-shadow:  0 0 34px rgba(159, 230, 244, 0.16);
    --f-lift:          -3px;

    --f-img-filter:        contrast(1.16) saturate(0.6) hue-rotate(175deg) brightness(0.8);
    --f-img-filter-hover:  contrast(1.24) saturate(0.8) hue-rotate(175deg) brightness(0.94);

    --f-vignette:      radial-gradient(ellipse at 50% 46%, transparent 50%, rgba(0, 8, 14, 0.72) 100%);
    /* frost crystal lattice, clearly drawn, plus low steam */
    --f-veil:
        repeating-linear-gradient(60deg,  transparent 0 30px, rgba(159, 230, 244, 0.065) 30px 31px),
        repeating-linear-gradient(-60deg, transparent 0 30px, rgba(159, 230, 244, 0.055) 30px 31px),
        repeating-linear-gradient(0deg,   transparent 0 52px, rgba(210, 243, 250, 0.035) 52px 53px),
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(210, 243, 250, 0.12), transparent 70%);
    --f-veil-blend:    screen;
    --f-veil-opacity:  0.9;

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

/* the steam layer rises */
body.family-frostpunk::after { animation: fp-steam 22s ease-in-out infinite alternate; }
@keyframes fp-steam {
    0%   { background-position: 0 0, 0 0, 0 0, 50% 100%; }
    100% { background-position: 0 0, 0 0, 0 0, 50% 82%; }
}

/* Everything is a shard. */
body.family-frostpunk .fp-card,
body.family-frostpunk .fp-work,
body.family-frostpunk .fp-author,
body.family-frostpunk .fp-edict,
body.family-frostpunk .fp-img-frame,
body.family-frostpunk .fp-hero-badge,
body.family-frostpunk .fp-section-tag {
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

body.family-frostpunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(60deg,  transparent 0 26px, rgba(159,230,244,0.07) 26px 27px),
        repeating-linear-gradient(-60deg, transparent 0 26px, rgba(159,230,244,0.06) 26px 27px),
        linear-gradient(180deg, rgba(12,22,32,0.55) 0%, rgba(12,22,32,0.14) 42%, var(--f-bg) 100%);
    z-index: 2;
}
body.family-frostpunk .hero-subtitle span { color: var(--f-accent) !important; letter-spacing: 0.5em; }
body.family-frostpunk .fp-hero-badge {
    background: rgba(159, 230, 244, 0.1);
    border: 1px solid var(--f-accent);
    padding: 9px 24px;
}
body.family-frostpunk .fp-hero-meta b { color: var(--f-second); }

/* - section tag: a stamped notice - */
body.family-frostpunk .fp-section-tag {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    padding: 6px 20px;
    font-weight: 500;
}
body.family-frostpunk .fp-h2 { line-height: 1.2; }
body.family-frostpunk .fp-lede { border-left: 2px solid var(--f-accent); padding-left: 26px; }

body.family-frostpunk .fp-manifesto-grid { gap: 0 34px; }
body.family-frostpunk .fp-manifesto-word { color: var(--f-head); text-shadow: 0 0 40px rgba(159,230,244,0.4); }
body.family-frostpunk .fp-manifesto-word.fp-ember { color: var(--f-second); text-shadow: 0 0 44px rgba(255,122,46,0.6); }
body.family-frostpunk .fp-manifesto-amp { color: var(--f-accent); font-size: 0.34em; }

body.family-frostpunk .fp-img-frame { border-color: var(--f-accent); }
body.family-frostpunk .fp-img-frame.fp-img-frame-ember { border-color: var(--f-second); box-shadow: 0 0 28px rgba(255,122,46,0.3); }
body.family-frostpunk .fp-img-frame figcaption {
    background: rgba(7, 15, 22, 0.94);
    border-top: 1px solid var(--f-accent);
    color: var(--f-accent);
}
body.family-frostpunk .fp-data-pill { background: rgba(159,230,244,0.07); border-color: var(--f-line); }
body.family-frostpunk .fp-data-pill b { color: var(--f-second); }
body.family-frostpunk .fp-callout {
    background: rgba(255, 122, 46, 0.1);
    border-left: 3px solid var(--f-second);
}
body.family-frostpunk .fp-callout-tag { color: var(--f-second); }

/* - chronology: a column of ice, notched - */
body.family-frostpunk .fp-timeline::before { width: 2px; background: linear-gradient(180deg, var(--f-accent), rgba(159,230,244,0.15)); }
body.family-frostpunk .fp-timeline li::before {
    border-radius: 0;
    width: 16px; height: 16px;
    background: var(--f-bg);
    border: 2px solid var(--f-accent);
    left: calc(var(--f-tl-gutter) - 7px);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
body.family-frostpunk .fp-tl-highlight::before { background: var(--f-second) !important; border-color: var(--f-second) !important; box-shadow: 0 0 20px var(--f-second); }
body.family-frostpunk .fp-tl-year {
    font-family: var(--f-display);
    font-size: 1.8em;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--f-accent);
}
body.family-frostpunk .fp-tl-body h4 { letter-spacing: 0.14em; font-size: 1.2em; }

body.family-frostpunk .fp-card { background: var(--f-bg-panel); border-color: var(--f-line-soft); }
body.family-frostpunk .fp-card-num { font-family: var(--f-mono); color: var(--f-second); }
body.family-frostpunk .fp-card h3 { letter-spacing: 0.14em; font-size: 1.2em; }
body.family-frostpunk .fp-card-tag { border-top-color: var(--f-line-soft); color: var(--f-accent); }

body.family-frostpunk .fp-pullquote {
    background: var(--f-bg-deep);
    border-top: 1px solid var(--f-accent);
    border-bottom: 1px solid var(--f-second);
}
body.family-frostpunk .fp-pullquote blockquote { text-shadow: 0 0 30px rgba(159,230,244,0.35); }
body.family-frostpunk .fp-pullquote-accent { color: var(--f-second); text-shadow: 0 0 26px rgba(255,122,46,0.5); }
body.family-frostpunk .fp-pullquote-marks { color: var(--f-accent); opacity: 0.45; }
body.family-frostpunk .fp-pullquote cite { color: var(--f-text-dim); }

body.family-frostpunk .fp-pills li { background: rgba(159,230,244,0.07); }
body.family-frostpunk .fp-gallery figure { border-color: var(--f-line-soft); }
body.family-frostpunk .fp-gallery figcaption { color: var(--f-accent); }

body.family-frostpunk .fp-author { background: var(--f-bg-panel); border-color: var(--f-line-soft); }
body.family-frostpunk .fp-author h3 { font-size: 1.6em; letter-spacing: 0.14em; }
body.family-frostpunk .fp-author-handle { color: var(--f-second); }
body.family-frostpunk .fp-author-quote { border-left: 3px solid var(--f-second); background: rgba(255,122,46,0.07); color: var(--f-second-2); }

body.family-frostpunk .fp-works-cat { letter-spacing: 0.42em; border-bottom-color: var(--f-line-soft); }
body.family-frostpunk .fp-work { background: var(--f-bg-panel); border-color: var(--f-line-soft); }
body.family-frostpunk .fp-work-byline { color: var(--f-second); }

/* --- SIGNATURE: the edict board ---
   A proclamation nailed up in the cold: heavy header rule, nail heads at the
   top corners, text set as numbered articles. */
body.family-frostpunk .fp-edict {
    background: linear-gradient(180deg, #16273a, #0e1a26);
    border: 1px solid var(--f-accent);
    box-shadow: var(--f-panel-shadow);
    margin-top: 50px;
    position: relative;
}
body.family-frostpunk .fp-edict::before,
body.family-frostpunk .fp-edict::after {
    content: "";
    position: absolute;
    top: 58px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #cfe6f2, #4a6377 60%, #24323d);
    z-index: 3;
}
body.family-frostpunk .fp-edict::before { left: 20px; }
body.family-frostpunk .fp-edict::after  { right: 20px; }
body.family-frostpunk .fp-edict-bar {
    background: var(--f-accent);
    border-bottom: none;
    padding: 12px 22px;
}
body.family-frostpunk .fp-edict-dot { border-radius: 0; width: 10px; height: 10px; background: var(--f-accent-ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
body.family-frostpunk .fp-edict-dot:nth-child(2) { background: var(--f-second); }
body.family-frostpunk .fp-edict-dot:nth-child(3) { background: var(--f-accent-ink); }
body.family-frostpunk .fp-edict-title {
    color: var(--f-accent-ink);
    font-family: var(--f-display);
    font-weight: 500;
    letter-spacing: 0.24em;
    font-size: 0.9em;
}
body.family-frostpunk .fp-edict-body { padding: 34px 40px; }
body.family-frostpunk .fp-line { padding: 7px 0; border-bottom: 1px solid rgba(159,230,244,0.08); }
body.family-frostpunk .fp-prompt {
    color: var(--f-second);
    font-family: var(--f-display);
    letter-spacing: 0.22em;
    font-weight: 400;
}
body.family-frostpunk .fp-out { color: var(--f-text-dim); }
body.family-frostpunk .fp-cursor { color: var(--f-second); }

body.family-frostpunk .fp-compare-row {
    background: var(--f-bg-panel);
    border-top: 1px solid var(--f-line-soft);
    border-bottom: 1px solid var(--f-line-soft);
}
body.family-frostpunk .fp-compare-arrow { color: var(--f-second); }
body.family-frostpunk .fp-tag-fic { border-color: var(--f-second); color: var(--f-second-2); }

body.family-frostpunk .fp-questions li {
    background: var(--f-bg-panel);
    border-left: 3px solid var(--f-second);
    color: var(--f-accent);
    font-family: var(--f-display);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1em;
}
body.family-frostpunk .fp-questions li::before { content: "§ " !important; color: var(--f-second); }

body.family-frostpunk .fp-banner {
    background: radial-gradient(ellipse at 50% 110%, rgba(255,122,46,0.28), transparent 60%), var(--f-bg-deep);
    border-top: 1px solid var(--f-accent);
    border-bottom: 1px solid var(--f-second);
}
body.family-frostpunk .fp-banner-line-2 { color: var(--f-second); text-shadow: 0 0 40px rgba(255,122,46,0.6); }
body.family-frostpunk .fp-banner-line-3 { color: var(--f-accent); }
body.family-frostpunk .fp-banner-footer { color: var(--f-accent); }

body.family-frostpunk #clapat-logo .black-logo { filter: invert(1) hue-rotate(175deg) brightness(1.08); }
body.family-frostpunk ::-webkit-scrollbar-thumb { background: var(--f-accent); }

@media (max-width: 900px) {
    body.family-frostpunk .fp-edict-body { padding: 26px 22px; }
    body.family-frostpunk .fp-edict::before,
    body.family-frostpunk .fp-edict::after { display: none; }
}