/* ============================================================================
   /Alt/Punk - FAMILY CORE
   ----------------------------------------------------------------------------
   Shared mechanism for the 13 genre pages. Contains NO look of its own:
   every colour, typeface, edge, rhythm and texture comes from a token that the
   per-family stylesheet is required to set.

   Load order (in each family page <head>):
     1. /assets/css/family/_fonts.css   - self-hosted OFL faces
     2. /assets/css/family/_core.css    - this file
     3. /assets/css/family/<name>.css   - the identity layer

   Token contract - a family file MUST define these on `body.family-<name>`.
   Anything it leaves out falls back to the neutral defaults below, which are
   deliberately drab so an unset token is obvious rather than invisible.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */

body[class*="family-"] {
    /* - surfaces - */
    --f-bg:            #101010;
    --f-bg-alt:        #161616;
    --f-bg-panel:      #1c1c1c;
    --f-bg-deep:       #080808;

    /* - ink - */
    --f-text:          #cccccc;
    --f-text-dim:      #888888;
    --f-head:          #ffffff;

    /* - chroma - */
    --f-accent:        #999999;
    --f-accent-2:      #bbbbbb;
    --f-accent-ink:    #000000;   /* readable ON the accent */
    --f-second:        #666666;
    --f-second-2:      #888888;
    --f-alert:         #aa4444;

    /* - rules - */
    --f-line:          rgba(255,255,255,0.28);
    --f-line-soft:     rgba(255,255,255,0.12);
    --f-rule-w:        1px;
    --f-rule-style:    solid;

    /* - typography - */
    --f-display:       system-ui, sans-serif;
    --f-body:          system-ui, sans-serif;
    --f-mono:          ui-monospace, monospace;

    --f-display-w:     400;
    --f-display-track: 0em;
    --f-display-case:  none;
    --f-display-stretch: 100%;
    --f-display-slant: normal;

    --f-h1-size:       clamp(2.6em, 7vw, 5.5em);
    --f-h2-size:       clamp(1.8em, 3.5vw, 2.7em);
    --f-hero-track:    0.02em;

    /* Hero composition. The base theme hard-centres every hero; routing it
       through a token is what stops all 13 covers from opening identically. */
    --f-hero-justify:  center;
    --f-hero-text:     center;

    --f-body-size:     1em;
    --f-leading:       1.75;
    --f-measure:       72ch;

    --f-tag-font:      var(--f-mono);
    --f-tag-size:      0.75em;
    --f-tag-track:     0.25em;
    --f-tag-case:      uppercase;
    --f-tag-w:         400;

    --f-mono-track:    0.06em;

    /* - geometry - */
    --f-page:          1280px;      /* section max-width          */
    --f-gutter:        60px;        /* section padding-inline     */
    --f-rhythm:        100px;       /* section padding-block      */
    --f-align:         start;       /* start | center             */

    --f-r:             0px;         /* generic corner             */
    --f-r-lg:          0px;         /* panels / cards             */
    --f-r-frame:       0px;         /* image frames               */
    --f-r-pill:        0px;         /* pills / tags               */

    --f-split:         1fr 1fr;     /* split-grid columns         */
    --f-split-gap:     60px;
    --f-card-cols:     repeat(6, 1fr);
    --f-card-span:     span 2;
    --f-card-gap:      24px;
    --f-card-pad:      32px;
    --f-tl-gutter:     100px;       /* timeline rail offset       */

    /* - effects - */
    --f-glow:          none;
    --f-glow-soft:     none;
    --f-text-glow:     none;
    --f-panel-shadow:  none;
    --f-lift:          -4px;
    --f-tween:         0.3s;

    --f-img-filter:        none;
    --f-img-filter-hover:  none;
    --f-img-scale:         1.05;

    /* - atmosphere (the fixed overlay) - */
    --f-veil:          none;
    --f-veil-size:     auto;
    --f-veil-blend:    normal;
    --f-veil-opacity:  1;
    --f-vignette:      radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%);

    /* The header never swaps colour on scroll, so the scrim behind it is what
       keeps the nav legible once the page ground changes. Light-ground families
       must override this with something strong enough to sit on paper. */
    --f-header-scrim:  linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
}

