/* ============================================================================
   SPACEPUNK - "Instrument Readout"
   ----------------------------------------------------------------------------
   Identity: the only family with a MONOSPACED display face. Everything on the
   page is a gauge: corner-bracketed panels, channel IDs, telemetry rows, small
   type set dense and wide-tracked. Nothing is decorative - it all looks load-
   bearing. Starfield behind, reticle grid in front.
   Axis of difference: mono headings · corner brackets · dense small type · HUD
   ============================================================================ */

body.family-spacepunk {
    --f-bg:            #050a14;
    --f-bg-alt:        #08101e;
    --f-bg-panel:      #0a1524;
    --f-bg-deep:       #020610;

    --f-text:          #b8c8dc;
    --f-text-dim:      #63758f;
    --f-head:          #e4eef8;

    --f-accent:        #ffb347;   /* caution amber */
    --f-accent-2:      #ffd08a;
    --f-accent-ink:    #050a14;
    --f-second:        #6fc3ff;   /* instrument blue */
    --f-second-2:      #a8ddff;
    --f-alert:         #ff5f5f;

    --f-line:          rgba(111, 195, 255, 0.3);
    --f-line-soft:     rgba(111, 195, 255, 0.14);
    --f-rule-w:        1px;

    /* mono for EVERYTHING - this is the family's whole voice */
    --f-display:       'IBM Plex Mono', ui-monospace, monospace;
    --f-body:          'IBM Plex Mono', ui-monospace, monospace;
    --f-mono:          'IBM Plex Mono', ui-monospace, monospace;

    --f-display-w:     500;
    --f-display-track: 0.2em;
    --f-display-case:  uppercase;

    --f-h1-size:       clamp(2em, 6vw, 4.6em);   /* deliberately restrained */
    --f-h2-size:       clamp(1.3em, 2.4vw, 1.9em);
    --f-hero-track:    0.24em;
    --f-hero-justify:  flex-start;
    --f-hero-text:     left;

    --f-body-size:     0.86em;    /* dense readout */
    --f-leading:       1.75;
    --f-measure:       76ch;

    --f-tag-font:      'IBM Plex Mono', monospace;
    --f-tag-size:      0.68em;
    --f-tag-track:     0.32em;
    --f-tag-w:         500;
    --f-mono-track:    0.16em;

    --f-page:          1380px;
    --f-gutter:        52px;
    --f-rhythm:        84px;      /* tight - instruments are packed */
    --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:     44px;
    --f-card-cols:     repeat(6, 1fr);
    --f-card-pad:      22px 24px;
    --f-card-gap:      14px;
    --f-tl-gutter:     92px;

    --f-glow:          0 0 18px rgba(111, 195, 255, 0.28);
    --f-text-glow:     0 0 12px rgba(255, 179, 71, 0.5);
    --f-panel-shadow:  0 0 30px rgba(111, 195, 255, 0.16);
    --f-lift:          -2px;

    --f-img-filter:        contrast(1.15) saturate(0.85) brightness(0.78);
    --f-img-filter-hover:  contrast(1.25) saturate(1) brightness(0.92);

    --f-vignette:      radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,0.68) 100%);
    /* starfield + reticle graticule */
    --f-veil:
        radial-gradient(circle at 12% 22%, rgba(231,242,255,0.9) 0.6px, transparent 1.5px),
        radial-gradient(circle at 78% 14%, rgba(231,242,255,0.8) 0.6px, transparent 1.5px),
        radial-gradient(circle at 33% 68%, rgba(231,242,255,0.7) 0.6px, transparent 1.5px),
        radial-gradient(circle at 64% 82%, rgba(168,221,255,0.8) 0.6px, transparent 1.5px),
        radial-gradient(circle at 88% 56%, rgba(231,242,255,0.7) 0.5px, transparent 1.3px),
        repeating-linear-gradient(0deg,  transparent 0 119px, rgba(111,195,255,0.075) 119px 120px),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(111,195,255,0.06) 119px 120px);
    --f-veil-size:     220px 220px, 260px 260px, 300px 300px, 240px 240px, 280px 280px, auto, auto;
    --f-veil-blend:    screen;
    --f-veil-opacity:  0.95;

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

/* Corner brackets - the family's universal container treatment. */
body.family-spacepunk .sp-card,
body.family-spacepunk .sp-work,
body.family-spacepunk .sp-author,
body.family-spacepunk .sp-console,
body.family-spacepunk .sp-img-frame,
body.family-spacepunk .sp-compare-row {
    position: relative;
}
body.family-spacepunk .sp-card::after,
body.family-spacepunk .sp-work::after,
body.family-spacepunk .sp-author::after,
body.family-spacepunk .sp-img-frame::after,
body.family-spacepunk .sp-compare-row::after {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border: 1px solid var(--f-accent);
    clip-path: polygon(
        0 0, 14px 0, 14px 1px, 1px 1px, 1px 14px, 0 14px,
        0 100%, 14px 100%, 14px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 14px), 0 calc(100% - 14px),
        100% 100%, calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 14px), 100% calc(100% - 14px),
        100% 0, calc(100% - 14px) 0, calc(100% - 14px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 14px, 100% 14px
    );
    opacity: 0.55;
}

