/* ============================================================================
   SOLARPUNK - "Seed Almanac"
   ----------------------------------------------------------------------------
   Identity: a garden catalogue printed on recycled stock. The second light
   family, but the opposite of Steampunk's symmetry: soft rounded humanist
   letterforms, ARCHED tops on every frame (a greenhouse window, a trellis),
   generous rounding, woven fibre texture, and daylight instead of lamplight.
   Axis of difference: light ground · arch tops · rounded humanist · woven fibre
   ============================================================================ */

body.family-solarpunk {
    --f-bg:            #f3efe0;
    --f-bg-alt:        #eae5d2;
    --f-bg-panel:      #fbf8ee;
    --f-bg-deep:       #1c2a1e;   /* deep leaf, for inverted blocks */

    --f-text:          #35402f;
    --f-text-dim:      #6b7a62;
    --f-head:          #1f2a1c;

    --f-accent:        #3f8b54;   /* leaf */
    --f-accent-2:      #56a86c;
    --f-accent-ink:    #f7fbf2;
    --f-second:        #d99a1f;   /* sun */
    --f-second-2:      #eab748;
    --f-alert:         #c05f3c;   /* terracotta */

    --f-line:          rgba(63, 139, 84, 0.38);
    --f-line-soft:     rgba(53, 64, 47, 0.16);
    --f-rule-w:        2px;

    --f-display:       'Quicksand', system-ui, sans-serif;
    --f-body:          'Quicksand', system-ui, sans-serif;
    --f-mono:          'Quicksand', system-ui, sans-serif;

    --f-display-w:     600;
    --f-display-track: 0.005em;
    --f-display-case:  none;

    --f-h1-size:       clamp(3em, 9.5vw, 8em);
    --f-h2-size:       clamp(1.9em, 3.8vw, 3em);
    --f-hero-track:    0.01em;
    --f-hero-justify:  center;
    --f-hero-text:     center;

    --f-body-size:     1.02em;
    --f-leading:       1.85;
    --f-measure:       66ch;

    --f-tag-font:      'Quicksand', system-ui, sans-serif;
    --f-tag-size:      0.78em;
    --f-tag-track:     0.24em;
    --f-tag-w:         600;
    --f-mono-track:    0.1em;

    --f-page:          1200px;
    --f-gutter:        66px;
    --f-rhythm:        108px;
    --f-align:         start;

    --f-r:             18px;
    --f-r-lg:          26px;
    --f-r-frame:       220px 220px 20px 20px;   /* the arch */
    --f-r-pill:        999px;

    --f-split:         1fr 1fr;
    --f-split-gap:     62px;
    --f-card-cols:     repeat(6, 1fr);
    --f-tl-gutter:     104px;

    --f-glow:          0 10px 30px rgba(63, 139, 84, 0.18);
    --f-text-glow:     none;
    --f-panel-shadow:  0 14px 36px rgba(53, 64, 47, 0.14);
    --f-lift:          -5px;

    --f-img-filter:        contrast(1.03) saturate(1.2) brightness(1.03);
    --f-img-filter-hover:  contrast(1.08) saturate(1.35) brightness(1.08);
    --f-img-scale:         1.04;

    --f-vignette:      radial-gradient(ellipse at 50% 30%, transparent 52%, rgba(120, 100, 44, 0.14) 100%);
    /* woven paper fibre + a shaft of daylight */
    --f-veil:
        repeating-linear-gradient(90deg, transparent 0 3px, rgba(53, 64, 47, 0.035) 3px 4px),
        repeating-linear-gradient(0deg,  transparent 0 3px, rgba(53, 64, 47, 0.03) 3px 4px),
        linear-gradient(122deg, rgba(217, 154, 31, 0.16) 0 60px, transparent 60px 180px, rgba(217, 154, 31, 0.1) 180px 220px, transparent 220px);
    --f-veil-blend:    multiply;
    --f-veil-opacity:  0.85;

    /* Light ground: the nav must stay readable over paper, not just
       over the dark cover plate. A deeper scrim carries it. */
    --f-header-scrim:  linear-gradient(to bottom, rgba(24, 38, 26, 0.94) 0%, rgba(24, 38, 26, 0.78) 48%, rgba(24, 38, 26, 0.3) 80%, transparent 100%);

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

/* The hero image is the only dark thing; it fades up into daylight. */
body.family-solarpunk #hero-bg-image { filter: contrast(1.05) saturate(1.25) brightness(0.92); mix-blend-mode: normal; }
body.family-solarpunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(243,239,224,0.3) 0%, rgba(243,239,224,0.05) 35%, var(--f-bg) 100%);
    z-index: 2;
}
body.family-solarpunk .hero-title span { color: #f7fbf2 !important; text-shadow: 0 4px 30px rgba(28,42,30,0.55); }
body.family-solarpunk .hero-subtitle span { color: var(--f-second-2) !important; letter-spacing: 0.3em; }
body.family-solarpunk .slr-hero-badge {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    border: none;
    border-radius: 999px;
    padding: 9px 26px;
    font-weight: 600;
    text-shadow: none;
}
body.family-solarpunk .slr-hero-meta { color: #e6ead9; }
body.family-solarpunk .slr-hero-meta b { color: var(--f-second-2); }

/* - section tag: a plant label on a stake - */
body.family-solarpunk .slr-section-tag {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    border-radius: 999px 999px 999px 4px;
    padding: 7px 22px;
}
body.family-solarpunk .slr-h2 { color: var(--f-head) !important; }
body.family-solarpunk .slr-lede {
    border-left: 4px solid var(--f-accent);
    border-radius: 0 20px 20px 0;
    padding: 6px 0 6px 26px;
}

body.family-solarpunk .slr-manifesto-grid { gap: 0 30px; }
body.family-solarpunk .slr-manifesto-word { color: var(--f-head); }
body.family-solarpunk .slr-manifesto-word.slr-gold { color: var(--f-second); }
body.family-solarpunk .slr-manifesto-amp { color: var(--f-accent); font-size: 0.42em; }

/* - plates arch like a greenhouse light - */
body.family-solarpunk .slr-img-frame {
    border: 3px solid var(--f-accent);
    border-radius: 220px 220px 20px 20px;
    background: var(--f-bg-panel);
    box-shadow: var(--f-glow);
}
body.family-solarpunk .slr-img-frame.slr-img-frame-sky { border-color: var(--f-second); }
body.family-solarpunk .slr-img-frame figcaption {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    border: none;
    border-radius: 0 999px 0 20px;
    padding: 8px 22px 8px 16px;
}
body.family-solarpunk .slr-data-pill {
    background: var(--f-bg-panel);
    border: 2px solid var(--f-line);
    color: var(--f-text);
}
body.family-solarpunk .slr-data-pill b { color: var(--f-accent); }
body.family-solarpunk .slr-callout {
    background: rgba(217, 154, 31, 0.14);
    border-left: 4px solid var(--f-second);
    border-radius: 0 26px 26px 0;
}
body.family-solarpunk .slr-callout-tag { color: var(--f-alert); }

/* - chronology: a growing vine - */
body.family-solarpunk .slr-timeline::before {
    width: 3px;
    background: linear-gradient(180deg, var(--f-second), var(--f-accent));
    border-radius: 999px;
}
body.family-solarpunk .slr-timeline li::before {
    width: 18px; height: 18px;
    background: var(--f-bg);
    border: 3px solid var(--f-accent);
    /* a leaf, not a dot */
    border-radius: 100% 0 100% 0;
    left: calc(var(--f-tl-gutter) - 8px);
}
body.family-solarpunk .slr-tl-highlight::before { background: var(--f-second) !important; border-color: var(--f-second) !important; }
body.family-solarpunk .slr-tl-year { font-size: 1.7em; font-weight: 600; color: var(--f-accent); }

body.family-solarpunk .slr-card {
    background: var(--f-bg-panel);
    border: 2px solid var(--f-line-soft);
    border-radius: 26px 26px 26px 4px;
}
body.family-solarpunk .slr-card:hover { border-color: var(--f-accent); box-shadow: 0 16px 34px rgba(53,64,47,0.16); }
body.family-solarpunk .slr-card-num {
    display: inline-block;
    background: rgba(63, 139, 84, 0.14);
    color: var(--f-accent);
    border-radius: 999px;
    padding: 3px 14px;
    font-weight: 700;
}
body.family-solarpunk .slr-card h3 { font-size: 1.35em; }
body.family-solarpunk .slr-card-tag { border-top: 2px dotted var(--f-line); color: var(--f-alert); }

body.family-solarpunk .slr-pullquote {
    background: var(--f-bg-deep);
    border: none;
    border-radius: 40px;
    margin-inline: var(--f-gutter);
}
body.family-solarpunk .slr-pullquote blockquote { color: #f4f8ec; }
body.family-solarpunk .slr-pullquote-marks { color: var(--f-second); opacity: 0.55; }
body.family-solarpunk .slr-pullquote-accent { color: var(--f-second-2); }
body.family-solarpunk .slr-pullquote cite { color: var(--f-accent-2); }

body.family-solarpunk .slr-pills li { background: rgba(63,139,84,0.14); border: none; color: var(--f-accent); font-weight: 600; }
body.family-solarpunk .slr-gallery figure { border: 3px solid var(--f-line-soft); border-radius: 20px; }
body.family-solarpunk .slr-gallery figure.slr-g-1 { border-radius: 160px 160px 20px 20px; }
body.family-solarpunk .slr-gallery figcaption { background: var(--f-bg-panel); color: var(--f-head); padding: 4px 12px; border-radius: 999px; }

body.family-solarpunk .slr-author {
    background: var(--f-bg-panel);
    border: 2px solid var(--f-line-soft);
    border-radius: 36px;
}
body.family-solarpunk .slr-author-avatar { color: var(--f-accent); }
body.family-solarpunk .slr-author h3 { font-size: 1.9em; }
body.family-solarpunk .slr-author-handle { color: var(--f-second); font-weight: 600; }
body.family-solarpunk .slr-author-quote {
    border-left: 4px solid var(--f-second);
    background: rgba(217,154,31,0.12);
    border-radius: 0 22px 22px 0;
    color: var(--f-text);
}

body.family-solarpunk .slr-works-cat {
    background: rgba(63,139,84,0.14);
    color: var(--f-accent) !important;
    border: none;
    border-radius: 999px;
    padding: 10px 26px;
    display: inline-block;
}
body.family-solarpunk .slr-work { background: var(--f-bg-panel); border: 2px solid var(--f-line-soft); border-radius: 24px; }
body.family-solarpunk .slr-work-cover { background: var(--f-bg-alt); border-bottom: 2px solid var(--f-line-soft); }
body.family-solarpunk .slr-work-byline { color: var(--f-accent); font-weight: 600; }

/* --- SIGNATURE: the almanac ---
   A seed-catalogue page: a seasonal dial, sowing rows, and a dotted margin. */
body.family-solarpunk .slr-almanac {
    background:
        repeating-linear-gradient(180deg, transparent 0 35px, rgba(63, 139, 84, 0.055) 35px 70px),
        var(--f-bg-panel);
    border: 3px solid var(--f-accent);
    border-radius: 30px;
    box-shadow: var(--f-panel-shadow);
    margin-top: 52px;
    position: relative;
}
body.family-solarpunk .slr-almanac::before {
    content: "";
    position: absolute;
    top: 56px; bottom: 18px; left: 66px;
    width: 0;
    border-left: 2px dotted rgba(192, 95, 60, 0.45);
}
body.family-solarpunk .slr-almanac-bar {
    background: var(--f-accent);
    border-bottom: none;
    padding: 13px 24px;
    border-radius: 26px 26px 0 0;
}
/* the four seasons as quarter-filled discs */
body.family-solarpunk .slr-almanac-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--f-accent-ink);
    opacity: 0.75;
}
body.family-solarpunk .slr-almanac-dot:nth-child(1) { background: var(--f-second-2); opacity: 1; }
body.family-solarpunk .slr-almanac-dot:nth-child(2) { background: var(--f-alert); opacity: 1; }
body.family-solarpunk .slr-almanac-dot:nth-child(3) { background: var(--f-bg-panel); opacity: 1; }
body.family-solarpunk .slr-almanac-title { color: var(--f-accent-ink); font-weight: 700; }
body.family-solarpunk .slr-almanac-body {
    padding: 18px 26px 22px 88px;
    line-height: 35px;
    color: var(--f-text);
}
body.family-solarpunk .slr-line { padding: 0; }
body.family-solarpunk .slr-prompt { color: var(--f-alert); font-weight: 700; }
body.family-solarpunk .slr-out { color: var(--f-text-dim); padding-left: 0; margin: 0; }
body.family-solarpunk .slr-cursor { color: var(--f-accent); }
body.family-solarpunk .slr-almanac-footer,
body.family-solarpunk .slr-almanac-folio {
    background: rgba(63,139,84,0.1);
    border-top: 2px dotted var(--f-line);
    color: var(--f-text-dim);
    border-radius: 0 0 26px 26px;
    padding-left: 88px;
}

body.family-solarpunk .slr-compare-row {
    background: var(--f-bg-panel);
    border: 2px solid var(--f-line-soft);
    border-radius: 22px;
}
body.family-solarpunk .slr-compare-arrow { color: var(--f-accent); }
body.family-solarpunk .slr-tag-fic { background: rgba(192,95,60,0.16); border: none; color: var(--f-alert); }
body.family-solarpunk .slr-tag-real { background: rgba(63,139,84,0.16); border: none; color: var(--f-accent); }

body.family-solarpunk .slr-questions li {
    background: var(--f-bg-panel);
    border-left: 4px solid var(--f-second);
    border-radius: 0 24px 24px 0;
    color: var(--f-head);
    font-weight: 500;
}
body.family-solarpunk .slr-questions li::before { content: "❧ " !important; color: var(--f-accent); }

body.family-solarpunk .slr-banner {
    background: var(--f-bg-deep);
    border-top: none;
    border-bottom: none;
}
body.family-solarpunk .slr-banner-line-1 { color: #f4f8ec; }
body.family-solarpunk .slr-banner-line-2 { color: var(--f-second-2); }
body.family-solarpunk .slr-banner-line-3 { color: var(--f-accent-2); }
body.family-solarpunk .slr-banner-footer { color: var(--f-second-2); }

/* Header sits on the light ground once you scroll; keep both states legible. */
body.family-solarpunk .flexnav > li > a,
body.family-solarpunk .flexnav > li > a .before-span span { color: #f2f6ea !important; }
body.family-solarpunk .flexnav > li:hover > a,
body.family-solarpunk .flexnav > li > a.active,
body.family-solarpunk .flexnav > li > a.active .before-span span { color: var(--f-second-2) !important; }
body.family-solarpunk .flexnav li ul,
body.family-solarpunk .altpunk-mega-menu { background: var(--f-bg-deep) !important; border-color: var(--f-accent); border-radius: 18px; }
body.family-solarpunk .flexnav li ul li a,
body.family-solarpunk .altpunk-mega-menu a { color: #eef3e6 !important; }
body.family-solarpunk .altpunk-mega-title { color: var(--f-second-2) !important; }
body.family-solarpunk #clapat-logo .black-logo { filter: invert(1) sepia(0.4) hue-rotate(60deg) saturate(1.2); }
body.family-solarpunk ::-webkit-scrollbar-track { background: var(--f-bg-alt); }
body.family-solarpunk ::-webkit-scrollbar-thumb { background: var(--f-accent); border-radius: 999px; }

@media (max-width: 900px) {
    body.family-solarpunk .slr-almanac::before { display: none; }
    body.family-solarpunk .slr-almanac-body,
    body.family-solarpunk .slr-almanac-footer,
    body.family-solarpunk .slr-almanac-folio { padding-left: 24px; }
    body.family-solarpunk .slr-pullquote { margin-inline: 0; border-radius: 0; }
}