/*
 * "The Slinky Story" brand-story landing (/slinky).
 * Page-namespaced BEM (.slinky-*). Brand accents via var(--brand-*).
 * Faithful port of the legacy multi-band, painted-background layout — each
 * section's salvaged artwork is a graceful CSS background (custom property)
 * that degrades to a solid brand tone when the CDN object is missing/unseeded.
 */

.slinky-page {
    color: #212529;
}

/* -- Welcome ------------------------------------------------------------- */

/* Full-bleed painted header mirroring the legacy #slinky-story-welcome: a
   two-column band with NO gutters — wordmark logo LEFT, string-pack montage
   RIGHT — so the packs run flush to the viewport's right edge. The background
   image degrades to the brand green when the CDN object is missing/unseeded. */
.slinky-welcome {
    position: relative;
    overflow: hidden;
    background-color: #c1d25e;
    background-image: var(--slinky-welcome-bg, none);
    background-size: cover;
    background-position: center;
}

.slinky-welcome__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
}

/* LEFT: the full Slinky wordmark (its "WHAT IS SLINKY?" bottom copy included).
   Centered and sized by WIDTH only with height:auto — there is NO fixed-height
   or overflow container to clip it, so the whole logo (tagline and all) shows.
   The generous top padding drops it toward the band's lower half, echoing the
   legacy layout. */
.slinky-welcome__logo {
    padding: 120px 1rem 1.5rem;
    text-align: center;
}

.slinky-welcome__logo img {
    display: block;
    width: 65%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
}

/* RIGHT: the string-pack montage, vertically full-bleed and flush to the RIGHT
   edge of the band. width:100% of the right half + height:auto renders the
   WHOLE image at its natural aspect (no cover-crop, nothing chopped); the
   image's own height sets the band height, so the packs span it top to bottom
   with the logo bottom-aligned beside them. */
