/* ============================================================================
   kd-shop.css · Closed-curtain stage with backlit glow (#ch-shop)
   ----------------------------------------------------------------------------
   Two pleated black-velvet curtain panels meet at exactly 50% — the stage is
   fully closed. Everything static, no animation. Layers:

     section::before  (z 0)  — backstage radial glow (warm tint, soft)
     curtain          (z 5)  — pleat shading + lighting + warm-charcoal peaks
     curtain::before  (z 5)  — top "gather" band where fabric bunches at rod
     section::after   (z 7)  — footlights washing up across the curtain bottom
     stage content    (z 10) — wordmark + byline + lede

   Section forces its own dark colors (independent of the active site theme)
   so the marquee always reads as a lit theatre against the closed-curtain
   backdrop. All warm hues use plain rgba() — Safari 15.x compatible.
   ============================================================================ */

.kd-chapter--shop {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    padding-block: clamp(20px, 2.5vw, 36px);
    border-bottom: 0;
    isolation: isolate;
}

/* ===== Backstage glow — soft warm tint at z:0 behind the curtains ===== */
.kd-chapter--shop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%,
        rgba(255, 220, 160, 0.32) 0%,
        rgba(255, 200, 130, 0.18) 22%,
        rgba(255, 180, 100, 0.08) 48%,
        transparent 78%);
}

/* ===== Footlights — barely-there warm wash from the bottom edge ===== */
.kd-chapter--shop::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(14px, 1.8vw, 24px);
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(0deg,
        rgba(255, 200, 130, 0.14) 0%,
        rgba(255, 200, 130, 0.05) 40%,
        transparent 100%);
}

/* ===== Curtains: pleated black-velvet panels with travelling glimmer ===== */
.kd-shop__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 5;
    pointer-events: none;
    background:
        /* Wider undulations (96px) layered on top to break uniformity */
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.14) 0px,
            transparent 48px,
            rgba(0, 0, 0, 0.14) 96px),
        /* Top-to-bottom stage lighting: subtle highlight at top, soft fade */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 14%,
            transparent 82%,
            rgba(0, 0, 0, 0.55) 100%),
        /* Main pleats: 56px cycle, low-contrast charcoal crests */
        repeating-linear-gradient(90deg,
            rgb(0, 0, 0)      0px,
            rgb(14, 12, 10)   14px,
            rgb(28, 24, 20)   28px,
            rgb(14, 12, 10)   42px,
            rgb(0, 0, 0)      56px);
}

/* Top gather — darker band where the fabric bunches against the rod. */
.kd-shop__curtain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(16px, 2vw, 32px);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.35) 55%,
        transparent 100%);
    pointer-events: none;
}

.kd-shop__curtain--left {
    left: 0;
    box-shadow:
        /* seam glow leaking through the inner edge — softer */
        inset -3px 0 16px rgba(255, 220, 160, 0.28),
        /* gentle bottom shadow */
        inset 0 -18px 36px rgba(0, 0, 0, 0.40);
}
.kd-shop__curtain--right {
    right: 0;
    box-shadow:
        inset 3px 0 16px rgba(255, 220, 160, 0.28),
        inset 0 -18px 36px rgba(0, 0, 0, 0.40);
}

/* ===== Stage content ===== */
.kd-shop__stage    { position: relative; z-index: 10; }
.kd-shop__center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding-inline: clamp(0px, 4vw, 32px);
}

/* Military-stencil wordmark — Allerta Stencil, uppercase, wide tracking.
   Reads like a hangar stencil or spec-sheet header. JetBrains Mono is the
   fallback while the woff2 loads (or if it fails). */
.kd-shop__wordmark {
    display: block;
    font-family: 'Allerta Stencil', var(--kd-font-mono);
    font-size: clamp(20px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.0;
    color: rgb(255, 252, 245);
    text-decoration: none;
    margin: 0 0 var(--kd-s-2);
    text-shadow:
        0 0 12px rgba(255, 220, 160, 0.18),
        0 0 24px rgba(255, 200, 130, 0.08);
    transition: text-shadow var(--kd-dur) var(--kd-ease);
}
.kd-shop__wordmark:hover,
.kd-shop__wordmark:focus-visible {
    text-shadow:
        0 0 18px rgba(255, 230, 180, 0.30),
        0 0 36px rgba(255, 200, 130, 0.16);
    outline: none;
}
/* Offering tagline — same stencil font, smaller, slightly muted */
.kd-shop__tagline {
    display: block;
    font-family: 'Allerta Stencil', var(--kd-font-mono);
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.0;
    color: rgba(255, 255, 255, 0.78);
    margin-top: var(--kd-s-2);
}

/* Attribution under the tagline — same stencil font, smaller, dimmer */
.kd-shop__byline {
    display: block;
    font-family: 'Allerta Stencil', var(--kd-font-mono);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 400;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    line-height: 1.0;
    color: rgba(255, 255, 255, 0.55);
    margin-top: var(--kd-s-2);
}
/* Warm divider beneath the byline */
.kd-shop__byline::after {
    content: '';
    display: block;
    width: clamp(50px, 14%, 110px);
    height: 1px;
    margin: var(--kd-s-2) auto 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 220, 160, 0.22) 50%,
        transparent 100%);
}

.kd-shop__lede {
    font-family: 'Allerta Stencil', var(--kd-font-mono);
    font-size: clamp(12px, 1.4vw, 15px);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    max-width: 50ch;
    margin: var(--kd-s-3) auto 0;
    text-wrap: pretty;
}

/* ===== Dedicated Peak Network page hero — scaled up from the teaser =====
   On /peaknetwork.html the body carries .kd-pn-page; the hero reuses every
   kd-shop visual (curtains, glow, footlights, byline, divider) but the
   typography and section padding step up, and the section fills the
   viewport so the marquee acts as a fullscreen splash. */
.kd-pn-page .kd-chapter--shop {
    /* svh is the dynamic small-viewport unit — accounts for mobile browser
       toolbars so the hero doesn't get cropped by Safari's URL bar. */
    min-height: 100svh;
    padding-block: clamp(64px, 8vw, 120px);
    display: flex;
    align-items: center;
}
.kd-pn-page .kd-shop__stage    { width: 100%; }
.kd-pn-page .kd-shop__wordmark { font-size: clamp(36px, 6vw, 80px); }
.kd-pn-page .kd-shop__tagline  { font-size: clamp(13px, 1.6vw, 18px); }
.kd-pn-page .kd-shop__byline   { font-size: clamp(11px, 1.2vw, 14px); }
.kd-pn-page .kd-shop__lede     { font-size: clamp(13px, 1.5vw, 16px); }

/* Floating back-link — replaces the site chrome on the dedicated page.
   Frosted dark pill so it stays legible whether the user is on the dark
   curtain hero or scrolled down to the light about/categories sections. */
.kd-pn-back {
    position: fixed;
    top: clamp(12px, 2vw, 24px);
    left: clamp(12px, 2vw, 24px);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--kd-font-mono);
    font-size: 12px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    transition:
        color var(--kd-dur) var(--kd-ease),
        background var(--kd-dur) var(--kd-ease);
}
.kd-pn-back:hover,
.kd-pn-back:focus-visible {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    outline: none;
}

/* ===== Mobile ===== */
@media (max-width: 720px) {
    .kd-shop__wordmark { letter-spacing: 0.025em; }
    .kd-chapter--shop::after { height: clamp(36px, 8vw, 64px); }
}