body.family-spacepunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg,  transparent 0 79px, rgba(111,195,255,0.08) 79px 80px),
        repeating-linear-gradient(90deg, transparent 0 79px, rgba(111,195,255,0.06) 79px 80px),
        linear-gradient(180deg, rgba(5,10,20,0.5) 0%, rgba(5,10,20,0.1) 42%, var(--f-bg) 100%);
    z-index: 2;
}
body.family-spacepunk .hero-subtitle span { color: var(--f-second) !important; letter-spacing: 0.5em; }
body.family-spacepunk .sp-hero-badge {
    background: var(--f-accent);
    color: var(--f-accent-ink);
    border: none;
    font-weight: 600;
    text-shadow: none;
    padding: 6px 18px;
}
body.family-spacepunk .sp-hero-meta b { color: var(--f-accent); }

/* - section tag: a channel identifier - */
body.family-spacepunk .sp-section-tag {
    color: var(--f-second);
    border: 1px solid var(--f-line);
    padding: 5px 14px;
    background: rgba(111, 195, 255, 0.07);
}
body.family-spacepunk .sp-h2 { color: var(--f-accent) !important; }
body.family-spacepunk .sp-h2::before {
    content: "▚ ";
    color: var(--f-second);
    letter-spacing: 0;
}
body.family-spacepunk .sp-lede { border-left: 2px solid var(--f-accent); padding-left: 22px; }

body.family-spacepunk .sp-manifesto-grid { gap: 0 26px; }
body.family-spacepunk .sp-manifesto-word { color: var(--f-head); }
body.family-spacepunk .sp-manifesto-word.sp-cyan { color: var(--f-second); text-shadow: 0 0 26px rgba(111,195,255,0.6); }
body.family-spacepunk .sp-manifesto-amp { color: var(--f-accent); font-size: 0.5em; }

body.family-spacepunk .sp-img-frame { border-color: var(--f-line); }
body.family-spacepunk .sp-img-frame.sp-img-frame-magenta { border-color: var(--f-accent); }
body.family-spacepunk .sp-img-frame figcaption {
    background: rgba(2, 6, 16, 0.92);
    border-top: 1px solid var(--f-accent);
    color: var(--f-accent);
}
/* telemetry rows, not pills */
body.family-spacepunk .sp-data-stack { flex-direction: column; gap: 0; }
body.family-spacepunk .sp-data-pill {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--f-line-soft);
    padding: 6px 2px;
    color: var(--f-accent-2);
}
body.family-spacepunk .sp-data-pill b { color: var(--f-text-dim); margin: 0; }
body.family-spacepunk .sp-callout { background: rgba(255, 179, 71, 0.08); border-left: 2px solid var(--f-accent); }

body.family-spacepunk .sp-timeline::before { width: 1px; background: var(--f-second); }
body.family-spacepunk .sp-timeline li::before {
    border-radius: 0;
    width: 9px; height: 9px;
    background: var(--f-second);
    border: none;
    left: calc(var(--f-tl-gutter) - 4px);
    box-shadow: 0 0 0 4px rgba(111,195,255,0.14);
}
body.family-spacepunk .sp-tl-highlight::before { background: var(--f-accent) !important; box-shadow: 0 0 0 5px rgba(255,179,71,0.22) !important; }
body.family-spacepunk .sp-tl-year { font-size: 1.1em; color: var(--f-accent); letter-spacing: 0.14em; }

body.family-spacepunk .sp-card { background: rgba(10, 21, 36, 0.7); border-color: var(--f-line-soft); }
body.family-spacepunk .sp-card-num { color: var(--f-second); }
body.family-spacepunk .sp-card h3 { font-size: 1.05em; color: var(--f-accent) !important; }
body.family-spacepunk .sp-card-tag { border-top: 1px solid var(--f-line-soft); color: var(--f-second); }

body.family-spacepunk .sp-pullquote {
    background: var(--f-bg-deep);
    border-top: 1px solid var(--f-accent);
    border-bottom: 1px solid var(--f-second);
    padding-block: 90px;
}
body.family-spacepunk .sp-pullquote blockquote { font-size: clamp(1.2em, 2.6vw, 2em); }
body.family-spacepunk .sp-pullquote-accent { color: var(--f-accent); }
body.family-spacepunk .sp-pullquote-marks { color: var(--f-second); font-size: 5em; opacity: 0.4; }
body.family-spacepunk .sp-pullquote cite { color: var(--f-second); }

