/* =====================================================================
   SKILLS — the proof constellation (2026-07-10)
   Glossy jewel orbs over the summit sky, sized by evidence count, each
   opening a frosted evidence panel in place.
   ===================================================================== */

.skills-film {
    --skf-ink: #0a1b36;
    --skf-ink-soft: #43546c;
    --skf-serif: "Newsreader", Georgia, serif;
    --skf-content: 72rem;
    min-width: 0;
    padding-bottom: 6rem;
    color: var(--skf-ink);
}

/* --- opening ---------------------------------------------------------- */
.skf-open {
    display: grid;
    min-height: 52vh;
    place-content: center;
    justify-items: center;
    padding: clamp(3rem, 9vh, 6rem) 1.5rem 2rem;
    text-align: center;
}

.skf-open h1 {
    margin: 0.75rem 0 0;
    font-family: var(--skf-serif);
    font-size: clamp(3rem, 6.5vw, 5rem);
    font-weight: 700;
    line-height: 0.98;
}

.skf-open h1 span {
    color: #1d55ba;
}

.skf-open__lead {
    max-width: 46rem;
    margin: 1.25rem 0 0;
    color: var(--skf-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* --- category acts ----------------------------------------------------- */
.skf-act {
    width: min(calc(100% - 3rem), var(--skf-content));
    margin: 0 auto;
    padding: clamp(2rem, 6vh, 3.5rem) 0 0;
}

.skf-act__head .section-eyebrow {
    font-size: 0.8rem;
}

/* --- orb clusters ------------------------------------------------------- */
.skf-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 1.4rem 2.1rem;
    padding: 1.25rem 0 0.5rem;
}

.skf-orb {
    display: grid;
    max-width: 9.5rem;
    justify-items: center;
    gap: 0.55rem;
    padding: 0.25rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.skf-orb__ball {
    display: grid;
    place-items: center;
    width: var(--ball, 4.25rem);
    height: var(--ball, 4.25rem);
    color: rgb(255 255 255 / 92%);
    background:
        radial-gradient(circle at 50% 24%, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 0%) 44%),
        radial-gradient(circle at 50% 118%, rgb(4 18 42 / 40%) 0%, rgb(4 18 42 / 0%) 55%),
        var(--orb, #3f6fe0);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.26rem rgb(255 255 255 / 60%),
        0 0.6rem 1.5rem rgb(15 45 100 / 30%),
        inset 0 0.2rem 0.5rem rgb(255 255 255 / 55%);
    font-family: var(--skf-serif);
    font-size: calc(var(--ball, 4.25rem) * 0.3);
    font-weight: 700;
    text-shadow: 0 1px 2px rgb(4 18 42 / 40%);
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

.skf-orb--1 { --ball: 3.9rem; }
.skf-orb--2 { --ball: 4.9rem; }
.skf-orb--3 { --ball: 6rem; }

.skf-orb:hover .skf-orb__ball,
.skf-orb:focus-visible .skf-orb__ball {
    transform: scale(1.08);
}

.skf-orb[aria-expanded="true"] .skf-orb__ball {
    box-shadow:
        0 0 0 0.26rem #ffffff,
        0 0 0 0.55rem var(--orb, #3f6fe0),
        0 0.7rem 1.8rem rgb(15 45 100 / 40%),
        inset 0 0.2rem 0.5rem rgb(255 255 255 / 55%);
    transform: scale(1.06);
}

.skf-orb__name {
    color: #17335e;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 10px rgb(255 255 255 / 75%);
}

/* --- evidence panel ----------------------------------------------------- */
.skf-panel {
    padding-top: 1.1rem;
}

.skf-panel__inner {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.4rem 1.8rem 1.5rem;
    background: linear-gradient(135deg, rgb(255 255 255 / 68%), rgb(241 248 255 / 54%));
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 1.1rem;
    box-shadow: 0 1.4rem 3.6rem rgb(17 44 78 / 15%);
    backdrop-filter: blur(14px) saturate(1.2);
}

.skf-panel__kicker {
    margin: 0;
    color: #b07c15;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.skf-panel__inner h3 {
    margin: 0.3rem 0 0;
    font-family: var(--skf-serif);
    font-size: 1.4rem;
}

.skf-panel__summary {
    margin: 0.5rem 0 0;
    color: var(--skf-ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.skf-panel__inner ul {
    margin: 0.8rem 0 0;
    padding-left: 1.2rem;
    color: #33475f;
    font-size: 0.88rem;
    line-height: 1.55;
}

.skf-panel__inner li + li {
    margin-top: 0.55rem;
}

.skf-panel__inner li small {
    display: block;
    margin-top: 0.15rem;
    color: #1d55ba;
    font-weight: 700;
}

/* --- closing CTA --------------------------------------------------------- */
.skf-cta {
    padding: clamp(3rem, 9vh, 5rem) 1.5rem 0;
    text-align: center;
}

.skf-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.4rem;
    color: #ffffff;
    background: #0c2d64;
    border: 1px solid #274f8d;
    border-radius: 0.7rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.skf-cta__btn:hover,
.skf-cta__btn:focus-visible {
    background: #1d55ba;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 48rem) {
    .skf-open {
        min-height: 0;
    }

    .skf-cluster {
        gap: 1.1rem 1.4rem;
    }

    .skf-orb--1 { --ball: 3.4rem; }
    .skf-orb--2 { --ball: 4.1rem; }
    .skf-orb--3 { --ball: 4.9rem; }
}

/* Frosted pill under each orb name so labels hold up over rock. */
.skf-orb__name {
    padding: 0.28rem 0.65rem;
    background: rgb(252 254 255 / 62%);
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 999px;
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
}

/* =====================================================================
   LAYERED INK & SIGNAL GOLD (PS-THEME-002, 2026-07-16)
   body[data-theme="dark"]: off-white type on the black stage, gold
   accents; orb hues collapse to the gold family via --orb below.
   ===================================================================== */
body[data-theme="dark"] .skills-film {
    --skf-ink: #f2f4f8;
    --skf-ink-soft: #9aa5b8;
}

body[data-theme="dark"] .skf-open h1 span { color: #e3b83a; }
body[data-theme="dark"] .skf-orb { --orb: #d8a928; }

body[data-theme="dark"] .skf-orb[aria-expanded="true"] .skf-orb__ball {
    box-shadow:
        0 0 0 0.26rem #0e1d3a,
        0 0 0 0.55rem var(--orb, #d8a928),
        0 0.7rem 1.8rem rgb(0 0 0 / 55%),
        inset 0 0.2rem 0.5rem rgb(255 255 255 / 30%);
}

body[data-theme="dark"] .skf-orb__name {
    color: #f2f4f8;
    text-shadow: none;
}

body[data-theme="dark"] .skf-panel__inner li small { color: #e3b83a; }

body[data-theme="dark"] .skf-cta__btn {
    color: #0a1730;
    background: #d8a928;
    border-color: #d8a928;
}

body[data-theme="dark"] .skf-cta__btn:hover,
body[data-theme="dark"] .skf-cta__btn:focus-visible {
    background: #e3b83a;
}

body[data-theme="dark"] .skf-act__head { color: #9aa5b8; }