/* ============================================================================
   PSYCHOPUNK - "Sensorium"
   ----------------------------------------------------------------------------
   Identity: the page will not hold still. An eccentric variable display face,
   containers rotated off-axis and counter-rotated back inside, wavy borders,
   chromatic fringing on every heading, and a conic ripple that turns slowly
   under the whole document. The most unstable family in the set, on purpose.
   Axis of difference: rotation · chromatic fringe · turning conic field · warp
   ============================================================================ */

body.family-psychopunk {
    --f-bg:            #120620;
    --f-bg-alt:        #180a2a;
    --f-bg-panel:      #1f0e36;
    --f-bg-deep:       #0a0313;

    --f-text:          #ddc9f0;
    --f-text-dim:      #9376b5;
    --f-head:          #fbeeff;

    --f-accent:        #ff2fb3;   /* magenta */
    --f-accent-2:      #ff78cd;
    --f-accent-ink:    #12061a;
    --f-second:        #7a2fff;   /* violet */
    --f-second-2:      #a874ff;
    --f-alert:         #a8ff3e;   /* acid lime */

    --f-line:          rgba(255, 47, 179, 0.4);
    --f-line-soft:     rgba(122, 47, 255, 0.3);
    --f-rule-w:        2px;

    --f-display:       'Syne', system-ui, sans-serif;
    --f-body:          'Space Mono', ui-monospace, monospace;
    --f-mono:          'Space Mono', ui-monospace, monospace;

    --f-display-w:     800;
    --f-display-track: -0.02em;
    --f-display-case:  none;

    --f-h1-size:       clamp(3em, 11vw, 9em);
    --f-h2-size:       clamp(2em, 4.2vw, 3.3em);
    --f-hero-track:    -0.01em;
    --f-hero-justify:  center;
    --f-hero-text:     center;

    --f-body-size:     0.88em;
    --f-leading:       1.9;
    --f-measure:       62ch;

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

    --f-page:          1220px;
    --f-gutter:        62px;
    --f-rhythm:        106px;
    --f-align:         start;

    --f-r:             14px;
    --f-r-lg:          60% 40% 55% 45% / 45% 55% 40% 60%;   /* a blob */
    --f-r-frame:       46% 54% 38% 62% / 55% 42% 58% 45%;
    --f-r-pill:        999px;

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

    --f-glow:          0 0 34px rgba(255, 47, 179, 0.45);
    --f-text-glow:     0 0 26px rgba(255, 47, 179, 0.6);
    --f-panel-shadow:  0 0 50px rgba(122, 47, 255, 0.35);
    --f-lift:          -4px;

    --f-img-filter:        contrast(1.2) saturate(2) hue-rotate(270deg) brightness(0.85);
    --f-img-filter-hover:  contrast(1.3) saturate(2.4) hue-rotate(310deg) brightness(1);

    --f-vignette:      radial-gradient(ellipse at 50% 48%, transparent 50%, rgba(0,0,0,0.7) 100%);
    --f-veil:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255, 47, 179, 0.07) 0deg 6deg,
            transparent 6deg 14deg,
            rgba(122, 47, 255, 0.06) 14deg 20deg,
            transparent 20deg 28deg),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 44px, rgba(168, 255, 62, 0.045) 44px 46px);
    --f-veil-blend:    screen;
    --f-veil-opacity:  0.85;

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

/* The field turns. Slowly, but it never stops. */
body.family-psychopunk::after { animation: pp-turn 90s linear infinite; }
@keyframes pp-turn { to { transform: rotate(360deg) scale(1.45); } }

/* Chromatic fringing on everything that carries the voice. */
body.family-psychopunk .hero-title span,
body.family-psychopunk .pp-h2,
body.family-psychopunk .pp-manifesto-word,
body.family-psychopunk .pp-banner-line-1,
body.family-psychopunk .pp-banner-line-2,
body.family-psychopunk .pp-pullquote blockquote {
    text-shadow: -3px -1px rgba(255,47,179,0.75), 3px 1px rgba(122,47,255,0.75), 0 0 40px rgba(255,47,179,0.4);
}