/* ------------------------------------------------------------ 2. PAGE SHELL */

body[class*="family-"] {
    font-family: var(--f-body);
    font-size: var(--f-body-size);
    background: var(--f-bg);
}

body[class*="family-"] #clapat-page-content,
body[class*="family-"] #main,
body[class*="family-"] #main-content,
body[class*="family-"] #main-page-content,
body[class*="family-"] #content-scroll { background: var(--f-bg) !important; }

body[class*="family-"] .dark-content,
body[class*="family-"] .light-section,
body[class*="family-"] [data-bgcolor] { background-color: var(--f-bg) !important; }

/* Atmosphere. Two stacked fixed layers so a family can run a static grain and a
   moving one independently. Both are inert to the pointer. */
body[class*="family-"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: var(--f-vignette);
}
body[class*="family-"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: var(--f-veil);
    background-size: var(--f-veil-size);
    mix-blend-mode: var(--f-veil-blend);
    opacity: var(--f-veil-opacity);
}

/* --------------------------------------------------------- 3. TEXT DEFAULTS */

body[class*="family-"] h1,
body[class*="family-"] h2,
body[class*="family-"] h3,
body[class*="family-"] h4,
body[class*="family-"] h5,
body[class*="family-"] h6 {
    color: var(--f-head);
    font-family: var(--f-display);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    letter-spacing: var(--f-display-track);
    text-transform: var(--f-display-case);
}

body[class*="family-"] p {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
}

body[class*="family-"] strong { color: var(--f-accent); font-weight: 700; }
body[class*="family-"] em     { color: var(--f-second-2); font-style: italic; }

body[class*="family-"] a {
    color: var(--f-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--f-second);
    transition: color var(--f-tween), border-color var(--f-tween), text-shadow var(--f-tween);
}
body[class*="family-"] a:hover {
    color: var(--f-head);
    border-bottom-color: var(--f-accent);
    text-shadow: var(--f-text-glow);
}

/* ----------------------------------------------------------------- 4. HERO */

body[class*="family-"] #hero { background: var(--f-bg); }

body[class*="family-"] #hero.has-image #hero-caption,
body[class*="family-"] #hero-caption {
    justify-content: var(--f-hero-justify);
    text-align: var(--f-hero-text);
}
body[class*="family-"] .hero-title span { justify-content: var(--f-hero-justify); }
body[class*="family-"] .fam-hero-meta    { justify-content: var(--f-hero-justify); }

body[class*="family-"] #hero-bg-image {
    filter: var(--f-img-filter);
    mix-blend-mode: var(--f-veil-blend);
    opacity: 0.9;
}

body[class*="family-"] .fam-hero-badge {
    display: inline-block;
    font-family: var(--f-tag-font);
    font-size: 0.82em;
    font-weight: var(--f-tag-w);
    color: var(--f-accent);
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    margin-bottom: 1.4em;
    padding: 7px 16px;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    border-radius: var(--f-r-pill);
    text-shadow: var(--f-text-glow);
}

body[class*="family-"] .hero-title,
body[class*="family-"] .hero-title span {
    color: var(--f-head) !important;
    font-family: var(--f-display);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    font-style: var(--f-display-slant);
    letter-spacing: var(--f-hero-track);
    text-transform: var(--f-display-case);
    text-shadow: var(--f-text-glow);
}

body[class*="family-"] .hero-subtitle,
body[class*="family-"] .hero-subtitle span {
    color: var(--f-second-2) !important;
    font-family: var(--f-tag-font);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

body[class*="family-"] .fam-hero-meta {
    margin-top: 2em;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    font-family: var(--f-mono);
    font-size: 0.85em;
    color: var(--f-text-dim);
    letter-spacing: var(--f-mono-track);
}
body[class*="family-"] .fam-hero-meta b {
    color: var(--f-accent);
    font-weight: normal;
    margin-right: 6px;
}

body[class*="family-"] #hero-footer .button-text,
body[class*="family-"] #hero-footer .button-text span {
    color: var(--f-accent) !important;
    font-family: var(--f-tag-font);
    letter-spacing: 0.3em;
}
body[class*="family-"] #hero-footer .button-icon,
body[class*="family-"] #hero-footer i { color: var(--f-second-2) !important; }

