/* ============================================================================
   APOCAPUNK - "Salvage Log"
   ----------------------------------------------------------------------------
   Identity: the only family with a BROKEN grid. Sections are nudged off-axis,
   cards sit at slight rotations, frames have torn edges instead of borders, and
   things are held together with tape. Typewriter throughout - the last working
   machine. Dust, scratches and rust bleed sit over everything.
   Axis of difference: deliberate misalignment · torn edges · tape · typewriter
   ============================================================================ */

body.family-apocapunk {
    --f-bg:            #14100c;
    --f-bg-alt:        #1a1410;
    --f-bg-panel:      #221a12;
    --f-bg-deep:       #0c0906;

    --f-text:          #cdbca3;
    --f-text-dim:      #8d7a62;
    --f-head:          #f0e6d6;   /* bone */

    --f-accent:        #e8852a;   /* rust */
    --f-accent-2:      #ffae5e;
    --f-accent-ink:    #14100c;
    --f-second:        #f5c518;   /* hazard yellow */
    --f-second-2:      #ffe27a;
    --f-alert:         #c0392b;   /* dried blood */

    --f-line:          rgba(232, 133, 42, 0.4);
    --f-line-soft:     rgba(205, 188, 163, 0.16);
    --f-rule-w:        1px;
    --f-rule-style:    dashed;     /* nothing here was cut cleanly */

    --f-display:       'Space Mono', ui-monospace, monospace;
    --f-body:          'Space Mono', ui-monospace, monospace;
    --f-mono:          'Space Mono', ui-monospace, monospace;

    --f-display-w:     700;
    --f-display-track: -0.02em;
    --f-display-case:  uppercase;

    --f-h1-size:       clamp(2.6em, 8.5vw, 6.8em);
    --f-h2-size:       clamp(1.7em, 3.4vw, 2.6em);
    --f-hero-track:    -0.01em;
    --f-hero-justify:  flex-start;
    --f-hero-text:     left;

    --f-body-size:     0.88em;
    --f-leading:       1.85;
    --f-measure:       64ch;

    --f-tag-font:      'Space Mono', monospace;
    --f-tag-size:      0.72em;
    --f-tag-track:     0.2em;
    --f-tag-w:         700;
    --f-mono-track:    0.1em;

    --f-page:          1260px;
    --f-gutter:        58px;
    --f-rhythm:        94px;
    --f-align:         start;

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

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

    --f-glow:          none;
    --f-text-glow:     none;
    --f-panel-shadow:  6px 8px 24px rgba(0,0,0,0.6);
    --f-lift:          -3px;

    --f-img-filter:        sepia(0.5) contrast(1.28) saturate(0.8) brightness(0.78);
    --f-img-filter-hover:  sepia(0.3) contrast(1.38) saturate(1) brightness(0.9);

    --f-vignette:      radial-gradient(ellipse at 50% 46%, transparent 44%, rgba(0,0,0,0.78) 100%);
    /* dust, scratches, rust bleed - grubby and clearly present */
    --f-veil:
        repeating-linear-gradient(93deg,  transparent 0 140px, rgba(0,0,0,0.2) 140px 141px),
        repeating-linear-gradient(87deg,  transparent 0 210px, rgba(0,0,0,0.16) 210px 211px),
        radial-gradient(circle at 1px 1px, rgba(205,188,163,0.11) 0.7px, transparent 1.4px),
        radial-gradient(ellipse 40% 30% at 12% 18%, rgba(232, 133, 42, 0.16), transparent 70%),
        radial-gradient(ellipse 35% 40% at 88% 76%, rgba(192, 57, 43, 0.14), transparent 70%);
    --f-veil-size:     auto, auto, 3px 3px, auto, auto;
    --f-veil-blend:    normal;
    --f-veil-opacity:  0.75;

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

/* Nothing sits straight. Sections drift off the centre line. */
body.family-apocapunk .ap-section:nth-of-type(odd)  { transform: translateX(-9px); }
body.family-apocapunk .ap-section:nth-of-type(even) { transform: translateX(11px); }

body.family-apocapunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.3) 0.7px, transparent 1.4px),
        linear-gradient(180deg, rgba(20,16,12,0.6) 0%, rgba(20,16,12,0.15) 42%, var(--f-bg) 100%);
    background-size: 3px 3px, auto;
    z-index: 2;
}
body.family-apocapunk .hero-title span { color: var(--f-head) !important; }
body.family-apocapunk .hero-subtitle span { color: var(--f-second) !important; letter-spacing: 0.26em; }
/* the badge is a strip of tape */
body.family-apocapunk .ap-hero-badge {
    background: rgba(245, 197, 24, 0.82);
    color: var(--f-accent-ink);
    border: none;
    text-shadow: none;
    transform: rotate(-1.4deg);
    padding: 8px 24px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.45);
}
body.family-apocapunk .ap-hero-meta b { color: var(--f-accent); }