/* Containers sit crooked; their contents lean back. */
body.family-psychopunk .pp-card,
body.family-psychopunk .pp-author,
body.family-psychopunk .pp-work { transform: rotate(-1.1deg); }
body.family-psychopunk .pp-card:nth-child(even),
body.family-psychopunk .pp-work:nth-child(even),
body.family-psychopunk .pp-author-right { transform: rotate(1.1deg); }
body.family-psychopunk .pp-card > *,
body.family-psychopunk .pp-author > *,
body.family-psychopunk .pp-work > * { transform: rotate(0.55deg); }
body.family-psychopunk .pp-card:hover,
body.family-psychopunk .pp-work:hover,
body.family-psychopunk .pp-author:hover { transform: rotate(0deg) translateY(-4px); }

body.family-psychopunk #hero-image-wrapper::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,47,179,0.09) 0deg 6deg, transparent 6deg 16deg),
        linear-gradient(180deg, rgba(18,6,32,0.55) 0%, rgba(18,6,32,0.12) 42%, var(--f-bg) 100%);
    z-index: 2;
}
body.family-psychopunk .hero-subtitle span { color: var(--f-alert) !important; letter-spacing: 0.3em; }
body.family-psychopunk .pp-hero-badge {
    background: rgba(255, 47, 179, 0.14);
    border: 2px solid var(--f-accent);
    border-radius: 999px;
    padding: 8px 24px;
    transform: rotate(-1.4deg);
}
body.family-psychopunk .pp-hero-meta b { color: var(--f-alert); }

/* - section tag: a warped lozenge - */
body.family-psychopunk .pp-section-tag {
    background: linear-gradient(90deg, var(--f-accent), var(--f-second));
    color: var(--f-head);
    border-radius: 999px 4px 999px 4px;
    padding: 7px 22px;
    transform: rotate(-1deg);
}
body.family-psychopunk .pp-h2 { line-height: 1.08; }
body.family-psychopunk .pp-lede {
    border-left: 4px solid var(--f-alert);
    border-radius: 0 30px 30px 0;
    padding: 10px 0 10px 26px;
}

body.family-psychopunk .pp-manifesto-grid { gap: 0 26px; align-items: center; }
body.family-psychopunk .pp-manifesto-word:nth-child(1) { transform: rotate(-2.4deg); }
body.family-psychopunk .pp-manifesto-word:nth-child(3) { transform: rotate(2deg); }
body.family-psychopunk .pp-manifesto-word.pp-acid {
    background: linear-gradient(92deg, var(--f-accent), var(--f-second) 45%, var(--f-alert));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 26px rgba(255,47,179,0.6));
}
body.family-psychopunk .pp-manifesto-amp { color: var(--f-alert); font-size: 0.42em; }

/* - plates: liquid frames - */
body.family-psychopunk .pp-img-frame {
    border: 3px solid var(--f-accent);
    border-radius: var(--f-r-frame);
    box-shadow: var(--f-glow);
    transform: rotate(-1.6deg);
}
body.family-psychopunk .pp-img-frame.pp-img-frame-violet { border-color: var(--f-second); transform: rotate(1.4deg); }
body.family-psychopunk .pp-img-frame::before {
    content: "";
    position: absolute; inset: 0;
    background: conic-gradient(from 0deg at 50% 50%, rgba(255,47,179,0.2), rgba(122,47,255,0.2), rgba(168,255,62,0.14), rgba(255,47,179,0.2));
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}
body.family-psychopunk .pp-img-frame figcaption {
    background: rgba(10, 3, 19, 0.9);
    border-top: 2px solid var(--f-accent);
    color: var(--f-alert);
}
body.family-psychopunk .pp-data-pill {
    background: rgba(255,47,179,0.1);
    border: 2px solid var(--f-line);
    transform: rotate(-1deg);
}
body.family-psychopunk .pp-data-pill:nth-child(even) { transform: rotate(1.2deg); }
body.family-psychopunk .pp-data-pill b { color: var(--f-alert); }
body.family-psychopunk .pp-callout {
    background: rgba(122, 47, 255, 0.18);
    border-left: 4px solid var(--f-second);
    border-radius: 0 40px 40px 0;
    transform: rotate(0.7deg);
}
body.family-psychopunk .pp-callout-tag { color: var(--f-alert); }