/* ---------------------------------------------------- 5. SECTION PRIMITIVES */

body[class*="family-"] .fam-section {
    position: relative;
    max-width: var(--f-page);
    margin: 0 auto;
    padding: var(--f-rhythm) var(--f-gutter);
    color: var(--f-text);
    text-align: var(--f-align);
}

body[class*="family-"] .fam-section-tag {
    display: inline-block;
    font-family: var(--f-tag-font);
    font-size: var(--f-tag-size);
    font-weight: var(--f-tag-w);
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-second-2);
    margin-bottom: 32px;
}

body[class*="family-"] .fam-h2 {
    color: var(--f-head) !important;
    font-family: var(--f-display);
    font-size: var(--f-h2-size);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    letter-spacing: var(--f-display-track);
    text-transform: var(--f-display-case);
    margin: 0 0 0.5em 0;
}

body[class*="family-"] .fam-section-lede {
    color: var(--f-text-dim);
    font-family: var(--f-body);
    max-width: var(--f-measure);
    line-height: var(--f-leading);
    margin-bottom: 50px;
}

body[class*="family-"] .fam-lede {
    font-family: var(--f-body);
    font-size: 1.05em;
    line-height: var(--f-leading);
    color: var(--f-text);
    max-width: var(--f-measure);
    margin-top: 30px;
}

/* ------------------------------------------------------------ 6. MANIFESTO */

body[class*="family-"] .fam-manifesto-grid {
    display: flex;
    align-items: baseline;
    gap: 0 40px;
    margin: 40px 0 30px;
    line-height: 0.95;
    flex-wrap: wrap;
}
body[class*="family-"] .fam-manifesto-word {
    font-family: var(--f-display);
    font-size: var(--f-h1-size);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    letter-spacing: var(--f-display-track);
    text-transform: var(--f-display-case);
    color: var(--f-head);
}
body[class*="family-"] .fam-manifesto-amp,
body[class*="family-"] .fam-manifesto-slash {
    font-family: var(--f-display);
    font-size: calc(var(--f-h1-size) * 0.8);
    color: var(--f-second-2);
}

/* ---------------------------------------------------------------- 7. SPLIT */

body[class*="family-"] .fam-split-grid {
    display: grid;
    grid-template-columns: var(--f-split);
    gap: var(--f-split-gap);
    align-items: center;
    text-align: start;
}
body[class*="family-"] .fam-split-reverse .fam-split-grid { direction: rtl; }
body[class*="family-"] .fam-split-reverse .fam-split-grid > * { direction: ltr; }

body[class*="family-"] .fam-split-text p {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    margin-bottom: 1.2em;
}

body[class*="family-"] .fam-img-frame {
    position: relative;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    border-radius: var(--f-r-frame);
    box-shadow: var(--f-glow);
    overflow: hidden;
}
body[class*="family-"] .fam-img-frame img {
    display: block;
    width: 100%;
    filter: var(--f-img-filter);
}
body[class*="family-"] .fam-img-frame figcaption {
    position: absolute;
    bottom: 0; left: 0;
    padding: 8px 14px;
    font-family: var(--f-tag-font);
    font-size: 0.75em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-accent);
    background: var(--f-bg-deep);
    border-top: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    z-index: 4;
}

body[class*="family-"] .fam-data-stack {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}
body[class*="family-"] .fam-data-pill {
    font-family: var(--f-mono);
    font-size: 0.78em;
    padding: 7px 14px;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-radius: var(--f-r-pill);
    color: var(--f-text);
    letter-spacing: var(--f-mono-track);
}
body[class*="family-"] .fam-data-pill b {
    color: var(--f-second-2);
    font-weight: normal;
    margin-right: 6px;
}

body[class*="family-"] .fam-callout {
    margin-top: 30px;
    padding: 20px 22px;
    background: var(--f-bg-panel);
    border-left: 3px solid var(--f-second);
    border-radius: var(--f-r);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    color: var(--f-text);
}
body[class*="family-"] .fam-callout-tag {
    display: block;
    color: var(--f-accent);
    font-family: var(--f-tag-font);
    font-size: 0.72em;
    letter-spacing: 0.4em;
    text-transform: var(--f-tag-case);
    margin-bottom: 8px;
}

