/* ============================================================================
   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;
}

/* When site_peaknetwork/_notice_bar.html renders above this page's back-pill
   (a tenant-wide SiteNotice is enabled -- see homepage.html), nudge the pill
   down by roughly the strip's height. position:fixed ignores document flow,
   so without this the pill keeps its usual top offset regardless of what now
   precedes it in the DOM, and sits directly on top of the notice text. The
   sibling selector only matches when the notice bar actually rendered, so a
   tenant with no notice gets the original offset unchanged. --kd-s-10 clears
   a realistic single-line notice with room to spare; a very long notice that
   wraps to several lines on a narrow phone can still graze the pill, which
   is an acceptable edge case for a short banner sentence. */
.kd-notice-bar ~ .kd-pn-back {
    top: calc(clamp(12px, 2vw, 24px) + var(--kd-s-10));
}

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