/*
 * Earthwood acoustic strings landing (/earthwood).
 * Rebuilt to match the live production page: cream intro band, synced Swiper
 * history carousel, alloy tone cards, half-gauge grid, and the artist roster
 * (clean photo on top with a small alloy accent bar, name + alloy label as dark
 * text below on the cream — no over-image text, so no ADA scrim needed).
 * Page-namespaced BEM (.earthwood-*). Product-card + grid styles are inherited
 * from catalog.css (loaded first). Brand pink comes from var(--brand-*).
 */

.earthwood-page {
    background-color: #f5f6e6;
    color: #505050;
    padding-bottom: 25px;
}

.earthwood-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #505050;
}

/* Shared condensed heading treatment (Gotham Cond stand-in). */
.earthwood-welcome__heading,
.earthwood-difference__heading,
.earthwood-action__heading,
.earthwood-new__heading {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
    margin: 0 0 1.25rem;
}

/* -- Welcome / intro band ------------------------------------------------ */

.earthwood-welcome {
    padding: 3.5rem 0 2.5rem;
}

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

.earthwood-welcome__row--strings {
    margin-top: 1rem;
}

.earthwood-welcome__logo img,
.earthwood-welcome__art img,
.earthwood-welcome__packs img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.earthwood-welcome__logo img {
    max-width: 460px;
    margin: 0 auto;
}

.earthwood-welcome__packs img {
    max-width: 80%;
    margin: 0 auto;
}

.earthwood-welcome__heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #a07a3a;
}

.earthwood-welcome__body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #505050;
    margin: 0;
}

/* -- History (synced Swiper carousel + year copy) ------------------------ */

.earthwood-history {
    padding: 2rem 0 3rem;
}

.earthwood-history__camp {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto 1.5rem;
}

.earthwood-history__grid {
    display: grid;
    /* minmax(0, 1fr) — NOT 1fr — so the slider track can shrink below the
       Swiper's intrinsic content width. With plain 1fr the track's implicit
       min-width:auto lets the flex slide-wrapper blow the column (and the
       page) out to the full side-by-side width of every slide. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.earthwood-history__copy {
    order: 1;
}

.earthwood-history__slider {
    order: 2;
    position: relative;
    min-width: 0;
}

.earthwood-history__year-num {
    margin: 0 0 1rem;
    line-height: 1;
}

/* Outlined year numeral as an inline SVG <text> outline. `-webkit-text-stroke`
   was replaced because it uses miter line-joins with no CSS control
   (no stroke-linejoin/miterlimit), so sharp glyph corners on digits like 2/6
   threw miter spikes that read as blobs. SVG strokes DO expose the join, so
   `stroke-linejoin: round` (backed by round caps + paint-order:stroke) gives a
   clean hollow outline no glyph corner can spike.

   Font: the numerals use an explicit Helvetica/Arial sans-serif stack (NOT
   `inherit`) because the display heading family has self-intersecting glyph
   contours — stroking doubles the line at those overlaps, throwing blobs that
   no line-join or stroke-width can fix. Helvetica/Arial digits are simple
   single-contour glyphs that stroke cleanly. Weight 700 (not 900/black) keeps
   the counters open so the hollow outline reads crisp.

   Responsive: the <svg> carries a viewBox and scales as a unit via a clamped
   height (matching the old font-size clamp) with width:auto deriving from the
   viewBox aspect — so it shrinks cleanly on mobile. `vector-effect:
   non-scaling-stroke` keeps the outline a constant ~2.25px at every size (as the
   old fixed-px text-stroke did) instead of thinning as the glyph scales down. */
.earthwood-history__year-svg {
    display: block;
    height: clamp(3.25rem, 9vw, 104px);
    width: auto;
    overflow: visible;
}

.earthwood-history__year-svg text {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 64px;
    letter-spacing: 1px;
    fill: none;
    stroke: #555;
    stroke-width: 7px;
    stroke-linejoin: round;
    stroke-linecap: round;
    paint-order: stroke;
    vector-effect: non-scaling-stroke;
}

.earthwood-history__year-body {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #505050;
    margin: 0;
}

.earthwood-history__swiper {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f5f6e6;
}

.earthwood-history__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.earthwood-history__slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 10px;
}

/* Safety / progressive enhancement: until the JS marks the slider
   `.is-enhanced` (Swiper actually driving it), show ONLY the first slide.
   Without this, an un-initialized Swiper leaves all nine full-size slides in
   the flex wrapper and the section balloons the page height. Combined with the
   img max-height cap above, the timeline can never blow up regardless of JS. */
.earthwood-history__slider:not(.is-enhanced) .earthwood-history__swiper .swiper-slide:not(:first-child) {
    display: none;
}

/* Circular chevron nav — revealed only once the JS enhances the slider (a
   Swiper is actually driving the slides). */
.earthwood-history__nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #a07a3a;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #7c422a;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.earthwood-history__nav:hover,
.earthwood-history__nav:focus-visible {
    background: #a07a3a;
    color: #fff;
}

/* Optical centering: the chevron glyph (‹ ›) sits slightly low in its em box,
   so nudge it up a couple px inside the flex-centered circle. */
.earthwood-history__nav span {
    display: block;
    transform: translateY(-2px);
}

.earthwood-history__slider.is-enhanced .earthwood-history__nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.earthwood-history__nav--prev {
    left: -12px;
}

.earthwood-history__nav--next {
    right: -12px;
}

/* -- Split image/copy sections (Difference / In Action) ------------------ */