/* ------------------------------------------------------------- 8. TIMELINE */

body[class*="family-"] .fam-timeline {
    list-style: none;
    padding: 0;
    margin: 50px 0 0;
    position: relative;
    text-align: start;
}
body[class*="family-"] .fam-timeline::before {
    content: "";
    position: absolute;
    left: var(--f-tl-gutter);
    top: 0; bottom: 0;
    width: 2px;
    background: var(--f-accent);
}
body[class*="family-"] .fam-timeline li {
    display: grid;
    grid-template-columns: var(--f-tl-gutter) 1fr;
    gap: 40px;
    padding: 0 0 50px;
    position: relative;
}
body[class*="family-"] .fam-timeline li::before {
    content: "";
    position: absolute;
    left: calc(var(--f-tl-gutter) - 8px);
    top: 12px;
    width: 18px;
    height: 18px;
    background: var(--f-bg);
    border: 2px solid var(--f-accent);
    border-radius: var(--f-r-pill);
}
body[class*="family-"] .fam-timeline li.fam-tl-highlight::before {
    background: var(--f-accent);
    box-shadow: var(--f-glow);
}
body[class*="family-"] .fam-tl-year {
    font-family: var(--f-mono);
    font-size: 1.6em;
    color: var(--f-accent);
    text-align: right;
}
body[class*="family-"] .fam-tl-body h4 {
    color: var(--f-head) !important;
    margin: 0 0 0.5em;
    font-size: 1.15em;
}
body[class*="family-"] .fam-tl-body p {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    margin: 0;
}

/* ---------------------------------------------------------------- 9. CARDS */

body[class*="family-"] .fam-cards-grid {
    display: grid;
    grid-template-columns: var(--f-card-cols);
    gap: var(--f-card-gap);
    margin-top: 40px;
    text-align: start;
}
body[class*="family-"] .fam-card {
    grid-column: var(--f-card-span);
    padding: var(--f-card-pad);
    background: var(--f-bg-panel);
    border: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-radius: var(--f-r-lg);
    position: relative;
    overflow: hidden;
    transition: transform var(--f-tween), border-color var(--f-tween), box-shadow var(--f-tween);
}
body[class*="family-"] .fam-card:hover {
    transform: translateY(var(--f-lift));
    border-color: var(--f-accent);
    box-shadow: var(--f-glow);
}
body[class*="family-"] .fam-card.fam-card-wide { grid-column: span 6; }
body[class*="family-"] .fam-card-num {
    font-family: var(--f-tag-font);
    font-size: 0.85em;
    color: var(--f-second-2);
    letter-spacing: 0.3em;
    margin-bottom: 14px;
}
body[class*="family-"] .fam-card h3 {
    color: var(--f-head) !important;
    font-size: 1.25em;
    margin: 0 0 0.8em;
}
body[class*="family-"] .fam-card p {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    margin: 0 0 0.8em;
    font-size: 0.93em;
}
body[class*="family-"] .fam-card-tag {
    margin-top: 16px;
    padding-top: 12px;
    font-family: var(--f-tag-font);
    font-size: 0.7em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-accent);
    border-top: var(--f-rule-w) var(--f-rule-style) var(--f-line-soft);
}

/* ----------------------------------------------------------- 10. PULLQUOTE */

body[class*="family-"] .fam-pullquote {
    position: relative;
    padding: 120px var(--f-gutter);
    text-align: center;
    background: var(--f-bg-alt);
    border-top: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-bottom: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    margin: 60px 0;
    overflow: hidden;
}
body[class*="family-"] .fam-pullquote-marks {
    font-family: var(--f-display);
    font-size: 9em;
    color: var(--f-accent);
    line-height: 0.4;
    opacity: 0.7;
}
body[class*="family-"] .fam-pullquote blockquote {
    font-family: var(--f-display);
    font-size: clamp(1.8em, 4.5vw, 3em);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    letter-spacing: var(--f-display-track);
    text-transform: var(--f-display-case);
    color: var(--f-head);
    line-height: 1.3;
    margin: 0.3em 0;
}
body[class*="family-"] .fam-pullquote-accent { color: var(--f-accent); }
body[class*="family-"] .fam-pullquote cite {
    display: block;
    margin-top: 1.5em;
    font-family: var(--f-tag-font);
    font-size: 0.85em;
    letter-spacing: 0.3em;
    text-transform: var(--f-tag-case);
    color: var(--f-second-2);
    font-style: normal;
}