body.family-spacepunk .sp-pills li { border-color: var(--f-line); color: var(--f-second-2); background: rgba(111,195,255,0.06); }
body.family-spacepunk .sp-gallery { gap: 8px; }
body.family-spacepunk .sp-gallery figure { border-color: var(--f-line-soft); }
body.family-spacepunk .sp-gallery figcaption { color: var(--f-accent); }

body.family-spacepunk .sp-author { background: rgba(10, 21, 36, 0.7); border-color: var(--f-line-soft); }
body.family-spacepunk .sp-author h3 { font-size: 1.3em; color: var(--f-accent) !important; }
body.family-spacepunk .sp-author-handle { color: var(--f-second); }
body.family-spacepunk .sp-author-quote { border-left: 2px solid var(--f-accent); background: rgba(255,179,71,0.06); color: var(--f-accent-2); }

body.family-spacepunk .sp-works-cat { color: var(--f-second) !important; border-bottom-color: var(--f-line-soft); }
body.family-spacepunk .sp-work { background: rgba(10, 21, 36, 0.7); border-color: var(--f-line-soft); }
body.family-spacepunk .sp-work-meta h4 { font-size: 0.95em; color: var(--f-accent) !important; }
body.family-spacepunk .sp-work-byline { color: var(--f-second); font-size: 0.76em; }

/* --- SIGNATURE: the flight console ---
   A status strip with live channel lamps above a fixed-pitch telemetry dump. */
body.family-spacepunk .sp-console {
    background: var(--f-bg-deep);
    border: 1px solid var(--f-second);
    box-shadow: var(--f-panel-shadow), inset 0 0 50px rgba(111,195,255,0.05);
    margin-top: 44px;
}
body.family-spacepunk .sp-console-bar {
    background: rgba(111, 195, 255, 0.12);
    border-bottom: 1px solid var(--f-second);
    padding: 9px 16px;
}
body.family-spacepunk .sp-console-dot {
    border-radius: 0;
    width: 18px; height: 8px;
    background: var(--f-second);
    box-shadow: 0 0 8px var(--f-second);
}
body.family-spacepunk .sp-console-dot:nth-child(2) { background: var(--f-accent); box-shadow: 0 0 8px var(--f-accent); animation: sp-pulse 2.4s ease-in-out infinite; }
body.family-spacepunk .sp-console-dot:nth-child(3) { background: var(--f-alert); box-shadow: 0 0 8px var(--f-alert); }
@keyframes sp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
body.family-spacepunk .sp-console-title { color: var(--f-second); }
body.family-spacepunk .sp-console-body {
    padding: 20px 18px;
    font-size: 0.9em;
    background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(111,195,255,0.035) 27px 54px);
}
body.family-spacepunk .sp-line { padding: 1px 0; }
body.family-spacepunk .sp-prompt { color: var(--f-accent); }
body.family-spacepunk .sp-out { color: var(--f-text-dim); }
body.family-spacepunk .sp-cursor { color: var(--f-accent); }

body.family-spacepunk .sp-compare { gap: 8px; }
body.family-spacepunk .sp-compare-row {
    background: rgba(10, 21, 36, 0.6);
    border-top: 1px solid var(--f-line-soft);
    border-bottom: none;
    padding: 20px 26px;
}
body.family-spacepunk .sp-compare-arrow { color: var(--f-accent); font-size: 1.2em; }
body.family-spacepunk .sp-tag-fic { border-color: var(--f-second); color: var(--f-second); }
body.family-spacepunk .sp-tag-real { border-color: var(--f-accent); color: var(--f-accent); }

body.family-spacepunk .sp-questions li {
    background: rgba(111,195,255,0.07);
    border-left: 2px solid var(--f-second);
    font-size: 0.95em;
    color: var(--f-second-2);
}
body.family-spacepunk .sp-questions li::before { content: "? " !important; color: var(--f-accent); }

body.family-spacepunk .sp-banner {
    background: var(--f-bg-deep);
    border-top: 1px solid var(--f-accent);
    border-bottom: 1px solid var(--f-second);
}
body.family-spacepunk .sp-banner-line-1 { font-size: clamp(1.6em, 4vw, 2.8em); }
body.family-spacepunk .sp-banner-line-2 { font-size: clamp(1.9em, 4.6vw, 3.4em); color: var(--f-accent); text-shadow: 0 0 26px rgba(255,179,71,0.5); }
body.family-spacepunk .sp-banner-line-3 { color: var(--f-second); }
body.family-spacepunk .sp-banner-footer { color: var(--f-accent); }

body.family-spacepunk #clapat-logo .black-logo { filter: invert(1) sepia(0.3) hue-rotate(180deg) brightness(1.1); }
body.family-spacepunk ::-webkit-scrollbar-thumb { background: var(--f-second); }

@media (max-width: 900px) {
    body.family-spacepunk .sp-data-stack { flex-direction: column; }
}