.earthwood-difference {
    padding: 3rem 0;
}

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

.earthwood-split__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.earthwood-difference__heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    /* #e0b04b measured 1.83:1 on the page's #f5f6e6 — below even the 3:1
       large-text floor (WAVE, 2026-09-21). Same gold family, darkened to 4.63:1. */
    color: #8c6914;
}

.earthwood-action__heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #7c422a;
}

/* -- Tone cards ---------------------------------------------------------- */

.earthwood-tone {
    padding: 3rem 0;
}

.earthwood-tone__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.earthwood-tone__card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.earthwood-tone__image img {
    max-width: 240px;
    height: auto;
    /* Same treatment as the shop grid: multiply the pack shot onto the cream so
       any baked-in white pack-shot background blends into #f5f6e6 rather than
       showing a white box. */
    mix-blend-mode: multiply;
}

.earthwood-tone__heading {
    margin: 1rem 0 0.5rem;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #707070;
}

.earthwood-tone__body {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    color: #505050;
}

.earthwood-meters {
    margin: 0 0 1.75rem;
    width: 100%;
    max-width: 22rem;
    text-align: left;
}

.earthwood-meters__label {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #030303;
}

.earthwood-meters__track {
    margin: 0 0 0.85rem;
    height: 15px;
    border: 1px solid #030303;
    background: transparent;
    overflow: hidden;
}

.earthwood-meters__fill {
    display: block;
    height: 100%;
    background: #a07a3a;
}

.earthwood-tone__cta {
    margin-top: auto;
}

/* -- Product showcase (flagship curated grid) ---------------------------- */

.earthwood-products {
    padding: 1rem 0 3rem;
}

.earthwood-products__grid {
    margin-top: 2rem;
}

/* Earthwood-scoped only: blend the shared product-card image box into the
   section's cream instead of the catalog's near-white (#f8f8f8) box. The card
   img keeps its `mix-blend-mode: multiply`, so a transparent box lets the
   product PNGs multiply straight onto the cream page — white product-shot
   backgrounds melt into #f5f6e6 with no clashing white square. The shared
   partial + base catalog card stay untouched (white box is intentional
   elsewhere). */
.earthwood-products .catalog-card__image {
    background: transparent;
}

/* -- Videos -------------------------------------------------------------- */

.earthwood-videos {
    padding: 2rem 0 3rem;
}

.earthwood-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.earthwood-videos__item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.earthwood-videos__item iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Root cause of the "audio plays, picture is a black box" symptom: the
       container's border-radius + overflow:hidden clips the cross-origin
       YouTube iframe into a rounded layer, and on affected GPUs the video
       texture never composites into that clipped layer (black), while audio
       keeps playing. Promote the iframe to its own backing layer and make it
       explicitly the top-most element in the box so it always paints. It
       carries its own radius so the rounded corners survive the promotion. */
    z-index: 1;
    border-radius: inherit;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* -- "Now in Half Gauges" grid ------------------------------------------- */

.earthwood-new {
    padding: 2rem 0 3rem;
}

.earthwood-new__heading {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: #7c422a;
    text-align: center;
    margin-bottom: 2rem;
}

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

.earthwood-new__link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #505050;
}

.earthwood-new__image {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 0.75rem;
    transition: transform 0.2s ease;
}

.earthwood-new__link:hover .earthwood-new__image,
.earthwood-new__link:focus-visible .earthwood-new__image {
    transform: scale(1.05);
}

.earthwood-new__caption {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #7c422a;
}

/* -- Artists (clean photo + name/alloy as dark text below) --------------- */

.earthwood-artists {
    padding: 3rem 0 4rem;
}

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

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

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

/* Small alloy accent bar across the top of the photo — the only surviving
   80/20-vs-phosphor cue now that the full-photo tint is gone. */
.earthwood-artists__photo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 1;
}

.earthwood-artists__card--eighty .earthwood-artists__photo::before {
    background: #c6af3f;
}

.earthwood-artists__card--phosphor .earthwood-artists__photo::before {
    background: #cc7143;
}

/* Name + alloy label BELOW the photo, centered, as dark text on the cream. */
.earthwood-artists__info {
    padding: 0.85rem 0.75rem 0;
    text-align: center;
}

.earthwood-artists__name {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #505050;
}

.earthwood-artists__alloy {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Alloy label tinted its alloy color as a second accent. The original tints
   (#a07a3a 80/20 bronze, #b25a34 phosphor) measured 3.5:1 and 4.3:1 on the
   page's #f5f6e6 — the comment that said "both clear AA on cream" was wrong
   (WAVE, 2026-09-21). These are the same hues, darkened to clear 4.5:1. */
.earthwood-artists__card--eighty .earthwood-artists__alloy {
    color: #7d5d29; /* 5.54:1 on #f5f6e6 */
}

.earthwood-artists__card--phosphor .earthwood-artists__alloy {
    color: #8f4726; /* 6.20:1 on #f5f6e6 */
}

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

@media (max-width: 991.98px) {
    .earthwood-artists__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 767.98px) {
    .earthwood-welcome__row,
    .earthwood-history__grid,
    .earthwood-split,
    .earthwood-tone__grid,
    .earthwood-videos__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Image above copy on mobile for the split bands. */
    .earthwood-split__media {
        order: 0;
    }

    .earthwood-history__nav--prev {
        left: 4px;
    }

    .earthwood-history__nav--next {
        right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .earthwood-new__image {
        transition: none;
    }
}