/* --------------------------------------------------------------- 11. PILLS */

body[class*="family-"] .fam-pills {
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body[class*="family-"] .fam-pills li {
    padding: 6px 14px !important;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    border-radius: var(--f-r-pill);
    font-family: var(--f-tag-font);
    font-size: 0.78em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-accent);
}
body[class*="family-"] .fam-pills li::before { content: none !important; }

/* ------------------------------------------------------------- 12. GALLERY */

body[class*="family-"] .fam-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 16px;
    margin-top: 40px;
}
body[class*="family-"] .fam-gallery figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-radius: var(--f-r-frame);
    background: var(--f-bg-panel);
}
body[class*="family-"] .fam-gallery img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: var(--f-img-filter);
    transition: transform 0.6s, filter var(--f-tween);
}
body[class*="family-"] .fam-gallery figure:hover img {
    transform: scale(var(--f-img-scale));
    filter: var(--f-img-filter-hover);
}
body[class*="family-"] .fam-gallery figure.fam-g-svg svg { width: 100%; height: 100%; display: block; }
body[class*="family-"] .fam-gallery figcaption {
    position: absolute;
    bottom: 10px; left: 12px;
    z-index: 2;
    font-family: var(--f-tag-font);
    font-size: 0.72em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-accent);
}
body[class*="family-"] .fam-g-1 { grid-column: span 3; grid-row: span 2; }
body[class*="family-"] .fam-g-2,
body[class*="family-"] .fam-g-3,
body[class*="family-"] .fam-g-4,
body[class*="family-"] .fam-g-5,
body[class*="family-"] .fam-g-6 { grid-column: span 3; grid-row: span 1; }

/* ------------------------------------------------------------- 13. AUTHORS */

body[class*="family-"] .fam-author {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 40px;
    align-items: center;
    padding: 36px;
    margin: 24px 0;
    background: var(--f-bg-panel);
    border: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-radius: var(--f-r-lg);
    text-align: start;
    transition: border-color var(--f-tween), box-shadow var(--f-tween);
}
body[class*="family-"] .fam-author-right { grid-template-columns: 1fr 160px; }
body[class*="family-"] .fam-author:hover {
    border-color: var(--f-accent);
    box-shadow: var(--f-glow);
}
body[class*="family-"] .fam-author-avatar {
    width: 160px;
    height: 160px;
    color: var(--f-accent);
}
body[class*="family-"] .fam-author-right .fam-author-avatar { color: var(--f-second-2); }
body[class*="family-"] .fam-author-avatar svg { width: 100%; height: 100%; }
body[class*="family-"] .fam-author-handle {
    font-family: var(--f-mono);
    font-size: 0.82em;
    color: var(--f-second-2);
    letter-spacing: var(--f-mono-track);
    margin-bottom: 6px;
}
body[class*="family-"] .fam-author h3 {
    color: var(--f-head) !important;
    font-size: 1.7em;
    margin: 0 0 6px;
}
body[class*="family-"] .fam-author-role {
    font-family: var(--f-tag-font);
    font-size: 0.78em;
    color: var(--f-text-dim);
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    margin-bottom: 16px;
}
body[class*="family-"] .fam-author p {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    margin: 0 0 0.8em;
}
body[class*="family-"] .fam-author-quote {
    margin: 18px 0 0;
    padding: 14px 20px;
    border-left: 3px solid var(--f-accent);
    border-radius: var(--f-r);
    font-family: var(--f-body);
    color: var(--f-accent-2);
    font-size: 0.95em;
    line-height: var(--f-leading);
}

/* --------------------------------------------------------------- 14. WORKS */