.slinky-welcome__packs {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.slinky-welcome__packs picture {
    display: block;
    width: 100%;
}

.slinky-welcome__packs img {
    display: block;
    width: 100%;
    height: auto;
}

/* -- History film -------------------------------------------------------- */

.slinky-film {
    background-color: #98499b;
    background-image: var(--slinky-film-bg, none);
    background-size: cover;
}

.slinky-film .container {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* Legacy black film borders: a thin band on top, a taller band below,
   framing the embed like a strip of film. */
.slinky-film__border {
    width: 100%;
    background-color: #1b1b1b;
}

.slinky-film__border--top {
    height: 15px;
}

.slinky-film__border--bottom {
    height: 55px;
}

.slinky-film__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 960px;
    margin: 0 auto;
    border-left: 10px solid #1b1b1b;
    border-right: 10px solid #1b1b1b;
    background: #000;
    overflow: hidden;
}

.slinky-film__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -- Split image/copy bands (Famously + Nickel Wound) -------------------- */

.slinky-famously {
    padding: 3.5rem 0;
    color: #fff;
    /* Deeper pink than the pack tint on purpose. White copy on #d46598 was
       3.43:1, and the photo behind the copy is lighter still where the band's
       faces sit (WAVE, Jesse's ADA pass 2026-09-21). Multiplying the photo
       with #b04f7f darkens every pixel to at least that tone, so white body
       text clears 4.92:1 on the fallback and better over the image. */
    background-color: #b04f7f;
    background-image: var(--slinky-famously-bg, none);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}

.slinky-strings {
    padding: 3.5rem 0;
    color: #fff;
    background-color: #98499b;
    background-image: var(--slinky-strings-bg, none);
    background-size: cover;
    background-position: center;
}

.slinky-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.slinky-split__media img {
    display: block;
    width: 85%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
}

.slinky-famously__heading,
.slinky-strings__heading {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.slinky-famously__heading span {
    font-size: 1.25rem;
    font-weight: 400;
    vertical-align: super;
}

.slinky-famously__body {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.7;
}

.slinky-strings__subheading {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    text-transform: none;
}

.slinky-strings__cta {
    display: inline-block;
    margin-top: 1.75rem;
}

/* -- Tone meters --------------------------------------------------------- */

.slinky-meters {
    margin: 0;
    max-width: 24rem;
}

.slinky-meters__label {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.slinky-meters__track {
    margin: 0 0 1rem;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.slinky-meters__fill {
    display: block;
    height: 100%;
    background: #fff;
}

/* -- History timeline (accessible horizontal slider) --------------------- */

.slinky-history {
    padding: 3rem 0 0;
    color: #fff;
    background-color: #87cba4;
    background-image: var(--slinky-history-bg, none);
    background-size: cover;
    background-position: center;
}

.slinky-history .section-title {
    /* Dark ink, not white: white on the mint (#87cba4) is 1.89:1 and no shade
       of mint gets white to 4.5:1 (WAVE, 2026-09-21). Ink is 9.2:1. */
    color: #1a1a1a;
}

/* Stage = the color-face art flanking the slider on wide viewports. */
.slinky-history__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.slinky-history__face {
    display: none;
    width: 20%;
    max-width: 260px;
    height: auto;
    align-self: flex-start;
}

.slinky-history__footer {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
}

.slinky-slider {
    position: relative;
    /* minmax-style width safety: flex-basis auto + min-width:0 lets this shrink
       below the Swiper's intrinsic content width so the carousel can never blow
       the column (or the page) out horizontally if JS is slow or fails. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 2rem 0 3rem;
}

/* Swiper viewport. overflow:hidden + min-width:0 bound it horizontally; the
   slide media carries a max-height so it can't balloon vertically either. */
.slinky-history__swiper {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0;
    overflow: hidden;
}

.slinky-history__slide {
    height: auto;
    display: flex;
}

.slinky-timeline__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.slinky-timeline__media {
    /* The history slides are PORTRAIT — use a portrait frame + contain so the
       whole image shows (nothing chopped), letterboxed on the green fill if an
       image's ratio differs. cover/landscape here previously cropped them. */
    aspect-ratio: 3 / 4;
    max-height: 460px;
    background-color: #6bbf94;
    background-image: var(--slide-image, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.slinky-timeline__copy {
    padding: 1.25rem 1.5rem 1.5rem;
}

.slinky-timeline__year {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--brand-primary, #ff10a4);
}

.slinky-timeline__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #333;
}

/* Progressive enhancement + width/height safety: until the JS marks the slider
   `.is-enhanced` (a Swiper actually driving the slides), show ONLY the first
   slide. Before init the flex swiper-wrapper would otherwise lay all 14 cards
   side-by-side; with this (plus the media max-height cap) the timeline can never
   balloon regardless of JS state. */
.slinky-slider:not(.is-enhanced) .slinky-history__swiper .swiper-slide:not(:first-child) {
    display: none;
}

/* Prev / next controls (progressive enhancement — revealed once Swiper is
   driving the slides; there is no native scrollbar). */
.slinky-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.slinky-slider__nav--prev {
    left: 0;
}

.slinky-slider__nav--next {
    right: 0;
}

.slinky-slider__nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.slinky-slider__nav:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.slinky-slider__nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

.slinky-slider.is-enhanced .slinky-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1200px) {
    .slinky-history__face {
        display: block;
    }

    .slinky-history__footer {
        display: none;
    }
}

/* -- Hear Them In Action ------------------------------------------------- */

.slinky-action {
    padding: 3.5rem 0 4.5rem;
    color: #fff;
    background-color: #46a3d9;
    background-image: var(--slinky-action-bg, none);
    background-size: cover;
    background-position: center;
}

.slinky-new__heading {
    color: #fff; /* 5.56:1 on the purple */
}

.slinky-action__heading {
    /* Dark ink: white on the blue (#46a3d9) is 2.79:1 (WAVE, 2026-09-21); ink is 6.2:1. */
    color: #1a1a1a;
}

.slinky-action__grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.slinky-action__item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.slinky-action__item iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -- Pack montage -------------------------------------------------------- */

.slinky-packs {
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.slinky-packs__item img,
.slinky-new__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* -- Welcome To The Family ----------------------------------------------- */

.slinky-new {
    color: #fff;
    background-color: #98499b;
    background-image: var(--slinky-new-bg, none);
    background-size: cover;
    background-position: center;
}

.slinky-new__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.slinky-new__face {
    display: none;
    width: 22%;
    max-width: 260px;
    height: auto;
    align-self: flex-start;
}

.slinky-new__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3.5rem 0;
}

.slinky-new__grid {
    margin: 2rem auto 0;
    padding: 0;
    list-style: none;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .slinky-new__face--left {
        display: block;
    }
}

@media (min-width: 1200px) {
    .slinky-new__face--right {
        display: block;
    }
}

/* -- Artists ------------------------------------------------------------- */

.slinky-artists {
    padding: 3.5rem 0 5rem;
    color: #212529;
    background-color: #f4f4ee;
}

.slinky-artists .section-title {
    color: #212529;
}

.slinky-artists__grid {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.slinky-artists__card {
    display: flex;
    flex-direction: column;
}

/* Clean photo on top — no tint, no scrim, no text over it. */
.slinky-artists__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    background-color: #b93f7c;
    background-image: var(--artist-image, none);
    background-size: cover;
    background-position: center top;
}

/* Keyboard-focus affordance: the photo is focusable (tabindex="0") so keyboard
   users can trigger the same pack crossfade sighted users get on hover. */
.slinky-artists__photo:focus-visible {
    outline: 3px solid var(--gauge-color, #ff10a4);
    outline-offset: 3px;
}

/* Legacy gauge swatch bar — now a small accent across the top of the photo,
   the surviving cue for which Slinky gauge each artist plays. Text no longer
   sits on the photo, so no contrast scrim is needed. Sits ABOVE the pack layer
   (z-index) so the gauge cue stays visible through the crossfade. */
.slinky-artists__photo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 3;
    background: var(--gauge-color, #ff10a4);
}

/* Pack crossfade layer: the Slinky string-pack this artist plays, absolutely
   positioned over the photo on an opaque card ground and hidden by default.
   Fades in on hover AND on keyboard focus (:focus-within, since the photo is
   focusable), swapping only the photo area — the name + strings caption below
   is untouched. Decorative-on-hover (aria-hidden in markup). */
.slinky-artists__pack {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 12%;
    object-fit: contain;
    /* Fade overlay sits on the pack's gauge color (same swatch as the top
       accent bar), not white — so the crossfade reveals a colored tile. */
    background: var(--gauge-color, #f4f4ee);
    opacity: 0;
    /* 1s ease applies symmetrically, so it fades IN on hover/focus and OUT
       on leave over the same 1000ms. */
    transition: opacity 1s ease;
    pointer-events: none;
}

.slinky-artists__photo:hover .slinky-artists__pack,
.slinky-artists__photo:focus-within .slinky-artists__pack {
    opacity: 1;
}

/* Honor reduced-motion: still swap to the pack, but instantly (no fade). */
@media (prefers-reduced-motion: reduce) {
    .slinky-artists__pack {
        transition: none;
    }
}

.slinky-artists__card--power { --gauge-color: #994a9c; }
.slinky-artists__card--extra { --gauge-color: #00a7e1; }
.slinky-artists__card--regular { --gauge-color: #bdd747; }
.slinky-artists__card--sthb { --gauge-color: #ef4123; }
.slinky-artists__card--super { --gauge-color: #ee3d96; }
.slinky-artists__card--hybrid { --gauge-color: #faa74b; }
.slinky-artists__card--noteven { --gauge-color: #00a188; }
.slinky-artists__card--beefy { --gauge-color: #fff200; }

/* Name + gauge/strings label BELOW the photo, centered, as dark text on the
   light section — clears AA with a wide margin (dark on #f4f4ee). */
.slinky-artists__info {
    padding: 0.85rem 0.75rem 0;
    text-align: center;
}

.slinky-artists__name {
    margin: 0 0 0.3rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #212529;
}

.slinky-artists__strings {
    margin: 0;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6a6a6a;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .slinky-famously__heading,
    .slinky-strings__heading {
        font-size: 2rem;
    }

    .slinky-packs {
        grid-template-columns: repeat(4, 1fr);
    }

    .slinky-artists__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    /* Stack on small screens: full logo on top, mobile pack variant below —
       each full width, neither cropped, and no forced full-bleed that would
       chop the packs on a narrow viewport. */
    .slinky-welcome__grid {
        grid-template-columns: 1fr;
    }

    .slinky-welcome__logo {
        padding: 2.5rem 1rem 1rem;
    }

    .slinky-welcome__packs {
        justify-content: center;
    }

    .slinky-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .slinky-famously__heading,
    .slinky-strings__heading {
        font-size: 1.75rem;
    }

    .slinky-action__grid {
        grid-template-columns: 1fr;
    }

    .slinky-packs {
        grid-template-columns: repeat(3, 1fr);
    }

    .slinky-new__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .slinky-artists__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}