/* - section tag: stencilled on, slightly crooked - */
body.family-apocapunk .ap-section-tag {
    background: var(--f-alert);
    color: var(--f-head);
    padding: 5px 16px;
    transform: rotate(-0.8deg);
}
body.family-apocapunk .ap-h2 { color: var(--f-head) !important; }
body.family-apocapunk .ap-lede {
    border-left: 3px dashed var(--f-accent);
    padding-left: 24px;
}

body.family-apocapunk .ap-manifesto-grid { gap: 0 22px; }
body.family-apocapunk .ap-manifesto-word { color: var(--f-head); }
body.family-apocapunk .ap-manifesto-word.ap-rust { color: var(--f-accent); }
body.family-apocapunk .ap-manifesto-word:nth-child(1) { transform: rotate(-1.2deg); }
body.family-apocapunk .ap-manifesto-word:nth-child(3) { transform: rotate(0.9deg); }
body.family-apocapunk .ap-manifesto-amp { color: var(--f-second); font-size: 0.4em; }

/* - plates: torn out of something else, taped down - */
body.family-apocapunk .ap-img-frame {
    border: none;
    background: var(--f-bg-panel);
    padding: 8px;
    transform: rotate(-1deg);
    box-shadow: var(--f-panel-shadow);
    /* the torn edge */
    -webkit-mask-image: linear-gradient(#000, #000);
    clip-path: polygon(
        0 2%, 4% 0, 12% 2%, 23% 0.5%, 37% 2%, 51% 0, 66% 1.6%, 80% 0.4%, 92% 2%, 100% 0.6%,
        99% 14%, 100% 32%, 98.6% 51%, 100% 68%, 99% 86%, 100% 98%,
        88% 100%, 72% 98.4%, 57% 100%, 41% 98.6%, 26% 100%, 11% 98.5%, 0 100%,
        1.2% 82%, 0 64%, 1.4% 46%, 0 28%, 1% 12%
    );
}
body.family-apocapunk .ap-img-frame.ap-img-frame-toxic { transform: rotate(1.2deg); }
/* the tape holding it */
body.family-apocapunk .ap-img-frame::after {
    content: "";
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%) rotate(2.5deg);
    width: 92px; height: 26px;
    background: rgba(240, 230, 214, 0.2);
    border-left: 1px dashed rgba(240,230,214,0.3);
    border-right: 1px dashed rgba(240,230,214,0.3);
    z-index: 5;
}
body.family-apocapunk .ap-img-frame figcaption {
    background: rgba(12, 9, 6, 0.92);
    border-top: 1px dashed var(--f-accent);
    color: var(--f-second);
}
body.family-apocapunk .ap-data-pill {
    background: rgba(232,133,42,0.08);
    border: 1px dashed var(--f-line);
    transform: rotate(-0.6deg);
}
body.family-apocapunk .ap-data-pill:nth-child(even) { transform: rotate(0.7deg); }
body.family-apocapunk .ap-data-pill b { color: var(--f-second); }
body.family-apocapunk .ap-callout {
    background: rgba(192, 57, 43, 0.18);
    border-left: 4px solid var(--f-alert);
    transform: rotate(-0.4deg);
}
body.family-apocapunk .ap-callout-tag { color: var(--f-second); }