body[class*="family-"] .fam-works-cat {
    margin: 60px 0 28px;
    font-family: var(--f-tag-font);
    color: var(--f-accent) !important;
    font-size: 1em;
    letter-spacing: 0.35em;
    text-transform: var(--f-tag-case);
    text-align: center;
    border-bottom: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    padding-bottom: 14px;
}
body[class*="family-"] .fam-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 26px;
    text-align: start;
}
body[class*="family-"] .fam-work {
    background: var(--f-bg-panel);
    border: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    border-radius: var(--f-r-lg);
    overflow: hidden;
    transition: transform var(--f-tween), border-color var(--f-tween), box-shadow var(--f-tween);
}
body[class*="family-"] .fam-work:hover {
    transform: translateY(var(--f-lift));
    border-color: var(--f-accent);
    box-shadow: var(--f-glow);
}
body[class*="family-"] .fam-work-cover {
    width: 100%;
    background: var(--f-bg);
    border-bottom: var(--f-rule-w) var(--f-rule-style) var(--f-line);
}
body[class*="family-"] .fam-work-cover svg { width: 100%; display: block; }
body[class*="family-"] .fam-work-meta { padding: 20px 22px; }
body[class*="family-"] .fam-work-meta h4 {
    color: var(--f-head) !important;
    font-size: 1.1em;
    margin: 0 0 4px;
}
body[class*="family-"] .fam-work-byline {
    font-family: var(--f-tag-font);
    color: var(--f-accent);
    font-size: 0.82em;
    letter-spacing: var(--f-mono-track);
    margin-bottom: 12px;
}
body[class*="family-"] .fam-work-meta p {
    color: var(--f-text);
    font-family: var(--f-body);
    font-size: 0.9em;
    line-height: var(--f-leading);
    margin: 0;
}

/* -------------------------------------------- 15. SIGNATURE PANEL (skeleton)

   Each family renders this as a different physical object - a CRT terminal, a
   brass ledger, a taped field notebook, a tide table, a furnace gauge. The core
   only guarantees the box model; the identity layer supplies the object.
   ------------------------------------------------------------------------- */

body[class*="family-"] .fam-panel {
    margin-top: 40px;
    background: var(--f-bg-deep);
    border: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    border-radius: var(--f-r-lg);
    box-shadow: var(--f-panel-shadow);
    overflow: hidden;
    font-family: var(--f-mono);
    text-align: start;
}
body[class*="family-"] .fam-panel-bar {
    border-bottom: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body[class*="family-"] .fam-panel-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--f-accent);
}
body[class*="family-"] .fam-panel-dot:nth-child(2) { background: var(--f-second-2); }
body[class*="family-"] .fam-panel-dot:nth-child(3) { background: var(--f-alert); }
body[class*="family-"] .fam-panel-title {
    margin-left: 14px;
    color: var(--f-accent);
    font-family: var(--f-tag-font);
    font-size: 0.8em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
}
body[class*="family-"] .fam-panel-body {
    padding: 24px 22px;
    color: var(--f-text);
    font-size: 0.95em;
    line-height: var(--f-leading);
}
body[class*="family-"] .fam-panel-footer,
body[class*="family-"] .fam-panel-folio {
    padding: 10px 22px;
    border-top: var(--f-rule-w) var(--f-rule-style) var(--f-line);
    font-family: var(--f-tag-font);
    font-size: 0.72em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    color: var(--f-text-dim);
}
body[class*="family-"] .fam-line   { padding: 2px 0; }
body[class*="family-"] .fam-prompt { color: var(--f-accent); margin-right: 8px; }
body[class*="family-"] .fam-out    { color: var(--f-text-dim); padding-left: 18px; margin-bottom: 6px; }
body[class*="family-"] .fam-cursor { color: var(--f-accent); animation: fam-blink 1s steps(2) infinite; }

@keyframes fam-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ------------------------------------------------------------- 16. COMPARE */