/* - chronology: a spine that shimmers through the spectrum - */
body.family-psychopunk .pp-timeline::before {
    width: 3px;
    background: linear-gradient(180deg, var(--f-accent), var(--f-second) 50%, var(--f-alert));
    box-shadow: 0 0 16px rgba(255,47,179,0.6);
}
body.family-psychopunk .pp-timeline li::before {
    width: 20px; height: 20px;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    border: 3px solid var(--f-accent);
    left: calc(var(--f-tl-gutter) - 9px);
    box-shadow: 0 0 16px var(--f-accent);
}
body.family-psychopunk .pp-tl-highlight::before { background: var(--f-alert) !important; border-color: var(--f-alert) !important; box-shadow: 0 0 26px var(--f-alert) !important; }
body.family-psychopunk .pp-tl-year { font-family: var(--f-display); font-weight: 800; font-size: 1.8em; color: var(--f-alert); letter-spacing: -0.02em; }
body.family-psychopunk .pp-tl-body h4 { font-size: 1.3em; }

body.family-psychopunk .pp-card {
    background: linear-gradient(150deg, var(--f-bg-panel), var(--f-bg));
    border: 2px solid var(--f-line-soft);
    border-radius: var(--f-r-lg);
}
body.family-psychopunk .pp-card:hover { border-color: var(--f-accent); }
body.family-psychopunk .pp-card-num { color: var(--f-alert); font-weight: 700; }
body.family-psychopunk .pp-card h3 { font-size: 1.35em; }
body.family-psychopunk .pp-card-tag { border-top: 2px dotted var(--f-line); color: var(--f-accent-2); }

body.family-psychopunk .pp-pullquote {
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,47,179,0.1) 0deg 8deg, transparent 8deg 20deg),
        var(--f-bg-deep);
    border-top: 2px solid var(--f-accent);
    border-bottom: 2px solid var(--f-second);
}
body.family-psychopunk .pp-pullquote-accent { color: var(--f-alert); }
body.family-psychopunk .pp-pullquote-marks { color: var(--f-accent); }
body.family-psychopunk .pp-pullquote cite { color: var(--f-alert); }