/* - chronology: a scratched tally, not a rail - */
body.family-apocapunk .ap-timeline::before {
    width: 3px;
    background: repeating-linear-gradient(180deg, var(--f-accent) 0 14px, transparent 14px 22px);
}
body.family-apocapunk .ap-timeline li::before {
    border-radius: 0;
    width: 16px; height: 16px;
    background: var(--f-bg);
    border: 2px dashed var(--f-accent);
    left: calc(var(--f-tl-gutter) - 7px);
    transform: rotate(12deg);
}
body.family-apocapunk .ap-tl-highlight::before { background: var(--f-alert) !important; }
body.family-apocapunk .ap-tl-year { font-size: 1.5em; font-weight: 700; color: var(--f-second); }

/* - pillars: scavenged scraps pinned to a board - */
body.family-apocapunk .ap-card {
    background: var(--f-bg-panel);
    border: 1px dashed var(--f-line-soft);
    box-shadow: var(--f-panel-shadow);
}
body.family-apocapunk .ap-card:nth-child(odd)  { transform: rotate(-0.8deg); }
body.family-apocapunk .ap-card:nth-child(even) { transform: rotate(0.7deg); }
body.family-apocapunk .ap-card:hover { transform: rotate(0deg) translateY(-3px); border-color: var(--f-accent); }
body.family-apocapunk .ap-card-num { color: var(--f-alert); font-weight: 700; }
body.family-apocapunk .ap-card h3 { font-size: 1.2em; }
body.family-apocapunk .ap-card-tag { border-top: 1px dashed var(--f-line); color: var(--f-second); }

body.family-apocapunk .ap-pullquote {
    background: var(--f-bg-deep);
    border-top: 2px dashed var(--f-accent);
    border-bottom: 2px dashed var(--f-alert);
}
body.family-apocapunk .ap-pullquote blockquote { transform: rotate(-0.5deg); }
body.family-apocapunk .ap-pullquote-accent { color: var(--f-accent); }
body.family-apocapunk .ap-pullquote-marks { color: var(--f-alert); opacity: 0.6; }
body.family-apocapunk .ap-pullquote cite { color: var(--f-second); }

body.family-apocapunk .ap-pills li { background: rgba(245,197,24,0.14); border: 1px dashed var(--f-second); color: var(--f-second); }
body.family-apocapunk .ap-gallery figure { border: 1px dashed var(--f-line-soft); }
body.family-apocapunk .ap-gallery figure:nth-child(3n) { transform: rotate(-0.8deg); }
body.family-apocapunk .ap-gallery figcaption { color: var(--f-second); }

body.family-apocapunk .ap-author {
    background: var(--f-bg-panel);
    border: 1px dashed var(--f-line-soft);
    box-shadow: var(--f-panel-shadow);
    transform: rotate(-0.5deg);
}
body.family-apocapunk .ap-author-right { transform: rotate(0.6deg); }
body.family-apocapunk .ap-author h3 { font-size: 1.6em; }
body.family-apocapunk .ap-author-handle { color: var(--f-second); }
body.family-apocapunk .ap-author-quote { border-left: 3px dashed var(--f-second); background: rgba(245,197,24,0.07); color: var(--f-second-2); }

body.family-apocapunk .ap-works-cat { border-bottom: 1px dashed var(--f-line); color: var(--f-second) !important; }
body.family-apocapunk .ap-work { background: var(--f-bg-panel); border: 1px dashed var(--f-line-soft); }
body.family-apocapunk .ap-work:nth-child(even) { transform: rotate(0.5deg); }
body.family-apocapunk .ap-work-byline { color: var(--f-accent); }

/* --- SIGNATURE: the field log ---
   A water-stained notebook page, taped at the corner, written by hand-machine. */