body[class*="family-"] .fam-compare {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: start;
}
body[class*="family-"] .fam-compare-row {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    background: var(--f-bg-alt);
    border-radius: var(--f-r);
    border-top: var(--f-rule-w) var(--f-rule-style) var(--f-line-soft);
    border-bottom: var(--f-rule-w) var(--f-rule-style) var(--f-line-soft);
}
body[class*="family-"] .fam-compare-left,
body[class*="family-"] .fam-compare-right {
    color: var(--f-text);
    font-family: var(--f-body);
    line-height: var(--f-leading);
    font-size: 0.95em;
}
body[class*="family-"] .fam-compare-arrow {
    text-align: center;
    color: var(--f-accent);
    font-size: 1.7em;
}
body[class*="family-"] .fam-tag-fic,
body[class*="family-"] .fam-tag-real {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    font-family: var(--f-tag-font);
    font-size: 0.65em;
    letter-spacing: var(--f-tag-track);
    text-transform: var(--f-tag-case);
    border-radius: var(--f-r-pill);
}
body[class*="family-"] .fam-tag-fic  { border: var(--f-rule-w) var(--f-rule-style) var(--f-second); color: var(--f-second-2); }
body[class*="family-"] .fam-tag-real { border: var(--f-rule-w) var(--f-rule-style) var(--f-accent); color: var(--f-accent); }

/* ----------------------------------------------------------- 17. QUESTIONS */

body[class*="family-"] .fam-questions {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0;
    text-align: start;
}
body[class*="family-"] .fam-questions li {
    padding: 18px 26px !important;
    margin-bottom: 10px;
    background: var(--f-bg-panel);
    border-left: 3px solid var(--f-second);
    border-radius: var(--f-r);
    font-family: var(--f-body);
    font-size: 1.1em;
    color: var(--f-accent);
}
body[class*="family-"] .fam-questions li::before {
    content: "? " !important;
    color: var(--f-second-2);
    position: static !important;
}

/* -------------------------------------------------------------- 18. BANNER */

body[class*="family-"] .fam-banner {
    margin-top: 80px;
    padding: 100px 40px 70px;
    text-align: center;
    background: var(--f-bg-alt);
    border-top: 2px solid var(--f-accent);
    border-bottom: 2px solid var(--f-second);
    position: relative;
    overflow: hidden;
}
body[class*="family-"] .fam-banner-line {
    font-family: var(--f-display);
    font-weight: var(--f-display-w);
    font-stretch: var(--f-display-stretch);
    letter-spacing: var(--f-display-track);
    text-transform: var(--f-display-case);
    line-height: 1;
}
body[class*="family-"] .fam-banner-line-1 {
    font-size: clamp(2.5em, 6vw, 4.2em);
    color: var(--f-head);
}
body[class*="family-"] .fam-banner-line-2 {
    font-size: clamp(3em, 7vw, 5em);
    color: var(--f-accent);
    margin-top: 0.15em;
}
body[class*="family-"] .fam-banner-line-3 {
    margin-top: 1em;
    font-size: clamp(1em, 1.8vw, 1.3em);
    color: var(--f-second-2);
    letter-spacing: 0.35em;
    font-family: var(--f-tag-font);
    text-transform: var(--f-tag-case);
}
body[class*="family-"] .fam-banner-footer {
    margin-top: 50px;
    font-family: var(--f-tag-font);
    font-size: 0.78em;
    letter-spacing: 0.3em;
    text-transform: var(--f-tag-case);
    color: var(--f-accent);
    opacity: 0.8;
}

/* -------------------------------------------------- 19. CHROME (nav, etc.) */

/* The atmosphere layers below sit at z-index 9997/9998 so they wash over the
   whole scene. The header is chrome, not part of the scene, so it has to clear
   them - otherwise a strong veil (or a light ground) swallows the nav. */
body[class*="family-"] .clapat-header { z-index: 10000; }
body[class*="family-"] .clapat-footer { z-index: 9999; }

/* The theme masks this element with its own top-down fade, which cuts the scrim
   off above the nav. The token below already carries its own fade, so drop the
   mask and let --f-header-scrim decide how far the backing reaches. */
body[class*="family-"] .clapat-header .header-gradient {
    background: var(--f-header-scrim) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    pointer-events: none;
}

body[class*="family-"] .clapat-header,
body[class*="family-"] .clapat-nav-wrapper,
body[class*="family-"] .flexnav,
body[class*="family-"] .flexnav li a,
body[class*="family-"] .flexnav li a span,
body[class*="family-"] .before-span span,
body[class*="family-"] .header-button,
body[class*="family-"] .header-button span,
body[class*="family-"] .header-button .button-text span,
body[class*="family-"] #menu-burger,
body[class*="family-"] #menu-burger span { color: var(--f-head) !important; }