body.family-psychopunk .pp-pills li { background: rgba(168,255,62,0.12); border-color: var(--f-alert); color: var(--f-alert); }
body.family-psychopunk .pp-gallery figure { border: 2px solid var(--f-line-soft); border-radius: 30px; }
body.family-psychopunk .pp-gallery figure:nth-child(odd) { border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
body.family-psychopunk .pp-gallery figcaption { color: var(--f-alert); text-shadow: 0 0 10px rgba(168,255,62,0.7); }

body.family-psychopunk .pp-author {
    background: linear-gradient(140deg, var(--f-bg-panel), var(--f-bg));
    border: 2px solid var(--f-line-soft);
    border-radius: 50px 18px 50px 18px;
}
body.family-psychopunk .pp-author-avatar { filter: drop-shadow(0 0 16px var(--f-accent)); }
body.family-psychopunk .pp-author h3 { font-family: var(--f-display); font-size: 2em; }
body.family-psychopunk .pp-author-handle { color: var(--f-alert); }
body.family-psychopunk .pp-author-quote { border-left: 4px solid var(--f-alert); background: rgba(168,255,62,0.08); border-radius: 0 26px 26px 0; }

body.family-psychopunk .pp-works-cat { color: var(--f-alert) !important; border-bottom: 2px dotted var(--f-line); }
body.family-psychopunk .pp-work { background: var(--f-bg-panel); border: 2px solid var(--f-line-soft); border-radius: 26px; }
body.family-psychopunk .pp-work-byline { color: var(--f-accent-2); }

/* --- SIGNATURE: the sensorium ---
   A perception meter: three channel lamps cycling hue over a pulsing readout. */
body.family-psychopunk .pp-sensorium {
    background:
        repeating-conic-gradient(from 0deg at 50% 0%, rgba(122,47,255,0.12) 0deg 10deg, transparent 10deg 24deg),
        var(--f-bg-deep);
    border: 3px solid var(--f-accent);
    border-radius: 40px 10px 40px 10px;
    box-shadow: var(--f-panel-shadow);
    margin-top: 48px;
    transform: rotate(-0.7deg);
}
body.family-psychopunk .pp-sensorium-bar {
    background: linear-gradient(90deg, var(--f-accent), var(--f-second), var(--f-alert));
    border-bottom: none;
    padding: 13px 22px;
}
body.family-psychopunk .pp-sensorium-dot {
    width: 13px; height: 13px;
    background: var(--f-bg-deep);
    animation: pp-hue 4s linear infinite;
}
body.family-psychopunk .pp-sensorium-dot:nth-child(2) { animation-delay: -1.3s; }
body.family-psychopunk .pp-sensorium-dot:nth-child(3) { animation-delay: -2.6s; }
@keyframes pp-hue {
    0%   { background: var(--f-accent); }
    33%  { background: var(--f-second); }
    66%  { background: var(--f-alert); }
    100% { background: var(--f-accent); }
}
body.family-psychopunk .pp-sensorium-title { color: var(--f-head); font-weight: 700; }
body.family-psychopunk .pp-sensorium-body { padding: 26px 24px; transform: rotate(0.35deg); }
body.family-psychopunk .pp-line { padding: 3px 0; }
body.family-psychopunk .pp-prompt { color: var(--f-alert); text-shadow: 0 0 8px var(--f-alert); }
body.family-psychopunk .pp-out { color: var(--f-text-dim); }
body.family-psychopunk .pp-cursor { color: var(--f-accent); }

body.family-psychopunk .pp-compare-row {
    background: linear-gradient(90deg, rgba(122,47,255,0.16), transparent 50%, rgba(255,47,179,0.16));
    border-top: 2px dotted var(--f-line-soft);
    border-bottom: 2px dotted var(--f-line);
    border-radius: 40px;
    padding-inline: 34px;
}
body.family-psychopunk .pp-compare-row:nth-child(even) { transform: rotate(0.4deg); }
body.family-psychopunk .pp-compare-arrow { color: var(--f-alert); text-shadow: 0 0 12px var(--f-alert); }
body.family-psychopunk .pp-tag-fic { border-color: var(--f-second); color: var(--f-second-2); }
body.family-psychopunk .pp-tag-real { border-color: var(--f-alert); color: var(--f-alert); }

body.family-psychopunk .pp-questions li {
    background: rgba(122,47,255,0.16);
    border-left: 4px solid var(--f-second);
    border-radius: 0 30px 30px 0;
    color: var(--f-alert);
}
body.family-psychopunk .pp-questions li:nth-child(odd) { transform: rotate(-0.5deg); }
body.family-psychopunk .pp-questions li::before { content: "◉ " !important; color: var(--f-accent); }

body.family-psychopunk .pp-banner {
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,47,179,0.14) 0deg 7deg, transparent 7deg 18deg),
        var(--f-bg-deep);
    border-top: 3px solid var(--f-accent);
    border-bottom: 3px solid var(--f-alert);
}
body.family-psychopunk .pp-banner-line-2 { color: var(--f-alert); }
body.family-psychopunk .pp-banner-line-3 { color: var(--f-accent-2); }
body.family-psychopunk .pp-banner-footer { color: var(--f-alert); }

body.family-psychopunk #clapat-logo .black-logo { filter: invert(1) sepia(0.5) saturate(4) hue-rotate(260deg); }
body.family-psychopunk ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--f-accent), var(--f-second)); }

@media (max-width: 900px) {
    body.family-psychopunk .pp-card,
    body.family-psychopunk .pp-author,
    body.family-psychopunk .pp-work,
    body.family-psychopunk .pp-sensorium { transform: none; }
    body.family-psychopunk .pp-card > *,
    body.family-psychopunk .pp-author > *,
    body.family-psychopunk .pp-work > *,
    body.family-psychopunk .pp-sensorium-body { transform: none; }
}