body.family-apocapunk .ap-fieldlog {
    background:
        radial-gradient(ellipse 30% 24% at 82% 14%, rgba(140, 96, 40, 0.28), transparent 70%),
        repeating-linear-gradient(180deg, transparent 0 29px, rgba(205, 188, 163, 0.08) 29px 30px),
        var(--f-bg-panel);
    border: 1px dashed var(--f-accent);
    box-shadow: var(--f-panel-shadow);
    margin-top: 46px;
    transform: rotate(-0.6deg);
    position: relative;
}
/* tape across the top-left corner */
body.family-apocapunk .ap-fieldlog::before {
    content: "";
    position: absolute;
    top: -14px; left: -18px;
    width: 110px; height: 28px;
    transform: rotate(-38deg);
    background: rgba(240, 230, 214, 0.22);
    border-top: 1px dashed rgba(240,230,214,0.3);
    border-bottom: 1px dashed rgba(240,230,214,0.3);
    z-index: 4;
}
body.family-apocapunk .ap-fieldlog-bar {
    background: rgba(232, 133, 42, 0.14);
    border-bottom: 1px dashed var(--f-accent);
    padding: 11px 18px;
}
body.family-apocapunk .ap-fieldlog-dot { border-radius: 0; width: 10px; height: 10px; transform: rotate(14deg); }
body.family-apocapunk .ap-fieldlog-dot:nth-child(2) { background: var(--f-second); transform: rotate(-9deg); }
body.family-apocapunk .ap-fieldlog-dot:nth-child(3) { background: var(--f-alert); transform: rotate(20deg); }
body.family-apocapunk .ap-fieldlog-title { color: var(--f-second); font-weight: 700; }
body.family-apocapunk .ap-fieldlog-body { padding: 22px 22px; line-height: 30px; }
body.family-apocapunk .ap-line { padding: 0; }
body.family-apocapunk .ap-prompt { color: var(--f-accent); font-weight: 700; }
body.family-apocapunk .ap-out { color: var(--f-text-dim); }
body.family-apocapunk .ap-cursor { color: var(--f-second); }

body.family-apocapunk .ap-compare-row {
    background: var(--f-bg-panel);
    border-top: 1px dashed var(--f-line-soft);
    border-bottom: 1px dashed var(--f-line-soft);
}
body.family-apocapunk .ap-compare-row:nth-child(even) { transform: rotate(0.3deg); }
body.family-apocapunk .ap-compare-arrow { color: var(--f-accent); }
body.family-apocapunk .ap-tag-fic { border: 1px dashed var(--f-alert); color: var(--f-accent-2); }
body.family-apocapunk .ap-tag-real { border: 1px dashed var(--f-second); color: var(--f-second); }

body.family-apocapunk .ap-questions li {
    background: rgba(232,133,42,0.1);
    border-left: 4px dashed var(--f-accent);
    color: var(--f-second);
    font-size: 1em;
}
body.family-apocapunk .ap-questions li:nth-child(even) { transform: rotate(-0.4deg); }
body.family-apocapunk .ap-questions li::before { content: "// " !important; color: var(--f-alert); }

body.family-apocapunk .ap-banner {
    background: radial-gradient(ellipse at center, rgba(232,133,42,0.2), transparent 66%), var(--f-bg-deep);
    border-top: 3px dashed var(--f-accent);
    border-bottom: 3px dashed var(--f-alert);
}
body.family-apocapunk .ap-banner-line-1 { color: var(--f-head); }
body.family-apocapunk .ap-banner-line-2 { color: var(--f-accent); }
body.family-apocapunk .ap-banner-line-3 { color: var(--f-second); }
body.family-apocapunk .ap-banner-footer { color: var(--f-accent); }

body.family-apocapunk #clapat-logo .black-logo { filter: invert(1) sepia(0.7) saturate(2) hue-rotate(345deg); }
body.family-apocapunk ::-webkit-scrollbar-thumb { background: var(--f-accent); }

@media (max-width: 900px) {
    /* on a phone the misalignment costs more than it gives */
    body.family-apocapunk .ap-section:nth-of-type(odd),
    body.family-apocapunk .ap-section:nth-of-type(even) { transform: none; }
    body.family-apocapunk .ap-card:nth-child(odd),
    body.family-apocapunk .ap-card:nth-child(even),
    body.family-apocapunk .ap-author,
    body.family-apocapunk .ap-author-right,
    body.family-apocapunk .ap-fieldlog { transform: none; }
}