body[class*="family-"] .flexnav > li > a,
body[class*="family-"] .flexnav > li > a .before-span span {
    color: var(--f-head) !important;
    font-family: var(--f-tag-font);
    transition: color 0.25s, text-shadow 0.25s;
}
body[class*="family-"] .flexnav > li:hover > a,
body[class*="family-"] .flexnav > li > a:hover,
body[class*="family-"] .flexnav > li > a:hover .before-span span,
body[class*="family-"] .flexnav > li > a.active,
body[class*="family-"] .flexnav > li > a.active .before-span span {
    color: var(--f-accent) !important;
    text-shadow: var(--f-text-glow);
}
body[class*="family-"] .flexnav li ul,
body[class*="family-"] .altpunk-mega-menu {
    background: var(--f-bg-panel) !important;
    border: var(--f-rule-w) var(--f-rule-style) var(--f-accent);
    border-radius: var(--f-r);
}
body[class*="family-"] .flexnav li ul li a,
body[class*="family-"] .altpunk-mega-menu a,
body[class*="family-"] .altpunk-mega-title { color: var(--f-head) !important; }
body[class*="family-"] .flexnav li ul li a:hover,
body[class*="family-"] .altpunk-mega-menu a:hover { color: var(--f-second-2) !important; }
body[class*="family-"] .altpunk-mega-title {
    color: var(--f-accent) !important;
    font-family: var(--f-tag-font);
    letter-spacing: var(--f-tag-track);
}
body[class*="family-"] #contact-open,
body[class*="family-"] #contact-open .button-text span,
body[class*="family-"] #contact-open .button-icon,
body[class*="family-"] #contact-open i { color: var(--f-accent) !important; }
body[class*="family-"] #contact-open:hover,
body[class*="family-"] #contact-open:hover .button-text span { color: var(--f-second-2) !important; }
body[class*="family-"] .burger-lines span,
body[class*="family-"] #menu-burger span { background: var(--f-accent) !important; }

body[class*="family-"] #magic-cursor #ball {
    background: var(--f-accent) !important;
    mix-blend-mode: difference;
}
body[class*="family-"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[class*="family-"] ::-webkit-scrollbar-track { background: var(--f-bg); }
body[class*="family-"] ::-webkit-scrollbar-thumb { background: var(--f-accent); }
body[class*="family-"] ::-webkit-scrollbar-thumb:hover { background: var(--f-second-2); }
body[class*="family-"] ::selection { background: var(--f-accent); color: var(--f-accent-ink); text-shadow: none; }

/* ---------------------------------------------------------- 20. RESPONSIVE */

@media (max-width: 900px) {
    body[class*="family-"] {
        --f-gutter: 24px;
        --f-rhythm: 60px;
        --f-split: 1fr;
        --f-split-gap: 30px;
        --f-card-cols: 1fr;
        --f-card-span: span 1;
        --f-tl-gutter: 60px;
    }
    body[class*="family-"] .fam-card,
    body[class*="family-"] .fam-card.fam-card-wide,
    body[class*="family-"] .fam-card.fam-card-tall { grid-column: span 1; }
    body[class*="family-"] .fam-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    body[class*="family-"] .fam-gallery figure { grid-column: span 1 !important; grid-row: span 1 !important; }
    body[class*="family-"] .fam-author,
    body[class*="family-"] .fam-author-right { grid-template-columns: 1fr; text-align: left; }
    body[class*="family-"] .fam-author-avatar { width: 110px; height: 110px; }
    body[class*="family-"] .fam-tl-year { font-size: 1.2em; text-align: left; }
    body[class*="family-"] .fam-compare-row { grid-template-columns: 1fr; }
    body[class*="family-"] .fam-compare-arrow { transform: rotate(90deg); }
    body[class*="family-"] .fam-split-reverse .fam-split-grid { direction: ltr; }
}

@media (prefers-reduced-motion: reduce) {
    body[class*="family-"] *,
    body[class*="family-"] *::before,
    body[class*="family-"] *::after {
        transition: none !important;
        animation: none !important;
    }
}